Improve viewbar api (#2233)

* create scopes * fix import bug * add useView hook * wip * wip * currentViewId is now retrieved via useView * working on sorts with useView * refactor in progress * refactor in progress * refactor in progress * refactor in progress * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * fix code * fix code * wip * push * Fix issue dependencies * Fix resize --------- Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
2023-10-27 10:52:26 +02:00
parent 6a72c14af3
commit 5ba68e997d
205 changed files with 3092 additions and 3249 deletions
--- a/front/src/modules/companies/table/components/CompanyTable.tsx
+++ b/front/src/modules/companies/table/components/CompanyTable.tsx
@ -1,41 +1,39 @@
-import { companiesAvailableColumnDefinitions } from '@/companies/constants/companiesAvailableColumnDefinitions';
+import styled from '@emotion/styled';
+
 import { getCompaniesOptimisticEffectDefinition } from '@/companies/graphql/optimistic-effect-definitions/getCompaniesOptimisticEffectDefinition';
 import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
 import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
-import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport';
 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 { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
-import { useTableViews } from '@/views/hooks/useTableViews';
+import { TableOptionsDropdown } from '@/ui/data/data-table/options/components/TableOptionsDropdown';
+import { TableOptionsHotkeyScope } from '@/ui/data/data-table/types/TableOptionsHotkeyScope';
+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 {
  UpdateOneCompanyMutationVariables,
  useGetCompaniesQuery,
  useGetWorkspaceMembersLazyQuery,
  useUpdateOneCompanyMutation,
 } from '~/generated/graphql';
-import { companiesFilters } from '~/pages/companies/companies-filters';
+import { companyAvailableFilters } from '~/pages/companies/companies-filters';
 import { companyAvailableSorts } from '~/pages/companies/companies-sorts';

+import CompanyTableEffect from './CompanyTableEffect';
+
 export const CompanyTable = () => {
+  const tableViewScopeId = 'company-table';
+
  const [updateEntityMutation] = useUpdateOneCompanyMutation();
  const upsertDataTableItem = useUpsertDataTableItem();

  const [getWorkspaceMember] = useGetWorkspaceMembersLazyQuery();
-  const {
-    createView,
-    deleteView,
-    persistColumns,
-    submitCurrentView,
-    updateView,
-  } = useTableViews({
-    objectId: 'company',
-    columnDefinitions: companiesAvailableColumnDefinitions,
-  });
-
-  const { openCompanySpreadsheetImport } = useSpreadsheetCompanyImport();
+  const { persistViewFields } = useViewFields(tableViewScopeId);
+  const { setCurrentViewFields } = useView({ viewScopeId: tableViewScopeId });

  const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
  const { setActionBarEntries } = useCompanyTableActionBarEntries();
@ -69,38 +67,61 @@ export const CompanyTable = () => {
    });
  };

+  const StyledContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+  `;
+
  return (
-    <TableContext.Provider value={{ onColumnsChange: persistColumns }}>
-      <DataTableEffect
-        getRequestResultKey="companies"
-        useGetRequest={useGetCompaniesQuery}
-        getRequestOptimisticEffectDefinition={
-          getCompaniesOptimisticEffectDefinition
-        }
-        filterDefinitionArray={companiesFilters}
-        sortDefinitionArray={companyAvailableSorts}
-        setContextMenuEntries={setContextMenuEntries}
-        setActionBarEntries={setActionBarEntries}
-      />
-      <ViewBarContext.Provider
-        value={{
-          defaultViewName: 'All Companies',
-          onCurrentViewSubmit: submitCurrentView,
-          onViewCreate: createView,
-          onViewEdit: updateView,
-          onViewRemove: deleteView,
-          onImport: openCompanySpreadsheetImport,
-          ViewBarRecoilScopeContext: TableRecoilScopeContext,
-        }}
-      >
-        <DataTable
-          updateEntityMutation={({
-            variables,
-          }: {
-            variables: UpdateOneCompanyMutationVariables;
-          }) => updateCompany(variables)}
-        />
-      </ViewBarContext.Provider>
-    </TableContext.Provider>
+    <ViewScope
+      viewScopeId={tableViewScopeId}
+      onViewFieldsChange={() => {}}
+      onViewSortsChange={() => {}}
+      onViewFiltersChange={() => {}}
+    >
+      <StyledContainer>
+        <TableContext.Provider
+          value={{
+            onColumnsChange: (columns) => {
+              setCurrentViewFields?.(columns);
+              persistViewFields(columns);
+            },
+          }}
+        >
+          <ViewBarEffect />
+
+          <ViewBar
+            optionsDropdownButton={
+              <TableOptionsDropdown
+                customHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
+              />
+            }
+            optionsDropdownScopeId="table-dropdown-option"
+          />
+          <CompanyTableEffect />
+
+          <DataTableEffect
+            getRequestResultKey="companies"
+            useGetRequest={useGetCompaniesQuery}
+            getRequestOptimisticEffectDefinition={
+              getCompaniesOptimisticEffectDefinition
+            }
+            filterDefinitionArray={companyAvailableFilters}
+            sortDefinitionArray={companyAvailableSorts}
+            setContextMenuEntries={setContextMenuEntries}
+            setActionBarEntries={setActionBarEntries}
+          />
+          <DataTable
+            updateEntityMutation={({
+              variables,
+            }: {
+              variables: UpdateOneCompanyMutationVariables;
+            }) => updateCompany(variables)}
+          />
+        </TableContext.Provider>
+      </StyledContainer>
+    </ViewScope>
  );
 };
--- a/front/src/modules/companies/table/components/CompanyTableEffect.tsx
+++ b/front/src/modules/companies/table/components/CompanyTableEffect.tsx
@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+
+import { companiesAvailableFieldDefinitions } from '@/companies/constants/companiesAvailableFieldDefinitions';
+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 { 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 { companyAvailableFilters } from '~/pages/companies/companies-filters';
+import { companyAvailableSorts } from '~/pages/companies/companies-sorts';
+
+const CompanyTableEffect = () => {
+  const {
+    setAvailableSorts,
+    setAvailableFilters,
+    setAvailableFields,
+    setViewType,
+    setViewObjectId,
+  } = useView();
+  const { currentViewFields } = useViewInternalStates();
+
+  const [, setTableColumns] = useRecoilScopedState(
+    tableColumnsScopedState,
+    TableRecoilScopeContext,
+  );
+
+  const [, setAvailableTableColumns] = useRecoilScopedState(
+    availableTableColumnsScopedState,
+    TableRecoilScopeContext,
+  );
+
+  useEffect(() => {
+    setAvailableSorts?.(companyAvailableSorts);
+    setAvailableFilters?.(companyAvailableFilters);
+    setAvailableFields?.(companiesAvailableFieldDefinitions);
+    setViewObjectId?.('company');
+    setViewType?.(ViewType.Table);
+
+    setAvailableTableColumns(companiesAvailableFieldDefinitions);
+  }, [
+    setAvailableFields,
+    setAvailableFilters,
+    setAvailableSorts,
+    setAvailableTableColumns,
+    setTableColumns,
+    setViewObjectId,
+    setViewType,
+  ]);
+  useEffect(() => {
+    if (currentViewFields) {
+      setTableColumns([...currentViewFields].sort((a, b) => a.index - b.index));
+    }
+  }, [currentViewFields, setTableColumns]);
+
+  return <></>;
+};
+
+export default CompanyTableEffect;
--- a/front/src/modules/companies/table/components/CompanyTableMockDataEffect.tsx
+++ b/front/src/modules/companies/table/components/CompanyTableMockDataEffect.tsx
@ -1,12 +1,11 @@
 import { useEffect } from 'react';

+import { companiesAvailableFieldDefinitions } from '@/companies/constants/companiesAvailableFieldDefinitions';
 import { useSetDataTableData } from '@/ui/data/data-table/hooks/useSetDataTableData';
 import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { tableColumnsScopedState } from '@/ui/data/data-table/states/tableColumnsScopedState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';

-import { companiesAvailableColumnDefinitions } from '../../constants/companiesAvailableColumnDefinitions';
-
 import { mockedCompaniesData } from './companies-mock-data';

 export const CompanyTableMockDataEffect = () => {
@ -19,7 +18,7 @@ export const CompanyTableMockDataEffect = () => {
  useEffect(() => {
    setDataTableData(mockedCompaniesData, [], []);

-    setTableColumns(companiesAvailableColumnDefinitions);
+    setTableColumns(companiesAvailableFieldDefinitions);
  }, [setDataTableData, setTableColumns]);

  return <></>;
--- a/front/src/modules/companies/table/components/CompanyTableMockMode.tsx
+++ b/front/src/modules/companies/table/components/CompanyTableMockMode.tsx
@ -1,22 +1,15 @@
 import { DataTable } from '@/ui/data/data-table/components/DataTable';
-import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
+import { ViewScope } from '@/views/scopes/ViewScope';
 import { useUpdateOneCompanyMutation } from '~/generated/graphql';

 import { CompanyTableMockDataEffect } from './CompanyTableMockDataEffect';

 export const CompanyTableMockMode = () => {
  return (
-    <>
+    <ViewScope viewScopeId="company-table-mock-mode">
      <CompanyTableMockDataEffect />
-      <ViewBarContext.Provider
-        value={{
-          defaultViewName: 'All Companies',
-          ViewBarRecoilScopeContext: TableRecoilScopeContext,
-        }}
-      >
-        <DataTable updateEntityMutation={useUpdateOneCompanyMutation} />
-      </ViewBarContext.Provider>
-    </>
+
+      <DataTable updateEntityMutation={useUpdateOneCompanyMutation} />
+    </ViewScope>
  );
 };