Merge pull request #694 from Hexastack/691-refactor-nlu-entities-dialogs-add-edit-delete-bulk

refactor(frontend): update nlpEntity dialogs
2025-04-02 20:31:33 +00:00 · 2025-02-06 16:34:11 +01:00 · 2025-02-06 16:34:11 +01:00 · b66df78c80
commit b66df78c80
parent 411215c688 fe2405325f
4 changed files with 211 additions and 216 deletions
--- a/frontend/src/components/nlp/NlpEntityDialog.tsx
+++ b/frontend/src/components/nlp/NlpEntityDialog.tsx
@ -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<INlpEntity>;
-export const NlpEntityDialog: FC<NlpEntityDialogProps> = ({
-  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<INlpEntityAttributes>({
-    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 (
-    <Dialog open={open} fullWidth onClose={closeDialog} {...rest}>
-      <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={closeDialog}>
-          {data ? t("title.edit_nlp_entity") : t("title.new_nlp_entity")}
-        </DialogTitle>
-        <DialogContent>
-          <ContentContainer>
-            {!data ? (
-              <ContentItem>
-                <FormControl>
-                  <FormLabel>{t("label.lookup_strategies")}</FormLabel>
-                  <RadioGroup
-                    row
-                    {...register("lookups")}
-                    defaultValue="keywords"
-                  >
-                    {Object.values(NlpLookups).map((nlpLookup, index) => (
-                      <FormControlLabel
-                        key={index}
-                        value={nlpLookup}
-                        control={<Radio {...register("lookups.0")} />}
-                        label={nlpLookup}
-                      />
-                    ))}
-                  </RadioGroup>
-                </FormControl>
-              </ContentItem>
-            ) : null}
-            <ContentItem>
-              <Input
-                label={t("label.name")}
-                error={!!errors.name}
-                {...register("name", validationRules.name)}
-                required
-                autoFocus
-                helperText={errors.name ? errors.name.message : null}
-              />
-            </ContentItem>
-
-            <ContentItem>
-              <Input
-                label={t("label.doc")}
-                {...register("doc")}
-                multiline={true}
-              />
-            </ContentItem>
-          </ContentContainer>
-        </DialogContent>
-        <DialogActions>
-          <DialogButtons closeDialog={closeDialog} />
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-};
--- 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<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}>
--- a/frontend/src/components/nlp/components/NlpEntityForm.tsx
+++ 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<ComponentFormProps<INlpEntity>> = ({
+  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<INlpEntityAttributes>({
+    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 (
+    <Wrapper
+      open={!!WrapperProps?.open}
+      onSubmit={handleSubmit(onSubmitForm)}
+      {...WrapperProps}
+    >
+      <form onSubmit={handleSubmit(onSubmitForm)}>
+        <ContentContainer>
+          {!data ? (
+            <ContentItem>
+              <FormControl>
+                <FormLabel>{t("label.lookup_strategies")}</FormLabel>
+                <RadioGroup
+                  row
+                  {...register("lookups")}
+                  defaultValue="keywords"
+                >
+                  {Object.values(NlpLookups).map((nlpLookup, index) => (
+                    <FormControlLabel
+                      key={index}
+                      value={nlpLookup}
+                      control={<Radio {...register("lookups.0")} />}
+                      label={nlpLookup}
+                    />
+                  ))}
+                </RadioGroup>
+              </FormControl>
+            </ContentItem>
+          ) : null}
+          <ContentItem>
+            <Input
+              label={t("label.name")}
+              error={!!errors.name}
+              {...register("name", validationRules.name)}
+              required
+              autoFocus
+              helperText={errors.name ? errors.name.message : null}
+            />
+          </ContentItem>
+          <ContentItem>
+            <Input
+              label={t("label.doc")}
+              {...register("doc")}
+              multiline={true}
+            />
+          </ContentItem>
+        </ContentContainer>
+      </form>
+    </Wrapper>
+  );
+};
--- a/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx
+++ 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 = <T extends INlpEntity = INlpEntity>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={NlpEntityVarForm}
+    addText="title.new_nlp_entity"
+    editText="title.edit_nlp_entity"
+    {...props}
+  />
+);