Merge pull request #1633 from SeedCompany/add-default-field-region

src/components/form/Lookup/FieldRegion/FieldRegionField.stories.tsx

@@ -0,0 +1,73 @@
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
+import { Form } from 'react-final-form';
+import { ChildrenProp } from '~/common';
+import { FieldSpy } from '../../FieldSpy';
+import {
+  FieldRegionField,
+  FieldZoneField,
+  LocationField,
+} from './FieldRegionField';
+
+export default { title: 'Components/Forms/Fields/Lookup/Location' };
+
+const FF = ({ children }: ChildrenProp) => (
+  <Form
+    onSubmit={action('submit')}
+    initialValues={{
+      location: {
+        id: 'locationId',
+        name: {
+          value: 'Ethiopia',
+        },
+      },
+      region: {
+        id: 'regionid',
+        name: {
+          value: 'Africa - Anglophone East',
+        },
+      },
+      zone: {
+        id: 'zoneid',
+        name: {
+          value: 'Africa',
+        },
+      },
+    }}
+  >
+    {({ handleSubmit }) => <form onSubmit={handleSubmit}>{children}</form>}
+  </Form>
+);
+
+export const Location = () => (
+  <FF>
+    <LocationField
+      name="location"
+      label="Location"
+      multiple={boolean('Multiple', false)}
+    />
+    <FieldSpy name="location" />
+  </FF>
+);
+
+export const FieldRegion = () => (
+  <FF>
+    <FieldRegionField
+      name="fieldRegion"
+      label="Field Regions"
+      multiple={boolean('Multiple', false)}
+    />
+    <FieldSpy name="fieldRegion" />
+  </FF>
+);
+
+export const FieldZone = () => (
+  <FF>
+    <FieldZoneField
+      name="fieldZone"
+      label="Field Zones"
+      multiple={boolean('Multiple', false)}
+    />
+    <FieldSpy name="fieldZone" />
+  </FF>
+);

src/components/form/Lookup/FieldRegion/FieldRegionField.tsx

@@ -0,0 +1,10 @@
+import { DisplayFieldRegionFragment as FieldRegionLookupItem } from '~/common';
+import { LookupField } from '../LookupField';
+import { FieldRegionLookupDocument } from './FieldRegionLookup.graphql';
+
+export const FieldRegionField = LookupField.createFor<FieldRegionLookupItem>({
+  resource: 'FieldRegion',
+  lookupDocument: FieldRegionLookupDocument,
+  label: 'Field Region',
+  placeholder: 'Search for a field region by name',
+});

src/components/form/Lookup/FieldRegion/FieldRegionLookup.graphql

@@ -0,0 +1,7 @@
+query FieldRegionLookup($query: String!) {
+  search(input: { query: $query, type: [FieldRegion] }) {
+    items {
+      ...DisplayFieldRegion
+    }
+  }
+}

src/components/form/Lookup/FieldRegion/index.ts

@@ -0,0 +1 @@
+export * from './FieldRegionField';

src/components/form/Lookup/Location/LocationFields.stories.tsx → src/components/form/Lookup/FieldZone/FieldZoneField.stories.tsx

@@ -7,7 +7,7 @@ import {
   FieldRegionField,
   FieldZoneField,
   LocationField,
-} from './LocationFields';
+} from './FieldZoneField';
 
 export default { title: 'Components/Forms/Fields/Lookup/Location' };
 

src/components/form/Lookup/FieldZone/FieldZoneField.tsx

@@ -0,0 +1,10 @@
+import { DisplayFieldZoneFragment as FieldZoneLookupItem } from '~/common';
+import { LookupField } from '../LookupField';
+import { FieldZoneLookupDocument } from './FieldZoneLookup.graphql';
+
+export const FieldZoneField = LookupField.createFor<FieldZoneLookupItem>({
+  resource: 'FieldZone',
+  lookupDocument: FieldZoneLookupDocument,
+  label: 'Field Zone',
+  placeholder: 'Search for a field zone by name',
+});

src/components/form/Lookup/FieldZone/FieldZoneLookup.graphql

@@ -0,0 +1,7 @@
+query FieldZoneLookup($query: String!) {
+  search(input: { query: $query, type: [FieldZone] }) {
+    items {
+      ...DisplayFieldZone
+    }
+  }
+}

src/components/form/Lookup/FieldZone/index.ts

@@ -0,0 +1 @@
+export * from './FieldZoneField';

src/components/form/Lookup/Location/LocationField.tsx

@@ -0,0 +1,23 @@
+import { CreateLocation as CreateLocationType } from '~/api/schema.graphql';
+import { DisplayLocationFragment as LocationLookupItem } from '~/common';
+import { CreateLocation } from '../../../../scenes/Locations/Create';
+import { LocationFormValues } from '../../../../scenes/Locations/LocationForm';
+import { LookupField } from '../LookupField';
+import { LocationLookupDocument } from './LocationLookup.graphql';
+
+export const LocationField = LookupField.createFor<
+  LocationLookupItem,
+  LocationFormValues<CreateLocationType>
+>({
+  resource: 'Location',
+  lookupDocument: LocationLookupDocument,
+  label: 'Location',
+  placeholder: 'Search for a location by name',
+  CreateDialogForm: CreateLocation,
+  // @ts-expect-error don't need to pass through entire initialValues
+  getInitialValues: (val) => ({
+    location: {
+      name: val,
+    },
+  }),
+});

src/components/form/Lookup/Location/LocationLookup.graphql

@@ -5,19 +5,3 @@ query LocationLookup($query: String!) {
     }
   }
 }
-
-query FieldRegionLookup($query: String!) {
-  search(input: { query: $query, type: [FieldRegion] }) {
-    items {
-      ...DisplayFieldRegion
-    }
-  }
-}
-
-query FieldZoneLookup($query: String!) {
-  search(input: { query: $query, type: [FieldZone] }) {
-    items {
-      ...DisplayFieldZone
-    }
-  }
-}

src/components/form/Lookup/Location/index.ts

@@ -1 +1 @@
-export * from './LocationFields';
+export * from './LocationField';

src/scenes/Locations/Create/CreateLocation.tsx

@@ -26,7 +26,12 @@ export const CreateLocation = (props: CreateLocationProps) => {
   const { enqueueSnackbar } = useSnackbar();
 
   const onSubmit: FormProps['onSubmit'] = async ({
-    location: { fundingAccountId, mapImage: mapImages, ...rest },
+    location: {
+      fundingAccountId,
+      defaultFieldRegionId,
+      mapImage: mapImages,
+      ...rest
+    },
   }) => {
     const [uploadedImageInfo, finalizeUpload] = await uploadFile(
       mapImages?.[0]
@@ -35,6 +40,7 @@ export const CreateLocation = (props: CreateLocationProps) => {
     const input: CreateLocationType = {
       ...rest,
       fundingAccountId: fundingAccountId?.id,
+      defaultFieldRegionId: defaultFieldRegionId?.id,
       mapImage: uploadedImageInfo,
     };
     const { data } = await createLocation({

src/scenes/Locations/Detail/LocationDetail.graphql

@@ -29,6 +29,13 @@ fragment LocationDetail on Location {
       ...FundingAccountCard
     }
   }
+  defaultFieldRegion {
+    canRead
+    canEdit
+    value {
+      ...DisplayFieldRegion
+    }
+  }
   mapImage {
     canRead
     canEdit

src/scenes/Locations/Edit/EditLocation.tsx

@@ -29,21 +29,28 @@ export const EditLocation = (props: EditLocationProps) => {
               type: location.type.value,
               isoAlpha3: location.isoAlpha3.value,
               fundingAccountId: location.fundingAccount.value,
+              defaultFieldRegionId: location.defaultFieldRegion.value,
             },
           }
         : undefined,
     [location]
   );
 
   const onSubmit: FormProps['onSubmit'] = async ({
-    location: { fundingAccountId, mapImage: mapImages, ...rest },
+    location: {
+      fundingAccountId,
+      defaultFieldRegionId,
+      mapImage: mapImages,
+      ...rest
+    },
   }) => {
     const [uploadedImageInfo, finalizeUpload] = await uploadFile(
       mapImages?.[0]
     );
 
     const input: UpdateLocation = {
       ...rest,
+      defaultFieldRegionId: defaultFieldRegionId?.id ?? null,
       fundingAccountId: fundingAccountId?.id ?? null,
       mapImage: uploadedImageInfo,
     };

src/scenes/Locations/LocationForm/LocationForm.tsx

@@ -6,7 +6,10 @@ import {
   LocationTypeList,
   UpdateLocation,
 } from '~/api/schema.graphql';
-import { labelFrom } from '~/common';
+import {
+  DisplayFieldRegionFragment as FieldRegionLookupItem,
+  labelFrom,
+} from '~/common';
 import {
   DialogForm,
   DialogFormProps,
@@ -19,6 +22,7 @@ import {
   SubmitError,
   TextField,
 } from '../../../components/form';
+import { FieldRegionField } from '../../../components/form/Lookup/FieldRegion';
 import {
   FundingAccountField,
   FundingAccountLookupItem,
@@ -31,6 +35,7 @@ export interface LocationFormValues<
   location: Merge<
     CreateOrUpdateType,
     {
+      defaultFieldRegionId?: FieldRegionLookupItem | null;
       fundingAccountId?: FundingAccountLookupItem | null;
       mapImage?: File[];
     }
@@ -103,6 +108,17 @@ export const LocationForm = <CreateOrUpdateInput, R extends any>({
           {(props) => <FundingAccountField margin="none" {...props} />}
         </SecuredField>
       </Grid>
+      <Grid item xs={12}>
+        <SecuredField obj={location} name="defaultFieldRegionId">
+          {(props) => (
+            <FieldRegionField
+              margin="none"
+              label="Default Field Region"
+              {...props}
+            />
+          )}
+        </SecuredField>
+      </Grid>
       <Grid item xs={12}>
         <DropzoneField
           name="mapImage"

src/scenes/Projects/Update/UpdateProjectDialog.tsx

@@ -22,10 +22,8 @@ import {
   SubmitError,
   TextField,
 } from '../../../components/form';
-import {
-  FieldRegionField,
-  LocationField,
-} from '../../../components/form/Lookup';
+import { LocationField } from '../../../components/form/Lookup';
+import { FieldRegionField } from '../../../components/form/Lookup/FieldRegion';
 import {
   updateEngagementDateRanges,
   updatePartnershipsDateRanges,