Feat/improve editable cell (#959)

* Removed isSomeInputInEditMode

* Removed console.log

* Added a first version of generic cell text

* Removed metadata from entity table  V1

* Fix

* Fix

* Fix

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

@@ -0,0 +1,23 @@
+import { EntityFieldMetadata } from '@/ui/table/types/EntityFieldMetadata';
+
+import { GenericEditableTextCell } from './GenericEditableTextCell';
+
+type OwnProps = {
+  entityFieldMetadata: EntityFieldMetadata;
+};
+
+export function GenericEditableCell({ entityFieldMetadata }: OwnProps) {
+  switch (entityFieldMetadata.type) {
+    case 'text':
+      return (
+        <GenericEditableTextCell
+          fieldName={entityFieldMetadata.fieldName}
+          placeholder={entityFieldMetadata.label}
+          editModeHorizontalAlign="left"
+        />
+      );
+
+    default:
+      return <></>;
+  }
+}

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

@@ -0,0 +1,44 @@
+import { useRecoilValue } from 'recoil';
+
+import { InplaceInputTextDisplayMode } from '@/ui/display/component/InplaceInputTextDisplayMode';
+import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
+
+import { GenericEditableTextCellEditMode } from './GenericEditableTextCellEditMode';
+
+type OwnProps = {
+  fieldName: string;
+  editModeHorizontalAlign?: 'left' | 'right';
+  placeholder?: string;
+};
+
+export function GenericEditableTextCell({
+  fieldName,
+  editModeHorizontalAlign,
+  placeholder,
+}: OwnProps) {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const fieldValue = useRecoilValue<string>(
+    tableEntityFieldFamilySelector({
+      entityId: currentRowEntityId ?? '',
+      fieldName,
+    }),
+  );
+
+  return (
+    <EditableCell
+      editModeHorizontalAlign={editModeHorizontalAlign}
+      editModeContent={
+        <GenericEditableTextCellEditMode
+          fieldName={fieldName}
+          placeholder={placeholder}
+        />
+      }
+      nonEditModeContent={
+        <InplaceInputTextDisplayMode>{fieldValue}</InplaceInputTextDisplayMode>
+      }
+    ></EditableCell>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { useRecoilState } from 'recoil';
+
+import { InplaceInputTextEditMode } from '@/ui/inplace-input/components/InplaceInputTextEditMode';
+import { useEntityUpdateFieldHook } from '@/ui/table/hooks/useCellUpdateFieldHook';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
+
+type OwnProps = {
+  fieldName: string;
+  placeholder?: string;
+};
+
+export function GenericEditableTextCellEditMode({
+  fieldName,
+  placeholder,
+}: OwnProps) {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [fieldValue, setFieldValue] = useRecoilState<string>(
+    tableEntityFieldFamilySelector({
+      entityId: currentRowEntityId ?? '',
+      fieldName,
+    }),
+  );
+
+  const useUpdateField = useEntityUpdateFieldHook();
+  const updateField = useUpdateField?.();
+
+  function handleSubmit(newText: string) {
+    if (newText === fieldValue) return;
+
+    setFieldValue(newText);
+
+    if (currentRowEntityId && updateField) {
+      updateField(currentRowEntityId, fieldName, newText);
+    }
+  }
+
+  return (
+    <InplaceInputTextEditMode
+      placeholder={placeholder ?? ''}
+      autoFocus
+      value={fieldValue ?? ''}
+      onSubmit={handleSubmit}
+    />
+  );
+}

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

@@ -0,0 +1,53 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { defaultOrderBy } from '@/companies/queries';
+import { GenericEntityTableData } from '@/people/components/GenericEntityTableData';
+import { peopleFieldMetadataArray } from '@/people/constants/peopleFieldMetadataArray';
+import { useUpdatePeopleField } from '@/people/hooks/useUpdatePeopleField';
+import { PeopleSelectedSortType } from '@/people/queries';
+import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
+import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
+import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
+import { IconList } from '@/ui/icon';
+import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
+import { EntityTable } from '@/ui/table/components/EntityTableV2';
+import { TableContext } from '@/ui/table/states/TableContext';
+import {
+  PersonOrderByWithRelationInput,
+  useGetPeopleQuery,
+} from '~/generated/graphql';
+import { availableSorts } from '~/pages/people/people-sorts';
+
+export function PeopleTable() {
+  const [orderBy, setOrderBy] =
+    useState<PersonOrderByWithRelationInput[]>(defaultOrderBy);
+
+  const updateSorts = useCallback((sorts: Array<PeopleSelectedSortType>) => {
+    setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
+  }, []);
+
+  const filters = useRecoilScopedValue(filtersScopedState, TableContext);
+
+  const whereFilters = useMemo(() => {
+    return { AND: filters.map(turnFilterIntoWhereClause) };
+  }, [filters]) as any;
+
+  return (
+    <>
+      <GenericEntityTableData
+        getRequestResultKey="people"
+        useGetRequest={useGetPeopleQuery}
+        orderBy={orderBy}
+        whereFilters={whereFilters}
+        fieldMetadataArray={peopleFieldMetadataArray}
+      />
+      <EntityTable
+        viewName="All People"
+        viewIcon={<IconList size={16} />}
+        availableSorts={availableSorts}
+        onSortsUpdate={updateSorts}
+        useUpdateField={useUpdatePeopleField}
+      />
+    </>
+  );
+}