rafactor(frontend): integrate deleteCallbackHandler

2025-06-26 18:27:28 +00:00 · 2025-01-18 14:20:00 +01:00
parent 860bd54a55
commit 3709d15b7b
12 changed files with 83 additions and 147 deletions
--- a/frontend/src/components/categories/index.tsx
+++ b/frontend/src/components/categories/index.tsx
@@ -11,9 +11,9 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import FolderIcon from "@mui/icons-material/Folder";
 import { Button, Grid, Paper } from "@mui/material";
 import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
-import { useState } from "react";

 import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
+import { deleteCallbackHandler } from "@/app-components/dialogs/utils/deleteHandles";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
  ActionColumnLabel,
@@ -59,8 +59,7 @@ export const Categories = () => {
      toast.error(error.message || t("message.internal_server_error"));
    },
    onSuccess: () => {
-      deleteDialogCtl.closeDialog();
-      setSelectedCategories([]);
+      deleteDialogCtl.closeDialog(undefined, "postDelete");
      toast.success(t("message.item_delete_success"));
    },
  });
@@ -69,12 +68,10 @@ export const Categories = () => {
      toast.error(error.message || t("message.internal_server_error"));
    },
    onSuccess: () => {
-      deleteDialogCtl.closeDialog();
-      setSelectedCategories([]);
+      deleteDialogCtl.closeDialog(undefined, "postDelete");
      toast.success(t("message.item_delete_success"));
    },
  });
-  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
  const actionColumns = useActionColumns<ICategory>(
    EntityType.CATEGORY,
    [
@@ -125,9 +122,10 @@ export const Categories = () => {
    },
    actionColumns,
  ];
-  const handleSelectionChange = (selection: GridRowSelectionModel) => {
-    setSelectedCategories(selection as string[]);
-  };
+  const handleSelectionChange = (selection: GridRowSelectionModel) =>
+    deleteDialogCtl.saveData?.(
+      selection.length ? selection.toString() : undefined,
+    );

  return (
    <Grid container gap={3} flexDirection="column">
@@ -135,17 +133,7 @@ export const Categories = () => {
      <CategoryDialog {...getDisplayDialogs(editDialogCtl)} />
      <DeleteDialog
        {...deleteDialogCtl}
-        callback={async () => {
-          if (selectedCategories.length > 0) {
-            deleteCategories(selectedCategories), setSelectedCategories([]);
-            deleteDialogCtl.closeDialog();
-          } else if (deleteDialogCtl?.data) {
-            {
-              deleteCategory(deleteDialogCtl.data);
-              deleteDialogCtl.closeDialog();
-            }
-          }
-        }}
+        callback={deleteCallbackHandler(deleteCategory, deleteCategories)}
      />
      <Grid>
        <PageHeader icon={FolderIcon} title={t("title.categories")}>
@@ -172,13 +160,13 @@ export const Categories = () => {
                </Button>
              </Grid>
            ) : null}
-            {selectedCategories.length > 0 && (
+            {deleteDialogCtl?.data && (
              <Grid item>
                <Button
                  startIcon={<DeleteIcon />}
                  variant="contained"
                  color="error"
-                  onClick={() => deleteDialogCtl.openDialog(undefined)}
+                  onClick={() => deleteDialogCtl.openDialog()}
                >
                  {t("button.delete")}
                </Button>
--- a/frontend/src/components/content-types/index.tsx
+++ b/frontend/src/components/content-types/index.tsx
@@ -12,6 +12,7 @@ import { Button, Grid, Paper } from "@mui/material";
 import { useRouter } from "next/router";

 import { DeleteDialog } from "@/app-components/dialogs";
+import { deleteCallbackHandler } from "@/app-components/dialogs/utils/deleteHandles";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
  ActionColumnLabel,
@@ -120,10 +121,7 @@ export const ContentTypes = () => {
          <ContentTypeDialog {...getDisplayDialogs(addDialogCtl)} />
          <DeleteDialog
            {...deleteDialogCtl}
-            callback={() => {
-              if (deleteDialogCtl?.data)
-                deleteContentType(deleteDialogCtl.data);
-            }}
+            callback={deleteCallbackHandler(deleteContentType)}
          />
          <EditContentTypeFieldsDialog {...fieldsDialogCtl} />
          <Grid padding={2} container>
--- a/frontend/src/components/contents/index.tsx
+++ b/frontend/src/components/contents/index.tsx
@@ -15,6 +15,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";

 import { DeleteDialog } from "@/app-components/dialogs";
+import { deleteCallbackHandler } from "@/app-components/dialogs/utils/deleteHandles";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
  ActionColumnLabel,
@@ -169,9 +170,7 @@ export const Contents = () => {
          />
          <DeleteDialog
            {...deleteDialogCtl}
-            callback={() => {
-              if (deleteDialogCtl?.data) deleteContent(deleteDialogCtl.data);
-            }}
+            callback={deleteCallbackHandler(deleteContent)}
          />

          <Grid padding={2} container>
--- a/frontend/src/components/context-vars/index.tsx
+++ b/frontend/src/components/context-vars/index.tsx
@@ -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 { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
+import { deleteCallbackHandler } from "@/app-components/dialogs/utils/deleteHandles";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
  ActionColumnLabel,
@@ -67,8 +67,7 @@ export const ContextVars = () => {
      toast.error(error);
    },
    onSuccess() {
-      deleteDialogCtl.closeDialog();
-      setSelectedContextVars([]);
+      deleteDialogCtl.closeDialog(undefined, "postDelete");
      toast.success(t("message.item_delete_success"));
    },
  });
@@ -79,13 +78,11 @@ export const ContextVars = () => {
        toast.error(error);
      },
      onSuccess: () => {
-        deleteDialogCtl.closeDialog();
-        setSelectedContextVars([]);
+        deleteDialogCtl.closeDialog(undefined, "postDelete");
        toast.success(t("message.item_delete_success"));
      },
    },
  );
-  const [selectedContextVars, setSelectedContextVars] = useState<string[]>([]);
  const actionColumns = useActionColumns<IContextVar>(
    EntityType.CONTEXT_VAR,
    [
@@ -160,9 +157,10 @@ export const ContextVars = () => {
    },
    actionColumns,
  ];
-  const handleSelectionChange = (selection: GridRowSelectionModel) => {
-    setSelectedContextVars(selection as string[]);
-  };
+  const handleSelectionChange = (selection: GridRowSelectionModel) =>
+    deleteDialogCtl.saveData?.(
+      selection.length ? selection.toString() : undefined,
+    );

  return (
    <Grid container gap={3} flexDirection="column">
@@ -171,15 +169,7 @@ export const ContextVars = () => {

      <DeleteDialog
        {...deleteDialogCtl}
-        callback={() => {
-          if (selectedContextVars.length > 0) {
-            deleteContextVars(selectedContextVars);
-            setSelectedContextVars([]);
-            deleteDialogCtl.closeDialog();
-          } else if (deleteDialogCtl?.data) {
-            deleteContextVar(deleteDialogCtl.data);
-          }
-        }}
+        callback={deleteCallbackHandler(deleteContextVar, deleteContextVars)}
      />
      <PageHeader icon={faAsterisk} title={t("title.context_vars")}>
        <Grid
@@ -205,7 +195,7 @@ export const ContextVars = () => {
              </Button>
            </Grid>
          ) : null}
-          {selectedContextVars.length > 0 && (
+          {deleteDialogCtl?.data && (
            <Grid item>
              <Button
                startIcon={<DeleteIcon />}
--- a/frontend/src/components/labels/index.tsx
+++ b/frontend/src/components/labels/index.tsx
@@ -10,9 +10,9 @@ import { faTags } from "@fortawesome/free-solid-svg-icons";
 import AddIcon from "@mui/icons-material/Add";
 import { Button, Grid, Paper } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
-import React from "react";

 import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
+import { deleteCallbackHandler } from "@/app-components/dialogs/utils/deleteHandles";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
  ActionColumnLabel,
@@ -153,9 +153,7 @@ export const Labels = () => {
      <LabelDialog {...getDisplayDialogs(editDialogCtl)} />
      <DeleteDialog
        {...deleteDialogCtl}
-        callback={() => {
-          if (deleteDialogCtl?.data) deleteLabel(deleteDialogCtl.data);
-        }}
+        callback={deleteCallbackHandler(deleteLabel)}
      />
      <PageHeader icon={faTags} title={t("title.labels")}>
        <Grid
--- a/frontend/src/components/languages/index.tsx
+++ b/frontend/src/components/languages/index.tsx
@@ -13,6 +13,7 @@ import { GridColDef } from "@mui/x-data-grid";
 import { useQueryClient } from "react-query";

 import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
+import { deleteCallbackHandler } from "@/app-components/dialogs/utils/deleteHandles";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
  ActionColumnLabel,
@@ -186,9 +187,7 @@ export const Languages = () => {
      <LanguageDialog {...getDisplayDialogs(editDialogCtl)} />
      <DeleteDialog
        {...deleteDialogCtl}
-        callback={() => {
-          if (deleteDialogCtl?.data) deleteLanguage(deleteDialogCtl.data);
-        }}
+        callback={deleteCallbackHandler(deleteLanguage)}
      />
      <PageHeader icon={Flag} title={t("title.languages")}>
        <Grid
--- a/frontend/src/components/media-library/index.tsx
+++ b/frontend/src/components/media-library/index.tsx
@@ -6,13 +6,13 @@
 * 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 DriveFolderUploadIcon from "@mui/icons-material/DriveFolderUpload";
 import { Box, Grid, Paper } from "@mui/material";
 import { GridColDef, GridEventListener } from "@mui/x-data-grid";

 import AttachmentThumbnail from "@/app-components/attachment/AttachmentThumbnail";
 import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
+import { deleteCallbackHandler } from "@/app-components/dialogs/utils/deleteHandles";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
  ActionColumnLabel,
@@ -176,9 +176,7 @@ export const MediaLibrary = ({ onSelect, accept }: MediaLibraryProps) => {
    <Grid container gap={3} flexDirection="column">
      <DeleteDialog
        {...deleteDialogCtl}
-        callback={() => {
-          if (deleteDialogCtl?.data) deleteCategory(deleteDialogCtl.data);
-        }}
+        callback={deleteCallbackHandler(deleteCategory)}
      />
      <PageHeader title={t("title.media_library")} icon={DriveFolderUploadIcon}>
        <Grid
--- a/frontend/src/components/nlp/components/NlpEntity.tsx
+++ b/frontend/src/components/nlp/components/NlpEntity.tsx
@@ -11,9 +11,9 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import { Button, Chip, Grid } from "@mui/material";
 import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
 import { useRouter } from "next/router";
-import { useState } from "react";

 import { DeleteDialog } from "@/app-components/dialogs";
+import { deleteCallbackHandler } from "@/app-components/dialogs/utils/deleteHandles";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
  ActionColumnLabel,
@@ -38,15 +38,16 @@ import { NlpEntityDialog } from "../NlpEntityDialog";

 const NlpEntity = () => {
  const router = useRouter();
-  const deleteEntityDialogCtl = useDialog<string>(false);
+  const addDialogCtl = useDialog<INlpEntity>(false);
+  const editDialogCtl = useDialog<INlpEntity>(false);
+  const deleteDialogCtl = useDialog<string>(false);
  const hasPermission = useHasPermission();
-  const editEntityDialogCtl = useDialog<INlpEntity>(false);
  const { mutateAsync: deleteNlpEntity } = useDelete(EntityType.NLP_ENTITY, {
    onError: () => {
      toast.error(t("message.internal_server_error"));
    },
    onSuccess() {
-      deleteEntityDialogCtl.closeDialog();
+      deleteDialogCtl.closeDialog(undefined, "postDelete");
      toast.success(t("message.item_delete_success"));
    },
  });
@@ -57,14 +58,11 @@ const NlpEntity = () => {
        toast.error(error);
      },
      onSuccess: () => {
-        deleteEntityDialogCtl.closeDialog();
-        setSelectedNlpEntities([]);
+        deleteDialogCtl.closeDialog(undefined, "postDelete");
        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>({
@@ -100,12 +98,12 @@ const NlpEntity = () => {
      },
      {
        label: ActionColumnLabel.Edit,
-        action: (row) => editEntityDialogCtl.openDialog(row),
+        action: (row) => editDialogCtl.openDialog(row),
        requires: [PermissionAction.UPDATE],
      },
      {
        label: ActionColumnLabel.Delete,
-        action: (row) => deleteEntityDialogCtl.openDialog(row.id),
+        action: (row) => deleteDialogCtl.openDialog(row.id),
        requires: [PermissionAction.DELETE],
      },
    ],
@@ -171,27 +169,19 @@ const NlpEntity = () => {
    },
    actionEntityColumns,
  ];
-  const handleSelectionChange = (selection: GridRowSelectionModel) => {
-    setSelectedNlpEntities(selection as string[]);
-  };
+  const handleSelectionChange = (selection: GridRowSelectionModel) =>
+    deleteDialogCtl.saveData?.(
+      selection.length ? selection.toString() : undefined,
+    );

  return (
    <Grid item xs={12}>
      <NlpEntityDialog {...getDisplayDialogs(addDialogCtl)} />
-      <NlpEntityDialog {...editEntityDialogCtl} />
+      <NlpEntityDialog {...editDialogCtl} />
      <DeleteDialog
-        {...deleteEntityDialogCtl}
-        callback={() => {
-          if (selectedNlpEntities.length > 0) {
-            deleteNlpEntities(selectedNlpEntities);
-            setSelectedNlpEntities([]);
-            deleteEntityDialogCtl.closeDialog();
-          } else if (deleteEntityDialogCtl.data) {
-            deleteNlpEntity(deleteEntityDialogCtl.data);
-          }
-        }}
+        {...deleteDialogCtl}
+        callback={deleteCallbackHandler(deleteNlpEntity, deleteNlpEntities)}
      />
-
      <Grid
        justifyContent="flex-end"
        gap={1}
@@ -202,7 +192,6 @@ const NlpEntity = () => {
        <Grid item>
          <FilterTextfield onChange={onSearch} />
        </Grid>
-
        {hasPermission(EntityType.NLP_ENTITY, PermissionAction.CREATE) ? (
          <Grid item>
            <Button
@@ -215,20 +204,19 @@ const NlpEntity = () => {
            </Button>
          </Grid>
        ) : null}
-        {selectedNlpEntities.length > 0 && (
+        {deleteDialogCtl?.data && (
          <Grid item>
            <Button
              startIcon={<DeleteIcon />}
              variant="contained"
              color="error"
-              onClick={() => deleteEntityDialogCtl.openDialog(undefined)}
+              onClick={() => deleteDialogCtl.openDialog(undefined)}
            >
              {t("button.delete")}
            </Button>
          </Grid>
        )}
      </Grid>
-
      <Grid mt={3}>
        <DataGrid
          columns={nlpEntityColumns}
--- a/frontend/src/components/nlp/components/NlpSample.tsx
+++ b/frontend/src/components/nlp/components/NlpSample.tsx
@@ -27,6 +27,7 @@ import { useState } from "react";
 import { useQueryClient } from "react-query";

 import { DeleteDialog } from "@/app-components/dialogs";
+import { deleteCallbackHandler } from "@/app-components/dialogs/utils/deleteHandles";
 import { ChipEntity } from "@/app-components/displays/ChipEntity";
 import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
 import FileUploadButton from "@/app-components/inputs/FileInput";
@@ -73,8 +74,10 @@ const NLP_SAMPLE_TYPE_COLORS = {

 export default function NlpSample() {
  const { apiUrl } = useConfig();
-  const { toast } = useToast();
  const { t } = useTranslate();
+  const { toast } = useToast();
+  const editDialogCtl = useDialog<INlpDatasetSample>(false);
+  const deleteDialogCtl = useDialog<string>(false);
  const queryClient = useQueryClient();
  const [type, setType] = useState<NlpSampleType | "all">("all");
  const [language, setLanguage] = useState<string | undefined>(undefined);
@@ -97,7 +100,7 @@ export default function NlpSample() {
      toast.error(t("message.internal_server_error"));
    },
    onSuccess() {
-      deleteDialogCtl.closeDialog();
+      deleteDialogCtl.closeDialog(undefined, "postDelete");
      toast.success(t("message.item_delete_success"));
    },
  });
@@ -108,8 +111,7 @@ export default function NlpSample() {
        toast.error(error);
      },
      onSuccess: () => {
-        deleteDialogCtl.closeDialog();
-        setSelectedNlpSamples([]);
+        deleteDialogCtl.closeDialog(undefined, "postDelete");
        toast.success(t("message.item_delete_success"));
      },
    },
@@ -140,15 +142,12 @@ export default function NlpSample() {
      },
    },
  );
-  const [selectedNlpSamples, setSelectedNlpSamples] = useState<string[]>([]);
  const { dataGridProps } = useFind(
    { entity: EntityType.NLP_SAMPLE, format: Format.FULL },
    {
      params: searchPayload,
    },
  );
-  const deleteDialogCtl = useDialog<string>(false);
-  const editDialogCtl = useDialog<INlpDatasetSample>(false);
  const actionColumns = getActionsColumn<INlpSample>(
    [
      {
@@ -291,9 +290,10 @@ export default function NlpSample() {
    },
    actionColumns,
  ];
-  const handleSelectionChange = (selection: GridRowSelectionModel) => {
-    setSelectedNlpSamples(selection as string[]);
-  };
+  const handleSelectionChange = (selection: GridRowSelectionModel) =>
+    deleteDialogCtl.saveData?.(
+      selection.length ? selection.toString() : undefined,
+    );
  const handleImportChange = async (file: File) => {
    await importDataset(file);
  };
@@ -303,15 +303,7 @@ export default function NlpSample() {
      <NlpSampleDialog {...getDisplayDialogs(editDialogCtl)} />
      <DeleteDialog
        {...deleteDialogCtl}
-        callback={() => {
-          if (selectedNlpSamples.length > 0) {
-            deleteNlpSamples(selectedNlpSamples);
-            setSelectedNlpSamples([]);
-            deleteDialogCtl.closeDialog();
-          } else if (deleteDialogCtl.data) {
-            deleteNlpSample(deleteDialogCtl.data);
-          }
-        }}
+        callback={deleteCallbackHandler(deleteNlpSample, deleteNlpSamples)}
      />
      <Grid container alignItems="center">
        <Grid
@@ -406,7 +398,7 @@ export default function NlpSample() {
                {t("button.export")}
              </Button>
            ) : null}
-            {selectedNlpSamples.length > 0 && (
+            {deleteDialogCtl.data && (
              <Grid item>
                <Button
                  startIcon={<DeleteIcon />}
--- a/frontend/src/components/nlp/components/NlpValues.tsx
+++ b/frontend/src/components/nlp/components/NlpValues.tsx
@@ -16,6 +16,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";

 import { DeleteDialog } from "@/app-components/dialogs";
+import { deleteCallbackHandler } from "@/app-components/dialogs/utils/deleteHandles";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
  ActionColumnLabel,
@@ -42,14 +43,14 @@ import { getDateTimeFormatter } from "@/utils/date";
 import { NlpValueDialog } from "../NlpValueDialog";

 export const NlpValues = ({ entityId }: { entityId: string }) => {
-  const [direction, setDirection] = useState<"up" | "down">("up");
-  const deleteEntityDialogCtl = useDialog<string>(false);
-  const editValueDialogCtl = useDialog<INlpValue>(false);
-  const addNlpValueDialogCtl = useDialog<INlpValue>(false);
-  const hasPermission = useHasPermission();
  const router = useRouter();
  const { t } = useTranslate();
  const { toast } = useToast();
+  const addDialogCtl = useDialog<INlpValue>(false);
+  const editDialogCtl = useDialog<INlpValue>(false);
+  const deleteDialogCtl = useDialog<string>(false);
+  const hasPermission = useHasPermission();
+  const [direction, setDirection] = useState<"up" | "down">("up");
  const { data: nlpEntity, refetch: refetchEntity } = useGet(entityId, {
    entity: EntityType.NLP_ENTITY,
    format: Format.FULL,
@@ -69,7 +70,7 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
      toast.error(t("message.internal_server_error"));
    },
    onSuccess() {
-      deleteEntityDialogCtl.closeDialog();
+      deleteDialogCtl.closeDialog(undefined, "postDelete");
      toast.success(t("message.item_delete_success"));
      refetchEntity();
    },
@@ -79,22 +80,20 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
      toast.error(error);
    },
    onSuccess: () => {
-      deleteEntityDialogCtl.closeDialog();
-      setSelectedNlpValues([]);
+      deleteDialogCtl.closeDialog(undefined, "postDelete");
      toast.success(t("message.item_delete_success"));
    },
  });
-  const [selectedNlpValues, setSelectedNlpValues] = useState<string[]>([]);
  const actionColumns = useActionColumns<INlpValue>(
    EntityType.NLP_VALUE,
    [
      {
        label: ActionColumnLabel.Edit,
-        action: (row) => editValueDialogCtl.openDialog(row),
+        action: (row) => editDialogCtl.openDialog(row),
      },
      {
        label: ActionColumnLabel.Delete,
-        action: (row) => deleteEntityDialogCtl.openDialog(row.id),
+        action: (row) => deleteDialogCtl.openDialog(row.id),
      },
    ],
    t("label.operations"),
@@ -151,9 +150,10 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
  }, []);

  const canHaveSynonyms = nlpEntity?.lookups?.[0] === NlpLookups.keywords;
-  const handleSelectionChange = (selection: GridRowSelectionModel) => {
-    setSelectedNlpValues(selection as string[]);
-  };
+  const handleSelectionChange = (selection: GridRowSelectionModel) =>
+    deleteDialogCtl.saveData?.(
+      selection.length ? selection.toString() : undefined,
+    );

  return (
    <Grid container gap={2} flexDirection="column">
@@ -198,21 +198,19 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
                    <Button
                      startIcon={<AddIcon />}
                      variant="contained"
-                      onClick={() => addNlpValueDialogCtl.openDialog()}
+                      onClick={() => addDialogCtl.openDialog()}
                      sx={{ float: "right" }}
                    >
                      {t("button.add")}
                    </Button>
                  ) : null}
-                  {selectedNlpValues.length > 0 && (
+                  {deleteDialogCtl?.data && (
                    <Grid item>
                      <Button
                        startIcon={<DeleteIcon />}
                        variant="contained"
                        color="error"
-                        onClick={() =>
-                          deleteEntityDialogCtl.openDialog(undefined)
-                        }
+                        onClick={() => deleteDialogCtl.openDialog(undefined)}
                      >
                        {t("button.delete")}
                      </Button>
@@ -222,26 +220,18 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
              </Grid>
            </PageHeader>
            <NlpValueDialog
-              {...addNlpValueDialogCtl}
+              {...addDialogCtl}
              canHaveSynonyms={canHaveSynonyms}
              callback={() => {
                refetchEntity();
              }}
            />
            <DeleteDialog
-              {...deleteEntityDialogCtl}
-              callback={() => {
-                if (selectedNlpValues.length > 0) {
-                  deleteNlpValues(selectedNlpValues);
-                  setSelectedNlpValues([]);
-                  deleteEntityDialogCtl.closeDialog();
-                } else if (deleteEntityDialogCtl.data) {
-                  deleteNlpValue(deleteEntityDialogCtl.data);
-                }
-              }}
+              {...deleteDialogCtl}
+              callback={deleteCallbackHandler(deleteNlpValue, deleteNlpValues)}
            />
            <NlpValueDialog
-              {...editValueDialogCtl}
+              {...editDialogCtl}
              canHaveSynonyms={canHaveSynonyms}
              callback={() => {}}
            />
--- a/frontend/src/components/roles/index.tsx
+++ b/frontend/src/components/roles/index.tsx
@@ -10,9 +10,9 @@ import { faUniversalAccess } from "@fortawesome/free-solid-svg-icons";
 import AddIcon from "@mui/icons-material/Add";
 import { Button, Grid, Paper } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
-import React from "react";

 import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
+import { deleteCallbackHandler } from "@/app-components/dialogs/utils/deleteHandles";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
  ActionColumnLabel,
@@ -132,9 +132,7 @@ export const Roles = () => {
      <RoleDialog {...getDisplayDialogs(editDialogCtl)} />
      <DeleteDialog
        {...deleteDialogCtl}
-        callback={() => {
-          if (deleteDialogCtl.data) deleteRole(deleteDialogCtl.data);
-        }}
+        callback={deleteCallbackHandler(deleteRole)}
      />
      <PageHeader title={t("title.roles")} icon={faUniversalAccess}>
        <Grid
--- a/frontend/src/components/translations/index.tsx
+++ b/frontend/src/components/translations/index.tsx
@@ -12,6 +12,7 @@ import { Button, Chip, Grid, Paper, Stack } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";

 import { DeleteDialog } from "@/app-components/dialogs";
+import { deleteCallbackHandler } from "@/app-components/dialogs/utils/deleteHandles";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
  ActionColumnLabel,
@@ -167,10 +168,7 @@ export const Translations = () => {
            <EditTranslationDialog {...getDisplayDialogs(editDialogCtl)} />
            <DeleteDialog
              {...deleteDialogCtl}
-              callback={() => {
-                if (deleteDialogCtl?.data)
-                  deleteTranslation(deleteDialogCtl.data);
-              }}
+              callback={deleteCallbackHandler(deleteTranslation)}
            />
            <Grid item width="100%">
              <DataGrid {...dataGridProps} columns={columns} />