diff options
author | Mo Tarbin <mhed.t91@gmail.com> | 2024-07-09 21:21:16 -0400 |
---|---|---|
committer | Mo Tarbin <mhed.t91@gmail.com> | 2024-07-09 21:21:16 -0400 |
commit | c684bdb9ece99935c4c5f3a3eb81787cc2a0ef19 (patch) | |
tree | db6b73e9722ed92b2471cd86dcb32be82322d85a /src/views/Landing/DemoAssignee.jsx | |
parent | 1255ea83568701f460f721e0c1a5d461fb0c5a25 (diff) | |
parent | e25a6d3be9b9ae443dd3e1cd57a8c5912cc088b2 (diff) | |
download | donetick-frontend-c684bdb9ece99935c4c5f3a3eb81787cc2a0ef19.tar.gz donetick-frontend-c684bdb9ece99935c4c5f3a3eb81787cc2a0ef19.tar.bz2 donetick-frontend-c684bdb9ece99935c4c5f3a3eb81787cc2a0ef19.zip |
Merge branch 'dev'
Diffstat (limited to '')
-rw-r--r-- | src/views/Landing/DemoAssignee.jsx | 192 |
1 files changed, 192 insertions, 0 deletions
diff --git a/src/views/Landing/DemoAssignee.jsx b/src/views/Landing/DemoAssignee.jsx new file mode 100644 index 0000000..5064cf0 --- /dev/null +++ b/src/views/Landing/DemoAssignee.jsx @@ -0,0 +1,192 @@ +import { + Box, + Card, + Checkbox, + Grid, + List, + ListItem, + Option, + Select, + Typography, +} from '@mui/joy' +import { useState } from 'react' +const ASSIGN_STRATEGIES = [ + 'random', + 'least_assigned', + 'least_completed', + 'keep_last_assigned', +] +const DemoAssignee = () => { + const [assignStrategy, setAssignStrategy] = useState('random') + const [assignees, setAssignees] = useState([ + { + userId: 3, + id: 3, + displayName: 'Ryan', + }, + ]) + const [assignedTo, setAssignedTo] = useState(3) + const performers = [ + { + userId: 1, + id: 1, + displayName: 'Mo', + }, + { + userId: 2, + id: 2, + displayName: 'Jiji', + }, + { + userId: 3, + id: 3, + displayName: 'Ryan', + }, + ] + return ( + <> + <Grid item xs={12} sm={6} data-aos-create-chore-assignee> + <Box + mt={2} + data-aos-delay={200} + data-aos-anchor='[data-aos-create-chore-assignee]' + data-aos='fade-right' + > + <Typography level='h4'>Assignees :</Typography> + <Typography level='h5'>Who can do this chore?</Typography> + <Card> + <List + orientation='horizontal' + wrap + sx={{ + '--List-gap': '8px', + '--ListItem-radius': '20px', + }} + > + {performers?.map(item => ( + <ListItem key={item.id}> + <Checkbox + // disabled={index === 0} + checked={assignees.find(a => a.userId == item.id) != null} + onClick={() => { + if (assignees.find(a => a.userId == item.id)) { + setAssignees( + assignees.filter(i => i.userId !== item.id), + ) + } else { + setAssignees([...assignees, { userId: item.id }]) + } + }} + overlay + disableIcon + variant='soft' + label={item.displayName} + /> + </ListItem> + ))} + </List> + </Card> + </Box> + <Box + mt={2} + data-aos-delay={300} + data-aos-anchor='[data-aos-create-chore-assignee]' + data-aos='fade-right' + > + <Typography level='h4'>Assigned :</Typography> + <Typography level='h5'> + Who is assigned the next due chore? + </Typography> + + <Select + placeholder={ + assignees.length === 0 + ? 'No Assignees yet can perform this chore' + : 'Select an assignee for this chore' + } + disabled={assignees.length === 0} + value={assignedTo > -1 ? assignedTo : null} + > + {performers + ?.filter(p => assignees.find(a => a.userId == p.userId)) + .map((item, index) => ( + <Option + value={item.id} + key={item.displayName} + onClick={() => {}} + > + {item.displayName} + {/* <Chip size='sm' color='neutral' variant='soft'> + </Chip> */} + </Option> + ))} + </Select> + </Box> + <Box + mt={2} + data-aos-delay={400} + data-aos-anchor='[data-aos-create-chore-assignee]' + data-aos='fade-right' + > + <Typography level='h4'>Picking Mode :</Typography> + <Typography level='h5'> + How to pick the next assignee for the following chore? + </Typography> + + <Card> + <List + orientation='horizontal' + wrap + sx={{ + '--List-gap': '8px', + '--ListItem-radius': '20px', + }} + > + {ASSIGN_STRATEGIES.map((item, idx) => ( + <ListItem key={item}> + <Checkbox + // disabled={index === 0} + checked={assignStrategy === item} + onClick={() => setAssignStrategy(item)} + overlay + disableIcon + variant='soft' + label={item + .split('_') + .map(x => x.charAt(0).toUpperCase() + x.slice(1)) + .join(' ')} + /> + </ListItem> + ))} + </List> + </Card> + </Box> + </Grid> + <Grid item xs={12} sm={6} data-aos-create-chore-section-assignee> + <Card + sx={{ + p: 4, + py: 6, + }} + data-aos-delay={200} + data-aos-anchor='[data-aos-create-chore-section-assignee]' + data-aos='fade-left' + > + <Typography level='h3' textAlign='center' sx={{ mt: 2, mb: 4 }}> + Flexible Task Assignment + </Typography> + <Typography level='body-lg' textAlign='center' sx={{ mb: 4 }}> + Whether you’re a solo user managing personal tasks or coordinating + chores with others, Donetick provides robust assignment options. + Assign tasks to different people and choose specific rotation + strategies, such as assigning tasks based on who completed the most + or least, randomly rotating assignments, or sticking with the last + assigned person. + </Typography> + </Card> + </Grid> + </> + ) +} + +export default DemoAssignee |