diff --git a/frontend/src/features/task-management/components/DeleteTaskTemplateModal.tsx b/frontend/src/features/task-management/components/DeleteTaskTemplateModal.tsx new file mode 100644 index 00000000..36dc1b18 --- /dev/null +++ b/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 = ({ + 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 ( + + ); +}; + +export default DeleteTaskTemplateModal; diff --git a/frontend/src/features/task-management/pages/EditTaskTemplatePage.tsx b/frontend/src/features/task-management/pages/EditTaskTemplatePage.tsx index 76c8ad6b..86d395e8 100644 --- a/frontend/src/features/task-management/pages/EditTaskTemplatePage.tsx +++ b/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 => { + + setShowDeleteModal(false)} + onDeleteSuccess={() => history.push(TASK_MANAGEMENT_PAGE)} + /> ); };