Merge pull request #710 from Hexastack/709-refactor-subscribers-dialogs-manage

refactor(frontend): update subscriber dialogs

frontend/public/locales/en/translation.json

@@ -210,6 +210,7 @@
     "new_label": "New Label",
     "edit_label": "Edit Label",
     "subscribers": "Subscribers",
+    "manage_subscribers": "Manage Subscribers",
     "manage_labels": "Manage Labels",
     "users": "Users",
     "manage_roles": "Manage Roles",

frontend/public/locales/fr/translation.json

@@ -210,6 +210,7 @@
     "new_label": "Nouvelle étiquette",
     "edit_label": "Modifier l'étiquette",
     "subscribers": "Abonnés",
+    "manage_subscribers": "Gérer les abonnés",
     "manage_labels": "Gérer les étiquettes",
     "users": "Utilisateurs",
     "manage_roles": "Gérer les rôles",

frontend/src/components/subscribers/EditSubscriberDialog.tsx

@@ -1,146 +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 {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  Grid,
-} from "@mui/material";
-import Link from "next/link";
-import { useEffect, FC, useState } from "react";
-import { Controller, 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 AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
-import { Input } from "@/app-components/inputs/Input";
-import { useUpdate } from "@/hooks/crud/useUpdate";
-import { DialogControlProps } from "@/hooks/useDialog";
-import { useToast } from "@/hooks/useToast";
-import { useTranslate } from "@/hooks/useTranslate";
-import { EntityType, Format } from "@/services/types";
-import { ILabel } from "@/types/label.types";
-import { ISubscriber, ISubscriberAttributes } from "@/types/subscriber.types";
-
-const getFullName = (val: ISubscriber) => `${val.first_name} ${val.last_name}`;
-
-export type EditSubscriberDialogProps = DialogControlProps<{
-  labels: ILabel[];
-  subscriber: ISubscriber;
-}>;
-export const EditSubscriberDialog: FC<EditSubscriberDialogProps> = ({
-  open,
-  data,
-  closeDialog,
-  ...rest
-}) => {
-  const { t } = useTranslate();
-  const { toast } = useToast();
-  const [fullName, setFullName] = useState<string>("");
-  const { mutateAsync: updateSubscriber } = useUpdate(EntityType.SUBSCRIBER, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
-    },
-    onSuccess() {
-      closeDialog();
-      toast.success(t("message.success_save"));
-    },
-  });
-  const {
-    reset,
-    control,
-    formState: { errors },
-    handleSubmit,
-  } = useForm<ISubscriberAttributes>();
-  const validationRules = {
-    labels: {},
-  };
-  const onSubmitForm = async (params: ISubscriberAttributes) => {
-    if (data?.subscriber.id)
-      updateSubscriber({ id: data?.subscriber.id, params });
-  };
-
-  useEffect(() => {
-    if (data?.subscriber) setFullName(getFullName(data?.subscriber));
-
-    if (open) {
-      reset({ labels: data?.subscriber?.labels });
-    }
-  }, [open, reset, data]);
-
-  return (
-    <Dialog open={open} fullWidth onClose={closeDialog} {...rest}>
-      <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={closeDialog}>
-          {t("title.manage_labels")}
-        </DialogTitle>
-        <DialogContent>
-          <ContentContainer>
-            <ContentItem>
-              <Input
-                label={t("label.auth_user")}
-                disabled
-                InputProps={{
-                  readOnly: true,
-                }}
-                value={fullName}
-              />
-            </ContentItem>
-            <ContentItem>
-              <Grid container gap="20px">
-                <Grid item xs>
-                  <Controller
-                    name="labels"
-                    rules={validationRules.labels}
-                    control={control}
-                    render={({ field }) => {
-                      const { onChange, ...rest } = field;
-
-                      return (
-                        <AutoCompleteEntitySelect<ILabel>
-                          autoFocus
-                          searchFields={["name"]}
-                          entity={EntityType.LABEL}
-                          format={Format.BASIC}
-                          labelKey="name"
-                          label={t("label.labels")}
-                          multiple
-                          {...field}
-                          error={!!errors.labels}
-                          helperText={
-                            errors.labels ? errors.labels.message : null
-                          }
-                          onChange={(_e, selected) =>
-                            onChange(selected.map(({ id }) => id))
-                          }
-                          {...rest}
-                        />
-                      );
-                    }}
-                  />
-                </Grid>
-                <Grid alignContent="center">
-                  <Link href="/subscribers/labels">
-                    <Button variant="contained">{t("button.manage")}</Button>
-                  </Link>
-                </Grid>
-              </Grid>
-            </ContentItem>
-          </ContentContainer>
-        </DialogContent>
-        <DialogActions>
-          <DialogButtons closeDialog={closeDialog} />
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-};

frontend/src/components/subscribers/SubscriberForm.tsx

@@ -0,0 +1,124 @@
+/*
+ * 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 { Button, Grid, Link } from "@mui/material";
+import { FC, Fragment, useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+
+import { ContentContainer, ContentItem } from "@/app-components/dialogs/";
+import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
+import { Input } from "@/app-components/inputs/Input";
+import { useUpdate } from "@/hooks/crud/useUpdate";
+import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
+import { EntityType, Format } from "@/services/types";
+import { ComponentFormProps } from "@/types/common/dialogs.types";
+import { ILabel } from "@/types/label.types";
+import { ISubscriber, ISubscriberAttributes } from "@/types/subscriber.types";
+
+const getFullName = (subscriber: ISubscriber | null) =>
+  `${subscriber?.first_name} ${subscriber?.last_name}`;
+
+export const SubscriberForm: FC<ComponentFormProps<ISubscriber>> = ({
+  data,
+  Wrapper = Fragment,
+  WrapperProps,
+  ...rest
+}) => {
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const { mutate: updateSubscriber } = useUpdate(EntityType.SUBSCRIBER, {
+    onError: () => {
+      rest.onError?.();
+      toast.error(t("message.internal_server_error"));
+    },
+    onSuccess() {
+      rest.onSuccess?.();
+      toast.success(t("message.success_save"));
+    },
+  });
+  const {
+    reset,
+    control,
+    formState: { errors },
+    handleSubmit,
+  } = useForm<ISubscriberAttributes>();
+  const onSubmitForm = (params: ISubscriberAttributes) => {
+    if (data?.id) {
+      updateSubscriber({ id: data.id, params });
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      reset({ labels: data?.labels });
+    }
+  }, [data, reset]);
+
+  return (
+    <Wrapper
+      open={!!WrapperProps?.open}
+      onSubmit={handleSubmit(onSubmitForm)}
+      {...WrapperProps}
+    >
+      <form onSubmit={handleSubmit(onSubmitForm)}>
+        <ContentContainer>
+          <ContentItem>
+            <Input
+              label={t("label.user")}
+              value={getFullName(data)}
+              disabled
+              InputProps={{
+                readOnly: true,
+              }}
+            />
+          </ContentItem>
+          <ContentItem>
+            <Grid container gap="20px">
+              <Grid item xs>
+                <Controller
+                  name="labels"
+                  render={({ field }) => {
+                    const { onChange, ...rest } = field;
+
+                    return (
+                      <AutoCompleteEntitySelect<ILabel>
+                        autoFocus
+                        searchFields={["name"]}
+                        entity={EntityType.LABEL}
+                        format={Format.BASIC}
+                        labelKey="name"
+                        label={t("label.labels")}
+                        multiple
+                        {...field}
+                        error={!!errors.labels}
+                        helperText={
+                          errors.labels ? errors.labels.message : null
+                        }
+                        onChange={(_e, selected) =>
+                          onChange(selected.map(({ id }) => id))
+                        }
+                        {...rest}
+                      />
+                    );
+                  }}
+                  control={control}
+                />
+              </Grid>
+              <Grid alignContent="center">
+                <Link href="/subscribers/labels">
+                  <Button variant="contained">{t("button.manage")}</Button>
+                </Link>
+              </Grid>
+            </Grid>
+          </ContentItem>
+        </ContentContainer>
+      </form>
+    </Wrapper>
+  );
+};

frontend/src/components/subscribers/SubscriberFormDialog.tsx

@@ -0,0 +1,23 @@
+/*
+ * 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 { ISubscriber } from "@/types/subscriber.types";
+
+import { SubscriberForm } from "./SubscriberForm";
+
+export const SubscriberFormDialog = <T extends ISubscriber = ISubscriber>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={SubscriberForm}
+    editText="title.manage_subscribers"
+    {...props}
+  />
+);

frontend/src/components/subscribers/index.tsx

@@ -10,7 +10,7 @@ import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import DeleteIcon from "@mui/icons-material/Close";
 import { Grid, IconButton, MenuItem, Paper } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
-import React, { useState } from "react";
+import { useState } from "react";
 
 import { ChipEntity } from "@/app-components/displays/ChipEntity";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
@@ -23,23 +23,19 @@ import { renderHeader } from "@/app-components/tables/columns/renderHeader";
 import { buildRenderPicture } from "@/app-components/tables/columns/renderPicture";
 import { DataGrid } from "@/app-components/tables/DataGrid";
 import { useFind } from "@/hooks/crud/useFind";
-import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
+import { useDialogs } from "@/hooks/useDialogs";
 import { useSearch } from "@/hooks/useSearch";
 import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType, Format } from "@/services/types";
-import { ILabel } from "@/types/label.types";
 import { ISubscriber } from "@/types/subscriber.types";
 import { getDateTimeFormatter } from "@/utils/date";
 
-import { EditSubscriberDialog } from "./EditSubscriberDialog";
+import { SubscriberFormDialog } from "./SubscriberFormDialog";
 
 export const Subscribers = () => {
   const { t } = useTranslate();
-  const editDialogCtl = useDialog<{
+  const dialogs = useDialogs();
-    labels: ILabel[];
-    subscriber: ISubscriber;
-  }>(false);
   const { data: labels } = useFind(
     {
       entity: EntityType.LABEL,
@@ -155,11 +151,7 @@ export const Subscribers = () => {
       [
         {
           label: ActionColumnLabel.Manage_Labels,
-          action: (row) =>
+          action: (row) => dialogs.open(SubscriberFormDialog, row),
-            editDialogCtl.openDialog({
-              labels: labels || [],
-              subscriber: row,
-            }),
         },
       ],
       t("label.operations"),
@@ -168,7 +160,6 @@ export const Subscribers = () => {
 
   return (
     <Grid container gap={3} flexDirection="column">
-      <EditSubscriberDialog {...getDisplayDialogs(editDialogCtl)} />
       <PageHeader icon={AccountCircleIcon} title={t("title.subscribers")}>
         <Grid
           justifyContent="flex-end"