aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/Modals
diff options
context:
space:
mode:
authorLibravatar Mo Tarbin <mhed.t91@gmail.com>2024-06-30 18:55:39 -0400
committerLibravatar Mo Tarbin <mhed.t91@gmail.com>2024-06-30 18:55:39 -0400
commit2657469964e24ffbeb905024532120395f6e797c (patch)
tree2fe9db8a4ecfa92d854ca94f7586d81163c8bd25 /src/views/Modals
downloaddonetick-frontend-2657469964e24ffbeb905024532120395f6e797c.tar.gz
donetick-frontend-2657469964e24ffbeb905024532120395f6e797c.tar.bz2
donetick-frontend-2657469964e24ffbeb905024532120395f6e797c.zip
move to Donetick Org, First commit frontend
Diffstat (limited to '')
-rw-r--r--src/views/Modals/Inputs/ConfirmationModal.jsx43
-rw-r--r--src/views/Modals/Inputs/CreateThingModal.jsx112
-rw-r--r--src/views/Modals/Inputs/DateModal.jsx45
-rw-r--r--src/views/Modals/Inputs/SelectModal.jsx49
-rw-r--r--src/views/Modals/Inputs/TextModal.jsx46
5 files changed, 295 insertions, 0 deletions
diff --git a/src/views/Modals/Inputs/ConfirmationModal.jsx b/src/views/Modals/Inputs/ConfirmationModal.jsx
new file mode 100644
index 0000000..10f9bee
--- /dev/null
+++ b/src/views/Modals/Inputs/ConfirmationModal.jsx
@@ -0,0 +1,43 @@
+import { Box, Button, Modal, ModalDialog, Typography } from '@mui/joy'
+import React from 'react'
+
+function ConfirmationModal({ config }) {
+ const handleAction = isConfirmed => {
+ config.onClose(isConfirmed)
+ }
+
+ return (
+ <Modal open={config?.isOpen} onClose={config?.onClose}>
+ <ModalDialog>
+ <Typography level='h4' mb={1}>
+ {config?.title}
+ </Typography>
+
+ <Typography level='body-md' gutterBottom>
+ {config?.message}
+ </Typography>
+
+ <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+ <Button
+ onClick={() => {
+ handleAction(true)
+ }}
+ fullWidth
+ sx={{ mr: 1 }}
+ >
+ {config?.confirmText}
+ </Button>
+ <Button
+ onClick={() => {
+ handleAction(false)
+ }}
+ variant='outlined'
+ >
+ {config?.cancelText}
+ </Button>
+ </Box>
+ </ModalDialog>
+ </Modal>
+ )
+}
+export default ConfirmationModal
diff --git a/src/views/Modals/Inputs/CreateThingModal.jsx b/src/views/Modals/Inputs/CreateThingModal.jsx
new file mode 100644
index 0000000..59263ff
--- /dev/null
+++ b/src/views/Modals/Inputs/CreateThingModal.jsx
@@ -0,0 +1,112 @@
+import {
+ Box,
+ Button,
+ FormLabel,
+ Input,
+ Modal,
+ ModalDialog,
+ Option,
+ Select,
+ Textarea,
+ Typography,
+} from '@mui/joy'
+import { useEffect, useState } from 'react'
+
+function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
+ const [name, setName] = useState(currentThing?.name || '')
+ const [type, setType] = useState(currentThing?.type || 'numeric')
+ const [state, setState] = useState(currentThing?.state || '')
+ useEffect(() => {
+ if (type === 'boolean') {
+ if (state !== 'true' && state !== 'false') {
+ setState('false')
+ }
+ } else if (type === 'number') {
+ if (isNaN(state)) {
+ setState(0)
+ }
+ }
+ }, [type])
+ const handleSave = () => {
+ onSave({ name, type, id: currentThing?.id, state: state || null })
+ onClose()
+ }
+
+ return (
+ <Modal open={isOpen} onClose={onClose}>
+ <ModalDialog>
+ {/* <ModalClose /> */}
+ <Typography variant='h4'>P;lease add info</Typography>
+ <FormLabel>Name</FormLabel>
+
+ <Textarea
+ placeholder='Thing name'
+ value={name}
+ onChange={e => setName(e.target.value)}
+ sx={{ minWidth: 300 }}
+ />
+ <FormLabel>Type</FormLabel>
+ <Select value={type} sx={{ minWidth: 300 }}>
+ {['text', 'number', 'boolean'].map(type => (
+ <Option value={type} key={type} onClick={() => setType(type)}>
+ {type.charAt(0).toUpperCase() + type.slice(1)}
+ </Option>
+ ))}
+ </Select>
+
+ {type === 'text' && (
+ <>
+ <FormLabel>Value</FormLabel>
+ <Input
+ placeholder='Thing value'
+ value={state || ''}
+ onChange={e => setState(e.target.value)}
+ sx={{ minWidth: 300 }}
+ />
+ </>
+ )}
+ {type === 'number' && (
+ <>
+ <FormLabel>Value</FormLabel>
+ <Input
+ placeholder='Thing value'
+ type='number'
+ value={state || ''}
+ onChange={e => {
+ setState(e.target.value)
+ }}
+ sx={{ minWidth: 300 }}
+ />
+ </>
+ )}
+ {type === 'boolean' && (
+ <>
+ <FormLabel>Value</FormLabel>
+ <Select sx={{ minWidth: 300 }} value={state}>
+ {['true', 'false'].map(value => (
+ <Option
+ value={value}
+ key={value}
+ onClick={() => setState(value)}
+ >
+ {value.charAt(0).toUpperCase() + value.slice(1)}
+ </Option>
+ ))}
+ </Select>
+ </>
+ )}
+
+ <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+ <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
+ {currentThing?.id ? 'Update' : 'Create'}
+ </Button>
+ <Button onClick={onClose} variant='outlined'>
+ {currentThing?.id ? 'Cancel' : 'Close'}
+ </Button>
+ </Box>
+ </ModalDialog>
+ </Modal>
+ )
+}
+
+export default CreateThingModal
diff --git a/src/views/Modals/Inputs/DateModal.jsx b/src/views/Modals/Inputs/DateModal.jsx
new file mode 100644
index 0000000..34319c3
--- /dev/null
+++ b/src/views/Modals/Inputs/DateModal.jsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import {
+ Modal,
+ Button,
+ Input,
+ ModalDialog,
+ ModalClose,
+ Box,
+ Typography,
+} from '@mui/joy'
+
+function DateModal({ isOpen, onClose, onSave, current, title }) {
+ const [date, setDate] = useState(
+ current ? new Date(current).toISOString().split('T')[0] : null,
+ )
+
+ const handleSave = () => {
+ onSave(date)
+ onClose()
+ }
+
+ return (
+ <Modal open={isOpen} onClose={onClose}>
+ <ModalDialog>
+ {/* <ModalClose /> */}
+ <Typography variant='h4'>{title}</Typography>
+ <Input
+ sx={{ mt: 3 }}
+ type='date'
+ value={date}
+ onChange={e => setDate(e.target.value)}
+ />
+ <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+ <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
+ Save
+ </Button>
+ <Button onClick={onClose} variant='outlined'>
+ Cancel
+ </Button>
+ </Box>
+ </ModalDialog>
+ </Modal>
+ )
+}
+export default DateModal
diff --git a/src/views/Modals/Inputs/SelectModal.jsx b/src/views/Modals/Inputs/SelectModal.jsx
new file mode 100644
index 0000000..61e7ae9
--- /dev/null
+++ b/src/views/Modals/Inputs/SelectModal.jsx
@@ -0,0 +1,49 @@
+import {
+ Box,
+ Button,
+ Modal,
+ ModalDialog,
+ Option,
+ Select,
+ Typography,
+} from '@mui/joy'
+import React from 'react'
+
+function SelectModal({ isOpen, onClose, onSave, options, title, displayKey }) {
+ const [selected, setSelected] = React.useState(null)
+ const handleSave = () => {
+ onSave(options.find(item => item.id === selected))
+ onClose()
+ }
+
+ return (
+ <Modal open={isOpen} onClose={onClose}>
+ <ModalDialog>
+ <Typography variant='h4'>{title}</Typography>
+ <Select>
+ {options.map((item, index) => (
+ <Option
+ value={item.id}
+ key={item[displayKey]}
+ onClick={() => {
+ setSelected(item.id)
+ }}
+ >
+ {item[displayKey]}
+ </Option>
+ ))}
+ </Select>
+
+ <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+ <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
+ Save
+ </Button>
+ <Button onClick={onClose} variant='outlined'>
+ Cancel
+ </Button>
+ </Box>
+ </ModalDialog>
+ </Modal>
+ )
+}
+export default SelectModal
diff --git a/src/views/Modals/Inputs/TextModal.jsx b/src/views/Modals/Inputs/TextModal.jsx
new file mode 100644
index 0000000..2b44f78
--- /dev/null
+++ b/src/views/Modals/Inputs/TextModal.jsx
@@ -0,0 +1,46 @@
+import { Box, Button, Modal, ModalDialog, Textarea, Typography } from '@mui/joy'
+import { useState } from 'react'
+
+function TextModal({
+ isOpen,
+ onClose,
+ onSave,
+ current,
+ title,
+ okText,
+ cancelText,
+}) {
+ const [text, setText] = useState(current)
+
+ const handleSave = () => {
+ onSave(text)
+ onClose()
+ }
+
+ return (
+ <Modal open={isOpen} onClose={onClose}>
+ <ModalDialog>
+ {/* <ModalClose /> */}
+ <Typography variant='h4'>{title}</Typography>
+ <Textarea
+ placeholder='Type in hereā€¦'
+ value={text}
+ onChange={e => setText(e.target.value)}
+ minRows={2}
+ maxRows={4}
+ sx={{ minWidth: 300 }}
+ />
+
+ <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+ <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
+ {okText ? okText : 'Save'}
+ </Button>
+ <Button onClick={onClose} variant='outlined'>
+ {cancelText ? cancelText : 'Cancel'}
+ </Button>
+ </Box>
+ </ModalDialog>
+ </Modal>
+ )
+}
+export default TextModal