Add Milestone to Engagement Columns and Detail (#1626)

src/components/EngagementDataGrid/EngagementColumns.tsx

@@ -10,6 +10,8 @@ import { EngagementFilters } from '~/api/schema.graphql';
 import {
   EngagementStatusLabels,
   EngagementStatusList,
+  LanguageMilestoneLabels,
+  LanguageMilestoneList,
   ProgressReportStatusLabels,
   ProgressReportStatusList,
   ProjectStatusLabels,
@@ -91,6 +93,19 @@ export const EngagementColumns: Array<GridColDef<Engagement>> = [
     hideable: false,
     serverFilter: (value): EngagementFilters => ({ engagedName: value }),
   },
+  {
+    headerName: 'Milestone',
+    field: 'milestoneReached',
+    ...enumColumn(LanguageMilestoneList, LanguageMilestoneLabels),
+    width: 130,
+    valueGetter: (_, row) => {
+      if (row.__typename !== 'LanguageEngagement') {
+        return null;
+      }
+
+      return row.milestoneReached.value;
+    },
+  },
   {
     headerName: 'Type',
     field: 'project.type',

src/components/EngagementDataGrid/engagementDataGridRow.graphql

@@ -48,6 +48,9 @@ fragment engagementDataGridRow on Engagement {
         }
       }
     }
+    milestoneReached {
+      value
+    }
     language {
       value {
         id

src/components/form/SelectField.tsx

@@ -25,7 +25,7 @@ export type SelectFieldProps<T, Multiple extends boolean | undefined> = Except<
   helperText?: ReactNode;
 } & Pick<
     FormControlProps,
-    'color' | 'fullWidth' | 'margin' | 'size' | 'variant'
+    'color' | 'fullWidth' | 'margin' | 'size' | 'variant' | 'sx'
   > &
   Pick<SelectProps, 'displayEmpty'>;
 

src/scenes/Engagement/LanguageEngagement/LanguageEngagementDetail.graphql

@@ -5,6 +5,7 @@ fragment LanguageEngagementDetail on LanguageEngagement {
   ...EngagementPlanningSpreadsheet
   ...LanguageEngagementDatesForm
   ...EngagementDescription
+  ...engagementMilestoneReached
   ceremony {
     ...CeremonyCard
   }

src/scenes/Engagement/LanguageEngagement/LanguageEngagementDetail.tsx

@@ -10,6 +10,7 @@ import { CeremonyForm } from './Ceremony';
 import { DatesForm } from './DatesForm';
 import { LanguageEngagementDescription } from './Description';
 import { LanguageEngagementHeader } from './Header';
+import { LanguageEngagementMilestone } from './Milestone/Milestone';
 import { PlanningSpreadsheet } from './PlanningSpreadsheet';
 
 const useStyles = makeStyles()(({ spacing, breakpoints }) => ({
@@ -98,6 +99,9 @@ export const LanguageEngagementDetail = ({ engagement }: EngagementQuery) => {
             direction="column"
             spacing={2}
           >
+            <Grid item>
+              <LanguageEngagementMilestone engagement={engagement} />
+            </Grid>
             <Grid item>
               <LanguageEngagementDescription engagement={engagement} />
             </Grid>

src/scenes/Engagement/LanguageEngagement/Milestone/Milestone.graphql

@@ -0,0 +1,8 @@
+fragment engagementMilestoneReached on LanguageEngagement {
+  ...Id
+  milestoneReached {
+    canRead
+    canEdit
+    value
+  }
+}

src/scenes/Engagement/LanguageEngagement/Milestone/Milestone.tsx

@@ -0,0 +1,138 @@
+import { useMutation } from '@apollo/client';
+import { Check, Clear, Edit } from '@mui/icons-material';
+import { CircularProgress, Stack, Tooltip, Typography } from '@mui/material';
+import { useMemo, useState } from 'react';
+import { Form } from 'react-final-form';
+import {
+  LanguageMilestone,
+  LanguageMilestoneLabels,
+  LanguageMilestoneList,
+} from '~/api/schema.graphql';
+import { SelectField } from '~/components/form';
+import { IconButton } from '../../../../components/IconButton';
+import { UpdateLanguageEngagementDocument } from '../../EditEngagement/EditEngagementDialog.graphql';
+import { EngagementMilestoneReachedFragment } from './Milestone.graphql';
+
+interface Props {
+  engagement: EngagementMilestoneReachedFragment;
+}
+
+interface FormShape {
+  milestoneReached: LanguageMilestone;
+}
+
+export const LanguageEngagementMilestone = ({ engagement }: Props) => {
+  const { milestoneReached } = engagement;
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [updateLanguageEngagement] = useMutation(
+    UpdateLanguageEngagementDocument
+  );
+
+  const initialValues = useMemo(
+    (): FormShape => ({
+      milestoneReached: milestoneReached.value || 'Unknown',
+    }),
+    [milestoneReached]
+  );
+
+  if (!milestoneReached.canRead) {
+    return null;
+  }
+
+  return (
+    <Form<FormShape>
+      initialValues={initialValues}
+      onSubmit={async (values, form) => {
+        if (form.getState().dirty) {
+          await updateLanguageEngagement({
+            variables: {
+              input: {
+                engagement: {
+                  id: engagement.id,
+                  milestoneReached: values.milestoneReached,
+                },
+              },
+            },
+          });
+        }
+
+        setIsEditing(false);
+      }}
+      subscription={{ submitting: true }}
+    >
+      {({ handleSubmit, form, submitting }) => (
+        <Stack
+          spacing={1}
+          sx={{ mb: 4 }}
+          component={isEditing ? 'form' : 'div'}
+          onSubmit={handleSubmit}
+        >
+          <Stack direction="row" alignItems="center" spacing={1}>
+            <Typography variant="h3">Milestone Achieved</Typography>
+            {!isEditing ? (
+              milestoneReached.canEdit ? (
+                <Tooltip title="Edit">
+                  <IconButton
+                    onClick={() => setIsEditing(true)}
+                    aria-label="edit milestone"
+                  >
+                    <Edit />
+                  </IconButton>
+                </Tooltip>
+              ) : null
+            ) : (
+              <>
+                <Tooltip title="Save">
+                  <IconButton
+                    color="success"
+                    disabled={submitting}
+                    type="submit"
+                  >
+                    {submitting ? <CircularProgress size={24} /> : <Check />}
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title="Cancel">
+                  <IconButton
+                    color="error"
+                    disabled={submitting}
+                    onClick={() => {
+                      setIsEditing(false);
+                      form.reset();
+                    }}
+                  >
+                    <Clear />
+                  </IconButton>
+                </Tooltip>
+              </>
+            )}
+          </Stack>
+          <Typography variant="body2" color="textSecondary">
+            Cumulative scripture translated upon successful completion of this
+            engagement
+          </Typography>
+          {isEditing ? (
+            <SelectField
+              name="milestoneReached"
+              label="Milestone"
+              options={LanguageMilestoneList}
+              getOptionLabel={(option) => LanguageMilestoneLabels[option]}
+              defaultValue={milestoneReached.value}
+              required
+              sx={{ width: 'fit-content' }}
+            />
+          ) : milestoneReached.value && milestoneReached.value !== 'Unknown' ? (
+            <Typography>
+              {LanguageMilestoneLabels[milestoneReached.value]}
+            </Typography>
+          ) : (
+            <Typography>
+              Unknown{' '}
+              {milestoneReached.canEdit && '— click the edit pencil to declare'}
+            </Typography>
+          )}
+        </Stack>
+      )}
+    </Form>
+  );
+};