From ce36b7c0f0f4fdba003dfff371bac17ca109abee Mon Sep 17 00:00:00 2001 From: Ben Myers Date: Sun, 16 Feb 2025 21:29:35 -0500 Subject: [PATCH 1/9] working reusable component --- .../components/ItemForm/ItemForm.module.scss | 93 ++ .../components/ItemForm/index.tsx | 619 ++++++++++ .../views/MissingItemCreate/index.tsx | 1000 +++++++++-------- .../views/MissingItemEdit/index.tsx | 862 +++++++------- 4 files changed, 1651 insertions(+), 923 deletions(-) create mode 100644 src/views/CampusSafety/components/ItemForm/ItemForm.module.scss create mode 100644 src/views/CampusSafety/components/ItemForm/index.tsx diff --git a/src/views/CampusSafety/components/ItemForm/ItemForm.module.scss b/src/views/CampusSafety/components/ItemForm/ItemForm.module.scss new file mode 100644 index 000000000..68d634b1b --- /dev/null +++ b/src/views/CampusSafety/components/ItemForm/ItemForm.module.scss @@ -0,0 +1,93 @@ +.disclaimer { + display: flex; + flex-direction: row; + align-items: center; + column-gap: 1.5rem; + margin: 20px; +} + +.form_card { + margin: 0.7rem; +} + +.radio_group { + display: contents; +} + +.color_group { + display: contents; +} + +.box_background { + background-color: var(--mui-palette-neutral-100); + border-radius: 5px; + padding: 1rem; +} + +.category_group { + display: grid; + grid-template-columns: repeat(2, 1fr); +} + +.category_item { + width: 100%; +} + +.checkbox_group { + display: grid; + grid-template-columns: repeat(3, 1fr); + background-color: var(--mui-palette-neutral-100); +} + +.stolen_container { + padding: 0 1.5rem; + background-color: var(--mui-palette-neutral-100); + border-radius: 5px; + width: 100%; +} + +.submit_container { + margin: 1rem 0; + padding-right: 5rem; + display: flex; + justify-content: flex-end; +} + +.submit_button { + font-size: 1.2rem; + padding: 0.7rem; +} + +.icon { + color: var(--mui-palette-neutral-400); + height: 1.5em; + width: 1.5em; +} + +@media (max-width: 1000px) { + .form_card { + margin: 0.5rem; + } + .category_group { + grid-template-columns: 1fr; + padding: 0.8rem; + } + .checkbox_group { + grid-template-columns: repeat(2, 1fr); + } + .stolen_container { + padding: 1rem; + text-align: left; + } + .submit_container { + justify-content: center; + padding-right: 0rem; + } + .submit_button { + font-size: 1rem; + padding: 1rem; + min-width: fit-content; + } +} + +/*# sourceMappingURL=MissingItemCreate.module.css.map */ diff --git a/src/views/CampusSafety/components/ItemForm/index.tsx b/src/views/CampusSafety/components/ItemForm/index.tsx new file mode 100644 index 000000000..8ab5923cf --- /dev/null +++ b/src/views/CampusSafety/components/ItemForm/index.tsx @@ -0,0 +1,619 @@ +import { useState, useEffect, useCallback, useMemo } from 'react'; +import { + Card, + CardHeader, + Grid, + TextField, + Radio, + FormGroup, + FormControlLabel, + Checkbox, + Button, + FormLabel, + Typography, + Chip, +} from '@mui/material'; +import Header from 'views/CampusSafety/components/Header'; +import styles from './ItemForm.module.css'; +import lostAndFoundService, { MissingItemReport } from 'services/lostAndFound'; +import userService from 'services/user'; +import ReportStolenModal from 'views/CampusSafety/views/LostAndFound/views/MissingItemCreate/components/reportStolen'; +import CreateConfirmReport from 'views/CampusSafety/views/LostAndFound/views/MissingItemCreate/components/confirmReport'; +import EditConfirmReport from 'views/CampusSafety/views/LostAndFound/views/MissingItemEdit/components/confirmReport'; +import GordonSnackbar from 'components/Snackbar'; +import { useNavigate, useParams } from 'react-router'; +import GordonLoader from 'components/Loader'; +import { InfoOutlined } from '@mui/icons-material'; +import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; +import { DatePicker, DateValidationError, LocalizationProvider } from '@mui/x-date-pickers'; +import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; +import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; + +const ItemForm = ({ formType }: { formType: any }) => { + const navigate = useNavigate(); + const { itemId } = useParams<{ itemId: string }>(); + const [loading, setLoading] = useState(true); + + const createSnackbar = useCallback((message, severity) => { + setSnackbar({ message, severity, open: true }); + }, []); + + const [user, setUser] = useState({ + firstName: '', + lastName: '', + emailAddr: '', + phoneNumber: '', + AD_Username: '', // Include AD_Username for submitterUsername + }); + + const [formData, setFormData] = useState({ + recordID: 0, + category: '', + colors: [] as string[], + brand: '', + description: '', + locationLost: '', + stolen: false, + stolenDescription: '', + dateLost: '', + dateCreated: '', + submitterUsername: '', + forGuest: false, + status: 'active', + }); + + const [originalFormData, setOriginalFormData] = useState({ + recordID: 0, + category: '', + colors: [] as string[], + brand: '', + description: '', + locationLost: '', + stolen: false, + stolenDescription: '', + dateLost: '', + dateCreated: '', + submitterUsername: '', + forGuest: false, + status: 'active', + }); + + const [isStolenModalOpen, setStolenModalOpen] = useState(false); + const [isPickedUp, setIsPickedUp] = useState(false); + const [validationErrors, setValidationErrors] = useState<{ [key: string]: string }>({}); + const [dateError, setDateError] = useState(null); + const requiredFields = ['category', 'description', 'locationLost']; + const [snackbar, setSnackbar] = useState({ message: '', severity: undefined, open: false }); + const [newActionFormData] = useState({ action: '', actionNote: '' }); + const [disableSubmit, setDisableSubmit] = useState(false); + const [showConfirm, setShowConfirm] = useState(false); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value, type, checked } = e.target; + + if (name === 'stolen') { + if (checked) { + // If the stolen checkbox is checked, open the modal + setStolenModalOpen(true); + setFormData((prevData) => ({ + ...prevData, + [name]: checked, + })); + } else { + // If the stolen checkbox is unchecked, set stolen to false but do not clear stolenDescription + setFormData((prevData) => ({ + ...prevData, + stolen: false, + })); + } + } else { + setFormData((prevData) => ({ + ...prevData, + [name]: type === 'checkbox' ? checked : value, + })); + } + }; + + const validateForm = () => { + const errors: { [key: string]: string } = {}; + requiredFields.forEach((field) => { + if (!formData[field as keyof typeof formData]) { + errors[field] = 'This field is required'; + } + }); + if (dateError !== null) { + errors['dateLost'] = dateError; + } + setValidationErrors(errors); + return Object.keys(errors).length === 0; + }; + + const errorMessage = useMemo(() => { + switch (dateError) { + case 'invalidDate': { + return 'Invalid Date'; + } + case 'disableFuture': { + return 'Cannot lose an item in the future'; + } + default: { + return null; + } + } + }, [dateError]); + + // Using DatePicker component from MUI/x, with custom styling to fix dark mode contrast issues + const customDatePicker = ( + + setFormData({ ...formData, dateLost: value?.toString() || '' })} + onError={(newError) => setDateError(newError)} + disableFuture + orientation="portrait" + name="Date Lost" + // Custom styling for popup box, better dark mode contrast + // Thanks to help for understanding from + // https://blog.openreplay.com/styling-and-customizing-material-ui-date-pickers/ + slotProps={{ + textField: { + helperText: errorMessage ? errorMessage : 'Change if lost before today', + // Custom styling for the input field, to make it look like filled variant + sx: { + backgroundColor: 'var(--mui-palette-FilledInput-bg);', + paddingTop: '7px;', + borderRadius: '5px;', + width: '100%;', + '& .Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' }, + '& .MuiInputLabel-shrink': { + transform: 'translate(14px, 4px) scale(0.75);', + }, + '& .MuiFormLabel-root.Mui-focused': { + color: 'var(--mui-palette-secondary-main);', + }, + '& .MuiOutlinedInput-notchedOutline': { + borderWidth: '0;', + borderBottom: + '1px solid rgba(var(--mui-palette-common-onBackgroundChannel) / var(--mui-opacity-inputUnderline));', + borderRadius: '0;', + }, + }, + }, + layout: { + sx: { + '& .MuiPickersLayout-contentWrapper .Mui-selected': { + backgroundColor: 'var(--mui-palette-secondary-400);', + }, + '.MuiPickersLayout-contentWrapper .MuiPickersDay-root:focus.Mui-selected': { + backgroundColor: 'var(--mui-palette-secondary-400);', + }, + '.MuiPickersLayout-contentWrapper .MuiPickersDay-root.Mui-selected': { + backgroundColor: 'var(--mui-palette-secondary-400);', + }, + }, + }, + actionBar: { + sx: { + ...{ + '& .MuiButtonBase-root': { + color: 'var(--mui-palette-secondary-400);', + }, + }, + }, + }, + }} + /> + + ); + + const handleColorChange = (color: string) => { + setFormData((prevData) => { + const colors = prevData.colors.includes(color) + ? prevData.colors.filter((c) => c !== color) + : [...prevData.colors, color]; + return { ...prevData, colors }; + }); + }; + + const handleModalClose = () => { + setStolenModalOpen(false); + setFormData((prevData) => ({ + ...prevData, + stolen: false, + })); + }; + + const handleModalSubmit = (stolenDescription: string) => { + setFormData((prevData) => ({ + ...prevData, + stolenDescription, // Capture stolen description from modal + })); + setStolenModalOpen(false); + }; + + const handlePickup = async () => { + const requestData = { + ...formData, + status: 'PickedUp', // Change status to 'pickup' + }; + + try { + await lostAndFoundService.updateMissingItemReport(requestData, parseInt(itemId || '')); + setIsPickedUp(true); + //navigate('/lostandfound'); + } catch (error) { + console.error('Error updating report status:', error); + } + }; + + const handleFormSubmit = () => { + if (validateForm()) { + if (!formData.stolen) { + setFormData((prevData) => ({ + ...prevData, + stolenDescription: '', + })); + } + if (!formData.dateLost) { + const now = new Date(); + setFormData((prevData) => ({ + ...prevData, + dateLost: now.toISOString(), + })); + } + setShowConfirm(true); + } + }; + + const handleReportSubmit = async () => { + if (formType == 'create') { + if (!disableSubmit) { + setDisableSubmit(true); + try { + const now = new Date(); + const requestData = { + ...formData, + ...user, + dateLost: new Date(formData.dateLost).toISOString() || now.toISOString(), + dateCreated: now.toISOString(), + colors: formData.colors || [], + submitterUsername: user.AD_Username, + forGuest: false, + }; + const newReportId = await lostAndFoundService.createMissingItemReport(requestData); + let actionRequestData = { + ...newActionFormData, + missingID: newReportId, + actionDate: now.toISOString(), + username: user.AD_Username, + isPublic: true, + action: 'Created', + }; + await lostAndFoundService.createAdminAction(newReportId, actionRequestData); + navigate('/lostandfound'); + } catch (error) { + createSnackbar(`Failed to create the missing item report.`, `error`); + setDisableSubmit(false); + } + } + } else if (formType == 'edit') { + const requestData: MissingItemReport = { + ...formData, + dateLost: new Date(formData.dateLost).toISOString(), + }; + const formFields = Object.keys(formData); + let newActionNote = ''; + for (let i = 0; i < formFields.length; i++) { + if ( + JSON.stringify(originalFormData[formFields[i] as keyof typeof originalFormData]) !== + JSON.stringify(formData[formFields[i] as keyof typeof formData]) + ) { + newActionNote += + formFields[i] + + ': OLD: ' + + originalFormData[formFields[i] as keyof typeof originalFormData] + + ', NEW: ' + + formData[formFields[i] as keyof typeof formData] + + ' '; + } + } + await lostAndFoundService.updateMissingItemReport(requestData, parseInt(itemId || '')); + const actionRequestData = { + missingID: parseInt(itemId || ''), + actionDate: new Date().toISOString(), + username: user.AD_Username, + isPublic: true, + action: 'Edited', + actionNote: newActionNote, + }; + await lostAndFoundService.createAdminAction(parseInt(itemId || ''), actionRequestData); + navigate('/lostandfound'); + } + }; + + useEffect(() => { + if (formData.recordID > 0) { + setLoading(false); + } + }, [formData.recordID]); + + useEffect(() => { + const fetchUserData = async () => { + try { + const userInfo = await userService.getProfileInfo(); + setUser({ + firstName: userInfo?.FirstName || '', + lastName: userInfo?.LastName || '', + emailAddr: userInfo?.Email || '', + phoneNumber: userInfo?.MobilePhone || '', + AD_Username: userInfo?.AD_Username || '', // Set AD_Username + }); + } catch (error) { + console.error('Error fetching user data:', error); + } + }; + + fetchUserData(); + }, []); + + // Catch browser reloads, and show warning message about unsaved changes. + useEffect(() => { + function handleBeforeUnload(event: BeforeUnloadEvent) { + event.preventDefault(); + return (event.returnValue = ''); + } + window.addEventListener('beforeunload', handleBeforeUnload, { capture: true }); + return () => { + window.removeEventListener('beforeunload', handleBeforeUnload, { capture: true }); + }; + }, []); + + useEffect(() => { + const fetchItemData = async () => { + if (itemId) { + const item = await lostAndFoundService.getMissingItemReport(parseInt(itemId)); + setFormData({ + recordID: item?.recordID || 0, + category: item.category, + colors: item.colors || [], + brand: item.brand || '', + description: item.description, + locationLost: item.locationLost, + stolen: item.stolen, + stolenDescription: item.stolenDescription || '', + dateLost: item.dateLost, + dateCreated: item.dateCreated, + submitterUsername: item.submitterUsername, + forGuest: item.forGuest, + status: item.status || 'active', + }); + const originalReport = await lostAndFoundService.getMissingItemReport(parseInt(itemId)); + setOriginalFormData({ + recordID: originalReport?.recordID || 0, + category: originalReport.category, + colors: originalReport.colors || [], + brand: originalReport.brand || '', + description: originalReport.description, + locationLost: originalReport.locationLost, + stolen: originalReport.stolen, + stolenDescription: originalReport.stolenDescription || '', + dateLost: originalReport.dateLost, + dateCreated: originalReport.dateCreated, + submitterUsername: originalReport.submitterUsername, + forGuest: originalReport.forGuest, + status: originalReport.status || 'active', + }); + } + }; + fetchItemData(); + }, [itemId]); + + return ( + <> + {showConfirm ? ( + setShowConfirm(false)} + onSubmit={handleReportSubmit} + disableSubmit={disableSubmit} + /> + ) : ( + + + + {/* Item Category */} + + + Item Category: + + + + {[ + 'Clothing/Shoes', + 'Electronics', + 'Jewelry/Watches', + 'Keys/Keychains', + 'Glasses', + 'Bottles/Mugs', + 'Books', + 'Bags/Purses', + 'Office Supplies', + 'IDs/Wallets', + 'Cash/Cards', + 'Other', + ].map((label) => ( + } + label={label} + value={label.toLowerCase().replace(/ /g, '/')} + onChange={(e) => + setFormData((prevData) => ({ + ...prevData, + category: (e.target as HTMLInputElement).value, + })) + } + checked={formData.category === label.toLowerCase().replace(/ /g, '/')} + className={styles.category_item} + /> + ))} + + + {/* Error Message */} + + + + + {/* Item Colors */} + + + + Item Color: Choose ALL that apply: + + + + + {[ + 'Black', + 'Blue', + 'Brown', + 'Gold', + 'Gray', + 'Green', + 'Maroon', + 'Orange', + 'Pink', + 'Purple', + 'Red', + 'Silver', + 'Tan', + 'White', + 'Yellow', + ].map((color) => ( + handleColorChange(color)} + /> + } + label={color} + /> + ))} + + + + + + {/* Item Brand and Description */} + + + + + + + + {/* Location Lost and Date Lost */} + + + + + {customDatePicker} + + + + + {/* Stolen Checkbox */} + + + + } + label="Was this item stolen? (Police staff will follow up)" + /> + + + + {/* Submit Button */} + + + + + + + + + )} + + ); +}; + +export default ItemForm; diff --git a/src/views/CampusSafety/views/LostAndFound/views/MissingItemCreate/index.tsx b/src/views/CampusSafety/views/LostAndFound/views/MissingItemCreate/index.tsx index ef1b6fd12..0ca4b539e 100644 --- a/src/views/CampusSafety/views/LostAndFound/views/MissingItemCreate/index.tsx +++ b/src/views/CampusSafety/views/LostAndFound/views/MissingItemCreate/index.tsx @@ -1,528 +1,536 @@ -import { useState, useEffect, useCallback, useMemo } from 'react'; -import { - Card, - CardHeader, - Grid, - TextField, - Radio, - FormGroup, - FormControlLabel, - Checkbox, - Button, - FormLabel, - Typography, -} from '@mui/material'; +// import { useState, useEffect, useCallback, useMemo } from 'react'; +// import { +// Card, +// CardHeader, +// Grid, +// TextField, +// Radio, +// FormGroup, +// FormControlLabel, +// Checkbox, +// Button, +// FormLabel, +// Typography, +// } from '@mui/material'; import Header from 'views/CampusSafety/components/Header'; -import styles from './MissingItemCreate.module.scss'; -import lostAndFoundService from 'services/lostAndFound'; -import userService from 'services/user'; -import ReportStolenModal from './components/reportStolen'; -import ConfirmReport from './components/confirmReport'; -import GordonSnackbar from 'components/Snackbar'; -import { useNavigate } from 'react-router'; -import { InfoOutlined } from '@mui/icons-material'; -import { DatePicker, DateValidationError, LocalizationProvider } from '@mui/x-date-pickers'; -import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; +// import styles from './MissingItemCreate.module.scss'; +// import lostAndFoundService from 'services/lostAndFound'; +// import userService from 'services/user'; +// import ReportStolenModal from './components/reportStolen'; +// import ConfirmReport from './components/confirmReport'; +// import GordonSnackbar from 'components/Snackbar'; +// import { useNavigate } from 'react-router'; +// import { InfoOutlined } from '@mui/icons-material'; +// import { DatePicker, DateValidationError, LocalizationProvider } from '@mui/x-date-pickers'; +// import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; +import ItemForm from 'views/CampusSafety/components/ItemForm'; const MissingItemFormCreate = () => { - const navigate = useNavigate(); + // const navigate = useNavigate(); - const createSnackbar = useCallback((message, severity) => { - setSnackbar({ message, severity, open: true }); - }, []); + // const createSnackbar = useCallback((message, severity) => { + // setSnackbar({ message, severity, open: true }); + // }, []); - const [user, setUser] = useState({ - firstName: '', - lastName: '', - emailAddr: '', - phoneNumber: '', - AD_Username: '', // Add AD_Username to user state - }); + // const [user, setUser] = useState({ + // firstName: '', + // lastName: '', + // emailAddr: '', + // phoneNumber: '', + // AD_Username: '', // Add AD_Username to user state + // }); - const [formData, setFormData] = useState({ - category: '', - colors: [] as string[], - brand: '', - description: '', - locationLost: '', - stolen: false, - stolenDescription: '', // Added stolenDescription field - dateLost: '', - status: 'active', - forGuest: false, - }); + // const [formData, setFormData] = useState({ + // category: '', + // colors: [] as string[], + // brand: '', + // description: '', + // locationLost: '', + // stolen: false, + // stolenDescription: '', // Added stolenDescription field + // dateLost: '', + // status: 'active', + // forGuest: false, + // }); - const [isStolenModalOpen, setStolenModalOpen] = useState(false); - const [showConfirm, setShowConfirm] = useState(false); - const [validationErrors, setValidationErrors] = useState<{ [key: string]: string }>({}); - const [snackbar, setSnackbar] = useState({ message: '', severity: undefined, open: false }); - const [newActionFormData] = useState({ action: '', actionNote: '' }); - const [disableSubmit, setDisableSubmit] = useState(false); + // const [isStolenModalOpen, setStolenModalOpen] = useState(false); + // const [showConfirm, setShowConfirm] = useState(false); + // const [validationErrors, setValidationErrors] = useState<{ [key: string]: string }>({}); + // const [snackbar, setSnackbar] = useState({ message: '', severity: undefined, open: false }); + // const [newActionFormData] = useState({ action: '', actionNote: '' }); + // const [disableSubmit, setDisableSubmit] = useState(false); - useEffect(() => { - const fetchUserData = async () => { - try { - const userInfo = await userService.getProfileInfo(); - setUser({ - firstName: userInfo?.FirstName || '', - lastName: userInfo?.LastName || '', - emailAddr: userInfo?.Email || '', - phoneNumber: userInfo?.MobilePhone || '', - AD_Username: userInfo?.AD_Username || '', // Set AD_Username - }); - } catch (error) { - console.error('Error fetching user data:', error); - } - }; + // useEffect(() => { + // const fetchUserData = async () => { + // try { + // const userInfo = await userService.getProfileInfo(); + // setUser({ + // firstName: userInfo?.FirstName || '', + // lastName: userInfo?.LastName || '', + // emailAddr: userInfo?.Email || '', + // phoneNumber: userInfo?.MobilePhone || '', + // AD_Username: userInfo?.AD_Username || '', // Set AD_Username + // }); + // } catch (error) { + // console.error('Error fetching user data:', error); + // } + // }; - fetchUserData(); - }, []); + // fetchUserData(); + // }, []); // Catch browser reloads, and show warning message about unsaved changes. - useEffect(() => { - function handleBeforeUnload(event: BeforeUnloadEvent) { - event.preventDefault(); - return (event.returnValue = ''); - } - window.addEventListener('beforeunload', handleBeforeUnload, { capture: true }); - return () => { - window.removeEventListener('beforeunload', handleBeforeUnload, { capture: true }); - }; - }, []); + // useEffect(() => { + // function handleBeforeUnload(event: BeforeUnloadEvent) { + // event.preventDefault(); + // return (event.returnValue = ''); + // } + // window.addEventListener('beforeunload', handleBeforeUnload, { capture: true }); + // return () => { + // window.removeEventListener('beforeunload', handleBeforeUnload, { capture: true }); + // }; + // }, []); - const requiredFields = ['category', 'description', 'locationLost']; + // const requiredFields = ['category', 'description', 'locationLost']; - const validateForm = () => { - const errors: { [key: string]: string } = {}; - requiredFields.forEach((field) => { - if (!formData[field as keyof typeof formData]) { - errors[field] = 'This field is required'; - } - }); - if (dateError !== null) { - errors['dateLost'] = dateError; - } - setValidationErrors(errors); - return Object.keys(errors).length === 0; - }; + // const validateForm = () => { + // const errors: { [key: string]: string } = {}; + // requiredFields.forEach((field) => { + // if (!formData[field as keyof typeof formData]) { + // errors[field] = 'This field is required'; + // } + // }); + // if (dateError !== null) { + // errors['dateLost'] = dateError; + // } + // setValidationErrors(errors); + // return Object.keys(errors).length === 0; + // }; - const handleChange = (e: React.ChangeEvent) => { - const { name, value, type, checked } = e.target; + // const handleChange = (e: React.ChangeEvent) => { + // const { name, value, type, checked } = e.target; - if (name === 'stolen') { - if (checked) { - // If the stolen checkbox is checked, open the modal - setStolenModalOpen(true); - setFormData((prevData) => ({ - ...prevData, - [name]: checked, - })); - } else { - // If the stolen checkbox is unchecked, set stolen to false but do not clear stolenDescription - setFormData((prevData) => ({ - ...prevData, - stolen: false, - })); - } - } else { - setFormData((prevData) => ({ - ...prevData, - [name]: type === 'checkbox' ? checked : value, - })); - } - }; + // if (name === 'stolen') { + // if (checked) { + // // If the stolen checkbox is checked, open the modal + // setStolenModalOpen(true); + // setFormData((prevData) => ({ + // ...prevData, + // [name]: checked, + // })); + // } else { + // // If the stolen checkbox is unchecked, set stolen to false but do not clear stolenDescription + // setFormData((prevData) => ({ + // ...prevData, + // stolen: false, + // })); + // } + // } else { + // setFormData((prevData) => ({ + // ...prevData, + // [name]: type === 'checkbox' ? checked : value, + // })); + // } + // }; - const handleColorChange = (color: string) => { - setFormData((prevData) => { - const colors = prevData.colors.includes(color) - ? prevData.colors.filter((c) => c !== color) - : [...prevData.colors, color]; - return { ...prevData, colors }; - }); - }; + // const handleColorChange = (color: string) => { + // setFormData((prevData) => { + // const colors = prevData.colors.includes(color) + // ? prevData.colors.filter((c) => c !== color) + // : [...prevData.colors, color]; + // return { ...prevData, colors }; + // }); + // }; - const handleModalClose = () => { - setStolenModalOpen(false); - setFormData((prevData) => ({ - ...prevData, - stolen: false, - })); - }; + // const handleModalClose = () => { + // setStolenModalOpen(false); + // setFormData((prevData) => ({ + // ...prevData, + // stolen: false, + // })); + // }; - const handleModalSubmit = (stolenDescription: string) => { - setFormData((prevData) => ({ - ...prevData, - stolenDescription, // Capture stolen description from modal - })); - setStolenModalOpen(false); - }; + // const handleModalSubmit = (stolenDescription: string) => { + // setFormData((prevData) => ({ + // ...prevData, + // stolenDescription, // Capture stolen description from modal + // })); + // setStolenModalOpen(false); + // }; - const handleFormSubmit = () => { - if (validateForm()) { - if (!formData.stolen) { - setFormData((prevData) => ({ - ...prevData, - stolenDescription: '', - })); - } - if (!formData.dateLost) { - const now = new Date(); - setFormData((prevData) => ({ - ...prevData, - dateLost: now.toISOString(), - })); - } - setShowConfirm(true); - } - }; + // const handleFormSubmit = () => { + // if (validateForm()) { + // if (!formData.stolen) { + // setFormData((prevData) => ({ + // ...prevData, + // stolenDescription: '', + // })); + // } + // if (!formData.dateLost) { + // const now = new Date(); + // setFormData((prevData) => ({ + // ...prevData, + // dateLost: now.toISOString(), + // })); + // } + // setShowConfirm(true); + // } + // }; - const handleReportSubmit = async () => { - if (!disableSubmit) { - setDisableSubmit(true); - try { - const now = new Date(); - const requestData = { - ...formData, - ...user, - dateLost: new Date(formData.dateLost).toISOString() || now.toISOString(), - dateCreated: now.toISOString(), - colors: formData.colors || [], - submitterUsername: user.AD_Username, - forGuest: false, - }; - const newReportId = await lostAndFoundService.createMissingItemReport(requestData); - let actionRequestData = { - ...newActionFormData, - missingID: newReportId, - actionDate: now.toISOString(), - username: user.AD_Username, - isPublic: true, - action: 'Created', - }; - await lostAndFoundService.createAdminAction(newReportId, actionRequestData); - navigate('/lostandfound'); - } catch (error) { - createSnackbar(`Failed to create the missing item report.`, `error`); - setDisableSubmit(false); - } - } - }; + // const handleReportSubmit = async () => { + // if (!disableSubmit) { + // setDisableSubmit(true); + // try { + // const now = new Date(); + // const requestData = { + // ...formData, + // ...user, + // dateLost: new Date(formData.dateLost).toISOString() || now.toISOString(), + // dateCreated: now.toISOString(), + // colors: formData.colors || [], + // submitterUsername: user.AD_Username, + // forGuest: false, + // }; + // const newReportId = await lostAndFoundService.createMissingItemReport(requestData); + // let actionRequestData = { + // ...newActionFormData, + // missingID: newReportId, + // actionDate: now.toISOString(), + // username: user.AD_Username, + // isPublic: true, + // action: 'Created', + // }; + // await lostAndFoundService.createAdminAction(newReportId, actionRequestData); + // navigate('/lostandfound'); + // } catch (error) { + // createSnackbar(`Failed to create the missing item report.`, `error`); + // setDisableSubmit(false); + // } + // } + // }; - const [dateError, setDateError] = useState(null); + // const [dateError, setDateError] = useState(null); - const errorMessage = useMemo(() => { - switch (dateError) { - case 'invalidDate': { - return 'Invalid Date'; - } - case 'disableFuture': { - return 'Cannot lose an item in the future'; - } - default: { - return null; - } - } - }, [dateError]); + // const errorMessage = useMemo(() => { + // switch (dateError) { + // case 'invalidDate': { + // return 'Invalid Date'; + // } + // case 'disableFuture': { + // return 'Cannot lose an item in the future'; + // } + // default: { + // return null; + // } + // } + // }, [dateError]); // Using DatePicker component from MUI/x, with custom styling to fix dark mode contrast issues - const customDatePicker = ( - - setFormData({ ...formData, dateLost: value?.toString() || '' })} - onError={(newError) => setDateError(newError)} - disableFuture - orientation="portrait" - name="Date Lost" - // Custom styling for popup box, better dark mode contrast - // Thanks to help for understanding from - // https://blog.openreplay.com/styling-and-customizing-material-ui-date-pickers/ - slotProps={{ - textField: { - helperText: errorMessage ? errorMessage : 'Change if lost before today', - // Custom styling for the input field, to make it look like filled variant - sx: { - backgroundColor: 'var(--mui-palette-FilledInput-bg);', - paddingTop: '7px;', - borderRadius: '5px;', - width: '100%;', - '& .Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' }, - '& .MuiInputLabel-shrink': { - transform: 'translate(14px, 4px) scale(0.75);', - }, - '& .MuiFormLabel-root.Mui-focused': { - color: 'var(--mui-palette-secondary-main);', - }, - '& .MuiOutlinedInput-notchedOutline': { - borderWidth: '0;', - borderBottom: - '1px solid rgba(var(--mui-palette-common-onBackgroundChannel) / var(--mui-opacity-inputUnderline));', - borderRadius: '0;', - }, - }, - }, - layout: { - sx: { - '& .MuiPickersLayout-contentWrapper .Mui-selected': { - backgroundColor: 'var(--mui-palette-secondary-400);', - }, - '.MuiPickersLayout-contentWrapper .MuiPickersDay-root:focus.Mui-selected': { - backgroundColor: 'var(--mui-palette-secondary-400);', - }, - '.MuiPickersLayout-contentWrapper .MuiPickersDay-root.Mui-selected': { - backgroundColor: 'var(--mui-palette-secondary-400);', - }, - }, - }, - actionBar: { - sx: { - ...{ - '& .MuiButtonBase-root': { - color: 'var(--mui-palette-secondary-400);', - }, - }, - }, - }, - }} - /> - - ); + // const customDatePicker = ( + // + // setFormData({ ...formData, dateLost: value?.toString() || '' })} + // onError={(newError) => setDateError(newError)} + // disableFuture + // orientation="portrait" + // name="Date Lost" + // // Custom styling for popup box, better dark mode contrast + // // Thanks to help for understanding from + // // https://blog.openreplay.com/styling-and-customizing-material-ui-date-pickers/ + // slotProps={{ + // textField: { + // helperText: errorMessage ? errorMessage : 'Change if lost before today', + // // Custom styling for the input field, to make it look like filled variant + // sx: { + // backgroundColor: 'var(--mui-palette-FilledInput-bg);', + // paddingTop: '7px;', + // borderRadius: '5px;', + // width: '100%;', + // '& .Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' }, + // '& .MuiInputLabel-shrink': { + // transform: 'translate(14px, 4px) scale(0.75);', + // }, + // '& .MuiFormLabel-root.Mui-focused': { + // color: 'var(--mui-palette-secondary-main);', + // }, + // '& .MuiOutlinedInput-notchedOutline': { + // borderWidth: '0;', + // borderBottom: + // '1px solid rgba(var(--mui-palette-common-onBackgroundChannel) / var(--mui-opacity-inputUnderline));', + // borderRadius: '0;', + // }, + // }, + // }, + // layout: { + // sx: { + // '& .MuiPickersLayout-contentWrapper .Mui-selected': { + // backgroundColor: 'var(--mui-palette-secondary-400);', + // }, + // '.MuiPickersLayout-contentWrapper .MuiPickersDay-root:focus.Mui-selected': { + // backgroundColor: 'var(--mui-palette-secondary-400);', + // }, + // '.MuiPickersLayout-contentWrapper .MuiPickersDay-root.Mui-selected': { + // backgroundColor: 'var(--mui-palette-secondary-400);', + // }, + // }, + // }, + // actionBar: { + // sx: { + // ...{ + // '& .MuiButtonBase-root': { + // color: 'var(--mui-palette-secondary-400);', + // }, + // }, + // }, + // }, + // }} + // /> + // + // ); - return ( - <> -
- {showConfirm ? ( - <> - setShowConfirm(false)} - onSubmit={handleReportSubmit} - disableSubmit={disableSubmit} - /> - setSnackbar((s) => ({ ...s, open: false }))} - /> - - ) : ( - - - Report a Lost Item - - } - titleTypographyProps={{ align: 'center' }} - className="gc360_header" - /> -
- - - - Gordon Police manages campus Lost & Found - - - - Police staff will view reports, and you will be notified if your item is found. - - - -
- - - {/* Item Category */} - - - Item Category: - - - - {[ - 'Clothing/Shoes', - 'Electronics', - 'Jewelry/Watches', - 'Keys/Keychains', - 'Glasses', - 'Bottles/Mugs', - 'Books', - 'Bags/Purses', - 'Office Supplies', - 'IDs/Wallets', - 'Cash/Cards', - 'Other', - ].map((label) => ( - } - label={label} - value={label.toLowerCase().replace(/ /g, '/')} - onChange={(e) => - setFormData((prevData) => ({ - ...prevData, - category: (e.target as HTMLInputElement).value, - })) - } - checked={formData.category === label.toLowerCase().replace(/ /g, '/')} - className={styles.category_item} - /> - ))} - - - {/* Error Message */} - - - - - {/* Item Colors */} - - - - Item Color: Choose ALL that apply: - - - - - {[ - 'Black', - 'Blue', - 'Brown', - 'Gold', - 'Gray', - 'Green', - 'Maroon', - 'Orange', - 'Pink', - 'Purple', - 'Red', - 'Silver', - 'Tan', - 'White', - 'Yellow', - ].map((color) => ( - handleColorChange(color)} - /> - } - label={color} - /> - ))} - - - - - - {/* Item Brand and Description */} - - - - - - + // return ( + // <> + //
+ // {showConfirm ? ( + // <> + // setShowConfirm(false)} + // onSubmit={handleReportSubmit} + // disableSubmit={disableSubmit} + // /> + // setSnackbar((s) => ({ ...s, open: false }))} + // /> + // + // ) : ( + // + // + // Report a Lost Item + // + // } + // titleTypographyProps={{ align: 'center' }} + // className="gc360_header" + // /> + //
+ // + // + // + // Gordon Police manages campus Lost & Found + // + // + // + // Police staff will view reports, and you will be notified if your item is found. + // + // + // + //
+ // + // + // {/* Item Category */} + // + // + // Item Category: + // + // + // + // {[ + // 'Clothing/Shoes', + // 'Electronics', + // 'Jewelry/Watches', + // 'Keys/Keychains', + // 'Glasses', + // 'Bottles/Mugs', + // 'Books', + // 'Bags/Purses', + // 'Office Supplies', + // 'IDs/Wallets', + // 'Cash/Cards', + // 'Other', + // ].map((label) => ( + // } + // label={label} + // value={label.toLowerCase().replace(/ /g, '/')} + // onChange={(e) => + // setFormData((prevData) => ({ + // ...prevData, + // category: (e.target as HTMLInputElement).value, + // })) + // } + // checked={formData.category === label.toLowerCase().replace(/ /g, '/')} + // className={styles.category_item} + // /> + // ))} + // + // + // {/* Error Message */} + // + // + // + // + // {/* Item Colors */} + // + // + // + // Item Color: Choose ALL that apply: + // + // + // + // + // {[ + // 'Black', + // 'Blue', + // 'Brown', + // 'Gold', + // 'Gray', + // 'Green', + // 'Maroon', + // 'Orange', + // 'Pink', + // 'Purple', + // 'Red', + // 'Silver', + // 'Tan', + // 'White', + // 'Yellow', + // ].map((color) => ( + // handleColorChange(color)} + // /> + // } + // label={color} + // /> + // ))} + // + // + // + // + // + // {/* Item Brand and Description */} + // + // + // + // + // + // - {/* Location Lost and Date Lost */} - - - - - {customDatePicker} - - - + // {/* Location Lost and Date Lost */} + // + // + // + // + // {customDatePicker} + // + // + // - {/* Stolen Checkbox */} - - - - } - label="Was this item stolen? (Police staff will follow up)" - /> - - + // {/* Stolen Checkbox */} + // + // + // + // } + // label="Was this item stolen? (Police staff will follow up)" + // /> + // + // - {/* Submit Button */} - - - - - + // {/* Submit Button */} + // + // + // + // + // - - - )} + // + // + // )} + // + // ); + + return ( + <> +
+ ); }; diff --git a/src/views/CampusSafety/views/LostAndFound/views/MissingItemEdit/index.tsx b/src/views/CampusSafety/views/LostAndFound/views/MissingItemEdit/index.tsx index fbe35d649..751e6c358 100644 --- a/src/views/CampusSafety/views/LostAndFound/views/MissingItemEdit/index.tsx +++ b/src/views/CampusSafety/views/LostAndFound/views/MissingItemEdit/index.tsx @@ -24,6 +24,7 @@ import { DatePicker, DateValidationError, LocalizationProvider } from '@mui/x-da import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; +import ItemForm from 'views/CampusSafety/components/ItemForm'; const MissingItemFormEdit = () => { const navigate = useNavigate(); @@ -159,25 +160,25 @@ const MissingItemFormEdit = () => { const requiredFields = ['category', 'description', 'locationLost']; - const validateForm = () => { - const errors: { [key: string]: string } = {}; - requiredFields.forEach((field) => { - if (!formData[field as keyof typeof formData]) { - errors[field] = 'This field is required'; - } - }); - if (dateError !== null) { - errors['dateLost'] = dateError; - } - setValidationErrors(errors); - return Object.keys(errors).length === 0; - }; + // const validateForm = () => { + // const errors: { [key: string]: string } = {}; + // requiredFields.forEach((field) => { + // if (!formData[field as keyof typeof formData]) { + // errors[field] = 'This field is required'; + // } + // }); + // if (dateError !== null) { + // errors['dateLost'] = dateError; + // } + // setValidationErrors(errors); + // return Object.keys(errors).length === 0; + // }; - const handleFormSubmit = () => { - if (validateForm()) { - setShowConfirm(true); - } - }; + // const handleFormSubmit = () => { + // if (validateForm()) { + // setShowConfirm(true); + // } + // }; const handlePickup = async () => { const requestData = { @@ -194,423 +195,430 @@ const MissingItemFormEdit = () => { } }; - const handleReportSubmit = async () => { - const requestData: MissingItemReport = { - ...formData, - dateLost: new Date(formData.dateLost).toISOString(), - }; - const formFields = Object.keys(formData); - let newActionNote = ''; - for (let i = 0; i < formFields.length; i++) { - if ( - JSON.stringify(originalFormData[formFields[i] as keyof typeof originalFormData]) !== - JSON.stringify(formData[formFields[i] as keyof typeof formData]) - ) { - newActionNote += - formFields[i] + - ': OLD: ' + - originalFormData[formFields[i] as keyof typeof originalFormData] + - ', NEW: ' + - formData[formFields[i] as keyof typeof formData] + - ' '; - } - } - await lostAndFoundService.updateMissingItemReport(requestData, parseInt(itemId || '')); - const actionRequestData = { - missingID: parseInt(itemId || ''), - actionDate: new Date().toISOString(), - username: user.AD_Username, - isPublic: true, - action: 'Edited', - actionNote: newActionNote, - }; - await lostAndFoundService.createAdminAction(parseInt(itemId || ''), actionRequestData); - navigate('/lostandfound'); - }; + // const handleReportSubmit = async () => { + // const requestData: MissingItemReport = { + // ...formData, + // dateLost: new Date(formData.dateLost).toISOString(), + // }; + // const formFields = Object.keys(formData); + // let newActionNote = ''; + // for (let i = 0; i < formFields.length; i++) { + // if ( + // JSON.stringify(originalFormData[formFields[i] as keyof typeof originalFormData]) !== + // JSON.stringify(formData[formFields[i] as keyof typeof formData]) + // ) { + // newActionNote += + // formFields[i] + + // ': OLD: ' + + // originalFormData[formFields[i] as keyof typeof originalFormData] + + // ', NEW: ' + + // formData[formFields[i] as keyof typeof formData] + + // ' '; + // } + // } + // await lostAndFoundService.updateMissingItemReport(requestData, parseInt(itemId || '')); + // const actionRequestData = { + // missingID: parseInt(itemId || ''), + // actionDate: new Date().toISOString(), + // username: user.AD_Username, + // isPublic: true, + // action: 'Edited', + // actionNote: newActionNote, + // }; + // await lostAndFoundService.createAdminAction(parseInt(itemId || ''), actionRequestData); + // navigate('/lostandfound'); + // }; - const [dateError, setDateError] = useState(null); + // const [dateError, setDateError] = useState(null); - const errorMessage = useMemo(() => { - switch (dateError) { - case 'invalidDate': { - return 'Invalid Date'; - } - case 'disableFuture': { - return 'Cannot lose an item in the future'; - } - default: { - return null; - } - } - }, [dateError]); + // const errorMessage = useMemo(() => { + // switch (dateError) { + // case 'invalidDate': { + // return 'Invalid Date'; + // } + // case 'disableFuture': { + // return 'Cannot lose an item in the future'; + // } + // default: { + // return null; + // } + // } + // }, [dateError]); // Using DatePicker component from MUI/x, with custom styling to fix dark mode contrast issues - const customDatePicker = ( - - setFormData({ ...formData, dateLost: value?.toString() || '' })} - onError={(newError) => setDateError(newError)} - disableFuture - orientation="portrait" - name="Date Lost" - // Custom styling for popup box, better dark mode contrast - // Thanks to help for understanding from - // https://blog.openreplay.com/styling-and-customizing-material-ui-date-pickers/ - slotProps={{ - textField: { - helperText: errorMessage ? errorMessage : 'Change if lost before today', - // Custom styling for the input field, to make it look like filled variant - sx: { - backgroundColor: 'var(--mui-palette-FilledInput-bg);', - paddingTop: '7px;', - borderRadius: '5px;', - width: '100%;', - '& .Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' }, - '& .MuiInputLabel-shrink': { - transform: 'translate(14px, 4px) scale(0.75);', - }, - '& .MuiFormLabel-root.Mui-focused': { - color: 'var(--mui-palette-secondary-main);', - }, - '& .MuiOutlinedInput-notchedOutline': { - borderWidth: '0;', - borderBottom: - '1px solid rgba(var(--mui-palette-common-onBackgroundChannel) / var(--mui-opacity-inputUnderline));', - borderRadius: '0;', - }, - }, - }, - layout: { - sx: { - '& .MuiPickersLayout-contentWrapper .Mui-selected': { - backgroundColor: 'var(--mui-palette-secondary-400);', - }, - '.MuiPickersLayout-contentWrapper .MuiPickersDay-root:focus.Mui-selected': { - backgroundColor: 'var(--mui-palette-secondary-400);', - }, - '.MuiPickersLayout-contentWrapper .MuiPickersDay-root.Mui-selected': { - backgroundColor: 'var(--mui-palette-secondary-400);', - }, - }, - }, - actionBar: { - sx: { - ...{ - '& .MuiButtonBase-root': { - color: 'var(--mui-palette-secondary-400);', - }, - }, - }, - }, - }} - /> - - ); + // const customDatePicker = ( + // + // setFormData({ ...formData, dateLost: value?.toString() || '' })} + // onError={(newError) => setDateError(newError)} + // disableFuture + // orientation="portrait" + // name="Date Lost" + // // Custom styling for popup box, better dark mode contrast + // // Thanks to help for understanding from + // // https://blog.openreplay.com/styling-and-customizing-material-ui-date-pickers/ + // slotProps={{ + // textField: { + // helperText: errorMessage ? errorMessage : 'Change if lost before today', + // // Custom styling for the input field, to make it look like filled variant + // sx: { + // backgroundColor: 'var(--mui-palette-FilledInput-bg);', + // paddingTop: '7px;', + // borderRadius: '5px;', + // width: '100%;', + // '& .Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' }, + // '& .MuiInputLabel-shrink': { + // transform: 'translate(14px, 4px) scale(0.75);', + // }, + // '& .MuiFormLabel-root.Mui-focused': { + // color: 'var(--mui-palette-secondary-main);', + // }, + // '& .MuiOutlinedInput-notchedOutline': { + // borderWidth: '0;', + // borderBottom: + // '1px solid rgba(var(--mui-palette-common-onBackgroundChannel) / var(--mui-opacity-inputUnderline));', + // borderRadius: '0;', + // }, + // }, + // }, + // layout: { + // sx: { + // '& .MuiPickersLayout-contentWrapper .Mui-selected': { + // backgroundColor: 'var(--mui-palette-secondary-400);', + // }, + // '.MuiPickersLayout-contentWrapper .MuiPickersDay-root:focus.Mui-selected': { + // backgroundColor: 'var(--mui-palette-secondary-400);', + // }, + // '.MuiPickersLayout-contentWrapper .MuiPickersDay-root.Mui-selected': { + // backgroundColor: 'var(--mui-palette-secondary-400);', + // }, + // }, + // }, + // actionBar: { + // sx: { + // ...{ + // '& .MuiButtonBase-root': { + // color: 'var(--mui-palette-secondary-400);', + // }, + // }, + // }, + // }, + // }} + // /> + // + // ); - return ( - <> -
- {showConfirm ? ( - setShowConfirm(false)} - onSubmit={handleReportSubmit} - /> - ) : ( - - - {loading ? ( - - ) : ( - <> - {/* Display the "Found" notice only if the status is "found" */} - {formData.status.toLowerCase() === 'found' && ( - - - - - - Gordon Police marked this item as{' '} - - Found - - - - } - color="success" - /> - - - - - Check your email for pickup - instructions.{' '} - - - - - - - - - )} - {/* Display a chip for items with statuses other than "active" */} - {formData.status.toLowerCase() !== 'active' && - formData.status.toLowerCase() !== 'found' && ( - - - - - - This item was marked as{' '} - - {formData.status.charAt(0).toUpperCase() + - formData.status.slice(1)} - - - - } - color="default" - /> - - - - )} - - - {/* Item Category */} - - - Item Category: - - - - {[ - 'Clothing/Shoes', - 'Electronics', - 'Jewelry/Watches', - 'Keys/Keychains', - 'Glasses', - 'Bottles/Mugs', - 'Books', - 'Bags/Purses', - 'Office Supplies', - 'IDs/Wallets', - 'Cash/Cards', - 'Other', - ].map((label) => ( - } - label={label} - value={label.toLowerCase().replace(/ /g, '/')} - onChange={(e) => - setFormData((prevData) => ({ - ...prevData, - category: (e.target as HTMLInputElement).value, - })) - } - checked={ - formData.category.toLowerCase().replace(/ /g, '/') === - label.toLowerCase().replace(/ /g, '/') - } - className={styles.category_item} - /> - ))} - - - + // return ( + // <> + //
+ // {showConfirm ? ( + // setShowConfirm(false)} + // onSubmit={handleReportSubmit} + // /> + // ) : ( + // + // + // {loading ? ( + // + // ) : ( + // <> + // {/* Display the "Found" notice only if the status is "found" */} + // {formData.status.toLowerCase() === 'found' && ( + // + // + // + // + // + // Gordon Police marked this item as{' '} + // + // Found + // + // + // + // } + // color="success" + // /> + // + // + // + // + // Check your email for pickup + // instructions.{' '} + // + // + // + // + // + // + // + // + // )} + // {/* Display a chip for items with statuses other than "active" */} + // {formData.status.toLowerCase() !== 'active' && + // formData.status.toLowerCase() !== 'found' && ( + // + // + // + // + // + // This item was marked as{' '} + // + // {formData.status.charAt(0).toUpperCase() + + // formData.status.slice(1)} + // + // + // + // } + // color="default" + // /> + // + // + // + // )} + // + // + // {/* Item Category */} + // + // + // Item Category: + // + // + // + // {[ + // 'Clothing/Shoes', + // 'Electronics', + // 'Jewelry/Watches', + // 'Keys/Keychains', + // 'Glasses', + // 'Bottles/Mugs', + // 'Books', + // 'Bags/Purses', + // 'Office Supplies', + // 'IDs/Wallets', + // 'Cash/Cards', + // 'Other', + // ].map((label) => ( + // } + // label={label} + // value={label.toLowerCase().replace(/ /g, '/')} + // onChange={(e) => + // setFormData((prevData) => ({ + // ...prevData, + // category: (e.target as HTMLInputElement).value, + // })) + // } + // checked={ + // formData.category.toLowerCase().replace(/ /g, '/') === + // label.toLowerCase().replace(/ /g, '/') + // } + // className={styles.category_item} + // /> + // ))} + // + // + // - {/* Item Colors */} - - - - Item Color: Choose ALL that apply: - - - - - {[ - 'Black', - 'Blue', - 'Brown', - 'Gold', - 'Gray', - 'Green', - 'Maroon', - 'Orange', - 'Pink', - 'Purple', - 'Red', - 'Silver', - 'Tan', - 'White', - 'Yellow', - ].map((color) => ( - handleColorChange(color)} - disabled={!isEditable} - /> - } - label={color} - /> - ))} - - - - + // {/* Item Colors */} + // + // + // + // Item Color: Choose ALL that apply: + // + // + // + // + // {[ + // 'Black', + // 'Blue', + // 'Brown', + // 'Gold', + // 'Gray', + // 'Green', + // 'Maroon', + // 'Orange', + // 'Pink', + // 'Purple', + // 'Red', + // 'Silver', + // 'Tan', + // 'White', + // 'Yellow', + // ].map((color) => ( + // handleColorChange(color)} + // disabled={!isEditable} + // /> + // } + // label={color} + // /> + // ))} + // + // + // + // - - - setFormData({ ...formData, brand: e.target.value })} - disabled={!isEditable} - // Custom styling on focus, better dark mode contrast - sx={{ - '& .MuiFormLabel-root.Mui-focused': { - color: 'var(--mui-palette-secondary-400);', - }, - }} - /> - - - setFormData({ ...formData, description: e.target.value })} - error={Boolean(validationErrors.description)} - helperText={validationErrors.description} - disabled={!isEditable} - // Custom styling on focus, better dark mode contrast - sx={{ - '& .MuiFormLabel-root.Mui-focused': { - color: 'var(--mui-palette-secondary-400);', - }, - }} - /> - - - setFormData({ ...formData, locationLost: e.target.value })} - disabled={!isEditable} - // Custom styling on focus, better dark mode contrast - sx={{ - '& .MuiFormLabel-root.Mui-focused': { - color: 'var(--mui-palette-secondary-400);', - }, - }} - /> - - - {customDatePicker} - - {formData.stolen ? ( - <> - This item was marked as stolen - - - setFormData({ ...formData, stolenDescription: e.target.value }) - } - disabled={!isEditable} - // Custom styling on focus, better dark mode contrast - sx={{ - '& .MuiFormLabel-root.Mui-focused': { - color: 'var(--mui-palette-secondary-400);', - }, - }} - /> - - - ) : null} - - + // + // + // setFormData({ ...formData, brand: e.target.value })} + // disabled={!isEditable} + // // Custom styling on focus, better dark mode contrast + // sx={{ + // '& .MuiFormLabel-root.Mui-focused': { + // color: 'var(--mui-palette-secondary-400);', + // }, + // }} + // /> + // + // + // setFormData({ ...formData, description: e.target.value })} + // error={Boolean(validationErrors.description)} + // helperText={validationErrors.description} + // disabled={!isEditable} + // // Custom styling on focus, better dark mode contrast + // sx={{ + // '& .MuiFormLabel-root.Mui-focused': { + // color: 'var(--mui-palette-secondary-400);', + // }, + // }} + // /> + // + // + // setFormData({ ...formData, locationLost: e.target.value })} + // disabled={!isEditable} + // // Custom styling on focus, better dark mode contrast + // sx={{ + // '& .MuiFormLabel-root.Mui-focused': { + // color: 'var(--mui-palette-secondary-400);', + // }, + // }} + // /> + // + // + // {customDatePicker} + // + // {formData.stolen ? ( + // <> + // This item was marked as stolen + // + // + // setFormData({ ...formData, stolenDescription: e.target.value }) + // } + // disabled={!isEditable} + // // Custom styling on focus, better dark mode contrast + // sx={{ + // '& .MuiFormLabel-root.Mui-focused': { + // color: 'var(--mui-palette-secondary-400);', + // }, + // }} + // /> + // + // + // ) : null} + // + // - {isEditable && ( - - - - - - )} - - )} - - )} + // {isEditable && ( + // + // + // + // + // + // )} + // + // )} + // + // + // )} + // + // ); + return ( + <> +
+ ); }; From 1da1a6f6fd819bdb8ee1b17efbc6151acbcf75cc Mon Sep 17 00:00:00 2001 From: Ben Myers Date: Sun, 16 Feb 2025 21:50:23 -0500 Subject: [PATCH 2/9] Added page header --- .../components/ItemForm/index.tsx | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/views/CampusSafety/components/ItemForm/index.tsx b/src/views/CampusSafety/components/ItemForm/index.tsx index 8ab5923cf..b689d5ad3 100644 --- a/src/views/CampusSafety/components/ItemForm/index.tsx +++ b/src/views/CampusSafety/components/ItemForm/index.tsx @@ -29,7 +29,31 @@ import { DatePicker, DateValidationError, LocalizationProvider } from '@mui/x-da import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; -const ItemForm = ({ formType }: { formType: any }) => { +const pageHeader = (formType: string) => { + if (formType == 'create') { + return ( + <> + + Report a Lost Item + + } + titleTypographyProps={{ align: 'center' }} + className="gc360_header" + /> + + ); + } else if (formType == 'edit') { + return ( + <> + + + ); + } +}; + +const ItemForm = ({ formType }: { formType: string }) => { const navigate = useNavigate(); const { itemId } = useParams<{ itemId: string }>(); const [loading, setLoading] = useState(true); @@ -420,6 +444,7 @@ const ItemForm = ({ formType }: { formType: any }) => { /> ) : ( + {pageHeader(formType)} {/* Item Category */} From 7f9cd9329e2f83c8da96547bfd2385156eec85da Mon Sep 17 00:00:00 2001 From: Ben Myers Date: Sun, 16 Feb 2025 22:00:33 -0500 Subject: [PATCH 3/9] added loader --- .../components/ItemForm/index.tsx | 346 +++++++++--------- 1 file changed, 174 insertions(+), 172 deletions(-) diff --git a/src/views/CampusSafety/components/ItemForm/index.tsx b/src/views/CampusSafety/components/ItemForm/index.tsx index b689d5ad3..6bc74ada4 100644 --- a/src/views/CampusSafety/components/ItemForm/index.tsx +++ b/src/views/CampusSafety/components/ItemForm/index.tsx @@ -445,189 +445,191 @@ const ItemForm = ({ formType }: { formType: string }) => { ) : ( {pageHeader(formType)} - - - {/* Item Category */} - - - Item Category: - - - - {[ - 'Clothing/Shoes', - 'Electronics', - 'Jewelry/Watches', - 'Keys/Keychains', - 'Glasses', - 'Bottles/Mugs', - 'Books', - 'Bags/Purses', - 'Office Supplies', - 'IDs/Wallets', - 'Cash/Cards', - 'Other', - ].map((label) => ( - } - label={label} - value={label.toLowerCase().replace(/ /g, '/')} - onChange={(e) => - setFormData((prevData) => ({ - ...prevData, - category: (e.target as HTMLInputElement).value, - })) - } - checked={formData.category === label.toLowerCase().replace(/ /g, '/')} - className={styles.category_item} - /> - ))} + {loading ? ( + + ) : ( + + + {/* Item Category */} + + + Item Category: + + + {[ + 'Clothing/Shoes', + 'Electronics', + 'Jewelry/Watches', + 'Keys/Keychains', + 'Glasses', + 'Bottles/Mugs', + 'Books', + 'Bags/Purses', + 'Office Supplies', + 'IDs/Wallets', + 'Cash/Cards', + 'Other', + ].map((label) => ( + } + label={label} + value={label.toLowerCase().replace(/ /g, '/')} + onChange={(e) => + setFormData((prevData) => ({ + ...prevData, + category: (e.target as HTMLInputElement).value, + })) + } + checked={formData.category === label.toLowerCase().replace(/ /g, '/')} + className={styles.category_item} + /> + ))} + + + {/* Error Message */} + + + - {/* Error Message */} - + {/* Item Colors */} + + + + Item Color: Choose ALL that apply: + + + + + {[ + 'Black', + 'Blue', + 'Brown', + 'Gold', + 'Gray', + 'Green', + 'Maroon', + 'Orange', + 'Pink', + 'Purple', + 'Red', + 'Silver', + 'Tan', + 'White', + 'Yellow', + ].map((color) => ( + handleColorChange(color)} + /> + } + label={color} + /> + ))} + + + + + + {/* Item Brand and Description */} + - - {/* Item Colors */} - - - - Item Color: Choose ALL that apply: - - - - - {[ - 'Black', - 'Blue', - 'Brown', - 'Gold', - 'Gray', - 'Green', - 'Maroon', - 'Orange', - 'Pink', - 'Purple', - 'Red', - 'Silver', - 'Tan', - 'White', - 'Yellow', - ].map((color) => ( - handleColorChange(color)} - /> - } - label={color} - /> - ))} - + + - - - - {/* Item Brand and Description */} - - - - - - - {/* Location Lost and Date Lost */} - - + {/* Location Lost and Date Lost */} + + + + + {customDatePicker} + - - {customDatePicker} + {/* Stolen Checkbox */} + + + + } + label="Was this item stolen? (Police staff will follow up)" + /> + + {/* Submit Button */} + + + + + - - - {/* Stolen Checkbox */} - - - - } - label="Was this item stolen? (Police staff will follow up)" - /> - - - - {/* Submit Button */} - - - - - + )} Date: Sun, 16 Feb 2025 22:24:26 -0500 Subject: [PATCH 4/9] added found chip --- .../components/ItemForm/ItemForm.module.scss | 27 ++ .../components/ItemForm/index.tsx | 419 +++++++++++------- 2 files changed, 279 insertions(+), 167 deletions(-) diff --git a/src/views/CampusSafety/components/ItemForm/ItemForm.module.scss b/src/views/CampusSafety/components/ItemForm/ItemForm.module.scss index 68d634b1b..3b5bc1ea6 100644 --- a/src/views/CampusSafety/components/ItemForm/ItemForm.module.scss +++ b/src/views/CampusSafety/components/ItemForm/ItemForm.module.scss @@ -64,6 +64,33 @@ width: 1.5em; } +.foundContainer { + margin-top: 2rem; + margin-bottom: 1rem; + margin-left: auto; + margin-right: auto; +} + +.largeChip { + padding: 20px; + height: 'auto'; +} + +.foundText { + font-weight: bold; + text-decoration: underline; +} + +.pickupButton { + height: fit-content; + padding: 1.2rem 1.5rem; + border-radius: 30px; +} + +.buttonContainer { + justify-content: flex-end; +} + @media (max-width: 1000px) { .form_card { margin: 0.5rem; diff --git a/src/views/CampusSafety/components/ItemForm/index.tsx b/src/views/CampusSafety/components/ItemForm/index.tsx index 6bc74ada4..de92336a3 100644 --- a/src/views/CampusSafety/components/ItemForm/index.tsx +++ b/src/views/CampusSafety/components/ItemForm/index.tsx @@ -448,187 +448,272 @@ const ItemForm = ({ formType }: { formType: string }) => { {loading ? ( ) : ( - - - {/* Item Category */} - - - Item Category: - - - - {[ - 'Clothing/Shoes', - 'Electronics', - 'Jewelry/Watches', - 'Keys/Keychains', - 'Glasses', - 'Bottles/Mugs', - 'Books', - 'Bags/Purses', - 'Office Supplies', - 'IDs/Wallets', - 'Cash/Cards', - 'Other', - ].map((label) => ( - } - label={label} - value={label.toLowerCase().replace(/ /g, '/')} - onChange={(e) => - setFormData((prevData) => ({ - ...prevData, - category: (e.target as HTMLInputElement).value, - })) + <> + {/* Display the "Found" notice only if the status is "found" */} + {formData.status.toLowerCase() === 'found' && ( + + + + + + Gordon Police marked this item as{' '} + + Found + + + + } + color="success" + /> + + + + + Check your email for pickup + instructions.{' '} + + + + + + + + + )} + {/* Display a chip for items with statuses other than "active" */} + {formData.status.toLowerCase() !== 'active' && + formData.status.toLowerCase() !== 'found' && ( + + + + + + This item was marked as{' '} + + {formData.status.charAt(0).toUpperCase() + + formData.status.slice(1)} + + + } - checked={formData.category === label.toLowerCase().replace(/ /g, '/')} - className={styles.category_item} + color="default" /> - ))} + + + + )} + + + {/* Item Category */} + + + Item Category: + + + + {[ + 'Clothing/Shoes', + 'Electronics', + 'Jewelry/Watches', + 'Keys/Keychains', + 'Glasses', + 'Bottles/Mugs', + 'Books', + 'Bags/Purses', + 'Office Supplies', + 'IDs/Wallets', + 'Cash/Cards', + 'Other', + ].map((label) => ( + } + label={label} + value={label.toLowerCase().replace(/ /g, '/')} + onChange={(e) => + setFormData((prevData) => ({ + ...prevData, + category: (e.target as HTMLInputElement).value, + })) + } + checked={formData.category === label.toLowerCase().replace(/ /g, '/')} + className={styles.category_item} + /> + ))} + + + {/* Error Message */} + + + + + {/* Item Colors */} + + + + Item Color: Choose ALL that apply: + + + + {[ + 'Black', + 'Blue', + 'Brown', + 'Gold', + 'Gray', + 'Green', + 'Maroon', + 'Orange', + 'Pink', + 'Purple', + 'Red', + 'Silver', + 'Tan', + 'White', + 'Yellow', + ].map((color) => ( + handleColorChange(color)} + /> + } + label={color} + /> + ))} + + - {/* Error Message */} - + + + {/* Item Brand and Description */} + - - {/* Item Colors */} - - - - Item Color: Choose ALL that apply: - - - - - {[ - 'Black', - 'Blue', - 'Brown', - 'Gold', - 'Gray', - 'Green', - 'Maroon', - 'Orange', - 'Pink', - 'Purple', - 'Red', - 'Silver', - 'Tan', - 'White', - 'Yellow', - ].map((color) => ( - handleColorChange(color)} - /> - } - label={color} - /> - ))} - + + - - - - {/* Item Brand and Description */} - - - - - - - {/* Location Lost and Date Lost */} - - - - - {customDatePicker} - - - {/* Stolen Checkbox */} - - - - } - label="Was this item stolen? (Police staff will follow up)" - /> - - {/* Submit Button */} - - - + multiline + minRows={4} + variant="filled" + label={'Location Lost: Be as detailed as possible'} + name="locationLost" + value={formData.locationLost} + onChange={handleChange} + error={Boolean(validationErrors.locationLost)} + helperText={validationErrors.locationLost} + sx={{ + '& .MuiFormLabel-root.Mui-focused': { + color: 'var(--mui-palette-secondary-400);', + }, + }} + /> + + + {customDatePicker} + + + {/* Stolen Checkbox */} + + + + } + label="Was this item stolen? (Police staff will follow up)" + /> + + {/* Submit Button */} + + + + - + )} Date: Sun, 16 Feb 2025 22:32:32 -0500 Subject: [PATCH 5/9] Fixed infinite load on create form --- src/views/CampusSafety/components/ItemForm/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/CampusSafety/components/ItemForm/index.tsx b/src/views/CampusSafety/components/ItemForm/index.tsx index de92336a3..6766d4d43 100644 --- a/src/views/CampusSafety/components/ItemForm/index.tsx +++ b/src/views/CampusSafety/components/ItemForm/index.tsx @@ -357,7 +357,7 @@ const ItemForm = ({ formType }: { formType: string }) => { }; useEffect(() => { - if (formData.recordID > 0) { + if (formData.recordID > 0 || formType == 'create') { setLoading(false); } }, [formData.recordID]); From eb47cf549536ccb7b4676c222b8a1774ef60bb6d Mon Sep 17 00:00:00 2001 From: Ben Myers Date: Sun, 16 Feb 2025 22:43:20 -0500 Subject: [PATCH 6/9] added disabled fields --- .../components/ItemForm/index.tsx | 33 +++++++++++-------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/src/views/CampusSafety/components/ItemForm/index.tsx b/src/views/CampusSafety/components/ItemForm/index.tsx index 6766d4d43..aac015ca0 100644 --- a/src/views/CampusSafety/components/ItemForm/index.tsx +++ b/src/views/CampusSafety/components/ItemForm/index.tsx @@ -111,6 +111,7 @@ const ItemForm = ({ formType }: { formType: string }) => { const [newActionFormData] = useState({ action: '', actionNote: '' }); const [disableSubmit, setDisableSubmit] = useState(false); const [showConfirm, setShowConfirm] = useState(false); + const isEditable = formData.status === 'active'; const handleChange = (e: React.ChangeEvent) => { const { name, value, type, checked } = e.target; @@ -232,6 +233,7 @@ const ItemForm = ({ formType }: { formType: string }) => { ); const handleColorChange = (color: string) => { + if (!isEditable) return; setFormData((prevData) => { const colors = prevData.colors.includes(color) ? prevData.colors.filter((c) => c !== color) @@ -557,7 +559,7 @@ const ItemForm = ({ formType }: { formType: string }) => { ].map((label) => ( } + control={} label={label} value={label.toLowerCase().replace(/ /g, '/')} onChange={(e) => @@ -615,6 +617,7 @@ const ItemForm = ({ formType }: { formType: string }) => { handleColorChange(color)} + disabled={!isEditable} /> } label={color} @@ -634,6 +637,7 @@ const ItemForm = ({ formType }: { formType: string }) => { name="brand" value={formData.brand} onChange={handleChange} + disabled={!isEditable} error={Boolean(validationErrors.brand)} helperText={validationErrors.brand} sx={{ @@ -655,6 +659,7 @@ const ItemForm = ({ formType }: { formType: string }) => { onChange={handleChange} error={Boolean(validationErrors.description)} helperText={validationErrors.description} + disabled={!isEditable} sx={{ '& .MuiFormLabel-root.Mui-focused': { color: 'var(--mui-palette-secondary-400);', @@ -676,6 +681,7 @@ const ItemForm = ({ formType }: { formType: string }) => { onChange={handleChange} error={Boolean(validationErrors.locationLost)} helperText={validationErrors.locationLost} + disabled={!isEditable} sx={{ '& .MuiFormLabel-root.Mui-focused': { color: 'var(--mui-palette-secondary-400);', @@ -698,19 +704,20 @@ const ItemForm = ({ formType }: { formType: string }) => { label="Was this item stolen? (Police staff will follow up)" /> - {/* Submit Button */} - - - + {isEditable && ( + + + + - + )} From baa7bfe7fdee51d2f394cb28f7abfd17acb3618a Mon Sep 17 00:00:00 2001 From: Ben Myers Date: Sun, 16 Feb 2025 23:09:19 -0500 Subject: [PATCH 7/9] added snackbar --- .../components/ItemForm/index.tsx | 45 ++++++++++++++++--- 1 file changed, 38 insertions(+), 7 deletions(-) diff --git a/src/views/CampusSafety/components/ItemForm/index.tsx b/src/views/CampusSafety/components/ItemForm/index.tsx index aac015ca0..00a0eea66 100644 --- a/src/views/CampusSafety/components/ItemForm/index.tsx +++ b/src/views/CampusSafety/components/ItemForm/index.tsx @@ -13,7 +13,6 @@ import { Typography, Chip, } from '@mui/material'; -import Header from 'views/CampusSafety/components/Header'; import styles from './ItemForm.module.css'; import lostAndFoundService, { MissingItemReport } from 'services/lostAndFound'; import userService from 'services/user'; @@ -42,6 +41,19 @@ const pageHeader = (formType: string) => { titleTypographyProps={{ align: 'center' }} className="gc360_header" /> +
+ + + + Gordon Police manages campus Lost & Found + + + + Police staff will view reports, and you will be notified if your item is found. + + + +
); } else if (formType == 'edit') { @@ -438,12 +450,30 @@ const ItemForm = ({ formType }: { formType: string }) => { return ( <> {showConfirm ? ( - setShowConfirm(false)} - onSubmit={handleReportSubmit} - disableSubmit={disableSubmit} - /> + <> + {formType == 'create' ? ( + <> + setShowConfirm(false)} + onSubmit={handleReportSubmit} + disableSubmit={disableSubmit} + /> + setSnackbar((s) => ({ ...s, open: false }))} + /> + + ) : ( + setShowConfirm(false)} + onSubmit={handleReportSubmit} + /> + )} + ) : ( {pageHeader(formType)} @@ -702,6 +732,7 @@ const ItemForm = ({ formType }: { formType: string }) => { } label="Was this item stolen? (Police staff will follow up)" + disabled={!isEditable} /> {isEditable && ( From 1ea81ff643ab1a9e41c47d6725597bc8021e1d45 Mon Sep 17 00:00:00 2001 From: Ben Myers Date: Sun, 16 Feb 2025 23:15:06 -0500 Subject: [PATCH 8/9] Nuking create and edit pages --- .../views/MissingItemCreate/index.tsx | 525 --------------- .../views/MissingItemEdit/index.tsx | 613 ------------------ 2 files changed, 1138 deletions(-) diff --git a/src/views/CampusSafety/views/LostAndFound/views/MissingItemCreate/index.tsx b/src/views/CampusSafety/views/LostAndFound/views/MissingItemCreate/index.tsx index 0ca4b539e..3bca426cd 100644 --- a/src/views/CampusSafety/views/LostAndFound/views/MissingItemCreate/index.tsx +++ b/src/views/CampusSafety/views/LostAndFound/views/MissingItemCreate/index.tsx @@ -1,532 +1,7 @@ -// import { useState, useEffect, useCallback, useMemo } from 'react'; -// import { -// Card, -// CardHeader, -// Grid, -// TextField, -// Radio, -// FormGroup, -// FormControlLabel, -// Checkbox, -// Button, -// FormLabel, -// Typography, -// } from '@mui/material'; import Header from 'views/CampusSafety/components/Header'; -// import styles from './MissingItemCreate.module.scss'; -// import lostAndFoundService from 'services/lostAndFound'; -// import userService from 'services/user'; -// import ReportStolenModal from './components/reportStolen'; -// import ConfirmReport from './components/confirmReport'; -// import GordonSnackbar from 'components/Snackbar'; -// import { useNavigate } from 'react-router'; -// import { InfoOutlined } from '@mui/icons-material'; -// import { DatePicker, DateValidationError, LocalizationProvider } from '@mui/x-date-pickers'; -// import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; import ItemForm from 'views/CampusSafety/components/ItemForm'; const MissingItemFormCreate = () => { - // const navigate = useNavigate(); - - // const createSnackbar = useCallback((message, severity) => { - // setSnackbar({ message, severity, open: true }); - // }, []); - - // const [user, setUser] = useState({ - // firstName: '', - // lastName: '', - // emailAddr: '', - // phoneNumber: '', - // AD_Username: '', // Add AD_Username to user state - // }); - - // const [formData, setFormData] = useState({ - // category: '', - // colors: [] as string[], - // brand: '', - // description: '', - // locationLost: '', - // stolen: false, - // stolenDescription: '', // Added stolenDescription field - // dateLost: '', - // status: 'active', - // forGuest: false, - // }); - - // const [isStolenModalOpen, setStolenModalOpen] = useState(false); - // const [showConfirm, setShowConfirm] = useState(false); - // const [validationErrors, setValidationErrors] = useState<{ [key: string]: string }>({}); - // const [snackbar, setSnackbar] = useState({ message: '', severity: undefined, open: false }); - // const [newActionFormData] = useState({ action: '', actionNote: '' }); - // const [disableSubmit, setDisableSubmit] = useState(false); - - // useEffect(() => { - // const fetchUserData = async () => { - // try { - // const userInfo = await userService.getProfileInfo(); - // setUser({ - // firstName: userInfo?.FirstName || '', - // lastName: userInfo?.LastName || '', - // emailAddr: userInfo?.Email || '', - // phoneNumber: userInfo?.MobilePhone || '', - // AD_Username: userInfo?.AD_Username || '', // Set AD_Username - // }); - // } catch (error) { - // console.error('Error fetching user data:', error); - // } - // }; - - // fetchUserData(); - // }, []); - - // Catch browser reloads, and show warning message about unsaved changes. - // useEffect(() => { - // function handleBeforeUnload(event: BeforeUnloadEvent) { - // event.preventDefault(); - // return (event.returnValue = ''); - // } - // window.addEventListener('beforeunload', handleBeforeUnload, { capture: true }); - // return () => { - // window.removeEventListener('beforeunload', handleBeforeUnload, { capture: true }); - // }; - // }, []); - - // const requiredFields = ['category', 'description', 'locationLost']; - - // const validateForm = () => { - // const errors: { [key: string]: string } = {}; - // requiredFields.forEach((field) => { - // if (!formData[field as keyof typeof formData]) { - // errors[field] = 'This field is required'; - // } - // }); - // if (dateError !== null) { - // errors['dateLost'] = dateError; - // } - // setValidationErrors(errors); - // return Object.keys(errors).length === 0; - // }; - - // const handleChange = (e: React.ChangeEvent) => { - // const { name, value, type, checked } = e.target; - - // if (name === 'stolen') { - // if (checked) { - // // If the stolen checkbox is checked, open the modal - // setStolenModalOpen(true); - // setFormData((prevData) => ({ - // ...prevData, - // [name]: checked, - // })); - // } else { - // // If the stolen checkbox is unchecked, set stolen to false but do not clear stolenDescription - // setFormData((prevData) => ({ - // ...prevData, - // stolen: false, - // })); - // } - // } else { - // setFormData((prevData) => ({ - // ...prevData, - // [name]: type === 'checkbox' ? checked : value, - // })); - // } - // }; - - // const handleColorChange = (color: string) => { - // setFormData((prevData) => { - // const colors = prevData.colors.includes(color) - // ? prevData.colors.filter((c) => c !== color) - // : [...prevData.colors, color]; - // return { ...prevData, colors }; - // }); - // }; - - // const handleModalClose = () => { - // setStolenModalOpen(false); - // setFormData((prevData) => ({ - // ...prevData, - // stolen: false, - // })); - // }; - - // const handleModalSubmit = (stolenDescription: string) => { - // setFormData((prevData) => ({ - // ...prevData, - // stolenDescription, // Capture stolen description from modal - // })); - // setStolenModalOpen(false); - // }; - - // const handleFormSubmit = () => { - // if (validateForm()) { - // if (!formData.stolen) { - // setFormData((prevData) => ({ - // ...prevData, - // stolenDescription: '', - // })); - // } - // if (!formData.dateLost) { - // const now = new Date(); - // setFormData((prevData) => ({ - // ...prevData, - // dateLost: now.toISOString(), - // })); - // } - // setShowConfirm(true); - // } - // }; - - // const handleReportSubmit = async () => { - // if (!disableSubmit) { - // setDisableSubmit(true); - // try { - // const now = new Date(); - // const requestData = { - // ...formData, - // ...user, - // dateLost: new Date(formData.dateLost).toISOString() || now.toISOString(), - // dateCreated: now.toISOString(), - // colors: formData.colors || [], - // submitterUsername: user.AD_Username, - // forGuest: false, - // }; - // const newReportId = await lostAndFoundService.createMissingItemReport(requestData); - // let actionRequestData = { - // ...newActionFormData, - // missingID: newReportId, - // actionDate: now.toISOString(), - // username: user.AD_Username, - // isPublic: true, - // action: 'Created', - // }; - // await lostAndFoundService.createAdminAction(newReportId, actionRequestData); - // navigate('/lostandfound'); - // } catch (error) { - // createSnackbar(`Failed to create the missing item report.`, `error`); - // setDisableSubmit(false); - // } - // } - // }; - - // const [dateError, setDateError] = useState(null); - - // const errorMessage = useMemo(() => { - // switch (dateError) { - // case 'invalidDate': { - // return 'Invalid Date'; - // } - // case 'disableFuture': { - // return 'Cannot lose an item in the future'; - // } - // default: { - // return null; - // } - // } - // }, [dateError]); - - // Using DatePicker component from MUI/x, with custom styling to fix dark mode contrast issues - // const customDatePicker = ( - // - // setFormData({ ...formData, dateLost: value?.toString() || '' })} - // onError={(newError) => setDateError(newError)} - // disableFuture - // orientation="portrait" - // name="Date Lost" - // // Custom styling for popup box, better dark mode contrast - // // Thanks to help for understanding from - // // https://blog.openreplay.com/styling-and-customizing-material-ui-date-pickers/ - // slotProps={{ - // textField: { - // helperText: errorMessage ? errorMessage : 'Change if lost before today', - // // Custom styling for the input field, to make it look like filled variant - // sx: { - // backgroundColor: 'var(--mui-palette-FilledInput-bg);', - // paddingTop: '7px;', - // borderRadius: '5px;', - // width: '100%;', - // '& .Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' }, - // '& .MuiInputLabel-shrink': { - // transform: 'translate(14px, 4px) scale(0.75);', - // }, - // '& .MuiFormLabel-root.Mui-focused': { - // color: 'var(--mui-palette-secondary-main);', - // }, - // '& .MuiOutlinedInput-notchedOutline': { - // borderWidth: '0;', - // borderBottom: - // '1px solid rgba(var(--mui-palette-common-onBackgroundChannel) / var(--mui-opacity-inputUnderline));', - // borderRadius: '0;', - // }, - // }, - // }, - // layout: { - // sx: { - // '& .MuiPickersLayout-contentWrapper .Mui-selected': { - // backgroundColor: 'var(--mui-palette-secondary-400);', - // }, - // '.MuiPickersLayout-contentWrapper .MuiPickersDay-root:focus.Mui-selected': { - // backgroundColor: 'var(--mui-palette-secondary-400);', - // }, - // '.MuiPickersLayout-contentWrapper .MuiPickersDay-root.Mui-selected': { - // backgroundColor: 'var(--mui-palette-secondary-400);', - // }, - // }, - // }, - // actionBar: { - // sx: { - // ...{ - // '& .MuiButtonBase-root': { - // color: 'var(--mui-palette-secondary-400);', - // }, - // }, - // }, - // }, - // }} - // /> - // - // ); - - // return ( - // <> - //
- // {showConfirm ? ( - // <> - // setShowConfirm(false)} - // onSubmit={handleReportSubmit} - // disableSubmit={disableSubmit} - // /> - // setSnackbar((s) => ({ ...s, open: false }))} - // /> - // - // ) : ( - // - // - // Report a Lost Item - // - // } - // titleTypographyProps={{ align: 'center' }} - // className="gc360_header" - // /> - //
- // - // - // - // Gordon Police manages campus Lost & Found - // - // - // - // Police staff will view reports, and you will be notified if your item is found. - // - // - // - //
- // - // - // {/* Item Category */} - // - // - // Item Category: - // - // - // - // {[ - // 'Clothing/Shoes', - // 'Electronics', - // 'Jewelry/Watches', - // 'Keys/Keychains', - // 'Glasses', - // 'Bottles/Mugs', - // 'Books', - // 'Bags/Purses', - // 'Office Supplies', - // 'IDs/Wallets', - // 'Cash/Cards', - // 'Other', - // ].map((label) => ( - // } - // label={label} - // value={label.toLowerCase().replace(/ /g, '/')} - // onChange={(e) => - // setFormData((prevData) => ({ - // ...prevData, - // category: (e.target as HTMLInputElement).value, - // })) - // } - // checked={formData.category === label.toLowerCase().replace(/ /g, '/')} - // className={styles.category_item} - // /> - // ))} - // - // - // {/* Error Message */} - // - // - // - // - // {/* Item Colors */} - // - // - // - // Item Color: Choose ALL that apply: - // - // - // - // - // {[ - // 'Black', - // 'Blue', - // 'Brown', - // 'Gold', - // 'Gray', - // 'Green', - // 'Maroon', - // 'Orange', - // 'Pink', - // 'Purple', - // 'Red', - // 'Silver', - // 'Tan', - // 'White', - // 'Yellow', - // ].map((color) => ( - // handleColorChange(color)} - // /> - // } - // label={color} - // /> - // ))} - // - // - // - // - // - // {/* Item Brand and Description */} - // - // - // - // - // - // - - // {/* Location Lost and Date Lost */} - // - // - // - // - // {customDatePicker} - // - // - // - - // {/* Stolen Checkbox */} - // - // - // - // } - // label="Was this item stolen? (Police staff will follow up)" - // /> - // - // - - // {/* Submit Button */} - // - // - // - // - // - - // - // - // )} - // - // ); - return ( <>
diff --git a/src/views/CampusSafety/views/LostAndFound/views/MissingItemEdit/index.tsx b/src/views/CampusSafety/views/LostAndFound/views/MissingItemEdit/index.tsx index 751e6c358..e544d4fb7 100644 --- a/src/views/CampusSafety/views/LostAndFound/views/MissingItemEdit/index.tsx +++ b/src/views/CampusSafety/views/LostAndFound/views/MissingItemEdit/index.tsx @@ -1,620 +1,7 @@ -import { useState, useEffect, useMemo } from 'react'; -import { - Card, - CardHeader, - Grid, - TextField, - Radio, - FormGroup, - FormControlLabel, - Checkbox, - Button, - FormLabel, - Typography, - Chip, -} from '@mui/material'; import Header from 'views/CampusSafety/components/Header'; -import styles from './MissingItemEdit.module.scss'; -import lostAndFoundService, { MissingItemReport } from 'services/lostAndFound'; -import userService from 'services/user'; -import ConfirmReport from './components/confirmReport'; -import { useNavigate, useParams } from 'react-router'; -import GordonLoader from 'components/Loader'; -import { DatePicker, DateValidationError, LocalizationProvider } from '@mui/x-date-pickers'; -import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; -import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; -import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; import ItemForm from 'views/CampusSafety/components/ItemForm'; const MissingItemFormEdit = () => { - const navigate = useNavigate(); - const { itemId } = useParams<{ itemId: string }>(); - const [loading, setLoading] = useState(true); - const [isPickedUp, setIsPickedUp] = useState(false); //Added this to manage the button disable - const [validationErrors, setValidationErrors] = useState<{ [key: string]: string }>({}); - - const [originalFormData, setOriginalFormData] = useState({ - recordID: 0, - category: '', - colors: [] as string[], - brand: '', - description: '', - locationLost: '', - stolen: false, - stolenDescription: '', - dateLost: '', - dateCreated: '', - submitterUsername: '', - forGuest: false, - status: 'active', - }); - - const [user, setUser] = useState({ - firstName: '', - lastName: '', - emailAddr: '', - phoneNumber: '', - AD_Username: '', // Include AD_Username for submitterUsername - }); - - const [formData, setFormData] = useState({ - recordID: 0, - category: '', - colors: [] as string[], - brand: '', - description: '', - locationLost: '', - stolen: false, - stolenDescription: '', - dateLost: '', - dateCreated: '', - submitterUsername: '', - forGuest: false, - status: 'active', - }); - - const [showConfirm, setShowConfirm] = useState(false); - const isEditable = formData.status === 'active'; - - useEffect(() => { - const fetchUserData = async () => { - const userInfo = await userService.getProfileInfo(); - setUser({ - firstName: userInfo?.FirstName || '', - lastName: userInfo?.LastName || '', - emailAddr: userInfo?.Email || '', - phoneNumber: userInfo?.MobilePhone || '', - AD_Username: userInfo?.AD_Username || '', - }); - }; - fetchUserData(); - }, []); - - // Catch browser reloads, and show warning message about unsaved changes. - useEffect(() => { - function handleBeforeUnload(event: BeforeUnloadEvent) { - event.preventDefault(); - return (event.returnValue = ''); - } - window.addEventListener('beforeunload', handleBeforeUnload, { capture: true }); - return () => { - window.removeEventListener('beforeunload', handleBeforeUnload, { capture: true }); - }; - }, []); - - useEffect(() => { - const fetchItemData = async () => { - if (itemId) { - const item = await lostAndFoundService.getMissingItemReport(parseInt(itemId)); - setFormData({ - recordID: item?.recordID || 0, - category: item.category, - colors: item.colors || [], - brand: item.brand || '', - description: item.description, - locationLost: item.locationLost, - stolen: item.stolen, - stolenDescription: item.stolenDescription || '', - dateLost: item.dateLost, - dateCreated: item.dateCreated, - submitterUsername: item.submitterUsername, - forGuest: item.forGuest, - status: item.status || 'active', - }); - const originalReport = await lostAndFoundService.getMissingItemReport(parseInt(itemId)); - setOriginalFormData({ - recordID: originalReport?.recordID || 0, - category: originalReport.category, - colors: originalReport.colors || [], - brand: originalReport.brand || '', - description: originalReport.description, - locationLost: originalReport.locationLost, - stolen: originalReport.stolen, - stolenDescription: originalReport.stolenDescription || '', - dateLost: originalReport.dateLost, - dateCreated: originalReport.dateCreated, - submitterUsername: originalReport.submitterUsername, - forGuest: originalReport.forGuest, - status: originalReport.status || 'active', - }); - } - }; - fetchItemData(); - }, [itemId]); - - useEffect(() => { - if (formData.recordID > 0) { - setLoading(false); - } - }, [formData.recordID]); - - const handleColorChange = (color: string) => { - if (!isEditable) return; - setFormData((prevData) => { - const colors = prevData.colors.includes(color) - ? prevData.colors.filter((c) => c !== color) - : [...prevData.colors, color]; - return { ...prevData, colors }; - }); - }; - - const requiredFields = ['category', 'description', 'locationLost']; - - // const validateForm = () => { - // const errors: { [key: string]: string } = {}; - // requiredFields.forEach((field) => { - // if (!formData[field as keyof typeof formData]) { - // errors[field] = 'This field is required'; - // } - // }); - // if (dateError !== null) { - // errors['dateLost'] = dateError; - // } - // setValidationErrors(errors); - // return Object.keys(errors).length === 0; - // }; - - // const handleFormSubmit = () => { - // if (validateForm()) { - // setShowConfirm(true); - // } - // }; - - const handlePickup = async () => { - const requestData = { - ...formData, - status: 'PickedUp', // Change status to 'pickup' - }; - - try { - await lostAndFoundService.updateMissingItemReport(requestData, parseInt(itemId || '')); - setIsPickedUp(true); - //navigate('/lostandfound'); - } catch (error) { - console.error('Error updating report status:', error); - } - }; - - // const handleReportSubmit = async () => { - // const requestData: MissingItemReport = { - // ...formData, - // dateLost: new Date(formData.dateLost).toISOString(), - // }; - // const formFields = Object.keys(formData); - // let newActionNote = ''; - // for (let i = 0; i < formFields.length; i++) { - // if ( - // JSON.stringify(originalFormData[formFields[i] as keyof typeof originalFormData]) !== - // JSON.stringify(formData[formFields[i] as keyof typeof formData]) - // ) { - // newActionNote += - // formFields[i] + - // ': OLD: ' + - // originalFormData[formFields[i] as keyof typeof originalFormData] + - // ', NEW: ' + - // formData[formFields[i] as keyof typeof formData] + - // ' '; - // } - // } - // await lostAndFoundService.updateMissingItemReport(requestData, parseInt(itemId || '')); - // const actionRequestData = { - // missingID: parseInt(itemId || ''), - // actionDate: new Date().toISOString(), - // username: user.AD_Username, - // isPublic: true, - // action: 'Edited', - // actionNote: newActionNote, - // }; - // await lostAndFoundService.createAdminAction(parseInt(itemId || ''), actionRequestData); - // navigate('/lostandfound'); - // }; - - // const [dateError, setDateError] = useState(null); - - // const errorMessage = useMemo(() => { - // switch (dateError) { - // case 'invalidDate': { - // return 'Invalid Date'; - // } - // case 'disableFuture': { - // return 'Cannot lose an item in the future'; - // } - // default: { - // return null; - // } - // } - // }, [dateError]); - - // Using DatePicker component from MUI/x, with custom styling to fix dark mode contrast issues - // const customDatePicker = ( - // - // setFormData({ ...formData, dateLost: value?.toString() || '' })} - // onError={(newError) => setDateError(newError)} - // disableFuture - // orientation="portrait" - // name="Date Lost" - // // Custom styling for popup box, better dark mode contrast - // // Thanks to help for understanding from - // // https://blog.openreplay.com/styling-and-customizing-material-ui-date-pickers/ - // slotProps={{ - // textField: { - // helperText: errorMessage ? errorMessage : 'Change if lost before today', - // // Custom styling for the input field, to make it look like filled variant - // sx: { - // backgroundColor: 'var(--mui-palette-FilledInput-bg);', - // paddingTop: '7px;', - // borderRadius: '5px;', - // width: '100%;', - // '& .Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' }, - // '& .MuiInputLabel-shrink': { - // transform: 'translate(14px, 4px) scale(0.75);', - // }, - // '& .MuiFormLabel-root.Mui-focused': { - // color: 'var(--mui-palette-secondary-main);', - // }, - // '& .MuiOutlinedInput-notchedOutline': { - // borderWidth: '0;', - // borderBottom: - // '1px solid rgba(var(--mui-palette-common-onBackgroundChannel) / var(--mui-opacity-inputUnderline));', - // borderRadius: '0;', - // }, - // }, - // }, - // layout: { - // sx: { - // '& .MuiPickersLayout-contentWrapper .Mui-selected': { - // backgroundColor: 'var(--mui-palette-secondary-400);', - // }, - // '.MuiPickersLayout-contentWrapper .MuiPickersDay-root:focus.Mui-selected': { - // backgroundColor: 'var(--mui-palette-secondary-400);', - // }, - // '.MuiPickersLayout-contentWrapper .MuiPickersDay-root.Mui-selected': { - // backgroundColor: 'var(--mui-palette-secondary-400);', - // }, - // }, - // }, - // actionBar: { - // sx: { - // ...{ - // '& .MuiButtonBase-root': { - // color: 'var(--mui-palette-secondary-400);', - // }, - // }, - // }, - // }, - // }} - // /> - // - // ); - - // return ( - // <> - //
- // {showConfirm ? ( - // setShowConfirm(false)} - // onSubmit={handleReportSubmit} - // /> - // ) : ( - // - // - // {loading ? ( - // - // ) : ( - // <> - // {/* Display the "Found" notice only if the status is "found" */} - // {formData.status.toLowerCase() === 'found' && ( - // - // - // - // - // - // Gordon Police marked this item as{' '} - // - // Found - // - // - // - // } - // color="success" - // /> - // - // - // - // - // Check your email for pickup - // instructions.{' '} - // - // - // - // - // - // - // - // - // )} - // {/* Display a chip for items with statuses other than "active" */} - // {formData.status.toLowerCase() !== 'active' && - // formData.status.toLowerCase() !== 'found' && ( - // - // - // - // - // - // This item was marked as{' '} - // - // {formData.status.charAt(0).toUpperCase() + - // formData.status.slice(1)} - // - // - // - // } - // color="default" - // /> - // - // - // - // )} - // - // - // {/* Item Category */} - // - // - // Item Category: - // - // - // - // {[ - // 'Clothing/Shoes', - // 'Electronics', - // 'Jewelry/Watches', - // 'Keys/Keychains', - // 'Glasses', - // 'Bottles/Mugs', - // 'Books', - // 'Bags/Purses', - // 'Office Supplies', - // 'IDs/Wallets', - // 'Cash/Cards', - // 'Other', - // ].map((label) => ( - // } - // label={label} - // value={label.toLowerCase().replace(/ /g, '/')} - // onChange={(e) => - // setFormData((prevData) => ({ - // ...prevData, - // category: (e.target as HTMLInputElement).value, - // })) - // } - // checked={ - // formData.category.toLowerCase().replace(/ /g, '/') === - // label.toLowerCase().replace(/ /g, '/') - // } - // className={styles.category_item} - // /> - // ))} - // - // - // - - // {/* Item Colors */} - // - // - // - // Item Color: Choose ALL that apply: - // - // - // - // - // {[ - // 'Black', - // 'Blue', - // 'Brown', - // 'Gold', - // 'Gray', - // 'Green', - // 'Maroon', - // 'Orange', - // 'Pink', - // 'Purple', - // 'Red', - // 'Silver', - // 'Tan', - // 'White', - // 'Yellow', - // ].map((color) => ( - // handleColorChange(color)} - // disabled={!isEditable} - // /> - // } - // label={color} - // /> - // ))} - // - // - // - // - - // - // - // setFormData({ ...formData, brand: e.target.value })} - // disabled={!isEditable} - // // Custom styling on focus, better dark mode contrast - // sx={{ - // '& .MuiFormLabel-root.Mui-focused': { - // color: 'var(--mui-palette-secondary-400);', - // }, - // }} - // /> - // - // - // setFormData({ ...formData, description: e.target.value })} - // error={Boolean(validationErrors.description)} - // helperText={validationErrors.description} - // disabled={!isEditable} - // // Custom styling on focus, better dark mode contrast - // sx={{ - // '& .MuiFormLabel-root.Mui-focused': { - // color: 'var(--mui-palette-secondary-400);', - // }, - // }} - // /> - // - // - // setFormData({ ...formData, locationLost: e.target.value })} - // disabled={!isEditable} - // // Custom styling on focus, better dark mode contrast - // sx={{ - // '& .MuiFormLabel-root.Mui-focused': { - // color: 'var(--mui-palette-secondary-400);', - // }, - // }} - // /> - // - // - // {customDatePicker} - // - // {formData.stolen ? ( - // <> - // This item was marked as stolen - // - // - // setFormData({ ...formData, stolenDescription: e.target.value }) - // } - // disabled={!isEditable} - // // Custom styling on focus, better dark mode contrast - // sx={{ - // '& .MuiFormLabel-root.Mui-focused': { - // color: 'var(--mui-palette-secondary-400);', - // }, - // }} - // /> - // - // - // ) : null} - // - // - - // {isEditable && ( - // - // - // - // - // - // )} - // - // )} - // - // - // )} - // - // ); return ( <>
From dd612fba700734e15a8a26b133000f45da868d8b Mon Sep 17 00:00:00 2001 From: Ben Myers Date: Sun, 16 Feb 2025 23:17:54 -0500 Subject: [PATCH 9/9] Nuking scss files --- .../MissingItemCreate.module.scss | 96 --------------- .../MissingItemEdit.module.scss | 114 ------------------ 2 files changed, 210 deletions(-) delete mode 100644 src/views/CampusSafety/views/LostAndFound/views/MissingItemCreate/MissingItemCreate.module.scss delete mode 100644 src/views/CampusSafety/views/LostAndFound/views/MissingItemEdit/MissingItemEdit.module.scss diff --git a/src/views/CampusSafety/views/LostAndFound/views/MissingItemCreate/MissingItemCreate.module.scss b/src/views/CampusSafety/views/LostAndFound/views/MissingItemCreate/MissingItemCreate.module.scss deleted file mode 100644 index e6a46c66b..000000000 --- a/src/views/CampusSafety/views/LostAndFound/views/MissingItemCreate/MissingItemCreate.module.scss +++ /dev/null @@ -1,96 +0,0 @@ -.disclaimer { - display: flex; - flex-direction: row; - align-items: center; - column-gap: 1.5rem; - margin: 20px; -} - -.form_card { - margin: 0.7rem; -} - -.radio_group { - display: contents; -} - -.color_group { - display: contents; -} - -.box_background { - background-color: var(--mui-palette-neutral-100); - border-radius: 5px; - padding: 1rem; -} - -.category_group { - display: grid; - grid-template-columns: repeat(2, 1fr); -} - -.category_item { - width: 100%; -} - -.checkbox_group { - display: grid; - grid-template-columns: repeat(3, 1fr); - background-color: var(--mui-palette-neutral-100); -} - -.stolen_container { - padding: 0 1.5rem; - background-color: var(--mui-palette-neutral-100); - border-radius: 5px; - width: 100%; -} - -.submit_container { - margin: 1rem 0; - padding-right: 5rem; - display: flex; - justify-content: flex-end; -} - -.submit_button { - font-size: 1.2rem; - padding: 0.7rem; -} - -.icon { - color: var(--mui-palette-neutral-400); - height: 1.5em; - width: 1.5em; -} - -@media (max-width: 1000px) { - .form_card { - margin: 0.5rem; - } - - .category_group { - grid-template-columns: 1fr; - padding: 0.8rem; - } - - .checkbox_group { - grid-template-columns: repeat(2, 1fr); - } - - .stolen_container { - padding: 1rem; - text-align: left; - } - - .submit_container { - justify-content: center; - padding-right: 0rem; - } - - .submit_button { - font-size: 1rem; - padding: 1rem; - min-width: fit-content; - } -} diff --git a/src/views/CampusSafety/views/LostAndFound/views/MissingItemEdit/MissingItemEdit.module.scss b/src/views/CampusSafety/views/LostAndFound/views/MissingItemEdit/MissingItemEdit.module.scss deleted file mode 100644 index e41da1b75..000000000 --- a/src/views/CampusSafety/views/LostAndFound/views/MissingItemEdit/MissingItemEdit.module.scss +++ /dev/null @@ -1,114 +0,0 @@ -.form_card { - margin: 0.7rem; -} - -.radio_group { - display: contents; -} - -.box_background { - background-color: var(--mui-palette-neutral-100); - border-radius: 5px; - padding: 1rem; -} - -.category_group { - display: grid; - grid-template-columns: repeat(2, 1fr); -} - -.category_item { - width: 100%; -} - -.checkbox_group { - column-count: 3; - background-color: var(--mui-palette-neutral-100); -} - -.stolen_container { - padding: 0 1.5rem; - background-color: var(--mui-palette-neutral-100); - border-radius: 5px; - width: 100%; -} - -.submit_container { - margin: 1rem 0; - display: flex; - justify-content: center; - gap: 1rem; -} - -.submit_button { - font-size: 1rem; - padding: 0.8rem; - text-transform: uppercase; -} - -.icon { - color: var(--mui-palette-neutral-400); - height: 1.5em; - width: 1.5em; -} - -.foundContainer { - margin-top: 2rem; - margin-bottom: 1rem; - margin-left: auto; - margin-right: auto; -} - -.largeChip { - padding: 20px; - height: 'auto'; -} - -.foundText { - font-weight: bold; - text-decoration: underline; -} - -.pickupButton { - height: fit-content; - padding: 1.2rem 1.5rem; - border-radius: 30px; -} - -.buttonContainer { - justify-content: flex-end; -} - -@media (max-width: 900px) { - .form_card { - margin: 0.5rem; - } - - .category_group { - grid-template-columns: 1fr; - padding: 0.8rem; - } - - .checkbox_group { - column-count: 2; - } - - .stolen_container { - padding: 1rem; - text-align: left; - } - - .submit_container { - justify-content: center; - padding-right: 0rem; - } - - .submit_button { - font-size: 0.9rem; - padding: 0.7rem; - } - - .buttonContainer { - justify-content: flex-start; - } -}