Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui/temp-sched: Add fixed shifts for temporary schedules #3606

Merged
merged 17 commits into from
Jan 22, 2024
Merged

ui/temp-sched: Add fixed shifts for temporary schedules #3606

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
a1bb359
add fixed shifts to temporary schedule
KatieMSB Jan 16, 2024
4f6c083
use shift duration in list for coverage gap calc
KatieMSB Jan 16, 2024
4c50d8f
fix inferred duration
KatieMSB Jan 16, 2024
661c9fb
add custom shift option
KatieMSB Jan 16, 2024
3b8c344
Merge branch 'master' of github.com:target/goalert into temp-sched-fi…
KatieMSB Jan 16, 2024
f3d6efc
add day abreviation for 24hr shifts
KatieMSB Jan 16, 2024
ba843c9
run make check and update unit tests
KatieMSB Jan 16, 2024
7f7e79b
fix coverage gap test
KatieMSB Jan 16, 2024
b20f2d6
update cypress tests
KatieMSB Jan 17, 2024
26f271f
remove add shift accordion
KatieMSB Jan 18, 2024
4841da0
clean up inferred duration logic
KatieMSB Jan 18, 2024
4c7e7f8
formatting
KatieMSB Jan 18, 2024
ee31b9d
make duration nullable and fix interval label
KatieMSB Jan 18, 2024
3961959
formatting
KatieMSB Jan 18, 2024
b06b4fe
formatting
KatieMSB Jan 18, 2024
e7fbd5b
update cypress tests
KatieMSB Jan 18, 2024
b286627
use shift duration on shifts
KatieMSB Jan 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
286 changes: 145 additions & 141 deletions web/src/app/schedules/temp-sched/TempSchedAddNewShift.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
import React, { useEffect, useState } from 'react'
import { Button, 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 { Button, Checkbox, FormControlLabel, Grid } from '@mui/material'
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'
import { FormContainer, FormField } from '../../forms'
import { DateTime, Interval } from 'luxon'
import { DateTime, Duration, Interval } from 'luxon'
import { FieldError } from '../../util/errutil'
import { isISOAfter } from '../../util/shifts'
import { useScheduleTZ } from '../useScheduleTZ'
Expand Down Expand Up @@ -86,7 +81,8 @@ export default function TempSchedAddNewShift({
}: AddShiftsStepProps): JSX.Element {
const [submitted, setSubmitted] = useState(false)

const [manualEntry, setManualEntry] = useState(false)
const [custom, setCustom] = useState(false)
const [manualEntry, setManualEntry] = useState(true)
const { q, zone, isLocalZone } = useScheduleTZ(scheduleID)

// set start equal to the temporary schedule's start
Expand All @@ -96,11 +92,13 @@ export default function TempSchedAddNewShift({

setShift({
start: value.start,
end: DateTime.fromISO(value.start, { zone }).plus({ hours: 8 }).toISO(),
end: DateTime.fromISO(value.start, { zone })
.plus(value.shiftDur as Duration)
.toISO(),
userID: '',
truncated: false,
})
}, [value.start, zone])
}, [value.start, zone, value.shiftDur])

// fieldErrors handles errors manually through the client
// as this step form is nested inside the greater form
Expand Down Expand Up @@ -136,13 +134,13 @@ export default function TempSchedAddNewShift({

onChange(mergeShifts(value.shifts.concat(shift)))
const end = DateTime.fromISO(shift.end, { zone })
const diff = end.diff(DateTime.fromISO(shift.start, { zone }))
setShift({
userID: '',
truncated: false,
start: shift.end,
end: end.plus(diff).toISO(),
end: end.plus(value.shiftDur as Duration).toISO(),
})
setCustom(false)
setSubmitted(false)
}

Expand All @@ -152,137 +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={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}
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={
<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>
}
timeZone={zone}
disabled={q.loading}
/>
) : (
<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}
hint={
<ClickableText
data-cy='toggle-duration-off'
onClick={() => setManualEntry(true)}
endIcon={<ToggleIcon />}
>
Configure as date/time
</ClickableText>
}
/>
)}
</Grid>
</Grid>
</AccordionDetails>
<AccordionActions>
</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-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 ? (
<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 @@ -291,8 +294,9 @@ export default function TempSchedAddNewShift({
>
Add
</Button>
</AccordionActions>
</Accordion>
</Grid>
</Grid>

</FormContainer>
)
}
Loading
Loading