Skip to content

Commit

Permalink
remove add shift accordion
Browse files Browse the repository at this point in the history
  • Loading branch information
@KatieMSB
KatieMSB committed Jan 18, 2024
1 parent b20f2d6 commit 26f271f
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 149 deletions.
279 changes: 131 additions & 148 deletions web/src/app/schedules/temp-sched/TempSchedAddNewShift.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
import React, { useEffect, useState } from 'react'
import { Button, Checkbox, FormControlLabel, Grid } from '@mui/material'
import Accordion from '@mui/material/Accordion'
import AccordionActions from '@mui/material/AccordionActions'
import AccordionSummary from '@mui/material/AccordionSummary'
import AccordionDetails from '@mui/material/AccordionDetails'
import Typography from '@mui/material/Typography'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import ToggleIcon from '@mui/icons-material/CompareArrows'
import _ from 'lodash'
import { dtToDuration, Shift, TempSchedValue } from './sharedUtils'
Expand Down Expand Up @@ -155,155 +150,142 @@ export default function TempSchedAddNewShift({
value={shift}
onChange={(val: Shift) => setShift(val)}
>
<Accordion
variant='outlined'
onChange={() => setShowForm(!showForm)}
expanded={showForm}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
data-cy='add-shift-expander'
>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography
color='textSecondary'
variant='button'
style={{ width: '100%' }}
>
ADD SHIFT
Add Shift
</Typography>
</AccordionSummary>
<AccordionDetails data-cy='add-shift-container'>
<Grid container spacing={2}>
<Grid item xs={12}>
<FormField
fullWidth
component={UserSelect}
label='Select a User'
name='userID'
/>
</Grid>
<Grid item xs={12}>
<FormControlLabel
control={<Checkbox checked={custom} data-cy='toggle-custom' />}
label={
<Typography
color='textSecondary'
sx={{ fontStyle: 'italic' }}
>
Configure custom shift
</Typography>
}
onChange={() => setCustom(!custom)}
/>
</Grid>
<Grid item xs={6}>
<FormField
fullWidth
component={ISODateTimePicker}
label='Shift Start'
name='shift-start'
fieldName='start'
min={value.start}
max={DateTime.fromISO(value.end, { zone })
.plus({ year: 1 })
.toISO()}
mapOnChangeValue={(
value: string,
formValue: TempSchedValue,
) => {
if (!manualEntry) {
const diff = DateTime.fromISO(value, { zone }).diff(
DateTime.fromISO(formValue.start, { zone }),
)
formValue.end = DateTime.fromISO(formValue.end, { zone })
.plus(diff)
.toISO()
}
return value
}}
timeZone={zone}
disabled={q.loading || !custom}
hint={isLocalZone ? '' : fmtLocal(value?.start)}
/>
</Grid>
<Grid item xs={6}>
{manualEntry ? (
<FormField
fullWidth
component={ISODateTimePicker}
label='Shift End'
name='shift-end'
fieldName='end'
min={value.start}
max={DateTime.fromISO(value.end, { zone })
.plus({ year: 1 })
.toISO()}
hint={
custom ? (
<React.Fragment>
{!isLocalZone && fmtLocal(value?.end)}
<div>
<ClickableText
data-cy='toggle-duration-on'
onClick={() => setManualEntry(false)}
endIcon={<ToggleIcon />}
>
Configure as duration
</ClickableText>
</div>
</React.Fragment>
) : null
}
timeZone={zone}
disabled={q.loading || !custom}
/>
) : (
<FormField
fullWidth
component={NumberField}
label='Shift Duration (hours)'
name='shift-end'
fieldName='end'
float
// value held in form input
mapValue={(nextVal: string, formValue: TempSchedValue) => {
const nextValDT = DateTime.fromISO(nextVal, { zone })
const formValDT = DateTime.fromISO(formValue?.start ?? '', {
zone,
})
const duration = dtToDuration(formValDT, nextValDT)
return duration === -1 ? '' : duration.toString()
}}
// value held in state
mapOnChangeValue={(
nextVal: string,
formValue: TempSchedValue,
) => {
if (!nextVal) return ''
return DateTime.fromISO(formValue.start, { zone })
.plus({ hours: parseFloat(nextVal) })
.toISO()
}}
step='any'
min={0}
disabled={q.loading || !custom}
hint={
custom ? (
</Grid>
<Grid item xs={12}>
<FormField
fullWidth
component={UserSelect}
label='Select a User'
name='userID'
/>
</Grid>
<Grid item xs={12}>
<FormControlLabel
control={<Checkbox checked={custom} data-cy='toggle-custom' />}
label={
<Typography
color='textSecondary'
sx={{ fontStyle: 'italic' }}
>
Configure custom shift
</Typography>
}
onChange={() => setCustom(!custom)}
/>
</Grid>
<Grid item xs={6}>
<FormField
fullWidth
component={ISODateTimePicker}
label='Shift Start'
name='shift-start'
fieldName='start'
min={value.start}
max={DateTime.fromISO(value.end, { zone })
.plus({ year: 1 })
.toISO()}
mapOnChangeValue={(
value: string,
formValue: TempSchedValue,
) => {
if (!manualEntry) {
const diff = DateTime.fromISO(value, { zone }).diff(
DateTime.fromISO(formValue.start, { zone }),
)
formValue.end = DateTime.fromISO(formValue.end, { zone })
.plus(diff)
.toISO()
}
return value
}}
timeZone={zone}
disabled={q.loading || !custom}
hint={isLocalZone ? '' : fmtLocal(value?.start)}
/>
</Grid>
<Grid item xs={6}>
{manualEntry ? (
<FormField
fullWidth
component={ISODateTimePicker}
label='Shift End'
name='shift-end'
fieldName='end'
min={value.start}
max={DateTime.fromISO(value.end, { zone })
.plus({ year: 1 })
.toISO()}
hint={
custom ? (
<React.Fragment>
{!isLocalZone && fmtLocal(value?.end)}
<div>
<ClickableText
data-cy='toggle-duration-off'
onClick={() => setManualEntry(true)}
data-cy='toggle-duration-on'
onClick={() => setManualEntry(false)}
endIcon={<ToggleIcon />}
>
Configure as date/time
Configure as duration
</ClickableText>
) : null
}
/>
)}
</Grid>
</Grid>
</AccordionDetails>
<AccordionActions>
</div>
</React.Fragment>
) : null
}
timeZone={zone}
disabled={q.loading || !custom}
/>
) : (
<FormField
fullWidth
component={NumberField}
label='Shift Duration (hours)'
name='shift-end'
fieldName='end'
float
// value held in form input
mapValue={(nextVal: string, formValue: TempSchedValue) => {
const nextValDT = DateTime.fromISO(nextVal, { zone })
const formValDT = DateTime.fromISO(formValue?.start ?? '', {
zone,
})
const duration = dtToDuration(formValDT, nextValDT)
return duration === -1 ? '' : duration.toString()
}}
// value held in state
mapOnChangeValue={(
nextVal: string,
formValue: TempSchedValue,
) => {
if (!nextVal) return ''
return DateTime.fromISO(formValue.start, { zone })
.plus({ hours: parseFloat(nextVal) })
.toISO()
}}
step='any'
min={0}
disabled={q.loading || !custom}
hint={
custom ? (
<ClickableText
data-cy='toggle-duration-off'
onClick={() => setManualEntry(true)}
endIcon={<ToggleIcon />}
>
Configure as date/time
</ClickableText>
) : null
}
/>
)}
</Grid>
<Grid item xs={12} container justifyContent='flex-end'>
<Button
data-cy='add-shift'
color='secondary'
Expand All @@ -312,8 +294,9 @@ export default function TempSchedAddNewShift({
>
Add
</Button>
</AccordionActions>
</Accordion>
</Grid>
</Grid>

</FormContainer>
)
}
7 changes: 6 additions & 1 deletion web/src/app/schedules/temp-sched/TempSchedDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import {
InputLabel,
FormControl,
SelectChangeEvent,
Divider,
} from '@mui/material'

const mutation = gql`
Expand Down Expand Up @@ -440,7 +441,11 @@ export default function TempSchedDialog({
</Grid>
</FormContainer>

<Grid item xs={12} className={classes.sticky}>
<Grid item xs={12}>
<Divider />
</Grid>

<Grid item xs={12}>
<TempSchedAddNewShift
value={value}
onChange={(shifts: Shift[]) =>
Expand Down

0 comments on commit 26f271f

Please sign in to comment.