refactor(frontend): update content and contentImport dialogs

frontend/src/components/contents/ContentForm.tsx

@@ -7,16 +7,8 @@
  */
 
 import LinkIcon from "@mui/icons-material/Link";
-import {
+import { FormControl, FormControlLabel, Switch } from "@mui/material";
-  Dialog,
+import { FC, Fragment, useEffect } from "react";
-  DialogActions,
-  DialogContent,
-  FormControl,
-  FormControlLabel,
-  Switch,
-} from "@mui/material";
-import { isAbsoluteUrl } from "next/dist/shared/lib/utils";
-import { FC, useEffect } from "react";
 import {
   Controller,
   ControllerRenderProps,
@@ -25,19 +17,16 @@ import {
 } from "react-hook-form";
 
 import AttachmentInput from "@/app-components/attachment/AttachmentInput";
-import DialogButtons from "@/app-components/buttons/DialogButtons";
+import { ContentContainer, ContentItem } from "@/app-components/dialogs/";
-import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
-import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
-import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
 import { Adornment } from "@/app-components/inputs/Adornment";
 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 { AttachmentResourceRef } from "@/types/attachment.types";
+import { ComponentFormProps } from "@/types/common/dialogs.types";
 import {
   ContentField,
   ContentFieldType,
@@ -45,6 +34,7 @@ import {
 } from "@/types/content-type.types";
 import { IContent, IContentAttributes } from "@/types/content.types";
 import { MIME_TYPES } from "@/utils/attachment";
+import { isAbsoluteUrl } from "@/utils/URL";
 
 interface ContentFieldInput {
   contentField: ContentField;
@@ -56,7 +46,6 @@ interface ContentFieldInput {
   >;
   idx: number;
 }
-
 const ContentFieldInput: React.FC<ContentFieldInput> = ({
   contentField: contentField,
   field,
@@ -139,14 +128,14 @@ const buildDynamicFields = (
   },
 });
 
-export type ContentDialogProps = DialogControlProps<{
+export type ContentFormData = {
   content?: IContent;
   contentType?: IContentType;
-}>;
+};
-export const ContentDialog: FC<ContentDialogProps> = ({
+export const ContentForm: FC<ComponentFormProps<ContentFormData>> = ({
-  open,
   data,
-  closeDialog,
+  Wrapper = Fragment,
+  WrapperProps,
   ...rest
 }) => {
   const { content, contentType } = data || {
@@ -179,42 +168,32 @@ export const ContentDialog: FC<ContentDialogProps> = ({
   };
   const { mutateAsync: createContent } = useCreate(EntityType.CONTENT);
   const { mutateAsync: updateContent } = useUpdate(EntityType.CONTENT);
+  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 onSubmitForm = async (params: IContentAttributes) => {
     if (content) {
       updateContent(
         { id: content.id, params: buildDynamicFields(params, contentType) },
-        {
+        options,
-          onError: () => {
-            toast.error(t("message.internal_server_error"));
-          },
-          onSuccess: () => {
-            closeDialog();
-            toast.success(t("message.success_save"));
-          },
-        },
       );
     } else if (contentType) {
       createContent(
         { ...buildDynamicFields(params, contentType), entity: contentType.id },
-        {
+        options,
-          onError: (error) => {
-            toast.error(error);
-          },
-          onSuccess: () => {
-            closeDialog();
-            toast.success(t("message.success_save"));
-          },
-        },
       );
     } else {
       throw new Error("Content Type must be passed to the dialog form.");
     }
   };
 
-  useEffect(() => {
-    if (open) reset();
-  }, [open, reset]);
-
   useEffect(() => {
     if (content) {
       reset(content);
@@ -224,47 +203,43 @@ export const ContentDialog: FC<ContentDialogProps> = ({
   }, [content, reset]);
 
   return (
-    <Dialog open={open} fullWidth maxWidth="md" onClose={closeDialog} {...rest}>
+    <Wrapper
+      open={!!WrapperProps?.open}
+      onSubmit={handleSubmit(onSubmitForm)}
+      {...WrapperProps}
+    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={closeDialog}>
+        <ContentContainer>
-          {content ? t("title.edit_node") : t("title.new_content")}
+          {(contentType?.fields || []).map((contentField, index) => (
-        </DialogTitle>
+            <ContentItem key={contentField.name}>
-        <DialogContent>
+              <Controller
-          <ContentContainer>
+                name={contentField.name}
-            {(contentType?.fields || []).map((contentField, index) => (
+                control={control}
-              <ContentItem key={contentField.name}>
+                defaultValue={
-                <Controller
+                  content ? content["dynamicFields"][contentField.name] : null
-                  name={contentField.name}
+                }
-                  control={control}
+                rules={
-                  defaultValue={
+                  contentField.name === "title"
-                    content ? content["dynamicFields"][contentField.name] : null
+                    ? validationRules.title
-                  }
+                    : contentField.type === ContentFieldType.URL
-                  rules={
+                    ? validationRules.url
-                    contentField.name === "title"
+                    : undefined
-                      ? validationRules.title
+                }
-                      : contentField.type === ContentFieldType.URL
+                render={({ field }) => (
-                      ? validationRules.url
+                  <FormControl fullWidth sx={{ paddingTop: ".75rem" }}>
-                      : undefined
+                    <ContentFieldInput
-                  }
+                      contentField={contentField}
-                  render={({ field }) => (
+                      field={field}
-                    <FormControl fullWidth sx={{ paddingTop: ".75rem" }}>
+                      errors={errors}
-                      <ContentFieldInput
+                      idx={index}
-                        contentField={contentField}
+                    />
-                        field={field}
+                  </FormControl>
-                        errors={errors}
+                )}
-                        idx={index}
+              />
-                      />
+            </ContentItem>
-                    </FormControl>
+          ))}
-                  )}
+        </ContentContainer>
-                />
-              </ContentItem>
-            ))}
-          </ContentContainer>
-        </DialogContent>
-        <DialogActions>
-          <DialogButtons closeDialog={closeDialog} />
-        </DialogActions>
       </form>
-    </Dialog>
+    </Wrapper>
   );
 };

frontend/src/components/contents/ContentFormDialog.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 { ContentForm, ContentFormData } from "./ContentForm";
+
+export const ContentFormDialog = <T extends ContentFormData = ContentFormData>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={ContentForm}
+    rowKey="content"
+    addText="title.new_content"
+    editText="title.edit_node"
+    {...props}
+  />
+);

frontend/src/components/contents/ContentImportForm.tsx

@@ -6,72 +6,62 @@
  * 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 { FC, Fragment, useState } from "react";
-import CloseIcon from "@mui/icons-material/Close";
-import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
-import { FC, useState } from "react";
 import { useQuery } from "react-query";
 
 import AttachmentInput from "@/app-components/attachment/AttachmentInput";
-import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
+import { ContentContainer, ContentItem } from "@/app-components/dialogs/";
-import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
-import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
 import { useApiClient } from "@/hooks/useApiClient";
-import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
 import { useTranslate } from "@/hooks/useTranslate";
 import { AttachmentResourceRef } from "@/types/attachment.types";
+import { ComponentFormProps } from "@/types/common/dialogs.types";
 import { IContentType } from "@/types/content-type.types";
 
-export type ContentImportDialogProps = DialogControlProps<{
+export type ContentImportFormData = { row: null; contentType: IContentType };
-  contentType?: IContentType;
+export const ContentImportForm: FC<
-}>;
+  ComponentFormProps<ContentImportFormData>
-
+> = ({ data, Wrapper = Fragment, WrapperProps, ...rest }) => {
-export const ContentImportDialog: FC<ContentImportDialogProps> = ({
-  open,
-  data,
-  closeDialog,
-  ...rest
-}) => {
   const [attachmentId, setAttachmentId] = useState<string | null>(null);
   const { t } = useTranslate();
   const { toast } = useToast();
   const { apiClient } = useApiClient();
   const { refetch, isFetching } = useQuery(
-    ["importContent", data?.contentType?.id, attachmentId],
+    ["importContent", data?.contentType.id, attachmentId],
     async () => {
-      if (data?.contentType?.id && attachmentId) {
+      if (data?.contentType.id && attachmentId) {
         await apiClient.importContent(data.contentType.id, attachmentId);
       }
     },
     {
       enabled: false,
-      onSuccess: () => {
-        handleCloseDialog();
-        toast.success(t("message.success_save"));
-        if (rest.callback) {
-          rest.callback();
-        }
-      },
       onError: () => {
+        rest.onError?.();
         toast.error(t("message.internal_server_error"));
       },
+      onSuccess: () => {
+        rest.onSuccess?.();
+        toast.success(t("message.success_save"));
+      },
     },
   );
-  const handleCloseDialog = () => {
-    closeDialog();
-    setAttachmentId(null);
-  };
   const handleImportClick = () => {
-    if (attachmentId && data?.contentType?.id) {
+    if (attachmentId && data?.contentType.id) {
       refetch();
     }
   };
 
   return (
-    <Dialog open={open} fullWidth onClose={handleCloseDialog} {...rest}>
+    <Wrapper
-      <DialogTitle onClose={handleCloseDialog}>{t("title.import")}</DialogTitle>
+      open={!!WrapperProps?.open}
-      <DialogContent>
+      onSubmit={handleImportClick}
+      {...WrapperProps}
+      confirmButtonProps={{
+        ...WrapperProps?.confirmButtonProps,
+        disabled: !attachmentId || isFetching,
+      }}
+    >
+      <form onSubmit={handleImportClick}>
         <ContentContainer>
           <ContentItem>
             <AttachmentInput
@@ -86,23 +76,7 @@ export const ContentImportDialog: FC<ContentImportDialogProps> = ({
             />
           </ContentItem>
         </ContentContainer>
-      </DialogContent>
+      </form>
-      <DialogActions>
+    </Wrapper>
-        <Button
-          disabled={!attachmentId || isFetching}
-          onClick={handleImportClick}
-        >
-          {t("button.import")}
-        </Button>
-        <Button
-          startIcon={<CloseIcon />}
-          variant="outlined"
-          onClick={handleCloseDialog}
-          disabled={isFetching}
-        >
-          {t("button.cancel")}
-        </Button>
-      </DialogActions>
-    </Dialog>
   );
 };

frontend/src/components/contents/ContentImportFormDialog.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 { ContentImportForm, ContentImportFormData } from "./ContentImportForm";
+
+export const ContentImportFormDialog = <
+  T extends ContentImportFormData = ContentImportFormData,
+>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={ContentImportForm}
+    rowKey="row"
+    addText="button.import"
+    confirmButtonProps={{ value: "button.import" }}
+    {...props}
+  />
+);

frontend/src/components/contents/index.tsx

@@ -14,7 +14,7 @@ import { Button, Chip, Grid, Paper, Switch, Typography } from "@mui/material";
 import Link from "next/link";
 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,
@@ -26,54 +26,38 @@ import { useDelete } from "@/hooks/crud/useDelete";
 import { useFind } from "@/hooks/crud/useFind";
 import { useGet, useGetFromCache } from "@/hooks/crud/useGet";
 import { useUpdate } from "@/hooks/crud/useUpdate";
-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";
 import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType, Format } from "@/services/types";
-import { IContentType } from "@/types/content-type.types";
 import { IContent } from "@/types/content.types";
 import { PermissionAction } from "@/types/permission.types";
 import { getDateTimeFormatter } from "@/utils/date";
 
-import { ContentDialog } from "./ContentDialog";
+import { ContentFormDialog } from "./ContentFormDialog";
-import { ContentImportDialog } from "./ContentImportDialog";
+import { ContentImportFormDialog } from "./ContentImportFormDialog";
 
 export const Contents = () => {
   const { t } = useTranslate();
   const { toast } = useToast();
   const { query } = useRouter();
-  // Dialog Controls
+  const dialogs = useDialogs();
-  const addDialogCtl = useDialog<{
-    content?: IContent;
-    contentType?: IContentType;
-  }>(false);
-  const editDialogCtl = useDialog<{
-    content?: IContent;
-    contentType?: IContentType;
-  }>(false);
-  const deleteDialogCtl = useDialog<string>(false);
   // data fetching
   const { onSearch, searchPayload } = useSearch<IContent>({
     $eq: [{ entity: String(query.id) }],
     $iLike: ["title"],
   });
-  const importDialogCtl = useDialog<{
-    contentType?: IContentType;
-  }>(false);
   const hasPermission = useHasPermission();
-  const { data: contentType } = useGet(String(query.id), {
-    entity: EntityType.CONTENT_TYPE,
-  });
   const { dataGridProps, refetch } = useFind(
     { entity: EntityType.CONTENT, format: Format.FULL },
     {
       params: searchPayload,
     },
   );
-  const { mutateAsync: updateContent } = useUpdate(EntityType.CONTENT, {
+  const { mutate: updateContent } = useUpdate(EntityType.CONTENT, {
     onError: (error) => {
       toast.error(error.message || t("message.internal_server_error"));
     },
@@ -81,9 +65,8 @@ export const Contents = () => {
       toast.success(t("message.success_save"));
     },
   });
-  const { mutateAsync: deleteContent } = useDelete(EntityType.CONTENT, {
+  const { mutate: deleteContent } = useDelete(EntityType.CONTENT, {
     onSuccess: () => {
-      deleteDialogCtl.closeDialog();
       toast.success(t("message.item_delete_success"));
     },
   });
@@ -93,22 +76,25 @@ export const Contents = () => {
     [
       {
         label: ActionColumnLabel.Edit,
-        action: (content) =>
+        action: (row) =>
-          editDialogCtl.openDialog({
+          dialogs.open(ContentFormDialog, { content: row, contentType }),
-            contentType,
-            content,
-          }),
         requires: [PermissionAction.UPDATE],
       },
       {
         label: ActionColumnLabel.Delete,
-        action: (content) => deleteDialogCtl.openDialog(content.id),
+        action: async ({ id }) => {
+          const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
+
+          if (isConfirmed) {
+            deleteContent(id);
+          }
+        },
         requires: [PermissionAction.DELETE],
       },
     ],
     t("label.operations"),
   );
-  const { data } = useGet(String(query.id), {
+  const { data: contentType } = useGet(String(query.id), {
     entity: EntityType.CONTENT_TYPE,
   });
 
@@ -123,7 +109,9 @@ export const Contents = () => {
 
         <PageHeader
           icon={faAlignLeft}
-          chip={<Chip label={data?.name} size="medium" variant="title" />}
+          chip={
+            <Chip label={contentType?.name} size="medium" variant="title" />
+          }
           title={t("title.content")}
         >
           <Grid justifyContent="flex-end" gap={1} container alignItems="center">
@@ -135,7 +123,9 @@ export const Contents = () => {
                 <Button
                   startIcon={<AddIcon />}
                   variant="contained"
-                  onClick={() => addDialogCtl.openDialog({ contentType })}
+                  onClick={() =>
+                    dialogs.open(ContentFormDialog, { contentType })
+                  }
                   sx={{ float: "right" }}
                 >
                   {t("button.add")}
@@ -147,7 +137,15 @@ export const Contents = () => {
                 <Button
                   startIcon={<UploadIcon />}
                   variant="contained"
-                  onClick={() => importDialogCtl.openDialog({ contentType })}
+                  onClick={async () => {
+                    if (contentType) {
+                      await dialogs.open(ContentImportFormDialog, {
+                        row: null,
+                        contentType,
+                      });
+                      refetch();
+                    }
+                  }}
                   sx={{ float: "right" }}
                 >
                   {t("button.import")}
@@ -159,21 +157,6 @@ export const Contents = () => {
       </Grid>
       <Grid item>
         <Paper>
-          <ContentDialog {...getDisplayDialogs(addDialogCtl)} />
-          <ContentDialog {...getDisplayDialogs(editDialogCtl)} />
-          <ContentImportDialog
-            {...getDisplayDialogs(importDialogCtl)}
-            callback={() => {
-              refetch();
-            }}
-          />
-          <DeleteDialog
-            {...deleteDialogCtl}
-            callback={() => {
-              if (deleteDialogCtl?.data) deleteContent(deleteDialogCtl.data);
-            }}
-          />
-
           <Grid padding={2} container>
             <Grid item width="100%">
               <DataGrid<IContent>