Amanda/delete task template

frontend/src/features/task-management/components/DeleteTaskTemplateModal.tsx

@@ -0,0 +1,58 @@
+import React, { FC } from "react";
+import { useToast } from "@chakra-ui/react";
+import PopupModal from "../../../components/common/PopupModal";
+import TaskTemplateAPIClient from "../../../APIClients/TaskTemplateAPIClient";
+
+interface DeleteTaskTemplateModalProps {
+  taskTemplateId: number;
+  isOpen: boolean;
+  onClose: () => void;
+  onDeleteSuccess?: () => void;
+}
+
+const DeleteTaskTemplateModal: FC<DeleteTaskTemplateModalProps> = ({
+  taskTemplateId,
+  isOpen,
+  onClose,
+  onDeleteSuccess,
+}) => {
+  const toast = useToast();
+
+  const handlePrimaryButtonClick = async () => {
+    try {
+      await TaskTemplateAPIClient.deleteTaskTemplate(taskTemplateId);
+      toast({
+        title: "Success",
+        description: "Task template deleted successfully.",
+        status: "success",
+        duration: 3000,
+        isClosable: true,
+      });
+      onDeleteSuccess?.();
+      onClose();
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to delete task template. Please try again later.",
+        status: "error",
+        duration: 3000,
+        isClosable: true,
+      });
+    }
+  };
+
+  return (
+    <PopupModal
+      open={isOpen}
+      title="Delete Template?"
+      message="Are you sure you want to delete this template? Tasks can no longer be created with this template. This process cannot be undone."
+      primaryButtonText="Delete"
+      onPrimaryClick={handlePrimaryButtonClick}
+      primaryButtonColor="red"
+      secondaryButtonText="Cancel"
+      onSecondaryClick={onClose}
+    />
+  );
+};
+
+export default DeleteTaskTemplateModal;

frontend/src/features/task-management/pages/EditTaskTemplatePage.tsx

@@ -15,6 +15,7 @@ import React, { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useHistory, useParams } from "react-router-dom";
 import TaskTemplateAPIClient from "../../../APIClients/TaskTemplateAPIClient";
+import DeleteTaskTemplateModal from "../components/DeleteTaskTemplateModal";
 import { ReactComponent as GamesIcon } from "../../../assets/icons/games.svg";
 import { ReactComponent as HusbandryIcon } from "../../../assets/icons/husbandry.svg";
 import { ReactComponent as MiscIcon } from "../../../assets/icons/misc.svg";
@@ -41,6 +42,7 @@ const EditTaskTemplatePage = (): React.ReactElement => {
   const toast = useToast();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showQuitModal, setShowQuitModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
 
   const {
     control,
@@ -120,14 +122,7 @@ const EditTaskTemplatePage = (): React.ReactElement => {
   };
 
   const handleDeleteTaskTemplate = () => {
-    // TODO: Open delete task template modal and remove toast
-    toast({
-      title: "Delete Task Template",
-      description: "Delete functionality not implemented yet",
-      status: "info",
-      duration: 3000,
-      isClosable: true,
-    });
+    setShowDeleteModal(true);
   };
 
   const onSubmit = async (data: TaskTemplateFormData) => {
@@ -329,6 +324,13 @@ const EditTaskTemplatePage = (): React.ReactElement => {
           </ModalFooter>
         </ModalContent>
       </Modal>
+
+      <DeleteTaskTemplateModal
+        taskTemplateId={taskTemplateId}
+        isOpen={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+        onDeleteSuccess={() => history.push(TASK_MANAGEMENT_PAGE)}
+      />
     </Flex>
   );
 };