update edit form default value and loading disable

target · Jan 10, 2024 · 4fdb5d0 · 4fdb5d0
1 parent e3a2a30
commit 4fdb5d0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 17 deletions.
diff --git a/web/src/app/schedules/ScheduleRuleCreateDialog.tsx b/web/src/app/schedules/ScheduleRuleCreateDialog.tsx
@@ -54,15 +54,15 @@ export default function ScheduleRuleCreateDialog(
     ],
   })
 
-  const [{ error }, mutate] = useMutation(mutation)
+  const [{ error, fetching: mFetching }, mutate] = useMutation(mutation)
 
   return (
     <FormDialog
       onClose={onClose}
       title={`Add ${startCase(targetType)} to Schedule`}
       errors={nonFieldErrors(error)}
       maxWidth='md'
-      loading={!data && fetching}
+      loading={(!data && fetching) || mFetching}
       onSubmit={() =>
         mutate(
           {
@@ -89,7 +89,7 @@ export default function ScheduleRuleCreateDialog(
         <ScheduleRuleForm
           targetType={targetType}
           scheduleID={scheduleID}
-          targetDisabled={!data && fetching}
+          disabled={(!data && fetching) || mFetching}
           value={value}
           onChange={setValue}
         />

diff --git a/web/src/app/schedules/ScheduleRuleEditDialog.tsx b/web/src/app/schedules/ScheduleRuleEditDialog.tsx
@@ -42,7 +42,9 @@ interface ScheduleRuleEditDialog {
 export default function ScheduleRuleEditDialog(
   props: ScheduleRuleEditDialog,
 ): JSX.Element {
-  const [state, setState] = useState<ScheduleRuleFormValue | null>(null)
+  const [state, setState] = useState<{ value: ScheduleRuleFormValue | null }>({
+    value: null,
+  })
 
   const [{ data, fetching, error: readError }] = useQuery({
     query,
@@ -52,7 +54,7 @@ export default function ScheduleRuleEditDialog(
       tgt: props.target,
     },
   })
-  const [{ error }, commit] = useMutation(mutation)
+  const [{ error, fetching: mFetching }, commit] = useMutation(mutation)
   const { zone } = useScheduleTZ(props.scheduleID)
 
   if (readError) return <GenericError error={readError.message} />
@@ -67,14 +69,16 @@ export default function ScheduleRuleEditDialog(
       end: gqlClockTimeToISO(r.end, zone),
     })),
   }
+
   return (
     <FormDialog
       onClose={props.onClose}
       title={`Edit Rules for ${_.startCase(props.target.type)}`}
       errors={nonFieldErrors(error)}
       maxWidth='md'
+      loading={mFetching}
       onSubmit={() => {
-        if (!state) {
+        if (!state.value) {
           // no changes
           props.onClose()
           return
@@ -85,7 +89,7 @@ export default function ScheduleRuleEditDialog(
               target: props.target,
               scheduleID: props.scheduleID,
 
-              rules: state.rules.map((r) => ({
+              rules: state.value.rules.map((r) => ({
                 ...r,
                 start: isoToGQLClockTime(r.start, zone),
                 end: isoToGQLClockTime(r.end, zone),
@@ -101,9 +105,10 @@ export default function ScheduleRuleEditDialog(
         <ScheduleRuleForm
           targetType={props.target.type}
           targetDisabled
+          disabled={mFetching}
           scheduleID={props.scheduleID}
-          value={state || defaults}
-          onChange={(value) => setState(value)}
+          value={state.value || defaults}
+          onChange={(value) => setState({ value })}
         />
       }
     />

diff --git a/web/src/app/schedules/ScheduleRuleForm.tsx b/web/src/app/schedules/ScheduleRuleForm.tsx
@@ -104,7 +104,8 @@ export type ScheduleRuleFormValue = {
 
 interface ScheduleRuleFormProps {
   targetType: TargetType
-  targetDisabled?: boolean
+  targetDisabled?: boolean // can't change target when editing
+  disabled?: boolean
 
   scheduleID: string
   value: ScheduleRuleFormValue
@@ -114,7 +115,15 @@ interface ScheduleRuleFormProps {
 export default function ScheduleRuleForm(
   props: ScheduleRuleFormProps,
 ): ReactNode {
-  const { value, scheduleID, onChange } = props
+  const {
+    value,
+    scheduleID,
+    onChange,
+    disabled,
+    targetDisabled,
+    targetType,
+    ...formProps
+  } = props
   const classes = useStyles()
   const { zone, isLocalZone } = useScheduleTZ(scheduleID)
   const isMobile = useIsWidthDown('md')
@@ -133,7 +142,7 @@ export default function ScheduleRuleForm(
             required
             label=''
             name={`rules[${idx}].start`}
-            disabled={!zone}
+            disabled={!zone || disabled}
             timeZone={zone}
             hint={isLocalZone ? '' : fmtLocal(value.rules[idx].start)}
           />
@@ -146,7 +155,7 @@ export default function ScheduleRuleForm(
             required
             label=''
             name={`rules[${idx}].end`}
-            disabled={!zone}
+            disabled={!zone || disabled}
             timeZone={zone}
             hint={isLocalZone ? '' : fmtLocal(value.rules[idx].end)}
           />
@@ -163,6 +172,7 @@ export default function ScheduleRuleForm(
                 className={classes.noPadding}
                 component={Checkbox}
                 checkbox
+                disabled={disabled}
                 fieldName={`rules[${idx}].weekdayFilter[${dayIdx}]`}
                 name={day}
               />
@@ -180,6 +190,7 @@ export default function ScheduleRuleForm(
               select
               noError
               required
+              disabled={disabled}
               SelectProps={{
                 renderValue: renderDaysValue,
                 multiple: true,
@@ -208,6 +219,7 @@ export default function ScheduleRuleForm(
           {props.value.rules.length > 1 && (
             <IconButton
               aria-label='Delete rule'
+              disabled={disabled}
               onClick={() =>
                 onChange({
                   ...value,
@@ -225,18 +237,21 @@ export default function ScheduleRuleForm(
     )
   }
 
-  const { targetDisabled, targetType, ...formProps } = props
-
   return (
-    <FormContainer {...formProps} optionalLabels>
+    <FormContainer
+      {...formProps}
+      value={value}
+      onChange={onChange}
+      optionalLabels
+    >
       <Grid container spacing={2}>
         <Grid item xs={12}>
           <FormField
             fullWidth
             required
             component={targetType === 'user' ? UserSelect : RotationSelect}
             label={startCase(targetType)}
-            disabled={targetDisabled}
+            disabled={disabled || targetDisabled}
             name='targetID'
           />
         </Grid>
@@ -279,6 +294,7 @@ export default function ScheduleRuleForm(
                 >
                   <IconButton
                     aria-label='Add rule'
+                    disabled={disabled}
                     onClick={() =>
                       onChange({
                         ...value,