From 0cb2f5ff6b5fec8a42fe30b5927a3f8553b96526 Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Thu, 6 Feb 2025 01:55:52 +0100 Subject: [PATCH] refactor(frontend): update nlpSample formDialog --- .../src/app-components/dialogs/FormDialog.tsx | 8 +- .../components/nlp/components/NlpSample.tsx | 93 +++++++++---------- .../NlpSampleForm.tsx} | 43 ++++----- .../nlp/components/NlpSampleFormDialog.tsx | 26 ++++++ frontend/src/contexts/dialogs.context.tsx | 4 +- frontend/src/types/common/dialogs.types.ts | 10 +- 6 files changed, 105 insertions(+), 79 deletions(-) rename frontend/src/components/nlp/{NlpSampleDialog.tsx => components/NlpSampleForm.tsx} (62%) create mode 100644 frontend/src/components/nlp/components/NlpSampleFormDialog.tsx diff --git a/frontend/src/app-components/dialogs/FormDialog.tsx b/frontend/src/app-components/dialogs/FormDialog.tsx index 8a5bfe24..07365f45 100644 --- a/frontend/src/app-components/dialogs/FormDialog.tsx +++ b/frontend/src/app-components/dialogs/FormDialog.tsx @@ -25,9 +25,11 @@ export const FormDialog = ({ {title} {children} - - - + {rest.hasButtons === false ? null : ( + + + + )} ); }; diff --git a/frontend/src/components/nlp/components/NlpSample.tsx b/frontend/src/components/nlp/components/NlpSample.tsx index b29adcc8..84a5697b 100644 --- a/frontend/src/components/nlp/components/NlpSample.tsx +++ b/frontend/src/components/nlp/components/NlpSample.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 CircleIcon from "@mui/icons-material/Circle"; import ClearIcon from "@mui/icons-material/Clear"; import DeleteIcon from "@mui/icons-material/Delete"; @@ -26,7 +27,7 @@ import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid"; import { useState } from "react"; import { useQueryClient } from "react-query"; -import { DeleteDialog } from "@/app-components/dialogs"; +import { ConfirmDialogBody } from "@/app-components/dialogs"; import { ChipEntity } from "@/app-components/displays/ChipEntity"; import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect"; import FileUploadButton from "@/app-components/inputs/FileInput"; @@ -45,7 +46,7 @@ import { useFind } from "@/hooks/crud/useFind"; import { useGetFromCache } from "@/hooks/crud/useGet"; import { useImport } from "@/hooks/crud/useImport"; import { useConfig } from "@/hooks/useConfig"; -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"; @@ -62,7 +63,7 @@ import { PermissionAction } from "@/types/permission.types"; import { getDateTimeFormatter } from "@/utils/date"; import { buildURL } from "@/utils/URL"; -import { NlpSampleDialog } from "../NlpSampleDialog"; +import { NlpSampleFormDialog } from "./NlpSampleFormDialog"; const NLP_SAMPLE_TYPE_COLORS = { all: "#fff", @@ -75,6 +76,7 @@ export default function NlpSample() { const { apiUrl } = useConfig(); const { toast } = useToast(); const { t } = useTranslate(); + const dialogs = useDialogs(); const queryClient = useQueryClient(); const [type, setType] = useState("all"); const [language, setLanguage] = useState(undefined); @@ -92,28 +94,23 @@ export default function NlpSample() { ], $iLike: ["text"], }); - const { mutateAsync: deleteNlpSample } = useDelete(EntityType.NLP_SAMPLE, { + const { mutate: deleteNlpSample } = useDelete(EntityType.NLP_SAMPLE, { onError: () => { toast.error(t("message.internal_server_error")); }, onSuccess() { - deleteDialogCtl.closeDialog(); toast.success(t("message.item_delete_success")); }, }); - const { mutateAsync: deleteNlpSamples } = useDeleteMany( - EntityType.NLP_SAMPLE, - { - onError: (error) => { - toast.error(error); - }, - onSuccess: () => { - deleteDialogCtl.closeDialog(); - setSelectedNlpSamples([]); - toast.success(t("message.item_delete_success")); - }, + const { mutate: deleteNlpSamples } = useDeleteMany(EntityType.NLP_SAMPLE, { + onError: (error) => { + toast.error(error); }, - ); + onSuccess: () => { + setSelectedNlpSamples([]); + toast.success(t("message.item_delete_success")); + }, + }); const { mutateAsync: importDataset, isLoading } = useImport( EntityType.NLP_SAMPLE, { @@ -147,8 +144,6 @@ export default function NlpSample() { params: searchPayload, }, ); - const deleteDialogCtl = useDialog(false); - const editDialogCtl = useDialog(false); const actionColumns = getActionsColumn( [ { @@ -173,13 +168,22 @@ export default function NlpSample() { : null, }; - editDialogCtl.openDialog(data); + dialogs.open(NlpSampleFormDialog, data, { + maxWidth: "md", + hasButtons: false, + }); }, requires: [PermissionAction.UPDATE], }, { label: ActionColumnLabel.Delete, - action: (row) => deleteDialogCtl.openDialog(row.id), + action: async ({ id }) => { + const isConfirmed = await dialogs.confirm(ConfirmDialogBody); + + if (isConfirmed) { + deleteNlpSample(id); + } + }, requires: [PermissionAction.DELETE], }, ], @@ -300,19 +304,6 @@ export default function NlpSample() { return ( - - { - if (selectedNlpSamples.length > 0) { - deleteNlpSamples(selectedNlpSamples); - setSelectedNlpSamples([]); - deleteDialogCtl.closeDialog(); - } else if (deleteDialogCtl.data) { - deleteNlpSample(deleteDialogCtl.data); - } - }} - /> ) : null} - {selectedNlpSamples.length > 0 && ( - - - - )} + + + diff --git a/frontend/src/components/nlp/NlpSampleDialog.tsx b/frontend/src/components/nlp/components/NlpSampleForm.tsx similarity index 62% rename from frontend/src/components/nlp/NlpSampleDialog.tsx rename to frontend/src/components/nlp/components/NlpSampleForm.tsx index 3a14ce11..59582425 100644 --- a/frontend/src/components/nlp/NlpSampleDialog.tsx +++ b/frontend/src/components/nlp/components/NlpSampleForm.tsx @@ -1,38 +1,35 @@ /* - * 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 { Dialog, DialogContent } from "@mui/material"; -import { FC } from "react"; +import { FC, Fragment } from "react"; -import { DialogTitle } from "@/app-components/dialogs/DialogTitle"; 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 { ComponentFormProps } from "@/types/common/dialogs.types"; import { INlpDatasetSample, INlpDatasetSampleAttributes, INlpSampleFormAttributes, } from "@/types/nlp-sample.types"; -import NlpDatasetSample from "./components/NlpTrainForm"; +import NlpDatasetSample from "./NlpTrainForm"; -export type NlpSampleDialogProps = DialogControlProps; -export const NlpSampleDialog: FC = ({ - open, - data: sample, - closeDialog, +export const NlpSampleForm: FC> = ({ + data, + Wrapper = Fragment, + WrapperProps, ...rest }) => { const { t } = useTranslate(); const { toast } = useToast(); - const { mutateAsync: updateSample } = useUpdate< + const { mutate: updateSample } = useUpdate< EntityType.NLP_SAMPLE, INlpDatasetSampleAttributes >(EntityType.NLP_SAMPLE, { @@ -44,10 +41,10 @@ export const NlpSampleDialog: FC = ({ }, }); const onSubmitForm = (form: INlpSampleFormAttributes) => { - if (sample?.id) { + if (data?.id) { updateSample( { - id: sample.id, + id: data.id, params: { text: form.text, type: form.type, @@ -57,7 +54,7 @@ export const NlpSampleDialog: FC = ({ }, { onSuccess: () => { - closeDialog(); + rest.onSuccess?.(); }, }, ); @@ -65,13 +62,13 @@ export const NlpSampleDialog: FC = ({ }; return ( - - - {t("title.edit_nlp_sample")} - - - - - + {}} {...WrapperProps}> +
+ + +
); }; diff --git a/frontend/src/components/nlp/components/NlpSampleFormDialog.tsx b/frontend/src/components/nlp/components/NlpSampleFormDialog.tsx new file mode 100644 index 00000000..bb4eb43a --- /dev/null +++ b/frontend/src/components/nlp/components/NlpSampleFormDialog.tsx @@ -0,0 +1,26 @@ +/* + * 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 { INlpDatasetSample } from "@/types/nlp-sample.types"; + +import { NlpSampleForm } from "./NlpSampleForm"; + +export const NlpSampleFormDialog = < + T extends INlpDatasetSample = INlpDatasetSample, +>( + props: ComponentFormDialogProps, +) => ( + + Form={NlpSampleForm} + addText="title.new_category" + editText="title.edit_category" + {...props} + /> +); diff --git a/frontend/src/contexts/dialogs.context.tsx b/frontend/src/contexts/dialogs.context.tsx index 7daa9027..753af19f 100644 --- a/frontend/src/contexts/dialogs.context.tsx +++ b/frontend/src/contexts/dialogs.context.tsx @@ -55,7 +55,7 @@ function DialogsProvider(props: DialogProviderProps) { payload: P, options: OpenDialogOptions = {}, ) { - const { onClose = async () => {} } = options; + const { onClose = async () => {}, ...rest } = options; let resolve: ((result: R) => void) | undefined; const promise = new Promise((resolveImpl) => { resolve = resolveImpl; @@ -77,7 +77,7 @@ function DialogsProvider(props: DialogProviderProps) { payload, onClose, resolve, - msgProps: { count: options.count, mode: options.mode }, + msgProps: rest, }; setStack((prevStack) => [...prevStack, newEntry]); diff --git a/frontend/src/types/common/dialogs.types.ts b/frontend/src/types/common/dialogs.types.ts index 9c884f15..b5bddf9b 100644 --- a/frontend/src/types/common/dialogs.types.ts +++ b/frontend/src/types/common/dialogs.types.ts @@ -9,12 +9,14 @@ import { DialogProps as MuiDialogProps } from "@mui/material"; import { BaseSyntheticEvent } from "react"; -interface ConfirmDialogExtraOptions { +interface DialogExtraOptions { mode?: "click" | "selection"; count?: number; + maxWidth?: MuiDialogProps["maxWidth"]; + hasButtons?: boolean; } // context -export interface OpenDialogOptions extends ConfirmDialogExtraOptions { +export interface OpenDialogOptions extends DialogExtraOptions { /** * A function that is called before closing the dialog closes. The dialog * stays open as long as the returned promise is not resolved. Use this if @@ -133,7 +135,7 @@ export interface DialogStackEntry { payload: P; onClose: (result: R) => Promise; resolve: (result: R) => void; - msgProps: ConfirmDialogExtraOptions; + msgProps: DialogExtraOptions; } export interface DialogProviderProps { @@ -142,7 +144,7 @@ export interface DialogProviderProps { } // form dialog -export interface FormDialogProps extends MuiDialogProps { +export interface FormDialogProps extends MuiDialogProps, DialogExtraOptions { title?: string; children?: React.ReactNode; onSubmit: (e: BaseSyntheticEvent) => void;