aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/Modals
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/Modals')
-rw-r--r--src/views/Modals/EditHistoryModal.jsx121
1 files changed, 121 insertions, 0 deletions
diff --git a/src/views/Modals/EditHistoryModal.jsx b/src/views/Modals/EditHistoryModal.jsx
new file mode 100644
index 0000000..1baab49
--- /dev/null
+++ b/src/views/Modals/EditHistoryModal.jsx
@@ -0,0 +1,121 @@
+import {
+ Box,
+ Button,
+ FormLabel,
+ Input,
+ Modal,
+ ModalDialog,
+ Typography,
+} from '@mui/joy'
+import moment from 'moment'
+import { useEffect, useState } from 'react'
+import ConfirmationModal from './Inputs/ConfirmationModal'
+
+function EditHistoryModal({ config, historyRecord }) {
+ useEffect(() => {
+ setCompletedDate(
+ moment(historyRecord.completedAt).format('YYYY-MM-DDTHH:mm'),
+ )
+ setDueDate(moment(historyRecord.dueDate).format('YYYY-MM-DDTHH:mm'))
+ setNotes(historyRecord.notes)
+ }, [historyRecord])
+
+ const [completedDate, setCompletedDate] = useState(
+ moment(historyRecord.completedDate).format('YYYY-MM-DDTHH:mm'),
+ )
+ const [dueDate, setDueDate] = useState(
+ moment(historyRecord.dueDate).format('YYYY-MM-DDTHH:mm'),
+ )
+ const [notes, setNotes] = useState(historyRecord.notes)
+ const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
+ return (
+ <Modal open={config?.isOpen} onClose={config?.onClose}>
+ <ModalDialog>
+ <Typography level='h4' mb={1}>
+ Edit History
+ </Typography>
+ <FormLabel>Due Date</FormLabel>
+ <Input
+ type='datetime-local'
+ value={dueDate}
+ onChange={e => {
+ setDueDate(e.target.value)
+ }}
+ />
+ <FormLabel>Completed Date</FormLabel>
+ <Input
+ type='datetime-local'
+ value={completedDate}
+ onChange={e => {
+ setCompletedDate(e.target.value)
+ }}
+ />
+ <FormLabel>Note</FormLabel>
+ <Input
+ fullWidth
+ multiline
+ label='Additional Notes'
+ placeholder='Additional Notes'
+ value={notes}
+ onChange={e => {
+ if (e.target.value.trim() === '') {
+ setNotes(null)
+ return
+ }
+ setNotes(e.target.value)
+ }}
+ size='md'
+ sx={{
+ mb: 1,
+ }}
+ />
+
+ {/* 3 button save , cancel and delete */}
+ <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+ <Button
+ onClick={() =>
+ config.onSave({
+ id: historyRecord.id,
+ completedAt: moment(completedDate).toISOString(),
+ dueDate: moment(dueDate).toISOString(),
+ notes,
+ })
+ }
+ fullWidth
+ sx={{ mr: 1 }}
+ >
+ Save
+ </Button>
+ <Button onClick={config.onClose} variant='outlined'>
+ Cancel
+ </Button>
+ <Button
+ onClick={() => {
+ setIsDeleteModalOpen(true)
+ }}
+ variant='outlined'
+ color='danger'
+ >
+ Delete
+ </Button>
+ </Box>
+ <ConfirmationModal
+ config={{
+ isOpen: isDeleteModalOpen,
+ onClose: isConfirm => {
+ if (isConfirm) {
+ config.onDelete(historyRecord.id)
+ }
+ setIsDeleteModalOpen(false)
+ },
+ title: 'Delete History',
+ message: 'Are you sure you want to delete this history?',
+ confirmText: 'Delete',
+ cancelText: 'Cancel',
+ }}
+ />
+ </ModalDialog>
+ </Modal>
+ )
+}
+export default EditHistoryModal