Fix Views on People page (#2265)

* fetching viewId for url

* fixed option menu name input

* fix table import

* fix unnecessary rerenders

* people working

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

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

@@ -24,7 +24,7 @@ import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { Company } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
-export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[] =
+export const peopleAvailableFieldDefinitions: ColumnDefinition<FieldMetadata>[] =
   [
     {
       key: 'displayName',

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

@@ -1,52 +1,86 @@
+import styled from '@emotion/styled';
+
 import { getPeopleOptimisticEffectDefinition } from '@/people/graphql/optimistic-effect-definitions/getPeopleOptimisticEffectDefinition';
 import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries';
 import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries';
+import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport';
 import { DataTable } from '@/ui/data/data-table/components/DataTable';
 import { DataTableEffect } from '@/ui/data/data-table/components/DataTableEffect';
 import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
 import { useUpsertDataTableItem } from '@/ui/data/data-table/hooks/useUpsertDataTableItem';
-import { SortScope } from '@/ui/data/sort/scopes/SortScope';
+import { TableOptionsDropdown } from '@/ui/data/data-table/options/components/TableOptionsDropdown';
+import { ViewBar } from '@/views/components/ViewBar';
+import { ViewBarEffect } from '@/views/components/ViewBarEffect';
+import { useViewFields } from '@/views/hooks/internal/useViewFields';
+import { useView } from '@/views/hooks/useView';
 import { ViewScope } from '@/views/scopes/ViewScope';
 import {
   UpdateOnePersonMutationVariables,
   useGetPeopleQuery,
   useUpdateOnePersonMutation,
 } from '~/generated/graphql';
-import { peopleFilters } from '~/pages/people/people-filters';
+import { peopleAvailableFilters } from '~/pages/people/people-filters';
 import { peopleAvailableSorts } from '~/pages/people/people-sorts';
 
+import PersonTableEffect from './PersonTableEffect';
+
 export const PeopleTable = () => {
+  const tableViewScopeId = 'person-table';
+
   const [updateEntityMutation] = useUpdateOnePersonMutation();
   const upsertDataTableItem = useUpsertDataTableItem();
 
-  const tableViewScopeId = 'people-table';
+  const { persistViewFields } = useViewFields(tableViewScopeId);
+  const { setCurrentViewFields } = useView({ viewScopeId: tableViewScopeId });
 
   const { setContextMenuEntries } = usePersonTableContextMenuEntries();
   const { setActionBarEntries } = usePersonTableActionBarEntries();
 
+  const { openPersonSpreadsheetImport: onImport } =
+    useSpreadsheetPersonImport();
+
+  const StyledContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+  `;
+
   return (
-    <ViewScope viewScopeId={tableViewScopeId}>
-      <SortScope sortScopeId={tableViewScopeId}>
+    <ViewScope
+      viewScopeId={tableViewScopeId}
+      onViewFieldsChange={() => {}}
+      onViewSortsChange={() => {}}
+      onViewFiltersChange={() => {}}
+    >
+      <StyledContainer>
         <TableContext.Provider
           value={{
-            onColumnsChange: () => {
-              // eslint-disable-next-line no-console
-              console.log('persist columns');
+            onColumnsChange: (columns) => {
+              setCurrentViewFields?.(columns);
+              persistViewFields(columns);
             },
           }}
         >
+          <ViewBarEffect />
+
+          <ViewBar
+            optionsDropdownButton={<TableOptionsDropdown onImport={onImport} />}
+            optionsDropdownScopeId="table-dropdown-option"
+          />
+          <PersonTableEffect />
+
           <DataTableEffect
             getRequestResultKey="people"
             useGetRequest={useGetPeopleQuery}
             getRequestOptimisticEffectDefinition={
               getPeopleOptimisticEffectDefinition
             }
-            filterDefinitionArray={peopleFilters}
+            filterDefinitionArray={peopleAvailableFilters}
+            sortDefinitionArray={peopleAvailableSorts}
             setContextMenuEntries={setContextMenuEntries}
             setActionBarEntries={setActionBarEntries}
-            sortDefinitionArray={peopleAvailableSorts}
           />
-
           <DataTable
             updateEntityMutation={({
               variables,
@@ -65,7 +99,7 @@ export const PeopleTable = () => {
             }
           />
         </TableContext.Provider>
-      </SortScope>
+      </StyledContainer>
     </ViewScope>
   );
 };

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

@@ -0,0 +1,91 @@
+import { useEffect } from 'react';
+
+import { peopleAvailableFieldDefinitions } from '@/people/constants/peopleAvailableFieldDefinitions';
+import { availableTableColumnsScopedState } from '@/ui/data/data-table/states/availableTableColumnsScopedState';
+import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
+import { tableColumnsScopedState } from '@/ui/data/data-table/states/tableColumnsScopedState';
+import { tableFiltersScopedState } from '@/ui/data/data-table/states/tableFiltersScopedState';
+import { tableSortsScopedState } from '@/ui/data/data-table/states/tableSortsScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useView } from '@/views/hooks/useView';
+import { useViewInternalStates } from '@/views/hooks/useViewInternalStates';
+import { ViewType } from '~/generated/graphql';
+import { peopleAvailableFilters } from '~/pages/people/people-filters';
+import { peopleAvailableSorts } from '~/pages/people/people-sorts';
+
+const PeopleTableEffect = () => {
+  const {
+    setAvailableSorts,
+    setAvailableFilters,
+    setAvailableFields,
+    setViewType,
+    setViewObjectId,
+  } = useView();
+  const { currentViewFields, currentViewSorts, currentViewFilters } =
+    useViewInternalStates();
+
+  const [, setTableColumns] = useRecoilScopedState(
+    tableColumnsScopedState,
+    TableRecoilScopeContext,
+  );
+
+  const [, setTableSorts] = useRecoilScopedState(
+    tableSortsScopedState,
+    TableRecoilScopeContext,
+  );
+
+  const [, setTableFilters] = useRecoilScopedState(
+    tableFiltersScopedState,
+    TableRecoilScopeContext,
+  );
+
+  const [, setAvailableTableColumns] = useRecoilScopedState(
+    availableTableColumnsScopedState,
+    TableRecoilScopeContext,
+  );
+
+  useEffect(() => {
+    setAvailableSorts?.(peopleAvailableSorts);
+    setAvailableFilters?.(peopleAvailableFilters);
+    setAvailableFields?.(peopleAvailableFieldDefinitions);
+    setViewObjectId?.('person');
+    setViewType?.(ViewType.Table);
+
+    setAvailableTableColumns(peopleAvailableFieldDefinitions);
+  }, [
+    setAvailableFields,
+    setAvailableFilters,
+    setAvailableSorts,
+    setAvailableTableColumns,
+    setTableColumns,
+    setViewObjectId,
+    setViewType,
+  ]);
+  useEffect(() => {
+    if (currentViewFields) {
+      setTableColumns([...currentViewFields].sort((a, b) => a.index - b.index));
+    }
+  }, [currentViewFields, setTableColumns]);
+
+  useEffect(() => {
+    if (currentViewSorts) {
+      setTableSorts(currentViewSorts);
+    }
+  }, [currentViewFields, currentViewSorts, setTableColumns, setTableSorts]);
+
+  useEffect(() => {
+    if (currentViewFilters) {
+      setTableFilters(currentViewFilters);
+    }
+  }, [
+    currentViewFields,
+    currentViewFilters,
+    setTableColumns,
+    setTableFilters,
+    setTableSorts,
+  ]);
+
+  return <></>;
+};
+
+export default PeopleTableEffect;