From 84b374c3f3921872956c5c846a7ed930f6474974 Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Thu, 6 Feb 2025 00:31:45 +0100 Subject: [PATCH 1/5] refactor(frontend): implement GenericFormDialog component --- .../dialogs/GenericFormDialog.tsx | 43 +++++++++++++++++++ frontend/src/app-components/dialogs/index.ts | 1 + 2 files changed, 44 insertions(+) create mode 100644 frontend/src/app-components/dialogs/GenericFormDialog.tsx diff --git a/frontend/src/app-components/dialogs/GenericFormDialog.tsx b/frontend/src/app-components/dialogs/GenericFormDialog.tsx new file mode 100644 index 00000000..3f4772e0 --- /dev/null +++ b/frontend/src/app-components/dialogs/GenericFormDialog.tsx @@ -0,0 +1,43 @@ +/* + * Copyright © 2025 Hexastack. All rights reserved. + * + * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: + * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. + * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). + */ + +import React from "react"; + +import { FormDialog } from "@/app-components/dialogs"; +import { useTranslate } from "@/hooks/useTranslate"; +import { TTranslationKeys } from "@/i18n/i18n.types"; +import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; + +type GenericFormDialogProps = ComponentFormDialogProps & { + Form: React.ElementType; + addText?: TTranslationKeys; + editText?: TTranslationKeys; +}; + +export const GenericFormDialog = ({ + Form, + payload, + ...rest +}: GenericFormDialogProps) => { + const { t } = useTranslate(); + const translationKey = payload ? rest.editText : rest.addText; + + return ( +
{ + rest.onClose(true); + }} + WrapperProps={{ + title: translationKey && t(translationKey), + ...rest, + }} + /> + ); +}; diff --git a/frontend/src/app-components/dialogs/index.ts b/frontend/src/app-components/dialogs/index.ts index f56c6c22..b9b7d5ac 100644 --- a/frontend/src/app-components/dialogs/index.ts +++ b/frontend/src/app-components/dialogs/index.ts @@ -11,5 +11,6 @@ export * from "./confirm/ConfirmDialogBody"; export * from "./DeleteDialog"; export * from "./DialogTitle"; export * from "./FormDialog"; +export * from "./GenericFormDialog"; export * from "./layouts/ContentContainer"; export * from "./layouts/ContentItem"; From 06d40228cb2df1bbaa682ee273de6b83cbdb87ae Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Thu, 6 Feb 2025 00:32:22 +0100 Subject: [PATCH 2/5] refactor(frontend): update category formDialog --- .../categories/CategoryFormDialog.tsx | 35 ++++++------------- 1 file changed, 11 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/categories/CategoryFormDialog.tsx b/frontend/src/components/categories/CategoryFormDialog.tsx index 74112ea3..e290019b 100644 --- a/frontend/src/components/categories/CategoryFormDialog.tsx +++ b/frontend/src/components/categories/CategoryFormDialog.tsx @@ -6,32 +6,19 @@ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). */ -import { FC } from "react"; - -import { FormDialog } from "@/app-components/dialogs"; -import { useTranslate } from "@/hooks/useTranslate"; +import { GenericFormDialog } from "@/app-components/dialogs"; import { ICategory } from "@/types/category.types"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; import { CategoryForm } from "./CategoryForm"; -export const CategoryFormDialog: FC> = ({ - payload, - ...rest -}) => { - const { t } = useTranslate(); - - return ( - { - rest.onClose(true); - }} - Wrapper={FormDialog} - WrapperProps={{ - title: payload ? t("title.edit_category") : t("title.new_category"), - ...rest, - }} - /> - ); -}; +export const CategoryFormDialog = ( + props: ComponentFormDialogProps, +) => ( + + Form={CategoryForm} + addText="title.new_category" + editText="title.edit_category" + {...props} + /> +); From c55dbd401f025ec99ec64ecff98029add93bd987 Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Thu, 6 Feb 2025 00:32:36 +0100 Subject: [PATCH 3/5] refactor(frontend): update contextVar formDialog --- .../context-vars/ContextVarFormDialog.tsx | 36 ++++++------------- 1 file changed, 11 insertions(+), 25 deletions(-) diff --git a/frontend/src/components/context-vars/ContextVarFormDialog.tsx b/frontend/src/components/context-vars/ContextVarFormDialog.tsx index d33d71e1..6707dc7b 100644 --- a/frontend/src/components/context-vars/ContextVarFormDialog.tsx +++ b/frontend/src/components/context-vars/ContextVarFormDialog.tsx @@ -6,33 +6,19 @@ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). */ -import { FC } from "react"; - -import { FormDialog } from "@/app-components/dialogs"; -import { useTranslate } from "@/hooks/useTranslate"; +import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; import { IContextVar } from "@/types/context-var.types"; import { ContextVarForm } from "./ContextVarForm"; -export const ContextVarFormDialog: FC< - ComponentFormDialogProps -> = ({ payload, ...rest }) => { - const { t } = useTranslate(); - - return ( - { - rest.onClose(true); - }} - Wrapper={FormDialog} - WrapperProps={{ - title: payload - ? t("title.edit_context_var") - : t("title.new_context_var"), - ...rest, - }} - /> - ); -}; +export const ContextVarFormDialog = ( + props: ComponentFormDialogProps, +) => ( + + Form={ContextVarForm} + addText="title.new_context_var" + editText="title.edit_context_var" + {...props} + /> +); From 76b5310cd5c703cf0d06accf50159e3ba0e252b5 Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Thu, 6 Feb 2025 00:32:50 +0100 Subject: [PATCH 4/5] refactor(frontend): update label formDialog --- .../src/components/labels/LabelFormDialog.tsx | 35 ++++++------------- 1 file changed, 11 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/labels/LabelFormDialog.tsx b/frontend/src/components/labels/LabelFormDialog.tsx index 16f692b7..8b183e3a 100644 --- a/frontend/src/components/labels/LabelFormDialog.tsx +++ b/frontend/src/components/labels/LabelFormDialog.tsx @@ -6,32 +6,19 @@ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). */ -import { FC } from "react"; - -import { FormDialog } from "@/app-components/dialogs"; -import { useTranslate } from "@/hooks/useTranslate"; +import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; import { ILabel } from "@/types/label.types"; import { LabelForm } from "./LabelForm"; -export const LabelFormDialog: FC> = ({ - payload, - ...rest -}) => { - const { t } = useTranslate(); - - return ( - { - rest.onClose(true); - }} - Wrapper={FormDialog} - WrapperProps={{ - title: payload ? t("title.edit_label") : t("title.new_label"), - ...rest, - }} - /> - ); -}; +export const LabelFormDialog = ( + props: ComponentFormDialogProps, +) => ( + + Form={LabelForm} + addText="title.new_label" + editText="title.edit_label" + {...props} + /> +); From 28a6fccaa74bba4c166f23722935a8c28ceb107b Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Thu, 6 Feb 2025 00:32:59 +0100 Subject: [PATCH 5/5] refactor(frontend): update translation formDialog --- .../translations/TranslationFormDialog.tsx | 34 ++++++------------- 1 file changed, 11 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/translations/TranslationFormDialog.tsx b/frontend/src/components/translations/TranslationFormDialog.tsx index aa1c75ef..86143203 100644 --- a/frontend/src/components/translations/TranslationFormDialog.tsx +++ b/frontend/src/components/translations/TranslationFormDialog.tsx @@ -6,31 +6,19 @@ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). */ -import { FC } from "react"; - -import { FormDialog } from "@/app-components/dialogs"; -import { useTranslate } from "@/hooks/useTranslate"; +import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; import { ITranslation } from "@/types/translation.types"; import { TranslationForm } from "./TranslationForm"; -export const TranslationFormDialog: FC< - ComponentFormDialogProps -> = ({ payload, ...rest }) => { - const { t } = useTranslate(); - - return ( - { - rest.onClose(true); - }} - Wrapper={FormDialog} - WrapperProps={{ - title: t("title.update_translation"), - ...rest, - }} - /> - ); -}; +export const TranslationFormDialog = ( + props: ComponentFormDialogProps, +) => ( + + Form={TranslationForm} + addText="title.new_label" + editText="title.edit_label" + {...props} + /> +);