diff --git a/src/components/form/Lookup/FieldRegion/FieldRegionField.stories.tsx b/src/components/form/Lookup/FieldRegion/FieldRegionField.stories.tsx new file mode 100644 index 0000000000..97bbc2ee43 --- /dev/null +++ b/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) => ( +
+ {({ handleSubmit }) => {children}
} + +); + +export const Location = () => ( + + + + +); + +export const FieldRegion = () => ( + + + + +); + +export const FieldZone = () => ( + + + + +); diff --git a/src/components/form/Lookup/FieldRegion/FieldRegionField.tsx b/src/components/form/Lookup/FieldRegion/FieldRegionField.tsx new file mode 100644 index 0000000000..f2ae534961 --- /dev/null +++ b/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({ + resource: 'FieldRegion', + lookupDocument: FieldRegionLookupDocument, + label: 'Field Region', + placeholder: 'Search for a field region by name', +}); diff --git a/src/components/form/Lookup/FieldRegion/FieldRegionLookup.graphql b/src/components/form/Lookup/FieldRegion/FieldRegionLookup.graphql new file mode 100644 index 0000000000..5244b7365b --- /dev/null +++ b/src/components/form/Lookup/FieldRegion/FieldRegionLookup.graphql @@ -0,0 +1,7 @@ +query FieldRegionLookup($query: String!) { + search(input: { query: $query, type: [FieldRegion] }) { + items { + ...DisplayFieldRegion + } + } +} diff --git a/src/components/form/Lookup/FieldRegion/index.ts b/src/components/form/Lookup/FieldRegion/index.ts new file mode 100644 index 0000000000..41b1e39e56 --- /dev/null +++ b/src/components/form/Lookup/FieldRegion/index.ts @@ -0,0 +1 @@ +export * from './FieldRegionField'; diff --git a/src/components/form/Lookup/Location/LocationFields.stories.tsx b/src/components/form/Lookup/FieldZone/FieldZoneField.stories.tsx similarity index 98% rename from src/components/form/Lookup/Location/LocationFields.stories.tsx rename to src/components/form/Lookup/FieldZone/FieldZoneField.stories.tsx index c779e7042c..3ca3e35355 100644 --- a/src/components/form/Lookup/Location/LocationFields.stories.tsx +++ b/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' }; diff --git a/src/components/form/Lookup/FieldZone/FieldZoneField.tsx b/src/components/form/Lookup/FieldZone/FieldZoneField.tsx new file mode 100644 index 0000000000..19b0a4c5a1 --- /dev/null +++ b/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({ + resource: 'FieldZone', + lookupDocument: FieldZoneLookupDocument, + label: 'Field Zone', + placeholder: 'Search for a field zone by name', +}); diff --git a/src/components/form/Lookup/FieldZone/FieldZoneLookup.graphql b/src/components/form/Lookup/FieldZone/FieldZoneLookup.graphql new file mode 100644 index 0000000000..6ee71feb8c --- /dev/null +++ b/src/components/form/Lookup/FieldZone/FieldZoneLookup.graphql @@ -0,0 +1,7 @@ +query FieldZoneLookup($query: String!) { + search(input: { query: $query, type: [FieldZone] }) { + items { + ...DisplayFieldZone + } + } +} diff --git a/src/components/form/Lookup/FieldZone/index.ts b/src/components/form/Lookup/FieldZone/index.ts new file mode 100644 index 0000000000..dae60bb67b --- /dev/null +++ b/src/components/form/Lookup/FieldZone/index.ts @@ -0,0 +1 @@ +export * from './FieldZoneField'; diff --git a/src/components/form/Lookup/Location/LocationField.tsx b/src/components/form/Lookup/Location/LocationField.tsx new file mode 100644 index 0000000000..e137e65606 --- /dev/null +++ b/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 +>({ + 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, + }, + }), +}); diff --git a/src/components/form/Lookup/Location/LocationFields.tsx b/src/components/form/Lookup/Location/LocationFields.tsx deleted file mode 100644 index 1de882dddf..0000000000 --- a/src/components/form/Lookup/Location/LocationFields.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { CreateLocation as CreateLocationType } from '~/api/schema.graphql'; -import { - DisplayFieldRegionFragment as FieldRegionLookupItem, - DisplayFieldZoneFragment as FieldZoneLookupItem, - DisplayLocationFragment as LocationLookupItem, -} from '~/common'; -import { CreateLocation } from '../../../../scenes/Locations/Create'; -import { LocationFormValues } from '../../../../scenes/Locations/LocationForm'; -import { LookupField } from '../../Lookup/LookupField'; -import { - FieldRegionLookupDocument, - FieldZoneLookupDocument, - LocationLookupDocument, -} from './LocationLookup.graphql'; - -export const LocationField = LookupField.createFor< - LocationLookupItem, - LocationFormValues ->({ - 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, - }, - }), -}); - -export const FieldRegionField = LookupField.createFor({ - resource: 'FieldRegion', - lookupDocument: FieldRegionLookupDocument, - label: 'Field Region', - placeholder: 'Search for a field region by name', -}); - -export const FieldZoneField = LookupField.createFor({ - resource: 'FieldZone', - lookupDocument: FieldZoneLookupDocument, - label: 'Field Zone', - placeholder: 'Search for a field zone by name', -}); diff --git a/src/components/form/Lookup/Location/LocationLookup.graphql b/src/components/form/Lookup/Location/LocationLookup.graphql index b5c4a7e028..7be53f6233 100644 --- a/src/components/form/Lookup/Location/LocationLookup.graphql +++ b/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 - } - } -} diff --git a/src/components/form/Lookup/Location/index.ts b/src/components/form/Lookup/Location/index.ts index 9ed1d4630e..715223f5fc 100644 --- a/src/components/form/Lookup/Location/index.ts +++ b/src/components/form/Lookup/Location/index.ts @@ -1 +1 @@ -export * from './LocationFields'; +export * from './LocationField'; diff --git a/src/scenes/Locations/Create/CreateLocation.tsx b/src/scenes/Locations/Create/CreateLocation.tsx index 1840210624..70a82a38a8 100644 --- a/src/scenes/Locations/Create/CreateLocation.tsx +++ b/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({ diff --git a/src/scenes/Locations/Detail/LocationDetail.graphql b/src/scenes/Locations/Detail/LocationDetail.graphql index a8cd09af05..c1722eba8e 100644 --- a/src/scenes/Locations/Detail/LocationDetail.graphql +++ b/src/scenes/Locations/Detail/LocationDetail.graphql @@ -29,6 +29,13 @@ fragment LocationDetail on Location { ...FundingAccountCard } } + defaultFieldRegion { + canRead + canEdit + value { + ...DisplayFieldRegion + } + } mapImage { canRead canEdit diff --git a/src/scenes/Locations/Edit/EditLocation.tsx b/src/scenes/Locations/Edit/EditLocation.tsx index 2f4e7c24b4..45f45088dc 100644 --- a/src/scenes/Locations/Edit/EditLocation.tsx +++ b/src/scenes/Locations/Edit/EditLocation.tsx @@ -29,6 +29,7 @@ export const EditLocation = (props: EditLocationProps) => { type: location.type.value, isoAlpha3: location.isoAlpha3.value, fundingAccountId: location.fundingAccount.value, + defaultFieldRegionId: location.defaultFieldRegion.value, }, } : undefined, @@ -36,7 +37,12 @@ export const EditLocation = (props: EditLocationProps) => { ); const onSubmit: FormProps['onSubmit'] = async ({ - location: { fundingAccountId, mapImage: mapImages, ...rest }, + location: { + fundingAccountId, + defaultFieldRegionId, + mapImage: mapImages, + ...rest + }, }) => { const [uploadedImageInfo, finalizeUpload] = await uploadFile( mapImages?.[0] @@ -44,6 +50,7 @@ export const EditLocation = (props: EditLocationProps) => { const input: UpdateLocation = { ...rest, + defaultFieldRegionId: defaultFieldRegionId?.id ?? null, fundingAccountId: fundingAccountId?.id ?? null, mapImage: uploadedImageInfo, }; diff --git a/src/scenes/Locations/LocationForm/LocationForm.tsx b/src/scenes/Locations/LocationForm/LocationForm.tsx index 249756c827..21ee1dbab3 100644 --- a/src/scenes/Locations/LocationForm/LocationForm.tsx +++ b/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 = ({ {(props) => } + + + {(props) => ( + + )} + +