first commit

src/component/Admin/Entity/EntityDeleteDialog.tsx

@@ -0,0 +1,70 @@
+import { Checkbox, DialogContent, FormGroup, Stack, Tooltip } from "@mui/material";
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { batchDeleteEntities } from "../../../api/api.ts";
+import { useAppDispatch } from "../../../redux/hooks.ts";
+import { SmallFormControlLabel } from "../../Common/StyledComponents.tsx";
+import DialogAccordion from "../../Dialogs/DialogAccordion.tsx";
+import DraggableDialog, { StyledDialogContentText } from "../../Dialogs/DraggableDialog.tsx";
+
+export interface EntityDeleteDialogProps {
+  entityID?: number[];
+  open: boolean;
+  onClose?: () => void;
+  onDelete?: () => void;
+}
+
+const EntityDeleteDialog = ({ entityID, open, onDelete, onClose }: EntityDeleteDialogProps) => {
+  const { t } = useTranslation("dashboard");
+  const dispatch = useAppDispatch();
+
+  const [force, setForce] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  const onAccept = useCallback(() => {
+    if (entityID) {
+      setDeleting?.(true);
+      dispatch(batchDeleteEntities({ ids: entityID, force }))
+        .then(() => {
+          onDelete?.();
+          onClose?.();
+        })
+        .finally(() => {
+          setDeleting?.(false);
+        });
+    }
+  }, [entityID, force, setDeleting]);
+
+  return (
+    <DraggableDialog
+      title={t("common:areYouSure")}
+      showActions
+      loading={deleting}
+      showCancel
+      onAccept={onAccept}
+      dialogProps={{
+        open: open ?? false,
+        onClose: onClose,
+        fullWidth: true,
+        maxWidth: "xs",
+      }}
+    >
+      <DialogContent>
+        <Stack spacing={2}>
+          <StyledDialogContentText>{t("entity.confirmBatchDelete", { num: entityID?.length })}</StyledDialogContentText>
+          <DialogAccordion defaultExpanded={force} title={t("application:modals.advanceOptions")}>
+            <FormGroup>
+              <Tooltip title={t("entity.forceDeleteDes")}>
+                <SmallFormControlLabel
+                  control={<Checkbox size="small" onChange={(e) => setForce(e.target.checked)} checked={force} />}
+                  label={t("entity.forceDelete")}
+                />
+              </Tooltip>
+            </FormGroup>
+          </DialogAccordion>
+        </Stack>
+      </DialogContent>
+    </DraggableDialog>
+  );
+};
+export default EntityDeleteDialog;