diff --git a/src/services/lostAndFound.ts b/src/services/lostAndFound.ts index 57ee8d7a0..c9089eaf9 100644 --- a/src/services/lostAndFound.ts +++ b/src/services/lostAndFound.ts @@ -45,10 +45,15 @@ const createMissingItemReport = async ( return response; }; +const updateReportStatus = async (id: number, status: string): Promise => { + await http.put(`lostandfound/missingitem/${id}/${status}`); +}; + const lostAndFoundService = { getMissingItemReports, createMissingItemReport, getMissingItemReport, + updateReportStatus, }; export default lostAndFoundService; diff --git a/src/views/CampusSafety/views/LostAndFound/components/DeleteConfirmation/DeleteConfirmation.module.scss b/src/views/CampusSafety/views/LostAndFound/components/DeleteConfirmation/DeleteConfirmation.module.scss new file mode 100644 index 000000000..39e34c12b --- /dev/null +++ b/src/views/CampusSafety/views/LostAndFound/components/DeleteConfirmation/DeleteConfirmation.module.scss @@ -0,0 +1,57 @@ +// Root container styles for the dialog +.title { + background-color: var(--mui-palette-primary-main); // GordonBlue + color: var(--mui-palette-primary-contrastText); // White + text-align: center; + font-size: 1.25rem; + font-weight: bold; +} + +.notice { + margin-top: 1rem; + text-align: center; + font-weight: 500; + font-size: 1rem; + color: var(--mui-palette-info-light); // SnowDay + + @media (max-width: 600px) { + font-size: 0.9rem; // Adjust for smaller screens + } +} + +.subtext { + text-align: center; + margin-top: 0.5rem; + color: var(--mui-palette-neutral-500); // Light Gray + font-size: 0.9rem; + + @media (max-width: 600px) { + font-size: 0.8rem; // Adjust for smaller screens + } +} + +.actions { + display: flex; + justify-content: space-between; + padding: 1rem; +} + +.cancelButton { + background-color: var(--mui-palette-error-light); // NauticalRed + color: var(--mui-palette-primary-contrastText); // White + font-weight: bold; + + &:hover { + background-color: var(--mui-palette-error-main); // ChristmasRed + } +} + +.submitButton { + background-color: var(--mui-palette-secondary-main); // ScottieCyan + color: var(--mui-palette-primary-contrastText); // White + font-weight: bold; + + &:hover { + background-color: var(--mui-palette-secondary-dark); // ScottieCyan_opacity75 + } +} diff --git a/src/views/CampusSafety/views/LostAndFound/components/DeleteConfirmation/index.tsx b/src/views/CampusSafety/views/LostAndFound/components/DeleteConfirmation/index.tsx new file mode 100644 index 000000000..dcd65700a --- /dev/null +++ b/src/views/CampusSafety/views/LostAndFound/components/DeleteConfirmation/index.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + Typography, +} from '@mui/material'; +import styles from './DeleteConfirmation.module.scss'; + +type DeleteConfirmationModalProps = { + open: boolean; + onClose: () => void; + onSubmit: () => void; +}; + +const DeleteConfirmationModal: React.FC = ({ + open, + onClose, + onSubmit, +}) => { + return ( + + Delete Missing Item Report? + + + Please delete if you would no longer like Gordon Police to search for this item. + + + (i.e. item found, replaced, etc.) + + + + + + + + ); +}; + +export default DeleteConfirmationModal; diff --git a/src/views/CampusSafety/views/LostAndFound/index.tsx b/src/views/CampusSafety/views/LostAndFound/index.tsx index c5255855b..37b1b2d7a 100644 --- a/src/views/CampusSafety/views/LostAndFound/index.tsx +++ b/src/views/CampusSafety/views/LostAndFound/index.tsx @@ -13,8 +13,10 @@ import { useTheme } from '@mui/material/styles'; // Access theme if needed import lostAndFoundService from 'services/lostAndFound'; //import lostAndFoundService from '../../services/lostAndFoundService'; // Assuming this is your service import { MissingItemReport } from 'services/lostAndFound'; // Import the type from the service +import DeleteConfirmationModal from './components/DeleteConfirmation'; import { DateTime } from 'luxon'; import { useWindowSize } from 'hooks'; +import { string } from 'prop-types'; const formatDate = (date: string) => { return DateTime.fromISO(date).toFormat('MM-dd-yyyy'); // Adjust format as needed @@ -22,6 +24,8 @@ const formatDate = (date: string) => { const LostAndFound = () => { const [activeReports, setActiveReports] = useState([]); const [pastReports, setPastReports] = useState([]); + const [isDeleteModalOpen, setDeleteModalOpen] = useState(false); + const [reportToDelete, setReportToDelete] = useState(null); const [loading, setLoading] = useState(true); const theme = useTheme(); // Access theme if needed const [width] = useWindowSize(); @@ -29,6 +33,7 @@ const LostAndFound = () => { const [expandedFields, setExpandedFields] = useState<{ [id: string]: { [field: string]: boolean }; }>({}); + const [pageUpdates, setPageUpdates] = useState(0); const navigate = useNavigate(); useEffect(() => { @@ -96,14 +101,37 @@ const LostAndFound = () => { }; fetchMissingItems(); - }, []); + }, [pageUpdates]); + + const handleChange = () => { + setDeleteModalOpen(true); + }; const handleEdit = (reportId: string) => { console.log(`Editing report: ${reportId}`); }; - const handleDelete = (reportId: string) => { - console.log(`Deleting report: ${reportId}`); + const handleDeleteClick = (reportId: string) => { + setReportToDelete(reportId); + setDeleteModalOpen(true); + }; + + const handleModalClose = () => { + setDeleteModalOpen(false); + setReportToDelete(null); + }; + + const handleModalSubmit = async () => { + try { + //const reportIdNum = parseInt(handleDeleteClick(reportToDelete)); + + await lostAndFoundService.updateReportStatus(parseInt(reportToDelete || ''), 'deleted'); + setPageUpdates(pageUpdates + 1); + setDeleteModalOpen(false); + setReportToDelete(null); + } catch (error) { + console.error('Error updating item:', error); + } }; const toggleExpand = (id: string) => { @@ -264,7 +292,7 @@ const LostAndFound = () => { handleDelete(report.recordID?.toString() || '')} + onClick={() => handleDeleteClick(report.recordID?.toString() || '')} size="small" > @@ -295,7 +323,7 @@ const LostAndFound = () => { handleDelete(report.recordID?.toString() || '')} + onClick={() => handleDeleteClick(report.recordID?.toString() || '')} size="small" > @@ -331,6 +359,11 @@ const LostAndFound = () => { + {/* Past Missing Item Reports */}