Merge pull request #721 from Hexastack/720-refactor-content-types-dialogs-add-edit-delete

refactor(frontend): update contentType dialogs

frontend/src/components/content-types/ContentTypeDialog.tsx

@@ -1,178 +0,0 @@
-/*
- * 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 { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
-import { FC, useEffect } from "react";
-import { useFieldArray, 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 { ContentFieldType, IContentType } from "@/types/content-type.types";
-
-import { FieldInput } from "./components/FieldInput";
-import { FIELDS_FORM_DEFAULT_VALUES, READ_ONLY_FIELDS } from "./constants";
-
-export type ContentTypeDialogProps = DialogControlProps<IContentType>;
-export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
-  open,
-  data,
-  closeDialog,
-}) => {
-  const { toast } = useToast();
-  const { t } = useTranslate();
-  const {
-    handleSubmit,
-    register,
-    control,
-    reset,
-    setValue,
-    formState: { errors },
-  } = useForm<Partial<IContentType>>({
-    defaultValues: {
-      name: data?.name || "",
-      fields: data?.fields || FIELDS_FORM_DEFAULT_VALUES,
-    },
-  });
-  const { append, fields, remove } = useFieldArray({
-    name: "fields",
-    control,
-  });
-  const closeAndReset = () => {
-    closeDialog();
-    reset({
-      name: "",
-      fields: FIELDS_FORM_DEFAULT_VALUES,
-    });
-  };
-  const { mutate: createContentType } = useCreate(EntityType.CONTENT_TYPE, {
-    onError: (error) => {
-      toast.error(error.message || t("message.internal_server_error"));
-    },
-    onSuccess: () => {
-      closeDialog();
-      toast.success(t("message.success_save"));
-    },
-  });
-  const { mutate: updateContentType } = useUpdate(EntityType.CONTENT_TYPE, {
-    onError: (error) => {
-      toast.error(error.message || t("message.internal_server_error"));
-    },
-    onSuccess: () => {
-      closeDialog();
-      toast.success(t("message.success_save"));
-    },
-  });
-  const onSubmitForm = async (params) => {
-    const labelCounts: Record<string, number> = params.fields.reduce(
-      (acc, field) => {
-        if (!field.label.trim()) return acc;
-        acc[field.label] = (acc[field.label] || 0) + 1;
-
-        return acc;
-      },
-      {} as Record<string, number>,
-    );
-    const hasDuplicates = Object.values(labelCounts).some(
-      (count: number) => count > 1,
-    );
-
-    if (hasDuplicates) {
-      toast.error(t("message.duplicate_labels_not_allowed"));
-
-      return;
-    }
-
-    if (data) {
-      updateContentType({ id: data.id, params });
-    } else {
-      createContentType(params);
-    }
-  };
-
-  useEffect(() => {
-    if (open) reset();
-  }, [open, reset]);
-
-  useEffect(() => {
-    if (data) {
-      reset({
-        name: data.name,
-        fields: data.fields || FIELDS_FORM_DEFAULT_VALUES,
-      });
-    } else {
-      reset({ name: "", fields: FIELDS_FORM_DEFAULT_VALUES });
-    }
-  }, [data, reset]);
-
-  return (
-    <Dialog open={open} fullWidth onClose={closeAndReset}>
-      <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={closeAndReset}>
-          {data ? t("title.edit_content_type") : t("title.new_content_type")}
-        </DialogTitle>
-        <DialogContent>
-          <ContentContainer>
-            <ContentItem>
-              <Input
-                label={t("label.name")}
-                error={!!errors.name}
-                {...register("name", {
-                  required: t("message.name_is_required"),
-                })}
-                helperText={errors.name ? errors.name.message : null}
-                required
-                autoFocus
-              />
-            </ContentItem>
-
-            {fields.map((f, index) => (
-              <ContentItem
-                key={f.id}
-                display="flex"
-                justifyContent="space-between"
-                gap={2}
-              >
-                <FieldInput
-                  setValue={setValue}
-                  control={control}
-                  remove={remove}
-                  index={index}
-                  disabled={READ_ONLY_FIELDS.includes(f.label as any)}
-                />
-              </ContentItem>
-            ))}
-            <ContentItem>
-              <Button
-                startIcon={<AddIcon />}
-                variant="contained"
-                onClick={() =>
-                  append({ label: "", name: "", type: ContentFieldType.TEXT })
-                }
-              >
-                {t("button.add")}
-              </Button>
-            </ContentItem>
-          </ContentContainer>
-        </DialogContent>
-        <DialogActions>
-          <DialogButtons closeDialog={closeAndReset} />
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-};

frontend/src/components/content-types/ContentTypeForm.tsx

@@ -0,0 +1,160 @@
+/*
+ * 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 { Button } from "@mui/material";
+import { FC, Fragment, useEffect } from "react";
+import { useFieldArray, 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 { ContentFieldType, IContentType } from "@/types/content-type.types";
+
+import { FieldInput } from "./components/FieldInput";
+import { FIELDS_FORM_DEFAULT_VALUES, READ_ONLY_FIELDS } from "./constants";
+
+export const ContentTypeForm: FC<ComponentFormProps<IContentType>> = ({
+  data,
+  Wrapper = Fragment,
+  WrapperProps,
+  ...rest
+}) => {
+  const { toast } = useToast();
+  const { t } = useTranslate();
+  const {
+    reset,
+    control,
+    register,
+    setValue,
+    formState: { errors },
+    handleSubmit,
+  } = useForm<Partial<IContentType>>({
+    defaultValues: {
+      name: data?.name || "",
+      fields: data?.fields || FIELDS_FORM_DEFAULT_VALUES,
+    },
+  });
+  const { append, fields, remove } = useFieldArray({
+    name: "fields",
+    control,
+  });
+  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: createContentType } = useCreate(
+    EntityType.CONTENT_TYPE,
+    options,
+  );
+  const { mutate: updateContentType } = useUpdate(
+    EntityType.CONTENT_TYPE,
+    options,
+  );
+  const onSubmitForm = (params) => {
+    const labelCounts: Record<string, number> = params.fields.reduce(
+      (acc, field) => {
+        if (!field.label.trim()) return acc;
+        acc[field.label] = (acc[field.label] || 0) + 1;
+
+        return acc;
+      },
+      {} as Record<string, number>,
+    );
+    const hasDuplicates = Object.values(labelCounts).some(
+      (count: number) => count > 1,
+    );
+
+    if (hasDuplicates) {
+      toast.error(t("message.duplicate_labels_not_allowed"));
+
+      return;
+    }
+
+    if (data) {
+      updateContentType({ id: data.id, params });
+    } else {
+      createContentType(params);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        name: data.name,
+        fields: data.fields || FIELDS_FORM_DEFAULT_VALUES,
+      });
+    } else {
+      reset({ name: "", fields: FIELDS_FORM_DEFAULT_VALUES });
+    }
+  }, [data, reset]);
+
+  return (
+    <Wrapper
+      open={!!WrapperProps?.open}
+      onSubmit={handleSubmit(onSubmitForm)}
+      {...WrapperProps}
+    >
+      <form onSubmit={handleSubmit(onSubmitForm)}>
+        <ContentContainer>
+          <ContentItem>
+            <Input
+              label={t("label.name")}
+              error={!!errors.name}
+              {...register("name", {
+                required: t("message.name_is_required"),
+              })}
+              helperText={errors.name ? errors.name.message : null}
+              required
+              autoFocus
+            />
+          </ContentItem>
+
+          {fields.map((f, index) => (
+            <ContentItem
+              key={f.id}
+              display="flex"
+              justifyContent="space-between"
+              gap={2}
+            >
+              <FieldInput
+                setValue={setValue}
+                control={control}
+                remove={remove}
+                index={index}
+                disabled={READ_ONLY_FIELDS.includes(f.label as any)}
+              />
+            </ContentItem>
+          ))}
+          <ContentItem>
+            <Button
+              startIcon={<AddIcon />}
+              variant="contained"
+              onClick={() =>
+                append({ label: "", name: "", type: ContentFieldType.TEXT })
+              }
+            >
+              {t("button.add")}
+            </Button>
+          </ContentItem>
+        </ContentContainer>
+      </form>
+    </Wrapper>
+  );
+};

frontend/src/components/content-types/ContentTypeFormDialog.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 { IContentType } from "@/types/content-type.types";
+
+import { ContentTypeForm } from "./ContentTypeForm";
+
+export const ContentTypeFormDialog = <T extends IContentType = IContentType>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={ContentTypeForm}
+    addText="title.new_content_type"
+    editText="title.edit_content_type"
+    {...props}
+  />
+);

frontend/src/components/content-types/index.tsx

@@ -6,13 +6,12 @@
  * 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 { faAlignLeft } from "@fortawesome/free-solid-svg-icons";
 import AddIcon from "@mui/icons-material/Add";
 import { Button, Grid, Paper } from "@mui/material";
 import { useRouter } from "next/router";
 
-import { DeleteDialog } from "@/app-components/dialogs";
+import { ConfirmDialogBody } from "@/app-components/dialogs";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
   ActionColumnLabel,
@@ -22,7 +21,7 @@ import { renderHeader } from "@/app-components/tables/columns/renderHeader";
 import { DataGrid } from "@/app-components/tables/DataGrid";
 import { useDelete } from "@/hooks/crud/useDelete";
 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";
@@ -33,16 +32,13 @@ import { IContentType } from "@/types/content-type.types";
 import { PermissionAction } from "@/types/permission.types";
 import { getDateTimeFormatter } from "@/utils/date";
 
-import { ContentTypeDialog } from "./ContentTypeDialog";
+import { ContentTypeFormDialog } from "./ContentTypeFormDialog";
 
 export const ContentTypes = () => {
   const { t } = useTranslate();
   const { toast } = useToast();
   const router = useRouter();
-  // Dialog Controls
+  const dialogs = useDialogs();
-  const addDialogCtl = useDialog<IContentType>(false);
-  const deleteDialogCtl = useDialog<string>(false);
-  const fieldsDialogCtl = useDialog<IContentType>(false);
   // data fetching
   const { onSearch, searchPayload } = useSearch<IContentType>({
     $iLike: ["name"],
@@ -53,18 +49,14 @@ export const ContentTypes = () => {
       params: searchPayload,
     },
   );
-  const { mutateAsync: deleteContentType } = useDelete(
+  const { mutate: deleteContentType } = useDelete(EntityType.CONTENT_TYPE, {
-    EntityType.CONTENT_TYPE,
+    onSuccess: () => {
-    {
+      toast.success(t("message.item_delete_success"));
-      onSuccess: () => {
-        deleteDialogCtl.closeDialog();
-        toast.success(t("message.item_delete_success"));
-      },
-      onError: (error) => {
-        toast.error(error.message || t("message.internal_server_error"));
-      },
     },
-  );
+    onError: (error) => {
+      toast.error(error.message || t("message.internal_server_error"));
+    },
+  });
   const hasPermission = useHasPermission();
   const actionColumns = useActionColumns<IContentType>(
     EntityType.CONTENT_TYPE,
@@ -75,12 +67,18 @@ export const ContentTypes = () => {
       },
       {
         label: ActionColumnLabel.Edit,
-        action: (row) => fieldsDialogCtl.openDialog(row),
+        action: (row) => dialogs.open(ContentTypeFormDialog, row),
         requires: [PermissionAction.UPDATE],
       },
       {
         label: ActionColumnLabel.Delete,
-        action: (row) => deleteDialogCtl.openDialog(row.id),
+        action: async ({ id }) => {
+          const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
+
+          if (isConfirmed) {
+            deleteContentType(id);
+          }
+        },
         requires: [PermissionAction.DELETE],
       },
     ],
@@ -106,7 +104,7 @@ export const ContentTypes = () => {
               <Button
                 startIcon={<AddIcon />}
                 variant="contained"
-                onClick={() => addDialogCtl.openDialog()}
+                onClick={() => dialogs.open(ContentTypeFormDialog, null)}
                 sx={{ float: "right" }}
               >
                 {t("button.add")}
@@ -117,15 +115,6 @@ export const ContentTypes = () => {
       </PageHeader>
       <Grid item xs={12}>
         <Paper>
-          <ContentTypeDialog {...getDisplayDialogs(addDialogCtl)} />
-          <DeleteDialog
-            {...deleteDialogCtl}
-            callback={() => {
-              if (deleteDialogCtl?.data)
-                deleteContentType(deleteDialogCtl.data);
-            }}
-          />
-          <ContentTypeDialog {...getDisplayDialogs(fieldsDialogCtl)} />
           <Grid padding={2} container>
             <Grid item width="100%">
               <DataGrid