Merge pull request #694 from Hexastack/691-refactor-nlu-entities-dial…

…ogs-add-edit-delete-bulk refactor(frontend): update nlpEntity dialogs
Hexastack · Feb 6, 2025 · b66df78 · b66df78
2 parents 411215c + fe24053
commit b66df78
Show file tree

Hide file tree

Showing 4 changed files with 211 additions and 216 deletions.
diff --git a/frontend/src/components/nlp/NlpEntityDialog.tsx b/frontend/src/components/nlp/NlpEntityDialog.tsx
diff --git a/frontend/src/components/nlp/components/NlpEntity.tsx b/frontend/src/components/nlp/components/NlpEntity.tsx
@@ -1,19 +1,20 @@
 /*
- * 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";
 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<string>(false);
   const hasPermission = useHasPermission();
-  const editEntityDialogCtl = useDialog<INlpEntity>(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<string[]>([]);
-  const addDialogCtl = useDialog<INlpEntity>(false);
-  const { t } = useTranslate();
-  const { toast } = useToast();
   const { onSearch, searchPayload } = useSearch<INlpEntity>({
     $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 (
     <Grid item xs={12}>
-      <NlpEntityDialog {...getDisplayDialogs(addDialogCtl)} />
-      <NlpEntityDialog {...editEntityDialogCtl} />
-      <DeleteDialog
-        {...deleteEntityDialogCtl}
-        callback={() => {
-          if (selectedNlpEntities.length > 0) {
-            deleteNlpEntities(selectedNlpEntities);
-            setSelectedNlpEntities([]);
-            deleteEntityDialogCtl.closeDialog();
-          } else if (deleteEntityDialogCtl.data) {
-            deleteNlpEntity(deleteEntityDialogCtl.data);
-          }
-        }}
-      />
-
       <Grid
         justifyContent="flex-end"
         gap={1}
@@ -209,24 +194,32 @@ const NlpEntity = () => {
               startIcon={<AddIcon />}
               variant="contained"
               sx={{ float: "right" }}
-              onClick={() => addDialogCtl.openDialog()}
+              onClick={() => dialogs.open(NlpEntityFormDialog, null)}
             >
               {t("button.add")}
             </Button>
           </Grid>
         ) : null}
-        {selectedNlpEntities.length > 0 && (
-          <Grid item>
-            <Button
-              startIcon={<DeleteIcon />}
-              variant="contained"
-              color="error"
-              onClick={() => deleteEntityDialogCtl.openDialog(undefined)}
-            >
-              {t("button.delete")}
-            </Button>
-          </Grid>
-        )}
+        <Grid item>
+          <Button
+            startIcon={<DeleteIcon />}
+            variant="contained"
+            color="error"
+            onClick={async () => {
+              const isConfirmed = await dialogs.confirm(ConfirmDialogBody, {
+                mode: "selection",
+                count: selectedNlpEntities.length,
+              });
+
+              if (isConfirmed) {
+                deleteNlpEntities(selectedNlpEntities);
+              }
+            }}
+            disabled={!selectedNlpEntities.length}
+          >
+            {t("button.delete")}
+          </Button>
+        </Grid>
       </Grid>
 
       <Grid mt={3}>