refactor: add ColumnDefinition type (#1357)

* refactor: add ColumnDefinition type Closes #1193 * refactor: code review - rename things * fix: fix wrong import and lint
2023-08-28 18:33:03 +02:00
parent 0d7b869274
commit 74919eff7a
57 changed files with 770 additions and 772 deletions
--- a/front/src/modules/companies/components/CompanyBoardCard.tsx
+++ b/front/src/modules/companies/components/CompanyBoardCard.tsx
@ -166,8 +166,8 @@ export function CompanyBoardCard() {
                    <EditableFieldDefinitionContext.Provider
                      value={{
                        id: viewField.id,
-                        label: viewField.columnLabel,
-                        icon: viewField.columnIcon,
+                        label: viewField.label,
+                        icon: viewField.icon,
                        type: viewField.metadata.type,
                        metadata: viewField.metadata,
                      }}
--- a/front/src/modules/companies/components/HooksCompanyBoard.tsx
+++ b/front/src/modules/companies/components/HooksCompanyBoard.tsx
@ -1,7 +1,7 @@
 import { useEffect, useMemo } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';

-import { pipelineViewFields } from '@/pipeline/constants/pipelineViewFields';
+import { pipelineAvailableFieldDefinitions } from '@/pipeline/constants/pipelineAvailableFieldDefinitions';
 import { useBoardActionBarEntries } from '@/ui/board/hooks/useBoardActionBarEntries';
 import { useBoardContextMenuEntries } from '@/ui/board/hooks/useBoardContextMenuEntries';
 import { isBoardLoadedState } from '@/ui/board/states/isBoardLoadedState';
@ -44,7 +44,7 @@ export function HooksCompanyBoard({

  useEffect(() => {
    setAvailableFilters(opportunitiesBoardOptions.filters);
-    setFieldsDefinitionsState(pipelineViewFields);
+    setFieldsDefinitionsState(pipelineAvailableFieldDefinitions);
  });

  const [, setIsBoardLoaded] = useRecoilState(isBoardLoadedState);
--- a/front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx
+++ b/front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx
@ -0,0 +1,156 @@
+import type {
+  ViewFieldBooleanMetadata,
+  ViewFieldChipMetadata,
+  ViewFieldDateMetadata,
+  ViewFieldMetadata,
+  ViewFieldMoneyMetadata,
+  ViewFieldNumberMetadata,
+  ViewFieldRelationMetadata,
+  ViewFieldTextMetadata,
+  ViewFieldURLMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import {
+  IconBrandLinkedin,
+  IconBrandX,
+  IconBuildingSkyscraper,
+  IconCalendarEvent,
+  IconLink,
+  IconMap,
+  IconMoneybag,
+  IconTarget,
+  IconUserCircle,
+  IconUsers,
+} from '@/ui/icon/index';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+import type { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
+
+export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadata>[] =
+  [
+    {
+      id: 'name',
+      label: 'Name',
+      icon: <IconBuildingSkyscraper />,
+      size: 180,
+      order: 1,
+      metadata: {
+        type: 'chip',
+        urlFieldName: 'domainName',
+        contentFieldName: 'name',
+        relationType: Entity.Company,
+      },
+      isVisible: true,
+    } as ColumnDefinition<ViewFieldChipMetadata>,
+    {
+      id: 'domainName',
+      label: 'URL',
+      icon: <IconLink />,
+      size: 100,
+      order: 2,
+      metadata: {
+        type: 'url',
+        fieldName: 'domainName',
+        placeHolder: 'example.com',
+      },
+      isVisible: true,
+    } as ColumnDefinition<ViewFieldURLMetadata>,
+    {
+      id: 'accountOwner',
+      label: 'Account Owner',
+      icon: <IconUserCircle />,
+      size: 150,
+      order: 3,
+      metadata: {
+        type: 'relation',
+        fieldName: 'accountOwner',
+        relationType: Entity.User,
+      },
+      isVisible: true,
+    } satisfies ColumnDefinition<ViewFieldRelationMetadata>,
+    {
+      id: 'createdAt',
+      label: 'Creation',
+      icon: <IconCalendarEvent />,
+      size: 150,
+      order: 4,
+      metadata: {
+        type: 'date',
+        fieldName: 'createdAt',
+      },
+      isVisible: true,
+    } satisfies ColumnDefinition<ViewFieldDateMetadata>,
+    {
+      id: 'employees',
+      label: 'Employees',
+      icon: <IconUsers />,
+      size: 150,
+      order: 5,
+      metadata: {
+        type: 'number',
+        fieldName: 'employees',
+        isPositive: true,
+      },
+      isVisible: true,
+    } satisfies ColumnDefinition<ViewFieldNumberMetadata>,
+    {
+      id: 'linkedin',
+      label: 'LinkedIn',
+      icon: <IconBrandLinkedin />,
+      size: 170,
+      order: 6,
+      metadata: {
+        type: 'url',
+        fieldName: 'linkedinUrl',
+        placeHolder: 'LinkedIn URL',
+      },
+      isVisible: true,
+    } satisfies ColumnDefinition<ViewFieldURLMetadata>,
+    {
+      id: 'address',
+      label: 'Address',
+      icon: <IconMap />,
+      size: 170,
+      order: 7,
+      metadata: {
+        type: 'text',
+        fieldName: 'address',
+        placeHolder: 'Address', // Hack: Fake character to prevent password-manager from filling the field
+      },
+      isVisible: true,
+    } satisfies ColumnDefinition<ViewFieldTextMetadata>,
+    {
+      id: 'idealCustomerProfile',
+      label: 'ICP',
+      icon: <IconTarget />,
+      size: 150,
+      order: 8,
+      metadata: {
+        type: 'boolean',
+        fieldName: 'idealCustomerProfile',
+      },
+      isVisible: false,
+    } satisfies ColumnDefinition<ViewFieldBooleanMetadata>,
+    {
+      id: 'annualRecurringRevenue',
+      label: 'ARR',
+      icon: <IconMoneybag />,
+      size: 150,
+      order: 8,
+      metadata: {
+        type: 'moneyAmount',
+        fieldName: 'annualRecurringRevenue',
+      },
+    } satisfies ColumnDefinition<ViewFieldMoneyMetadata>,
+    {
+      id: 'xUrl',
+      label: 'Twitter',
+      icon: <IconBrandX />,
+      size: 150,
+      order: 8,
+      metadata: {
+        type: 'url',
+        fieldName: 'xUrl',
+        placeHolder: 'X',
+      },
+      isVisible: false,
+    } satisfies ColumnDefinition<ViewFieldURLMetadata>,
+  ];
--- a/front/src/modules/companies/constants/companyViewFields.tsx
+++ b/front/src/modules/companies/constants/companyViewFields.tsx
@ -1,155 +0,0 @@
-import {
-  ViewFieldBooleanMetadata,
-  ViewFieldChipMetadata,
-  ViewFieldDateMetadata,
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-  ViewFieldMoneyMetadata,
-  ViewFieldNumberMetadata,
-  ViewFieldRelationMetadata,
-  ViewFieldTextMetadata,
-  ViewFieldURLMetadata,
-} from '@/ui/editable-field/types/ViewField';
-import {
-  IconBrandLinkedin,
-  IconBrandX,
-  IconBuildingSkyscraper,
-  IconCalendarEvent,
-  IconLink,
-  IconMap,
-  IconMoneybag,
-  IconTarget,
-  IconUserCircle,
-  IconUsers,
-} from '@/ui/icon/index';
-import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
-
-export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
-  {
-    id: 'name',
-    columnLabel: 'Name',
-    columnIcon: <IconBuildingSkyscraper />,
-    columnSize: 180,
-    columnOrder: 1,
-    metadata: {
-      type: 'chip',
-      urlFieldName: 'domainName',
-      contentFieldName: 'name',
-      relationType: Entity.Company,
-    },
-    isVisible: true,
-  } as ViewFieldDefinition<ViewFieldChipMetadata>,
-  {
-    id: 'domainName',
-    columnLabel: 'URL',
-    columnIcon: <IconLink />,
-    columnSize: 100,
-    columnOrder: 2,
-    metadata: {
-      type: 'url',
-      fieldName: 'domainName',
-      placeHolder: 'example.com',
-    },
-    isVisible: true,
-  } as ViewFieldDefinition<ViewFieldURLMetadata>,
-  {
-    id: 'accountOwner',
-    columnLabel: 'Account Owner',
-    columnIcon: <IconUserCircle />,
-    columnSize: 150,
-    columnOrder: 3,
-    metadata: {
-      type: 'relation',
-      fieldName: 'accountOwner',
-      relationType: Entity.User,
-    },
-    isVisible: true,
-  } satisfies ViewFieldDefinition<ViewFieldRelationMetadata>,
-  {
-    id: 'createdAt',
-    columnLabel: 'Creation',
-    columnIcon: <IconCalendarEvent />,
-    columnSize: 150,
-    columnOrder: 4,
-    metadata: {
-      type: 'date',
-      fieldName: 'createdAt',
-    },
-    isVisible: true,
-  } satisfies ViewFieldDefinition<ViewFieldDateMetadata>,
-  {
-    id: 'employees',
-    columnLabel: 'Employees',
-    columnIcon: <IconUsers />,
-    columnSize: 150,
-    columnOrder: 5,
-    metadata: {
-      type: 'number',
-      fieldName: 'employees',
-      isPositive: true,
-    },
-    isVisible: true,
-  } satisfies ViewFieldDefinition<ViewFieldNumberMetadata>,
-  {
-    id: 'linkedin',
-    columnLabel: 'LinkedIn',
-    columnIcon: <IconBrandLinkedin />,
-    columnSize: 170,
-    columnOrder: 6,
-    metadata: {
-      type: 'url',
-      fieldName: 'linkedinUrl',
-      placeHolder: 'LinkedIn URL',
-    },
-    isVisible: true,
-  } satisfies ViewFieldDefinition<ViewFieldURLMetadata>,
-  {
-    id: 'address',
-    columnLabel: 'Address',
-    columnIcon: <IconMap />,
-    columnSize: 170,
-    columnOrder: 7,
-    metadata: {
-      type: 'text',
-      fieldName: 'address',
-      placeHolder: 'Address', // Hack: Fake character to prevent password-manager from filling the field
-    },
-    isVisible: true,
-  } satisfies ViewFieldDefinition<ViewFieldTextMetadata>,
-  {
-    id: 'idealCustomerProfile',
-    columnLabel: 'ICP',
-    columnIcon: <IconTarget />,
-    columnSize: 150,
-    columnOrder: 8,
-    metadata: {
-      type: 'boolean',
-      fieldName: 'idealCustomerProfile',
-    },
-    isVisible: false,
-  } satisfies ViewFieldDefinition<ViewFieldBooleanMetadata>,
-  {
-    id: 'annualRecurringRevenue',
-    columnLabel: 'ARR',
-    columnIcon: <IconMoneybag />,
-    columnSize: 150,
-    columnOrder: 8,
-    metadata: {
-      type: 'moneyAmount',
-      fieldName: 'annualRecurringRevenue',
-    },
-  } satisfies ViewFieldDefinition<ViewFieldMoneyMetadata>,
-  {
-    id: 'xUrl',
-    columnLabel: 'Twitter',
-    columnIcon: <IconBrandX />,
-    columnSize: 150,
-    columnOrder: 8,
-    metadata: {
-      type: 'url',
-      fieldName: 'xUrl',
-      placeHolder: 'X',
-    },
-    isVisible: false,
-  } satisfies ViewFieldDefinition<ViewFieldURLMetadata>,
-];
--- a/front/src/modules/companies/table/components/CompanyTable.tsx
+++ b/front/src/modules/companies/table/components/CompanyTable.tsx
@ -1,4 +1,4 @@
-import { companyViewFields } from '@/companies/constants/companyViewFields';
+import { companiesAvailableColumnDefinitions } from '@/companies/constants/companiesAvailableColumnDefinitions';
 import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
 import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
 import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport';
@ -36,7 +36,7 @@ export function CompanyTable() {
    availableFilters: companiesFilters,
    availableSorts,
    objectId: 'company',
-    viewFieldDefinitions: companyViewFields,
+    columnDefinitions: companiesAvailableColumnDefinitions,
  });

  const { openCompanySpreadsheetImport } = useSpreadsheetCompanyImport();
--- a/front/src/modules/companies/table/components/CompanyTableMockData.tsx
+++ b/front/src/modules/companies/table/components/CompanyTableMockData.tsx
@ -5,7 +5,7 @@ import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts
 import { tableColumnsScopedState } from '@/ui/table/states/tableColumnsScopedState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';

-import { companyViewFields } from '../../constants/companyViewFields';
+import { companiesAvailableColumnDefinitions } from '../../constants/companiesAvailableColumnDefinitions';

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

@ -19,7 +19,7 @@ export function CompanyTableMockData() {
  useEffect(() => {
    setEntityTableData(mockedCompaniesData, []);

-    setColumns(companyViewFields);
+    setColumns(companiesAvailableColumnDefinitions);
  }, [setColumns, setEntityTableData]);

  return <></>;