Migrate view field to new data model - Part 2 (#2270)

* Migrate view field to new data model * Migrate view fields to new model
2023-10-28 19:13:48 +02:00
parent b591023eb3
commit 685d342170
168 changed files with 960 additions and 4568 deletions
--- a/front/src/modules/companies/stories/mock-data.ts
+++ b/front/src/modules/companies/stories/mock-data.ts
@ -7,31 +7,31 @@ export const pipeline = {
    {
      id: 'pipeline-stage-1',
      name: 'New',
-      index: 0,
+      position: 0,
      color: 'red',
    },
    {
      id: 'pipeline-stage-2',
      name: 'Screening',
-      index: 1,
+      position: 1,
      color: 'purple',
    },
    {
      id: 'pipeline-stage-3',
      name: 'Meeting',
-      index: 2,
+      position: 2,
      color: 'sky',
    },
    {
      id: 'pipeline-stage-4',
      name: 'Proposal',
-      index: 3,
+      position: 3,
      color: 'turquoise',
    },
    {
      id: 'pipeline-stage-5',
      name: 'Customer',
-      index: 4,
+      position: 4,
      color: 'yellow',
    },
  ],
--- a/front/src/modules/companies/components/CompanyBoardCard.tsx
+++ b/front/src/modules/companies/components/CompanyBoardCard.tsx
@ -222,14 +222,14 @@ export const CompanyBoardCard = () => {
        <StyledBoardCardBody>
          <AnimatedEaseInOut isOpen={!showCompactView}>
            {visibleBoardCardFields.map((viewField) => (
-              <PreventSelectOnClickContainer key={viewField.key}>
+              <PreventSelectOnClickContainer key={viewField.fieldId}>
                <FieldContext.Provider
                  value={{
                    entityId: boardCardId,
-                    recoilScopeId: boardCardId + viewField.key,
+                    recoilScopeId: boardCardId + viewField.fieldId,
                    fieldDefinition: {
-                      key: viewField.key,
-                      name: viewField.name,
+                      fieldId: viewField.fieldId,
+                      label: viewField.label,
                      Icon: viewField.Icon,
                      type: viewField.type,
                      metadata: viewField.metadata,
--- a/front/src/modules/companies/constants/companiesAvailableFieldDefinitions.tsx
+++ b/front/src/modules/companies/constants/companiesAvailableFieldDefinitions.tsx
@ -28,11 +28,11 @@ import { User } from '~/generated/graphql';
 export const companiesAvailableFieldDefinitions: ColumnDefinition<FieldMetadata>[] =
  [
    {
-      key: 'name',
-      name: 'Name',
+      fieldId: 'name',
+      label: 'Name',
      Icon: IconBuildingSkyscraper,
      size: 180,
-      index: 0,
+      position: 0,
      type: 'chip',
      metadata: {
        urlFieldName: 'domainName',
@ -45,11 +45,11 @@ export const companiesAvailableFieldDefinitions: ColumnDefinition<FieldMetadata>
      basePathToShowPage: '/companies/',
    } satisfies ColumnDefinition<FieldChipMetadata>,
    {
-      key: 'domainName',
-      name: 'URL',
+      fieldId: 'domainName',
+      label: 'URL',
      Icon: IconLink,
      size: 100,
-      index: 1,
+      position: 1,
      type: 'url',
      metadata: {
        fieldName: 'domainName',
@ -60,11 +60,11 @@ export const companiesAvailableFieldDefinitions: ColumnDefinition<FieldMetadata>
        'The company website URL. We use this url to fetch the company icon.',
    } satisfies ColumnDefinition<FieldURLMetadata>,
    {
-      key: 'accountOwner',
-      name: 'Account Owner',
+      fieldId: 'accountOwner',
+      label: 'Account Owner',
      Icon: IconUserCircle,
      size: 150,
-      index: 2,
+      position: 2,
      type: 'relation',
      metadata: {
        fieldName: 'accountOwner',
@ -82,11 +82,11 @@ export const companiesAvailableFieldDefinitions: ColumnDefinition<FieldMetadata>
      },
    } satisfies ColumnDefinition<FieldRelationMetadata>,
    {
-      key: 'createdAt',
-      name: 'Creation',
+      fieldId: 'createdAt',
+      label: 'Creation',
      Icon: IconCalendarEvent,
      size: 150,
-      index: 3,
+      position: 3,
      type: 'date',
      metadata: {
        fieldName: 'createdAt',
@ -95,11 +95,11 @@ export const companiesAvailableFieldDefinitions: ColumnDefinition<FieldMetadata>
      infoTooltipContent: "Date when the company's record was created.",
    } satisfies ColumnDefinition<FieldDateMetadata>,
    {
-      key: 'employees',
-      name: 'Employees',
+      fieldId: 'employees',
+      label: 'Employees',
      Icon: IconUsers,
      size: 150,
-      index: 4,
+      position: 4,
      type: 'number',
      metadata: {
        fieldName: 'employees',
@ -110,11 +110,11 @@ export const companiesAvailableFieldDefinitions: ColumnDefinition<FieldMetadata>
      infoTooltipContent: 'Number of employees in the company.',
    } satisfies ColumnDefinition<FieldNumberMetadata>,
    {
-      key: 'linkedin',
-      name: 'LinkedIn',
+      fieldId: 'linkedin',
+      label: 'LinkedIn',
      Icon: IconBrandLinkedin,
      size: 170,
-      index: 5,
+      position: 5,
      type: 'url',
      metadata: {
        fieldName: 'linkedinUrl',
@ -124,11 +124,11 @@ export const companiesAvailableFieldDefinitions: ColumnDefinition<FieldMetadata>
      infoTooltipContent: 'The company Linkedin account.',
    } satisfies ColumnDefinition<FieldURLMetadata>,
    {
-      key: 'address',
-      name: 'Address',
+      fieldId: 'address',
+      label: 'Address',
      Icon: IconMap,
      size: 170,
-      index: 6,
+      position: 6,
      type: 'text',
      metadata: {
        fieldName: 'address',
@ -138,11 +138,11 @@ export const companiesAvailableFieldDefinitions: ColumnDefinition<FieldMetadata>
      infoTooltipContent: 'The company address.',
    } satisfies ColumnDefinition<FieldTextMetadata>,
    {
-      key: 'idealCustomerProfile',
-      name: 'ICP',
+      fieldId: 'idealCustomerProfile',
+      label: 'ICP',
      Icon: IconTarget,
      size: 150,
-      index: 7,
+      position: 7,
      type: 'boolean',
      metadata: {
        fieldName: 'idealCustomerProfile',
@ -152,11 +152,11 @@ export const companiesAvailableFieldDefinitions: ColumnDefinition<FieldMetadata>
        'Ideal Customer Profile:  Indicates whether the company is the most suitable and valuable customer for you.',
    } satisfies ColumnDefinition<FieldBooleanMetadata>,
    {
-      key: 'annualRecurringRevenue',
-      name: 'ARR',
+      fieldId: 'annualRecurringRevenue',
+      label: 'ARR',
      Icon: IconMoneybag,
      size: 150,
-      index: 8,
+      position: 8,
      type: 'moneyAmount',
      metadata: {
        fieldName: 'annualRecurringRevenue',
@ -166,11 +166,11 @@ export const companiesAvailableFieldDefinitions: ColumnDefinition<FieldMetadata>
        'Annual Recurring Revenue: The actual or estimated annual revenue of the company.',
    } satisfies ColumnDefinition<FieldMoneyMetadata>,
    {
-      key: 'xUrl',
-      name: 'Twitter',
+      fieldId: 'xUrl',
+      label: 'Twitter',
      Icon: IconBrandX,
      size: 150,
-      index: 9,
+      position: 9,
      type: 'url',
      metadata: {
        fieldName: 'xUrl',
@ -184,11 +184,11 @@ export const companiesAvailableFieldDefinitions: ColumnDefinition<FieldMetadata>
 export const suppliersAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[] =
  [
    {
-      key: 'name',
-      name: 'Name',
+      fieldId: 'name',
+      label: 'Name',
      Icon: IconBuildingSkyscraper,
      size: 180,
-      index: 0,
+      position: 0,
      type: 'text',
      metadata: {
        fieldName: 'name',
@ -199,11 +199,11 @@ export const suppliersAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
      basePathToShowPage: '/companies/',
    } satisfies ColumnDefinition<FieldTextMetadata>,
    {
-      key: 'city',
-      name: 'City',
+      fieldId: 'city',
+      label: 'City',
      Icon: IconBuildingSkyscraper,
      size: 180,
-      index: 0,
+      position: 0,
      type: 'text',
      metadata: {
        fieldName: 'city',
--- a/front/src/modules/companies/hooks/useUpdateCompanyBoardColumns.ts
+++ b/front/src/modules/companies/hooks/useUpdateCompanyBoardColumns.ts
@ -92,8 +92,8 @@ export const useUpdateCompanyBoard = () =>
        const pipelineStages = pipeline?.pipelineStages ?? [];

        const orderedPipelineStages = [...pipelineStages].sort((a, b) => {
-          if (!a.index || !b.index) return 0;
-          return a.index - b.index;
+          if (!a.position || !b.position) return 0;
+          return a.position - b.position;
        });

        const newBoardColumns: BoardColumnDefinition[] =
@ -110,7 +110,7 @@ export const useUpdateCompanyBoard = () =>
              colorCode: isThemeColor(pipelineStage.color)
                ? pipelineStage.color
                : undefined,
-              index: pipelineStage.index ?? 0,
+              position: pipelineStage.position ?? 0,
            };
          });
        if (currentBoardColumns.length === 0) {
--- a/front/src/modules/companies/table/components/CompanyTable.tsx
+++ b/front/src/modules/companies/table/components/CompanyTable.tsx
@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
+import { useRecoilCallback, useSetRecoilState } from 'recoil';

+import { companiesAvailableFieldDefinitions } from '@/companies/constants/companiesAvailableFieldDefinitions';
 import { getCompaniesOptimisticEffectDefinition } from '@/companies/graphql/optimistic-effect-definitions/getCompaniesOptimisticEffectDefinition';
 import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
 import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
@ -9,10 +11,13 @@ 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 { TableOptionsDropdown } from '@/ui/data/data-table/options/components/TableOptionsDropdown';
+import { tableColumnsScopedState } from '@/ui/data/data-table/states/tableColumnsScopedState';
 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 {
  UpdateOneCompanyMutationVariables,
  useGetCompaniesQuery,
@ -26,13 +31,18 @@ import CompanyTableEffect from './CompanyTableEffect';

 export const CompanyTable = () => {
  const tableViewScopeId = 'company-table';
+  const setTableColumns = useSetRecoilState(
+    tableColumnsScopedState('companies'),
+  );

  const [updateEntityMutation] = useUpdateOneCompanyMutation();
  const upsertDataTableItem = useUpsertDataTableItem();

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

  const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
  const { setActionBarEntries } = useCompanyTableActionBarEntries();
@ -77,14 +87,25 @@ export const CompanyTable = () => {
  `;

  return (
-    <ViewScope viewScopeId={tableViewScopeId}>
+    <ViewScope
+      viewScopeId={tableViewScopeId}
+      onViewFieldsChange={(viewFields) => {
+        setTableColumns(
+          viewFieldsToColumnDefinitions(
+            viewFields,
+            companiesAvailableFieldDefinitions,
+          ),
+        );
+      }}
+      onViewFiltersChange={() => {}}
+    >
      <StyledContainer>
        <TableContext.Provider
          value={{
-            onColumnsChange: (columns) => {
-              setCurrentViewFields?.(columns);
-              persistViewFields(columns);
-            },
+            onColumnsChange: useRecoilCallback(() => (columns) => {
+              setCurrentViewFields?.(columnDefinitionsToViewFields(columns));
+              persistViewFields(columnDefinitionsToViewFields(columns));
+            }),
          }}
        >
          <ViewBar
--- a/front/src/modules/companies/table/components/CompanyTableEffect.tsx
+++ b/front/src/modules/companies/table/components/CompanyTableEffect.tsx
@ -3,13 +3,9 @@ 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 { 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 { ViewType } from '@/views/types/ViewType';
 import { companyAvailableFilters } from '~/pages/companies/companies-filters';
 import { companyAvailableSorts } from '~/pages/companies/companies-sorts';

@ -21,23 +17,6 @@ const CompanyTableEffect = () => {
    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,
@ -57,33 +36,32 @@ const CompanyTableEffect = () => {
    setAvailableFilters,
    setAvailableSorts,
    setAvailableTableColumns,
-    setTableColumns,
    setViewObjectId,
    setViewType,
  ]);
-  useEffect(() => {
-    if (currentViewFields) {
-      setTableColumns([...currentViewFields].sort((a, b) => a.index - b.index));
-    }
-  }, [currentViewFields, setTableColumns]);
+  // 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 (currentViewSorts) {
+  //     setTableSorts(currentViewSorts);
+  //   }
+  // }, [currentViewFields, currentViewSorts, setTableColumns, setTableSorts]);

-  useEffect(() => {
-    if (currentViewFilters) {
-      setTableFilters(currentViewFilters);
-    }
-  }, [
-    currentViewFields,
-    currentViewFilters,
-    setTableColumns,
-    setTableFilters,
-    setTableSorts,
-  ]);
+  // useEffect(() => {
+  //   if (currentViewFilters) {
+  //     setTableFilters(currentViewFilters);
+  //   }
+  // }, [
+  //   currentViewFields,
+  //   currentViewFilters,
+  //   setTableColumns,
+  //   setTableFilters,
+  //   setTableSorts,
+  // ]);

  return <></>;
 };