Complete Fix view work (#2272)

* Fix views * Make view sorts and view filters functional * Complete Company table view fix * Fix model creation * Start fixing board * Complete work
2023-10-29 16:29:00 +01:00
parent 685d342170
commit 9bab28912d
118 changed files with 1806 additions and 1413 deletions
--- a/front/src/modules/companies/board/components/CompanyBoard.tsx
+++ b/front/src/modules/companies/board/components/CompanyBoard.tsx
@ -1,15 +1,29 @@
+import styled from '@emotion/styled';
+
 import { BoardContext } from '@/companies/states/contexts/BoardContext';
+import { BoardOptionsDropdown } from '@/ui/layout/board/components/BoardOptionsDropdown';
+import { BoardOptionsDropdownId } from '@/ui/layout/board/components/constants/BoardOptionsDropdownId';
 import {
  EntityBoard,
  EntityBoardProps,
 } from '@/ui/layout/board/components/EntityBoard';
 import { EntityBoardActionBar } from '@/ui/layout/board/components/EntityBoardActionBar';
 import { EntityBoardContextMenu } from '@/ui/layout/board/components/EntityBoardContextMenu';
+import { ViewBar } from '@/views/components/ViewBar';
+import { ViewScope } from '@/views/scopes/ViewScope';
 import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';

 import { HooksCompanyBoardEffect } from '../../components/HooksCompanyBoardEffect';
 import { CompanyBoardRecoilScopeContext } from '../../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';

+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+  width: 100%;
+`;
+
 type CompanyBoardProps = Pick<
  EntityBoardProps,
  'onColumnAdd' | 'onColumnDelete' | 'onEditColumnTitle'
@ -20,24 +34,30 @@ export const CompanyBoard = ({
  onColumnDelete,
  onEditColumnTitle,
 }: CompanyBoardProps) => {
+  const viewScopeId = 'company-board-view';
  return (
-    <>
-      <BoardContext.Provider
-        value={{
-          BoardRecoilScopeContext: CompanyBoardRecoilScopeContext,
-        }}
-      >
-        <HooksCompanyBoardEffect />
-
-        <EntityBoard
-          boardOptions={opportunitiesBoardOptions}
-          onColumnAdd={onColumnAdd}
-          onColumnDelete={onColumnDelete}
-          onEditColumnTitle={onEditColumnTitle}
-        />
-        <EntityBoardActionBar />
-        <EntityBoardContextMenu />
-      </BoardContext.Provider>
-    </>
+    <ViewScope viewScopeId={viewScopeId}>
+      <StyledContainer>
+        <BoardContext.Provider
+          value={{
+            BoardRecoilScopeContext: CompanyBoardRecoilScopeContext,
+          }}
+        >
+          <ViewBar
+            optionsDropdownButton={<BoardOptionsDropdown />}
+            optionsDropdownScopeId={BoardOptionsDropdownId}
+          />
+          <HooksCompanyBoardEffect />
+          <EntityBoard
+            boardOptions={opportunitiesBoardOptions}
+            onColumnAdd={onColumnAdd}
+            onColumnDelete={onColumnDelete}
+            onEditColumnTitle={onEditColumnTitle}
+          />
+          <EntityBoardActionBar />
+          <EntityBoardContextMenu />
+        </BoardContext.Provider>
+      </StyledContainer>
+    </ViewScope>
  );
 };
--- a/front/src/modules/companies/components/HooksCompanyBoardEffect.tsx
+++ b/front/src/modules/companies/components/HooksCompanyBoardEffect.tsx
@ -2,12 +2,19 @@ import { useEffect, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useRecoilState } from 'recoil';

+import { pipelineAvailableFieldDefinitions } from '@/pipeline/constants/pipelineAvailableFieldDefinitions';
 import { turnFilterIntoWhereClause } from '@/ui/data/filter/utils/turnFilterIntoWhereClause';
 import { useBoardActionBarEntries } from '@/ui/layout/board/hooks/useBoardActionBarEntries';
+import { useBoardContext } from '@/ui/layout/board/hooks/useBoardContext';
 import { useBoardContextMenuEntries } from '@/ui/layout/board/hooks/useBoardContextMenuEntries';
+import { availableBoardCardFieldsScopedState } from '@/ui/layout/board/states/availableBoardCardFieldsScopedState';
+import { boardCardFieldsScopedState } from '@/ui/layout/board/states/boardCardFieldsScopedState';
 import { isBoardLoadedState } from '@/ui/layout/board/states/isBoardLoadedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useView } from '@/views/hooks/useView';
-import { useViewInternalStates } from '@/views/hooks/useViewInternalStates';
+import { useViewGetStates } from '@/views/hooks/useViewGetStates';
+import { ViewType } from '@/views/types/ViewType';
+import { viewFieldsToBoardFieldDefinitions } from '@/views/utils/viewFieldsToBoardFieldDefinitions';
 import {
  Pipeline,
  PipelineProgressableType,
@ -22,20 +29,30 @@ import { useUpdateCompanyBoard } from '../hooks/useUpdateCompanyBoardColumns';

 export const HooksCompanyBoardEffect = () => {
  const {
-    setAvailableFilters,
-    setAvailableSorts,
+    setAvailableFilterDefinitions,
+    setAvailableSortDefinitions,
+    setAvailableFieldDefinitions,
    setEntityCountInCurrentView,
+    setViewObjectId,
+    setViewType,
  } = useView();

-  const { currentViewFilters } = useViewInternalStates();
-
-  useEffect(() => {
-    setAvailableFilters(opportunitiesBoardOptions.filters);
-    setAvailableSorts?.(opportunitiesBoardOptions.sorts);
-  }, [setAvailableFilters, setAvailableSorts]);
+  const { currentViewFilters, currentViewFields } = useViewGetStates();

  const [, setIsBoardLoaded] = useRecoilState(isBoardLoadedState);

+  const { BoardRecoilScopeContext } = useBoardContext();
+
+  const [, setBoardCardFields] = useRecoilScopedState(
+    boardCardFieldsScopedState,
+    BoardRecoilScopeContext,
+  );
+
+  const [, setAvailableBoardCardFields] = useRecoilScopedState(
+    availableBoardCardFieldsScopedState,
+    BoardRecoilScopeContext,
+  );
+
  const updateCompanyBoard = useUpdateCompanyBoard();

  const { data: pipelineData, loading: loadingGetPipelines } =
@ -51,6 +68,21 @@ export const HooksCompanyBoardEffect = () => {

  const pipeline = pipelineData?.findManyPipeline[0] as Pipeline | undefined;

+  useEffect(() => {
+    setAvailableFilterDefinitions(opportunitiesBoardOptions.filterDefinitions);
+    setAvailableSortDefinitions?.(opportunitiesBoardOptions.sortDefinitions);
+    setAvailableFieldDefinitions?.(pipelineAvailableFieldDefinitions);
+  }, [
+    setAvailableFieldDefinitions,
+    setAvailableFilterDefinitions,
+    setAvailableSortDefinitions,
+  ]);
+
+  useEffect(() => {
+    setViewObjectId?.('company');
+    setViewType?.(ViewType.Kanban);
+  }, [setViewObjectId, setViewType]);
+
  const pipelineStageIds = pipeline?.pipelineStages
    ?.map((pipelineStage) => pipelineStage.id)
    .flat();
@ -107,6 +139,7 @@ export const HooksCompanyBoardEffect = () => {
    if (!loading && pipeline && pipelineProgresses && companiesData) {
      setActionBarEntries();
      setContextMenuEntries();
+      setAvailableBoardCardFields(pipelineAvailableFieldDefinitions);
      updateCompanyBoard(pipeline, pipelineProgresses, companiesData.companies);
      setEntityCountInCurrentView(companiesData.companies.length);
    }
@ -120,7 +153,19 @@ export const HooksCompanyBoardEffect = () => {
    setContextMenuEntries,
    searchParams,
    setEntityCountInCurrentView,
+    setAvailableBoardCardFields,
  ]);

+  useEffect(() => {
+    if (currentViewFields) {
+      setBoardCardFields(
+        viewFieldsToBoardFieldDefinitions(
+          currentViewFields,
+          pipelineAvailableFieldDefinitions,
+        ),
+      );
+    }
+  }, [currentViewFields, setBoardCardFields]);
+
  return <></>;
 };
--- a/front/src/modules/companies/table/components/CompanyTable.tsx
+++ b/front/src/modules/companies/table/components/CompanyTable.tsx
@ -8,40 +8,59 @@ import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyT
 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 { TableOptionsDropdownId } from '@/ui/data/data-table/constants/TableOptionsDropdownId';
 import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
 import { useUpsertDataTableItem } from '@/ui/data/data-table/hooks/useUpsertDataTableItem';
 import { TableOptionsDropdown } from '@/ui/data/data-table/options/components/TableOptionsDropdown';
 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 { ViewBar } from '@/views/components/ViewBar';
 import { useViewFields } from '@/views/hooks/internal/useViewFields';
 import { useView } from '@/views/hooks/useView';
 import { ViewScope } from '@/views/scopes/ViewScope';
 import { columnDefinitionsToViewFields } from '@/views/utils/columnDefinitionToViewField';
 import { viewFieldsToColumnDefinitions } from '@/views/utils/viewFieldsToColumnDefinitions';
+import { viewFiltersToFilters } from '@/views/utils/viewFiltersToFilters';
+import { viewSortsToSorts } from '@/views/utils/viewSortsToSorts';
 import {
  UpdateOneCompanyMutationVariables,
  useGetCompaniesQuery,
  useGetWorkspaceMembersLazyQuery,
  useUpdateOneCompanyMutation,
 } from '~/generated/graphql';
-import { companyAvailableFilters } from '~/pages/companies/companies-filters';
-import { companyAvailableSorts } from '~/pages/companies/companies-sorts';
+import { companyTableFilterDefinitions } from '~/pages/companies/constants/companyTableFilterDefinitions';
+import { companyTableSortDefinitions } from '~/pages/companies/constants/companyTableSortDefinitions';

 import CompanyTableEffect from './CompanyTableEffect';

+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+`;
+
 export const CompanyTable = () => {
-  const tableViewScopeId = 'company-table';
+  const viewScopeId = 'company-table-view';
+  const tableScopeId = 'companies';
  const setTableColumns = useSetRecoilState(
-    tableColumnsScopedState('companies'),
+    tableColumnsScopedState(tableScopeId),
  );

+  const setTableFilters = useSetRecoilState(
+    tableFiltersScopedState(tableScopeId),
+  );
+
+  const setTableSorts = useSetRecoilState(tableSortsScopedState(tableScopeId));
+
  const [updateEntityMutation] = useUpdateOneCompanyMutation();
  const upsertDataTableItem = useUpsertDataTableItem();

  const [getWorkspaceMember] = useGetWorkspaceMembersLazyQuery();
-  const { persistViewFields } = useViewFields(tableViewScopeId);
-  const { setCurrentViewFields, currentViewId } = useView({
-    viewScopeId: tableViewScopeId,
+  const { persistViewFields } = useViewFields(viewScopeId);
+  const { setCurrentViewFields } = useView({
+    viewScopeId,
  });

  const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
@ -79,16 +98,9 @@ export const CompanyTable = () => {
  const { openCompanySpreadsheetImport: onImport } =
    useSpreadsheetCompanyImport();

-  const StyledContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: auto;
-  `;
-
  return (
    <ViewScope
-      viewScopeId={tableViewScopeId}
+      viewScopeId={viewScopeId}
      onViewFieldsChange={(viewFields) => {
        setTableColumns(
          viewFieldsToColumnDefinitions(
@ -97,7 +109,12 @@ export const CompanyTable = () => {
          ),
        );
      }}
-      onViewFiltersChange={() => {}}
+      onViewFiltersChange={(viewFilters) => {
+        setTableFilters(viewFiltersToFilters(viewFilters));
+      }}
+      onViewSortsChange={(viewSorts) => {
+        setTableSorts(viewSortsToSorts(viewSorts));
+      }}
    >
      <StyledContainer>
        <TableContext.Provider
@ -110,7 +127,7 @@ export const CompanyTable = () => {
        >
          <ViewBar
            optionsDropdownButton={<TableOptionsDropdown onImport={onImport} />}
-            optionsDropdownScopeId="table-dropdown-option"
+            optionsDropdownScopeId={TableOptionsDropdownId}
          />
          <CompanyTableEffect />
          <DataTableEffect
@ -119,8 +136,8 @@ export const CompanyTable = () => {
            getRequestOptimisticEffectDefinition={
              getCompaniesOptimisticEffectDefinition
            }
-            filterDefinitionArray={companyAvailableFilters}
-            sortDefinitionArray={companyAvailableSorts}
+            filterDefinitionArray={companyTableFilterDefinitions}
+            sortDefinitionArray={companyTableSortDefinitions}
            setContextMenuEntries={setContextMenuEntries}
            setActionBarEntries={setActionBarEntries}
          />
--- a/front/src/modules/companies/table/components/CompanyTableEffect.tsx
+++ b/front/src/modules/companies/table/components/CompanyTableEffect.tsx
@ -6,14 +6,14 @@ import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scop
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useView } from '@/views/hooks/useView';
 import { ViewType } from '@/views/types/ViewType';
-import { companyAvailableFilters } from '~/pages/companies/companies-filters';
-import { companyAvailableSorts } from '~/pages/companies/companies-sorts';
+import { companyTableFilterDefinitions } from '~/pages/companies/constants/companyTableFilterDefinitions';
+import { companyTableSortDefinitions } from '~/pages/companies/constants/companyTableSortDefinitions';

 const CompanyTableEffect = () => {
  const {
-    setAvailableSorts,
-    setAvailableFilters,
-    setAvailableFields,
+    setAvailableSortDefinitions,
+    setAvailableFilterDefinitions,
+    setAvailableFieldDefinitions,
    setViewType,
    setViewObjectId,
  } = useView();
@ -24,26 +24,21 @@ const CompanyTableEffect = () => {
  );

  useEffect(() => {
-    setAvailableSorts?.(companyAvailableSorts);
-    setAvailableFilters?.(companyAvailableFilters);
-    setAvailableFields?.(companiesAvailableFieldDefinitions);
+    setAvailableSortDefinitions?.(companyTableSortDefinitions);
+    setAvailableFilterDefinitions?.(companyTableFilterDefinitions);
+    setAvailableFieldDefinitions?.(companiesAvailableFieldDefinitions);
    setViewObjectId?.('company');
    setViewType?.(ViewType.Table);

    setAvailableTableColumns(companiesAvailableFieldDefinitions);
  }, [
-    setAvailableFields,
-    setAvailableFilters,
-    setAvailableSorts,
+    setAvailableFieldDefinitions,
+    setAvailableFilterDefinitions,
+    setAvailableSortDefinitions,
    setAvailableTableColumns,
    setViewObjectId,
    setViewType,
  ]);
-  // useEffect(() => {
-  //   if (currentViewFields) {
-  //     setTableColumns([...currentViewFields].sort((a, b) => a.index - b.index));
-  //   }
-  // }, [currentViewFields, setTableColumns]);

  // useEffect(() => {
  //   if (currentViewSorts) {
--- a/front/src/modules/companies/table/components/CompanyTableMockDataEffect.tsx
+++ b/front/src/modules/companies/table/components/CompanyTableMockDataEffect.tsx
@ -17,7 +17,6 @@ export const CompanyTableMockDataEffect = () => {

  useEffect(() => {
    setDataTableData(mockedCompaniesData, [], []);
-
    setTableColumns(companiesAvailableFieldDefinitions);
  }, [setDataTableData, setTableColumns]);