refactor(frontend): update contextVar dialogs

2025-05-09 07:09:42 +00:00 · 2025-02-05 11:31:41 +01:00 · 2025-02-05 11:31:41 +01:00 · 4ed0d5976c
commit 4ed0d5976c
parent 2afb813cee
4 changed files with 233 additions and 222 deletions
--- a/frontend/src/components/context-vars/ContextVarDialog.tsx
+++ b/frontend/src/components/context-vars/ContextVarDialog.tsx
@ -1,165 +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,
-  DialogActions,
-  DialogContent,
-  FormControlLabel,
-  FormHelperText,
-  Switch,
-} from "@mui/material";
-import { FC, useEffect } 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 { 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 { IContextVar, IContextVarAttributes } from "@/types/context-var.types";
-import { slugify } from "@/utils/string";
-
-export type ContextVarDialogProps = DialogControlProps<IContextVar>;
-export const ContextVarDialog: FC<ContextVarDialogProps> = ({
-  open,
-  data,
-  closeDialog,
-  ...rest
-}) => {
-  const { t } = useTranslate();
-  const { toast } = useToast();
-  const { mutateAsync: createContextVar } = useCreate(EntityType.CONTEXT_VAR, {
-    onError: (error) => {
-      toast.error(error);
-    },
-    onSuccess() {
-      closeDialog();
-      toast.success(t("message.success_save"));
-    },
-  });
-  const { mutateAsync: updateContextVar } = useUpdate(EntityType.CONTEXT_VAR, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
-    },
-    onSuccess() {
-      closeDialog();
-      toast.success(t("message.success_save"));
-    },
-  });
-  const {
-    reset,
-    register,
-    setValue,
-    handleSubmit,
-    formState: { errors },
-    control,
-  } = useForm<IContextVarAttributes>({
-    defaultValues: {
-      name: data?.name || "",
-      label: data?.label || "",
-      permanent: data?.permanent || false,
-    },
-  });
-  const validationRules = {
-    label: {
-      required: t("message.label_is_required"),
-    },
-    name: {
-      pattern: {
-        value: /^[a-z_0-9]+$/,
-        message: t("message.context_vars_name_is_invalid"),
-      },
-    },
-  };
-  const onSubmitForm = async (params: IContextVarAttributes) => {
-    if (data) {
-      updateContextVar({ id: data.id, params });
-    } else {
-      createContextVar(params);
-    }
-  };
-
-  useEffect(() => {
-    if (open) reset();
-  }, [open, reset]);
-
-  useEffect(() => {
-    if (data) {
-      reset({
-        label: data.label,
-        name: data.name,
-        permanent: data.permanent,
-      });
-    } else {
-      reset();
-    }
-  }, [data, reset]);
-
-  return (
-    <Dialog open={open} fullWidth onClose={closeDialog} {...rest}>
-      <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={closeDialog}>
-          {data ? t("title.edit_context_var") : t("title.new_context_var")}
-        </DialogTitle>
-        <DialogContent>
-          <ContentContainer>
-            <ContentItem>
-              <Input
-                label={t("label.label")}
-                error={!!errors.label}
-                required
-                autoFocus
-                {...register("label", validationRules.label)}
-                InputProps={{
-                  onChange: ({ target: { value } }) => {
-                    setValue("label", value);
-                    setValue("name", slugify(value));
-                  },
-                }}
-                helperText={errors.label ? errors.label.message : null}
-              />
-            </ContentItem>
-            <ContentItem>
-              <Input
-                label={t("label.name")}
-                error={!!errors.name}
-                disabled
-                {...register("name", validationRules.name)}
-                helperText={errors.name ? errors.name.message : null}
-                InputLabelProps={{ shrink: true }}
-              />
-            </ContentItem>
-            <ContentItem>
-              <Controller
-                name="permanent"
-                control={control}
-                render={({ field }) => (
-                  <FormControlLabel
-                    control={<Switch {...field} checked={field.value} />}
-                    label={t("label.permanent")}
-                  />
-                )}
-              />
-              <FormHelperText>{t("help.permanent")}</FormHelperText>
-            </ContentItem>
-          </ContentContainer>
-        </DialogContent>
-        <DialogActions>
-          <DialogButtons closeDialog={closeDialog} />
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-};
--- a/frontend/src/components/context-vars/ContextVarForm.tsx
+++ b/frontend/src/components/context-vars/ContextVarForm.tsx
@ -0,0 +1,146 @@
+/*
+ * 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 { FormControlLabel, FormHelperText, Switch } from "@mui/material";
+import { FC, Fragment, useEffect } from "react";
+import { Controller, 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 { IContextVar, IContextVarAttributes } from "@/types/context-var.types";
+import { slugify } from "@/utils/string";
+
+export const ContextVarForm: FC<ComponentFormProps<IContextVar>> = ({
+  data,
+  Wrapper = Fragment,
+  WrapperProps,
+  ...rest
+}) => {
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const options = {
+    onError: (error: Error) => {
+      rest.onError?.();
+      toast.error(error || t("message.internal_server_error"));
+    },
+    onSuccess: () => {
+      rest.onSuccess?.();
+      toast.success(t("message.success_save"));
+    },
+  };
+  const { mutateAsync: createContextVar } = useCreate(
+    EntityType.CONTEXT_VAR,
+    options,
+  );
+  const { mutateAsync: updateContextVar } = useUpdate(
+    EntityType.CONTEXT_VAR,
+    options,
+  );
+  const {
+    reset,
+    control,
+    register,
+    setValue,
+    formState: { errors },
+    handleSubmit,
+  } = useForm<IContextVarAttributes>({
+    defaultValues: {
+      name: data?.name || "",
+      label: data?.label || "",
+      permanent: data?.permanent || false,
+    },
+  });
+  const validationRules = {
+    name: {
+      pattern: {
+        value: /^[a-z_0-9]+$/,
+        message: t("message.context_vars_name_is_invalid"),
+      },
+    },
+    label: {
+      required: t("message.label_is_required"),
+    },
+  };
+  const onSubmitForm = async (params: IContextVarAttributes) => {
+    if (data) {
+      updateContextVar({ id: data.id, params });
+    } else {
+      createContextVar(params);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        name: data.name,
+        label: data.label,
+        permanent: data.permanent,
+      });
+    } else {
+      reset();
+    }
+  }, [data, reset]);
+
+  return (
+    <Wrapper
+      open={!!WrapperProps?.open}
+      onSubmit={handleSubmit(onSubmitForm)}
+      {...WrapperProps}
+    >
+      <form onSubmit={handleSubmit(onSubmitForm)}>
+        <ContentContainer>
+          <ContentItem>
+            <Input
+              label={t("label.label")}
+              error={!!errors.label}
+              required
+              autoFocus
+              {...register("label", validationRules.label)}
+              InputProps={{
+                onChange: ({ target: { value } }) => {
+                  setValue("label", value);
+                  setValue("name", slugify(value));
+                },
+              }}
+              helperText={errors.label ? errors.label.message : null}
+            />
+          </ContentItem>
+          <ContentItem>
+            <Input
+              label={t("label.name")}
+              error={!!errors.name}
+              disabled
+              {...register("name", validationRules.name)}
+              helperText={errors.name ? errors.name.message : null}
+              InputLabelProps={{ shrink: true }}
+            />
+          </ContentItem>
+          <ContentItem>
+            <Controller
+              name="permanent"
+              control={control}
+              render={({ field }) => (
+                <FormControlLabel
+                  control={<Switch {...field} checked={field.value} />}
+                  label={t("label.permanent")}
+                />
+              )}
+            />
+            <FormHelperText>{t("help.permanent")}</FormHelperText>
+          </ContentItem>
+        </ContentContainer>
+      </form>
+    </Wrapper>
+  );
+};
--- a/frontend/src/components/context-vars/ContextVarFormDialog.tsx
+++ b/frontend/src/components/context-vars/ContextVarFormDialog.tsx
@ -0,0 +1,38 @@
+/*
+ * 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 { FC } from "react";
+
+import { FormDialog } from "@/app-components/dialogs";
+import { useTranslate } from "@/hooks/useTranslate";
+import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
+import { IContextVar } from "@/types/context-var.types";
+
+import { ContextVarForm } from "./ContextVarForm";
+
+export const ContextVarFormDialog: FC<
+  ComponentFormDialogProps<IContextVar>
+> = ({ payload, ...rest }) => {
+  const { t } = useTranslate();
+
+  return (
+    <ContextVarForm
+      data={payload}
+      onSuccess={() => {
+        rest.onClose(true);
+      }}
+      Wrapper={FormDialog}
+      WrapperProps={{
+        title: payload
+          ? t("title.edit_context_var")
+          : t("title.new_context_var"),
+        ...rest,
+      }}
+    />
+  );
+};
--- a/frontend/src/components/context-vars/index.tsx
+++ b/frontend/src/components/context-vars/index.tsx
@ -1,5 +1,5 @@
 /*
- * 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.
@ -11,9 +11,9 @@ import AddIcon from "@mui/icons-material/Add";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { Button, Grid, Paper, Switch } from "@mui/material";
 import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
-import React, { useState } from "react";
+import { useState } from "react";

-import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
+import { ConfirmDialogBody } from "@/app-components/dialogs";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
  ActionColumnLabel,
@ -25,7 +25,7 @@ import { useDelete } from "@/hooks/crud/useDelete";
 import { useDeleteMany } from "@/hooks/crud/useDeleteMany";
 import { useFind } from "@/hooks/crud/useFind";
 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";
@ -36,14 +36,12 @@ import { IContextVar } from "@/types/context-var.types";
 import { PermissionAction } from "@/types/permission.types";
 import { getDateTimeFormatter } from "@/utils/date";

-import { ContextVarDialog } from "./ContextVarDialog";
+import { ContextVarFormDialog } from "./ContextVarFormDialog";

 export const ContextVars = () => {
  const { t } = useTranslate();
  const { toast } = useToast();
-  const addDialogCtl = useDialog<IContextVar>(false);
-  const editDialogCtl = useDialog<IContextVar>(false);
-  const deleteDialogCtl = useDialog<string>(false);
+  const dialogs = useDialogs();
  const hasPermission = useHasPermission();
  const { onSearch, searchPayload } = useSearch<IContextVar>({
    $iLike: ["label"],
@ -54,7 +52,7 @@ export const ContextVars = () => {
      params: searchPayload,
    },
  );
-  const { mutateAsync: updateContextVar } = useUpdate(EntityType.CONTEXT_VAR, {
+  const { mutate: updateContextVar } = useUpdate(EntityType.CONTEXT_VAR, {
    onError: () => {
      toast.error(t("message.internal_server_error"));
    },
@ -62,41 +60,42 @@ export const ContextVars = () => {
      toast.success(t("message.success_save"));
    },
  });
-  const { mutateAsync: deleteContextVar } = useDelete(EntityType.CONTEXT_VAR, {
+  const { mutate: deleteContextVar } = useDelete(EntityType.CONTEXT_VAR, {
    onError: (error) => {
      toast.error(error);
    },
    onSuccess() {
-      deleteDialogCtl.closeDialog();
      setSelectedContextVars([]);
      toast.success(t("message.item_delete_success"));
    },
  });
-  const { mutateAsync: deleteContextVars } = useDeleteMany(
-    EntityType.CONTEXT_VAR,
-    {
-      onError: (error) => {
-        toast.error(error);
-      },
-      onSuccess: () => {
-        deleteDialogCtl.closeDialog();
-        setSelectedContextVars([]);
-        toast.success(t("message.item_delete_success"));
-      },
+  const { mutate: deleteContextVars } = useDeleteMany(EntityType.CONTEXT_VAR, {
+    onError: (error) => {
+      toast.error(error);
    },
-  );
+    onSuccess: () => {
+      setSelectedContextVars([]);
+      toast.success(t("message.item_delete_success"));
+    },
+  });
  const [selectedContextVars, setSelectedContextVars] = useState<string[]>([]);
  const actionColumns = useActionColumns<IContextVar>(
    EntityType.CONTEXT_VAR,
    [
      {
        label: ActionColumnLabel.Edit,
-        action: (row) => editDialogCtl.openDialog(row),
+        action: (row) => dialogs.open(ContextVarFormDialog, row),
        requires: [PermissionAction.UPDATE],
      },
      {
        label: ActionColumnLabel.Delete,
-        action: (row) => deleteDialogCtl.openDialog(row.id),
+        action: async ({ id }) => {
+          const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
+
+          if (isConfirmed) {
+            deleteContextVar(id);
+          }
+        },
        requires: [PermissionAction.DELETE],
      },
    ],
@ -119,9 +118,9 @@ export const ContextVars = () => {
      disableColumnMenu: true,
      renderHeader,
      headerAlign: "left",
-      renderCell: (params) => (
+      renderCell: ({ row, value }) => (
        <Switch
-          checked={params.value}
+          checked={value}
          color="primary"
          inputProps={{ "aria-label": "primary checkbox" }}
          disabled={
@ -129,8 +128,8 @@ export const ContextVars = () => {
          }
          onChange={() => {
            updateContextVar({
-              id: params.row.id,
-              params: { permanent: !params.value },
+              id: row.id,
+              params: { permanent: !value },
            });
          }}
        />
@ -166,21 +165,6 @@ export const ContextVars = () => {

  return (
    <Grid container gap={3} flexDirection="column">
-      <ContextVarDialog {...getDisplayDialogs(addDialogCtl)} />
-      <ContextVarDialog {...getDisplayDialogs(editDialogCtl)} />
-
-      <DeleteDialog
-        {...deleteDialogCtl}
-        callback={() => {
-          if (selectedContextVars.length > 0) {
-            deleteContextVars(selectedContextVars);
-            setSelectedContextVars([]);
-            deleteDialogCtl.closeDialog();
-          } else if (deleteDialogCtl?.data) {
-            deleteContextVar(deleteDialogCtl.data);
-          }
-        }}
-      />
      <PageHeader icon={faAsterisk} title={t("title.context_vars")}>
        <Grid
          justifyContent="flex-end"
@ -199,24 +183,32 @@ export const ContextVars = () => {
                startIcon={<AddIcon />}
                variant="contained"
                sx={{ float: "right" }}
-                onClick={() => addDialogCtl.openDialog()}
+                onClick={() => dialogs.open(ContextVarFormDialog, null)}
              >
                {t("button.add")}
              </Button>
            </Grid>
          ) : null}
-          {selectedContextVars.length > 0 && (
-            <Grid item>
-              <Button
-                startIcon={<DeleteIcon />}
-                variant="contained"
-                color="error"
-                onClick={() => deleteDialogCtl.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: selectedContextVars.length,
+                });
+
+                if (isConfirmed) {
+                  deleteContextVars(selectedContextVars);
+                }
+              }}
+              disabled={!selectedContextVars.length}
+            >
+              {t("button.delete")}
+            </Button>
+          </Grid>
        </Grid>
      </PageHeader>
      <Grid item xs={12}>