Feat/generic editable cell chip (#982)

* Added generic relation cell

* Deactivated debug

* Added default warning

* Put back display component

* Removed unused types

* wip

* Renamed to view field

* Use new view field structure to have chip working

* Finished

* Added a temp feature flag

front/src/modules/people/components/GenericEntityTableData.tsx

@@ -1,4 +1,5 @@
-import { EntityFieldMetadata } from '@/ui/table/types/EntityFieldMetadata';
+import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
+import { ViewFieldDefinition } from '@/ui/table/types/ViewField';
 
 import { useSetEntityTableData } from '../hooks/useSetEntityTableData';
 import { defaultOrderBy } from '../queries';
@@ -8,13 +9,15 @@ export function GenericEntityTableData({
   getRequestResultKey,
   orderBy = defaultOrderBy,
   whereFilters,
-  fieldMetadataArray,
+  viewFields,
+  filterDefinitionArray,
 }: {
   useGetRequest: any;
   getRequestResultKey: string;
   orderBy?: any;
   whereFilters?: any;
-  fieldMetadataArray: EntityFieldMetadata[];
+  viewFields: ViewFieldDefinition<unknown>[];
+  filterDefinitionArray: FilterDefinition[];
 }) {
   const setEntityTableData = useSetEntityTableData();
 
@@ -23,7 +26,7 @@ export function GenericEntityTableData({
     onCompleted: (data: any) => {
       const entities = data[getRequestResultKey] ?? [];
 
-      setEntityTableData(entities, fieldMetadataArray);
+      setEntityTableData(entities, viewFields, filterDefinitionArray);
     },
   });
 

front/src/modules/people/constants/peopleFieldMetadataArray.tsx

@@ -5,29 +5,48 @@ import {
 } from '@tabler/icons-react';
 
 import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
-import { EntityFieldMetadata } from '@/ui/table/types/EntityFieldMetadata';
+import {
+  ViewFieldDefinition,
+  ViewFieldRelationMetadata,
+  ViewFieldTextMetadata,
+} from '@/ui/table/types/ViewField';
 
-export const peopleFieldMetadataArray: EntityFieldMetadata[] = [
+export const peopleViewFields: ViewFieldDefinition<unknown>[] = [
   {
-    fieldName: 'city',
-    label: 'City',
-    icon: <IconMap size={16} />,
+    id: 'city',
+    columnLabel: 'City',
+    columnIcon: <IconMap size={16} />,
     columnSize: 150,
     type: 'text',
-  },
+    columnOrder: 1,
+    metadata: {
+      fieldName: 'city',
+      placeHolder: 'City',
+    },
+  } as ViewFieldDefinition<ViewFieldTextMetadata>,
   {
-    fieldName: 'jobTitle',
-    label: 'Job title',
-    icon: <IconBriefcase size={16} />,
+    id: 'jobTitle',
+    columnLabel: 'Job title',
+    columnIcon: <IconBriefcase size={16} />,
     columnSize: 150,
     type: 'text',
-  },
+    columnOrder: 2,
+    metadata: {
+      fieldName: 'jobTitle',
+      placeHolder: 'Job title',
+    },
+  } as ViewFieldDefinition<ViewFieldTextMetadata>,
   {
-    fieldName: 'company',
-    label: 'Company',
-    icon: <IconBuildingSkyscraper size={16} />,
+    id: 'company',
+    columnLabel: 'Company',
+    columnIcon: <IconBuildingSkyscraper size={16} />,
     columnSize: 150,
     type: 'relation',
     relationType: Entity.Company,
-  },
+    columnOrder: 3,
+    metadata: {
+      fieldName: 'company',
+      relationType: Entity.Company,
+    },
+  } as ViewFieldDefinition<ViewFieldRelationMetadata>,
 ];

front/src/modules/people/hooks/useSetEntityTableData.ts

@@ -1,9 +1,9 @@
 import { useRecoilCallback } from 'recoil';
 
 import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
-import { entityFieldMetadataArrayState } from '@/ui/table/states/entityFieldMetadataArrayState';
 import { tableEntitiesFamilyState } from '@/ui/table/states/tableEntitiesFamilyState';
-import { EntityFieldMetadata } from '@/ui/table/types/EntityFieldMetadata';
+import { viewFieldsState } from '@/ui/table/states/viewFieldsState';
+import { ViewFieldDefinition } from '@/ui/table/types/ViewField';
 
 import { availableFiltersScopedState } from '../../ui/filter-n-sort/states/availableFiltersScopedState';
 import { useContextScopeId } from '../../ui/recoil-scope/hooks/useContextScopeId';
@@ -22,7 +22,8 @@ export function useSetEntityTableData() {
     ({ set, snapshot }) =>
       <T extends { id: string }>(
         newEntityArray: T[],
-        entityFieldMetadataArray: EntityFieldMetadata[],
+        viewFields: ViewFieldDefinition<unknown>[],
+        filters: FilterDefinition[],
       ) => {
         for (const entity of newEntityArray) {
           const currentEntity = snapshot
@@ -47,23 +48,13 @@ export function useSetEntityTableData() {
         resetTableRowSelection();
 
         set(entityTableDimensionsState, {
-          numberOfColumns: entityFieldMetadataArray.length,
+          numberOfColumns: viewFields.length,
           numberOfRows: entityIds.length,
         });
 
-        const filters = entityFieldMetadataArray.map(
-          (fieldMetadata) =>
-            ({
-              field: fieldMetadata.fieldName,
-              icon: fieldMetadata.filterIcon,
-              label: fieldMetadata.label,
-              type: fieldMetadata.type,
-            } as FilterDefinition),
-        );
-
         set(availableFiltersScopedState(tableContextScopeId), filters);
 
-        set(entityFieldMetadataArrayState, entityFieldMetadataArray);
+        set(viewFieldsState, viewFields);
 
         set(isFetchingEntityTableDataState, false);
       },

front/src/modules/people/hooks/useUpdateEntityField.ts

@@ -2,34 +2,38 @@ import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
-import { entityFieldMetadataArrayState } from '@/ui/table/states/entityFieldMetadataArrayState';
 import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
+import { viewFieldsState } from '@/ui/table/states/viewFieldsState';
+import { isViewFieldChip } from '@/ui/table/types/guards/isViewFieldChip';
+import { isViewFieldRelation } from '@/ui/table/types/guards/isViewFieldRelation';
+import { isViewFieldText } from '@/ui/table/types/guards/isViewFieldText';
 
 export function useUpdateEntityField() {
   const useUpdateEntityMutation = useContext(EntityUpdateMutationHookContext);
 
   const [updateEntity] = useUpdateEntityMutation();
 
-  const entityFieldMetadataArray = useRecoilValue(
-    entityFieldMetadataArrayState,
-  );
+  const viewFields = useRecoilValue(viewFieldsState);
 
   return function updatePeopleField(
     currentEntityId: string,
-    fieldName: string,
+    viewFieldId: string,
     newFieldValue: unknown,
   ) {
-    const fieldMetadata = entityFieldMetadataArray.find(
-      (metadata) => metadata.fieldName === fieldName,
+    const viewField = viewFields.find(
+      (metadata) => metadata.id === viewFieldId,
     );
 
-    if (!fieldMetadata) {
-      throw new Error(`Field metadata not found for field ${fieldName}`);
+    if (!viewField) {
+      throw new Error(`View field not found for id ${viewFieldId}`);
     }
 
-    if (fieldMetadata.type === 'relation') {
+    // TODO: improve type narrowing here with validation maybe ? Also validate the newFieldValue with linked type guards
+    if (isViewFieldRelation(viewField)) {
       const newSelectedEntity = newFieldValue as EntityForSelect | null;
 
+      const fieldName = viewField.metadata.fieldName;
+
       if (!newSelectedEntity) {
         updateEntity({
           variables: {
@@ -53,11 +57,22 @@ export function useUpdateEntityField() {
           },
         });
       }
-    } else {
+    } else if (isViewFieldChip(viewField)) {
+      const newContent = newFieldValue as string;
+
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [fieldName]: newFieldValue },
+          data: { [viewField.metadata.contentFieldName]: newContent },
+        },
+      });
+    } else if (isViewFieldText(viewField)) {
+      const newContent = newFieldValue as string;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
         },
       });
     }

front/src/modules/people/table/components/PeopleTableV2.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { defaultOrderBy } from '@/companies/queries';
 import { GenericEntityTableData } from '@/people/components/GenericEntityTableData';
-import { peopleFieldMetadataArray } from '@/people/constants/peopleFieldMetadataArray';
+import { peopleViewFields } from '@/people/constants/peopleFieldMetadataArray';
 import { PeopleSelectedSortType } from '@/people/queries';
 import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
@@ -16,6 +16,7 @@ import {
   useGetPeopleQuery,
   useUpdateOnePersonMutation,
 } from '~/generated/graphql';
+import { peopleFilters } from '~/pages/people/people-filters';
 import { availableSorts } from '~/pages/people/people-sorts';
 
 export function PeopleTable() {
@@ -39,7 +40,8 @@ export function PeopleTable() {
         useGetRequest={useGetPeopleQuery}
         orderBy={orderBy}
         whereFilters={whereFilters}
-        fieldMetadataArray={peopleFieldMetadataArray}
+        viewFields={peopleViewFields}
+        filterDefinitionArray={peopleFilters}
       />
       <EntityTable
         viewName="All People"