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