Let capacities be unlimited

frontend/src/components/programOccurrence/ProgramOccurrence.js

@@ -2,12 +2,12 @@ import React, {useEffect, useState} from 'react';
 import GenericForm from "../shared/GenericForm";
 import {fetchInternalTypeByFormType} from "../../api/internalTypeApi";
 import {ProgramAndNeedSatisfierField} from "./ProgramAndNeedSatisfierField";
-import FieldGroup from '../shared/FieldGroup';
 import {fetchCharacteristics} from '../../api/characteristicApi';
 import {getInstancesInClass} from '../../api/dynamicFormApi';
 import {Box} from '@mui/material';
 import {Loading} from '../shared';
 import SelectField from '../shared/fields/SelectField';
+import {CapacityField} from '../shared/CapacityField';
 
 export default function ProgramOccurrenceForm() {
   const formType = 'programOccurrence';
@@ -51,13 +51,12 @@ export default function ProgramOccurrenceForm() {
     } else if (implementation.optionsFromClass?.endsWith('#NeedSatisfier')) {
       return "";
     } else if (implementation.label === 'Capacity') {
-      return <FieldGroup component={implementation.fieldType.type} key={`${type}_${id}`}
-                         label={implementation.label} required={required} inputProps={{min: 0}}
-                         value={fields[`${type}_${id}`]} onChange={handleChange(`${type}_${id}`)}/>;
+      return <CapacityField fields={fields} handleChange={handleChange}
+                            capacityFieldId={characteristics['Capacity']._id} />;
     } else if (implementation.label === 'Occupancy') {
       return ''; // Not editable by the user
     } else if (implementation.label === "Occurrence Status") {
-      const statusFieldKey = `characteristic_${characteristics['Occurrence Status']?._id}`;
+      const statusFieldKey = `characteristic_${characteristics['Occurrence Status']._id}`;
       if (!statusFieldKey || !statusOptions) {
         return <Box minWidth={"350px"}><Loading message=""/></Box>;
       }

frontend/src/components/serviceOccurrence/ServiceOccurrence.js

@@ -2,12 +2,12 @@ import React, {useEffect, useState} from 'react';
 import GenericForm from "../shared/GenericForm";
 import {fetchInternalTypeByFormType} from "../../api/internalTypeApi";
 import {ServiceAndNeedSatisfierField} from "./ServiceAndNeedSatisfierField";
-import FieldGroup from '../shared/FieldGroup';
 import {fetchCharacteristics} from '../../api/characteristicApi';
 import {getInstancesInClass} from '../../api/dynamicFormApi';
 import {Box} from '@mui/material';
 import {Loading} from '../shared';
 import SelectField from '../shared/fields/SelectField';
+import {CapacityField} from '../shared/CapacityField';
 
 export default function ServiceOccurrenceForm() {
   const formType = 'serviceOccurrence';
@@ -52,13 +52,12 @@ export default function ServiceOccurrenceForm() {
     } else if (implementation.optionsFromClass?.endsWith('#NeedSatisfier')) {
       return "";
     } else if (implementation.label === 'Capacity') {
-      return <FieldGroup component={implementation.fieldType.type} key={`${type}_${id}`}
-                         label={implementation.label} required={required} inputProps={{min: 0}}
-                         value={fields[`${type}_${id}`]} onChange={handleChange(`${type}_${id}`)}/>;
+      return <CapacityField fields={fields} handleChange={handleChange}
+                            capacityFieldId={characteristics['Capacity']._id} />;
     } else if (implementation.label === 'Occupancy') {
       return ''; // Not editable by the user
     } else if (implementation.label === "Occurrence Status") {
-      const statusFieldKey = `characteristic_${characteristics['Occurrence Status']?._id}`;
+      const statusFieldKey = `characteristic_${characteristics['Occurrence Status']._id}`;
       if (!statusFieldKey || !statusOptions) {
         return <Box minWidth={"350px"}><Loading message=""/></Box>;
       }

frontend/src/components/shared/CapacityField.js

@@ -0,0 +1,36 @@
+import React from "react";
+import {useState} from "react";
+import SelectField from "../shared/fields/SelectField";
+import {Fade} from "@mui/material";
+import FieldGroup from "./FieldGroup";
+
+export function CapacityField({fields, handleChange, capacityFieldId}) {
+  const capacityFieldKey = `characteristic_${capacityFieldId}`;
+  const [isCapacityLimited, setIsCapacityLimited] = useState(typeof fields[capacityFieldKey] !== 'undefined'
+                                                             ? 'Yes' : 'No');
+
+  const handleChangeCapacity = e => {
+    const value = e.target.value;
+    setIsCapacityLimited(value);
+
+    // if the new isCapacityLimited value is No, unset the inner field
+    if (value === 'No') {
+      handleChange(capacityFieldKey)(null);
+    }
+  }
+
+  return <>
+    <SelectField key={capacityFieldKey} label="Is Capacity Limited?" required value={isCapacityLimited}
+                 options={['Yes', 'No']} onChange={e => handleChangeCapacity(e)}/>
+    {isCapacityLimited === "Yes"
+      ? <Fade in={isCapacityLimited === "Yes"}>
+        <div>
+          <FieldGroup component={'NumberField'} key={capacityFieldKey}
+                      label={'Capacity'} required inputProps={{min: 0}}
+                      value={fields[capacityFieldKey]} onChange={handleChange(capacityFieldKey)}/>
+        </div>
+      </Fade>
+      : null
+    }
+  </>
+}

frontend/src/components/shared/fields/GeneralField.js

@@ -35,7 +35,7 @@ export default function GeneralField({type, onChange, value: defaultValue, ...pr
       else
         return null;
     }
-    return defaultValue || '';
+    return defaultValue ?? '';
   });
 
   const handleChange = useCallback(e => {