Make Partner Start Date column editable (#1657)

Co-authored-by: Carson Full <[email protected]>

Author: rdonigian

src/components/PartnersDataGrid/PartnerColumns.tsx

@@ -42,6 +42,8 @@ export const PartnerColumns: Array<GridColDef<Partner>> = [
     field: 'startDate',
     ...dateColumn(),
     width: 130,
+    editable: true,
+    isEditable: ({ row }) => row.startDate.canEdit,
   },
   {
     headerName: 'Created Date',

src/components/PartnersDataGrid/UpdatePartnerGrid.graphql

@@ -0,0 +1,7 @@
+mutation UpdatePartnerGrid($input: UpdatePartner!) {
+  updatePartner(input: { partner: $input }) {
+    partner {
+      ...partnerDataGridRow
+    }
+  }
+}

src/components/PartnersDataGrid/partnerDataGridRow.graphql

@@ -18,6 +18,7 @@ fragment partnerDataGridRow on Partner {
     value
   }
   startDate {
+    canEdit
     value
   }
   createdAt

src/components/PartnersDataGrid/useProcessPartnerUpdate.ts

@@ -0,0 +1,19 @@
+import { useGridMutation } from '../Grid';
+import { PartnerDataGridRowFragmentDoc as PartnerRow } from './partnerDataGridRow.graphql';
+import { UpdatePartnerGridDocument as UpdatePartner } from './UpdatePartnerGrid.graphql';
+
+export const useProcessPartnerUpdate = () =>
+  useGridMutation(PartnerRow, UpdatePartner, (row) => ({
+    variables: {
+      input: {
+        id: row.id,
+        startDate: row.startDate.value,
+      },
+    },
+    optimisticResponse: {
+      updatePartner: {
+        __typename: 'UpdatePartnerOutput',
+        partner: row,
+      },
+    },
+  }));

src/scenes/Partners/List/PartnerGrid.tsx

@@ -17,6 +17,7 @@ import {
   PartnerToolbar,
 } from '~/components/PartnersDataGrid/PartnerColumns';
 import { PartnerDataGridRowFragment as Partner } from '~/components/PartnersDataGrid/partnerDataGridRow.graphql';
+import { useProcessPartnerUpdate } from '~/components/PartnersDataGrid/useProcessPartnerUpdate';
 import { PartnersDocument } from './PartnerList.graphql';
 
 export const PartnerGrid = () => {
@@ -42,6 +43,8 @@ export const PartnerGrid = () => {
     [dataGridProps.slotProps]
   );
 
+  const processPartnerUpdate = useProcessPartnerUpdate();
+
   return (
     <DataGrid<Partner>
       {...DefaultDataGridStyles}
@@ -50,6 +53,7 @@ export const PartnerGrid = () => {
       slotProps={slotProps}
       columns={PartnerColumns}
       initialState={PartnerInitialState}
+      processRowUpdate={processPartnerUpdate}
       headerFilters
       hideFooter
       sx={[flexLayout, noHeaderFilterButtons, noFooter]}