feat: add confirmation modal when deleting a storage

frontend/src/components/StorageRow.tsx

@@ -8,6 +8,8 @@ import type { Storage } from "../misc/interfaces";
 import { formatDate } from "../utils/uxFncs";
 import { Mono } from "./Mono.tsx";
 import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import { DeleteConfirmation } from "./modals/DeleteConfirmation.tsx";
 
 interface StorageRowProps {
   storage: Storage;
@@ -17,6 +19,9 @@ interface StorageRowProps {
 export const StorageRow = ({ storage, onError }: StorageRowProps) => {
   const { t } = useTranslation();
 
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const [storageToDelete, setStorageToDelete] = useState<Storage | null>(null);
+
   const queryClient = useQueryClient();
 
   const mutation = useMutation({
@@ -28,6 +33,11 @@ export const StorageRow = ({ storage, onError }: StorageRowProps) => {
     onError,
   });
 
+  const deleteStorageModalFnc = async (storage: Storage) => {
+    setStorageToDelete(storage);
+    setShowModal(true);
+  };
+
   const deleteMutation = useMutation({
     mutationFn: (uuid: string) => deleteStorage(uuid),
     onSuccess: () => {
@@ -52,6 +62,13 @@ export const StorageRow = ({ storage, onError }: StorageRowProps) => {
     (values.description ?? "") !== (storage.description ?? "");
 
   return (
+    <>
+      <DeleteConfirmation
+        open={showModal}
+        setOpen={setShowModal}
+        storage={storageToDelete}
+        deleteStorageByUUID={(uuid) => deleteMutation.mutateAsync(uuid)}
+      />
       <tr key={storage.uuid} className="align-top">
         <td className="px-6 py-5">
           <form.Field name="name">
@@ -119,7 +136,7 @@ export const StorageRow = ({ storage, onError }: StorageRowProps) => {
             <IconButton
               color="danger"
               variant="plain"
-            onClick={() => deleteMutation.mutateAsync(storage.uuid)}
+              onClick={() => deleteStorageModalFnc(storage)}
               disabled={mutation.isPending || deleteMutation.isPending}
               size="sm"
               className="rounded-xl"
@@ -129,5 +146,6 @@ export const StorageRow = ({ storage, onError }: StorageRowProps) => {
           </div>
         </td>
       </tr>
+    </>
   );
 };

frontend/src/components/modals/DeleteConfirmation.tsx

@@ -0,0 +1,54 @@
+import Button from "@mui/joy/Button";
+import Divider from "@mui/joy/Divider";
+import DialogTitle from "@mui/joy/DialogTitle";
+import DialogContent from "@mui/joy/DialogContent";
+import DialogActions from "@mui/joy/DialogActions";
+import Modal from "@mui/joy/Modal";
+import ModalDialog from "@mui/joy/ModalDialog";
+import type { Storage } from "../../misc/interfaces";
+import { useTranslation } from "react-i18next";
+
+interface DeleteConfirmationProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  storage: Storage | null;
+  deleteStorageByUUID: (uuid: string) => void;
+}
+
+export const DeleteConfirmation = (props: DeleteConfirmationProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal open={props.open} onClose={() => props.setOpen(false)}>
+      <ModalDialog variant="outlined" role="alertdialog">
+        <DialogTitle>Confirmation</DialogTitle>
+        <Divider />
+        <DialogContent>
+          {t("delete-confirmation-text")}
+          {props.storage ? ` "${props.storage.name}"` : ""}?
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="solid"
+            color="danger"
+            onClick={() => {
+              if (props.storage) {
+                props.deleteStorageByUUID(props.storage.uuid);
+              }
+              props.setOpen(false);
+            }}
+          >
+            {t("delete")}
+          </Button>
+          <Button
+            variant="plain"
+            color="neutral"
+            onClick={() => props.setOpen(false)}
+          >
+            {t("cancel")}
+          </Button>
+        </DialogActions>
+      </ModalDialog>
+    </Modal>
+  );
+};

frontend/src/utils/i18n/locales/de/de.json

@@ -129,5 +129,7 @@
   "filter-soon": "Bald",
   "filter-low": "Niedrig",
   "products": "Produkte",
-  "units": "Einheiten"
+  "units": "Einheiten",
+  "cancel": "Abbrechen",
+  "delete-confirmation-text": "Bist du dir sicher das du diesen Storage löschen willst: "
 }

frontend/src/utils/i18n/locales/en/en.json

@@ -129,5 +129,7 @@
   "filter-soon": "Soon",
   "filter-low": "Low",
   "products": "products",
-  "units": "units"
+  "units": "units",
+  "cancel": "Cancel",
+  "delete-confirmation-text": "Are you sure you want to delete this storage: "
 }