From f27034ec5864e4ebb84488f4d9d58f489e2ade3d Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Thu, 6 Feb 2025 00:57:22 +0100 Subject: [PATCH 1/2] refactor(frontend): update nlpEntity formDialog --- .../src/components/nlp/NlpEntityDialog.tsx | 163 ------------------ .../components/nlp/components/NlpEntity.tsx | 99 +++++------ .../nlp/components/NlpEntityForm.tsx | 141 +++++++++++++++ .../nlp/components/NlpEntityFormDialog.tsx | 24 +++ 4 files changed, 211 insertions(+), 216 deletions(-) delete mode 100644 frontend/src/components/nlp/NlpEntityDialog.tsx create mode 100644 frontend/src/components/nlp/components/NlpEntityForm.tsx create mode 100644 frontend/src/components/nlp/components/NlpEntityFormDialog.tsx diff --git a/frontend/src/components/nlp/NlpEntityDialog.tsx b/frontend/src/components/nlp/NlpEntityDialog.tsx deleted file mode 100644 index f330588a..00000000 --- a/frontend/src/components/nlp/NlpEntityDialog.tsx +++ /dev/null @@ -1,163 +0,0 @@ -/* - * Copyright © 2024 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 { - Dialog, - FormControl, - FormControlLabel, - FormLabel, - Radio, - RadioGroup, - DialogContent, - DialogActions, -} from "@mui/material"; -import { FC, useEffect } from "react"; -import { useForm } from "react-hook-form"; - -import DialogButtons from "@/app-components/buttons/DialogButtons"; -import { DialogTitle } from "@/app-components/dialogs/DialogTitle"; -import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer"; -import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem"; -import { Input } from "@/app-components/inputs/Input"; -import { useCreate } from "@/hooks/crud/useCreate"; -import { useUpdate } from "@/hooks/crud/useUpdate"; -import { DialogControlProps } from "@/hooks/useDialog"; -import { useToast } from "@/hooks/useToast"; -import { useTranslate } from "@/hooks/useTranslate"; -import { EntityType } from "@/services/types"; -import { - INlpEntity, - INlpEntityAttributes, - NlpLookups, -} from "@/types/nlp-entity.types"; - -export type NlpEntityDialogProps = DialogControlProps; -export const NlpEntityDialog: FC = ({ - open, - closeDialog, - data, - ...rest -}) => { - const { t } = useTranslate(); - const { toast } = useToast(); - const { mutateAsync: createNlpEntity } = useCreate(EntityType.NLP_ENTITY, { - onError: () => { - toast.error(t("message.internal_server_error")); - }, - onSuccess: () => { - closeDialog(); - toast.success(t("message.success_save")); - }, - }); - const { mutateAsync: updateNlpEntity } = useUpdate(EntityType.NLP_ENTITY, { - onError: () => { - toast.error(t("message.internal_server_error")); - }, - onSuccess: () => { - closeDialog(); - toast.success(t("message.success_save")); - }, - }); - const { - reset, - register, - formState: { errors }, - handleSubmit, - } = useForm({ - defaultValues: { - name: data?.name || "", - doc: data?.doc || "", - lookups: data?.lookups || ["keywords"], - }, - }); - const validationRules = { - name: { - required: t("message.name_is_required"), - }, - lookups: {}, - isChecked: {}, - }; - const onSubmitForm = async (params: INlpEntityAttributes) => { - if (data) { - updateNlpEntity({ id: data.id, params }); - } else { - createNlpEntity(params); - } - }; - - useEffect(() => { - if (open) reset(); - }, [open, reset]); - - useEffect(() => { - if (data) { - reset({ - name: data.name, - doc: data.doc, - }); - } else { - reset(); - } - }, [data, reset]); - - return ( - -
- - {data ? t("title.edit_nlp_entity") : t("title.new_nlp_entity")} - - - - {!data ? ( - - - {t("label.lookup_strategies")} - - {Object.values(NlpLookups).map((nlpLookup, index) => ( - } - label={nlpLookup} - /> - ))} - - - - ) : null} - - - - - - - - - - - - -
- - ); -}; diff --git a/frontend/src/components/nlp/components/NlpEntity.tsx b/frontend/src/components/nlp/components/NlpEntity.tsx index 4ae9c969..71ef8119 100644 --- a/frontend/src/components/nlp/components/NlpEntity.tsx +++ b/frontend/src/components/nlp/components/NlpEntity.tsx @@ -1,11 +1,12 @@ /* - * Copyright © 2024 Hexastack. All rights reserved. + * 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 AddIcon from "@mui/icons-material/Add"; import DeleteIcon from "@mui/icons-material/Delete"; import { Button, Chip, Grid } from "@mui/material"; @@ -13,7 +14,7 @@ import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid"; import { useRouter } from "next/router"; import { useState } from "react"; -import { DeleteDialog } from "@/app-components/dialogs"; +import { ConfirmDialogBody } from "@/app-components/dialogs"; import { FilterTextfield } from "@/app-components/inputs/FilterTextfield"; import { ActionColumnLabel, @@ -24,7 +25,7 @@ import { DataGrid } from "@/app-components/tables/DataGrid"; import { useDelete } from "@/hooks/crud/useDelete"; import { useDeleteMany } from "@/hooks/crud/useDeleteMany"; import { useFind } from "@/hooks/crud/useFind"; -import { getDisplayDialogs, useDialog } from "@/hooks/useDialog"; +import { useDialogs } from "@/hooks/useDialogs"; import { useHasPermission } from "@/hooks/useHasPermission"; import { useSearch } from "@/hooks/useSearch"; import { useToast } from "@/hooks/useToast"; @@ -34,39 +35,32 @@ import { INlpEntity } from "@/types/nlp-entity.types"; import { PermissionAction } from "@/types/permission.types"; import { getDateTimeFormatter } from "@/utils/date"; -import { NlpEntityDialog } from "../NlpEntityDialog"; +import { NlpEntityFormDialog } from "./NlpEntityFormDialog"; const NlpEntity = () => { + const { t } = useTranslate(); + const { toast } = useToast(); + const dialogs = useDialogs(); const router = useRouter(); - const deleteEntityDialogCtl = useDialog(false); const hasPermission = useHasPermission(); - const editEntityDialogCtl = useDialog(false); - const { mutateAsync: deleteNlpEntity } = useDelete(EntityType.NLP_ENTITY, { + const { mutate: deleteNlpEntity } = useDelete(EntityType.NLP_ENTITY, { onError: () => { toast.error(t("message.internal_server_error")); }, onSuccess() { - deleteEntityDialogCtl.closeDialog(); toast.success(t("message.item_delete_success")); }, }); - const { mutateAsync: deleteNlpEntities } = useDeleteMany( - EntityType.NLP_ENTITY, - { - onError: (error) => { - toast.error(error); - }, - onSuccess: () => { - deleteEntityDialogCtl.closeDialog(); - setSelectedNlpEntities([]); - toast.success(t("message.item_delete_success")); - }, + const { mutate: deleteNlpEntities } = useDeleteMany(EntityType.NLP_ENTITY, { + onError: (error) => { + toast.error(error); }, - ); + onSuccess: () => { + setSelectedNlpEntities([]); + toast.success(t("message.item_delete_success")); + }, + }); const [selectedNlpEntities, setSelectedNlpEntities] = useState([]); - const addDialogCtl = useDialog(false); - const { t } = useTranslate(); - const { toast } = useToast(); const { onSearch, searchPayload } = useSearch({ $or: ["name", "doc"], }); @@ -100,12 +94,18 @@ const NlpEntity = () => { }, { label: ActionColumnLabel.Edit, - action: (row) => editEntityDialogCtl.openDialog(row), + action: (row) => dialogs.open(NlpEntityFormDialog, row), requires: [PermissionAction.UPDATE], }, { label: ActionColumnLabel.Delete, - action: (row) => deleteEntityDialogCtl.openDialog(row.id), + action: async ({ id }) => { + const isConfirmed = await dialogs.confirm(ConfirmDialogBody); + + if (isConfirmed) { + deleteNlpEntity(id); + } + }, requires: [PermissionAction.DELETE], }, ], @@ -177,21 +177,6 @@ const NlpEntity = () => { return ( - - - { - if (selectedNlpEntities.length > 0) { - deleteNlpEntities(selectedNlpEntities); - setSelectedNlpEntities([]); - deleteEntityDialogCtl.closeDialog(); - } else if (deleteEntityDialogCtl.data) { - deleteNlpEntity(deleteEntityDialogCtl.data); - } - }} - /> - { startIcon={} variant="contained" sx={{ float: "right" }} - onClick={() => addDialogCtl.openDialog()} + onClick={() => dialogs.open(NlpEntityFormDialog, null)} > {t("button.add")} ) : null} - {selectedNlpEntities.length > 0 && ( - - - - )} + + + diff --git a/frontend/src/components/nlp/components/NlpEntityForm.tsx b/frontend/src/components/nlp/components/NlpEntityForm.tsx new file mode 100644 index 00000000..ada67efd --- /dev/null +++ b/frontend/src/components/nlp/components/NlpEntityForm.tsx @@ -0,0 +1,141 @@ +/* + * 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 { + FormControl, + FormControlLabel, + FormLabel, + Radio, + RadioGroup, +} from "@mui/material"; +import { FC, Fragment, useEffect } from "react"; +import { useForm } from "react-hook-form"; + +import { ContentContainer, ContentItem } from "@/app-components/dialogs/"; +import { Input } from "@/app-components/inputs/Input"; +import { useCreate } from "@/hooks/crud/useCreate"; +import { useUpdate } from "@/hooks/crud/useUpdate"; +import { useToast } from "@/hooks/useToast"; +import { useTranslate } from "@/hooks/useTranslate"; +import { EntityType } from "@/services/types"; +import { ComponentFormProps } from "@/types/common/dialogs.types"; +import { + INlpEntity, + INlpEntityAttributes, + NlpLookups, +} from "@/types/nlp-entity.types"; + +export const NlpEntityVarForm: FC> = ({ + data, + Wrapper = Fragment, + WrapperProps, + ...rest +}) => { + const { t } = useTranslate(); + const { toast } = useToast(); + const options = { + onError: (error: Error) => { + rest.onError?.(); + toast.error(error.message || t("message.internal_server_error")); + }, + onSuccess: () => { + rest.onSuccess?.(); + toast.success(t("message.success_save")); + }, + }; + const { mutate: createNlpEntity } = useCreate(EntityType.NLP_ENTITY, options); + const { mutate: updateNlpEntity } = useUpdate(EntityType.NLP_ENTITY, options); + const { + reset, + register, + formState: { errors }, + handleSubmit, + } = useForm({ + defaultValues: { + name: data?.name || "", + doc: data?.doc || "", + lookups: data?.lookups || ["keywords"], + }, + }); + const validationRules = { + name: { + required: t("message.name_is_required"), + }, + lookups: {}, + isChecked: {}, + }; + const onSubmitForm = (params: INlpEntityAttributes) => { + if (data) { + updateNlpEntity({ id: data.id, params }); + } else { + createNlpEntity(params); + } + }; + + useEffect(() => { + if (data) { + reset({ + name: data.name, + doc: data.doc, + }); + } else { + reset(); + } + }, [data, reset]); + + return ( + +
+ + {!data ? ( + + + {t("label.lookup_strategies")} + + {Object.values(NlpLookups).map((nlpLookup, index) => ( + } + label={nlpLookup} + /> + ))} + + + + ) : null} + + + + + + + +
+ + ); +}; diff --git a/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx b/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx new file mode 100644 index 00000000..79d53b1d --- /dev/null +++ b/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx @@ -0,0 +1,24 @@ +/* + * 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 { GenericFormDialog } from "@/app-components/dialogs"; +import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; +import { INlpEntity } from "@/types/nlp-entity.types"; + +import { NlpEntityVarForm } from "./NlpEntityForm"; + +export const NlpEntityFormDialog = ( + props: ComponentFormDialogProps, +) => ( + + Form={NlpEntityVarForm} + addText="title.new_context_var" + editText="title.edit_context_var" + {...props} + /> +); From fe2405325f523fdd95015a1dbd8ea364d10a89dc Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Thu, 6 Feb 2025 16:25:08 +0100 Subject: [PATCH 2/2] fix(frontend): replace translations --- .../src/components/nlp/components/NlpEntityFormDialog.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx b/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx index 79d53b1d..edf37b5c 100644 --- a/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx +++ b/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx @@ -17,8 +17,8 @@ export const NlpEntityFormDialog = ( ) => ( Form={NlpEntityVarForm} - addText="title.new_context_var" - editText="title.edit_context_var" + addText="title.new_nlp_entity" + editText="title.edit_nlp_entity" {...props} /> );