Create Field Region detail page

Author: rdonigian

src/common/fragments/location.graphql

@@ -9,27 +9,9 @@ fragment DisplayLocation on Location {
 
 fragment DisplayFieldRegion on FieldRegion {
   id
-  createdAt
   name {
-    canRead
-    canEdit
     value
   }
-  director {
-    canRead
-    canEdit
-    value {
-      id
-      fullName
-    }
-  }
-  fieldZone {
-    canRead
-    canEdit
-    value {
-      ...DisplayFieldZone
-    }
-  }
 }
 
 fragment DisplayFieldZone on FieldZone {

src/components/FieldRegion/CreateFieldRegion.tsx

@@ -0,0 +1,44 @@
+import { useMutation } from '@apollo/client';
+import { Except } from 'type-fest';
+import {
+  CreateFieldRegionInput,
+  type CreateFieldRegion as CreateFieldRegionType,
+} from '~/api/schema.graphql';
+import { DisplayFieldRegionFragment } from '~/common';
+import {
+  FieldRegionForm,
+  FieldRegionFormProps,
+} from '../FieldRegionForm/FieldRegionForm';
+import { CreateFieldRegionDocument } from './CreateFieldRegion.graphql';
+
+type SubmitResult = DisplayFieldRegionFragment;
+
+export type CreateFieldRegionProps = Except<
+  FieldRegionFormProps<CreateFieldRegionType, SubmitResult>,
+  'onSubmit'
+>;
+
+export const CreateFieldRegion = (props: CreateFieldRegionProps) => {
+  const [createFieldRegion] = useMutation(CreateFieldRegionDocument);
+
+  return (
+    <FieldRegionForm<CreateFieldRegionType, SubmitResult>
+      {...props}
+      title="Create Field Region"
+      onSubmit={async (values) => {
+        const input: CreateFieldRegionInput = {
+          fieldRegion: {
+            name: values.fieldRegion.name,
+            fieldZoneId: values.fieldRegion.fieldZoneId!.id,
+            directorId: values.fieldRegion.directorId!.id,
+          },
+        };
+
+        const { data } = await createFieldRegion({
+          variables: { input },
+        });
+        return data!.createFieldRegion.fieldRegion;
+      }}
+    />
+  );
+};

src/components/FieldRegion/CreateFieldRegion.graphql renamed to src/components/FieldRegion/CreateFieldRegion/CreateFieldRegion.graphql

@@ -0,0 +1,7 @@
+mutation UpdateFieldRegion($input: UpdateFieldRegionInput!) {
+  updateFieldRegion(input: $input) {
+    fieldRegion {
+      ...FieldRegionForm
+    }
+  }
+}

src/components/FieldRegion/CreateFieldRegion/CreateFieldRegion.tsx

@@ -0,0 +1,61 @@
+import { useMutation } from '@apollo/client';
+import { useMemo } from 'react';
+import { Except, SetRequired } from 'type-fest';
+import {
+  UpdateFieldRegion,
+  UpdateFieldRegionInput,
+} from '~/api/schema.graphql';
+import { DisplayFieldRegionFragment } from '~/common';
+import {
+  FieldRegionForm,
+  FieldRegionFormProps,
+} from '../FieldRegionForm/FieldRegionForm';
+import { UpdateFieldRegionDocument } from './EditFieldRegion.graphql';
+
+type SubmitResult = DisplayFieldRegionFragment;
+export type EditFieldRegionProps = Except<
+  FieldRegionFormProps<UpdateFieldRegion, SubmitResult>,
+  'onSubmit' | 'initialValues'
+>;
+export const EditFieldRegion = (
+  props: SetRequired<EditFieldRegionProps, 'fieldRegion'>
+) => {
+  const [updateFieldRegion] = useMutation(UpdateFieldRegionDocument);
+  const { fieldRegion } = props;
+
+  const initialValues = useMemo(
+    () => ({
+      fieldRegion: {
+        id: fieldRegion.id,
+        name: fieldRegion.name.value,
+        fieldZoneId: fieldRegion.fieldZone.value ?? null,
+        directorId: fieldRegion.director.value ?? null,
+      },
+    }),
+    [fieldRegion]
+  );
+
+  return (
+    <FieldRegionForm<UpdateFieldRegion, SubmitResult>
+      {...props}
+      title="Edit Field Region"
+      initialValues={initialValues}
+      onSubmit={async ({ fieldRegion: values }) => {
+        const input: UpdateFieldRegionInput = {
+          fieldRegion: {
+            id: values.id,
+            name: values.name,
+            fieldZoneId: values.fieldZoneId?.id,
+            directorId: values.directorId?.id,
+          },
+        };
+
+        const { data } = await updateFieldRegion({
+          variables: { input },
+        });
+
+        return data!.updateFieldRegion.fieldRegion;
+      }}
+    />
+  );
+};

src/components/FieldRegion/EditFieldRegion/EditFieldRegion.graphql

@@ -0,0 +1,22 @@
+fragment FieldRegionForm on FieldRegion {
+  id
+  name {
+    canRead
+    canEdit
+    value
+  }
+  director {
+    canEdit
+    canRead
+    value {
+      ...UserLookupItem
+    }
+  }
+  fieldZone {
+    canEdit
+    canRead
+    value {
+      ...DisplayFieldZone
+    }
+  }
+}

src/components/FieldRegion/EditFieldRegion/EditFieldRegion.tsx

@@ -0,0 +1,53 @@
+import { Merge } from 'type-fest';
+import { CreateFieldRegion, UpdateFieldRegion } from '~/api/schema.graphql';
+import { DisplayFieldZoneFragment } from '~/common';
+import { DialogForm, DialogFormProps } from '../../Dialog/DialogForm';
+import { SecuredField, SubmitError, TextField } from '../../form';
+import { FieldZoneField } from '../../form/Lookup/FieldZone';
+import { UserField } from '../../form/Lookup/User/UserField';
+import { UserLookupItemFragment } from '../../form/Lookup/User/UserLookup.graphql';
+import { FieldRegionFormFragment } from './FieldRegionForm.graphql';
+
+type FieldRegionMutation = UpdateFieldRegion | CreateFieldRegion;
+
+export interface FieldRegionFormValues<Mutation extends FieldRegionMutation> {
+  fieldRegion: Merge<
+    Mutation,
+    {
+      fieldZoneId: DisplayFieldZoneFragment | null;
+      directorId: UserLookupItemFragment | null;
+    }
+  >;
+}
+
+export type FieldRegionFormProps<
+  Mutation extends FieldRegionMutation,
+  R
+> = DialogFormProps<FieldRegionFormValues<Mutation>, R> & {
+  fieldRegion?: FieldRegionFormFragment;
+};
+
+export const FieldRegionForm = <Mutation extends FieldRegionMutation, R>({
+  fieldRegion,
+  ...rest
+}: FieldRegionFormProps<Mutation, R>) => (
+  <DialogForm {...rest} fieldsPrefix="fieldRegion">
+    <SubmitError />
+    <SecuredField obj={fieldRegion} name="name">
+      {(props) => (
+        <TextField
+          {...props}
+          label="Field Region Name"
+          placeholder="Enter Field Region Name"
+          required
+        />
+      )}
+    </SecuredField>
+    <SecuredField obj={fieldRegion} name="fieldZoneId">
+      {(props) => <FieldZoneField {...props} label="Field Zone" required />}
+    </SecuredField>
+    <SecuredField obj={fieldRegion} name="directorId">
+      {(props) => <UserField {...props} label="Director" required />}
+    </SecuredField>
+  </DialogForm>
+);

src/components/FieldRegion/FieldRegionForm/FieldRegionForm.graphql

@@ -0,0 +1,2 @@
+export * from './CreateFieldRegion/CreateFieldRegion';
+export * from './EditFieldRegion/EditFieldRegion';