diff --git a/src/components/MyPendingJobs/DeleteTaskModal.jsx b/src/components/MyPendingJobs/DeleteTaskModal.jsx new file mode 100644 index 0000000..75f8408 --- /dev/null +++ b/src/components/MyPendingJobs/DeleteTaskModal.jsx @@ -0,0 +1,131 @@ +import React, { useState } from "react"; +import ModalCom from "../Helpers/ModalCom"; +import { useNavigate } from "react-router-dom"; +import usersService from "../../services/UsersService"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; +import { useDispatch } from "react-redux"; + + +function DeleteTaskModal({ details, onClose, situation }) { + let dispatch = useDispatch(); + const navigate = useNavigate(); + const ApiCall = new usersService(); + + let [requestStatus, setRequestStatus] = useState({ + laoding: false, + status: false, + message: "", + }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER + + // FUNCTION TO DELETE TASK + const deleteTask = () => { + setRequestStatus(prev => ({...prev, loading:true, message: 'No API Yet'})) + setTimeout(()=>{ + setRequestStatus(prev => ({...prev, loading:false, message: ''})) + },3000) + } + + return ( + +
+
+

+ Delete Task +

+ +
+
+
+ + + + + +
+
+

+ {details.title} +

+
+
+ + {requestStatus.laoding ? ( + + ) : ( + + )} +
+ + {/* ERROR DISPLAY AND SUBMIT BUTTON */} + {requestStatus.message != "" && + (!requestStatus.status ? ( +
+ {requestStatus.message} +
+ ) : ( + requestStatus.status && ( +
+ {requestStatus.message} +
+ ) + ))} + {/* End of error or success display */} +
+
+ + ); +} + +export default DeleteTaskModal; diff --git a/src/components/MyPendingJobs/ParentWaitingTable.jsx b/src/components/MyPendingJobs/ParentWaitingTable.jsx index 6d4b7bc..4334923 100644 --- a/src/components/MyPendingJobs/ParentWaitingTable.jsx +++ b/src/components/MyPendingJobs/ParentWaitingTable.jsx @@ -7,7 +7,9 @@ import LoadingSpinner from "../Spinners/LoadingSpinner"; import { handlePagingFunc } from "../Pagination/HandlePagination"; import PaginatedList from "../Pagination/PaginatedList"; import usersService from "../../services/UsersService"; - +import DeleteIcon from '../../assets/images/icon-delete.svg' +import DeleteTaskModal from "./DeleteTaskModal"; +import SendReminderModal from "./SendReminderModal"; export default function ParentWaitingTable() { // const transationFilterData = [ @@ -34,6 +36,9 @@ export default function ParentWaitingTable() { const apiCall = new usersService() + let [deleteTaskPopout, setDeleteTaskPopout] = useState({show:false, data:{}}) // HOLDS THE INFO OF DELETE TASK POPOUT + let [sendReminderPopout, setSendReminderPopout] = useState({show:false, data:{}}) // HOLDS THE INFO OF SEND REMINDER POPOUT + let [familySuggestList, setFamilySuggestList] = useState({loading: true, data:[]}) const [currentPage, setCurrentPage] = useState(0); @@ -97,7 +102,7 @@ export default function ParentWaitingTable() {
-
+

{item.title}

@@ -107,12 +112,35 @@ export default function ParentWaitingTable() {

-
-

- {new Date(item.added).toLocaleString().split(',')[0]} - -

-

{item.status_text}

+
+ + +
+

+ {new Date(item.added).toLocaleString().split(',')[0]} + +

+

{ + setSendReminderPopout({ + show: true, + data: { ...item }, + }); + }} + >{item.status_text}

+
@@ -122,6 +150,30 @@ export default function ParentWaitingTable() { :

No List Found!

} + + {/* Delete Task Popout */} + {deleteTaskPopout.show && ( + { + setDeleteTaskPopout({ show: false, data: {} }); + }} + situation={deleteTaskPopout.show} + /> + )} + {/* END of Delete Task Popout */} + + {/* Send Reminder Popout */} + {sendReminderPopout.show && ( + { + setSendReminderPopout({ show: false, data: {} }); + }} + situation={sendReminderPopout.show} + /> + )} + {/* END of Send Reminder Popout */} {/* PAGINATION BUTTON */} diff --git a/src/components/MyPendingJobs/SendReminderModal.jsx b/src/components/MyPendingJobs/SendReminderModal.jsx new file mode 100644 index 0000000..900dd86 --- /dev/null +++ b/src/components/MyPendingJobs/SendReminderModal.jsx @@ -0,0 +1,127 @@ +import React, { useState } from "react"; +import ModalCom from "../Helpers/ModalCom"; +import { useNavigate } from "react-router-dom"; +import usersService from "../../services/UsersService"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; +import { useDispatch } from "react-redux"; + + +function SendReminderModal({ details, onClose, situation }) { + + let dispatch = useDispatch(); + const navigate = useNavigate(); + const ApiCall = new usersService(); + + let [requestStatus, setRequestStatus] = useState({ + laoding: false, + status: false, + message: "", + }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER + + // FUNCTION TO SEND REMINDER + const sendReminder = () => { + setRequestStatus(prev => ({...prev, loading:true, message: 'No API Yet'})) + setTimeout(()=>{ + setRequestStatus(prev => ({...prev, loading:false, message: ''})) + },3000) + } + + return ( + +
+
+

+ Send Reminder +

+ +
+
+ +
+
+ +
+
+

+ {details.title} +

+ +

+ {details.description} +

+

+ Last Remind: 10-10-2025 +

+
+
+ +
+ + {requestStatus.laoding ? ( + + ) : ( + + )} +
+ + {/* ERROR DISPLAY AND SUBMIT BUTTON */} + {requestStatus.message != "" && + (!requestStatus.status ? ( +
+ {requestStatus.message} +
+ ) : ( + requestStatus.status && ( +
+ {requestStatus.message} +
+ ) + ))} + {/* End of error or success display */} +
+
+ + ); +} + +export default SendReminderModal;