diff --git a/front/src/modules/companies/components/CompanyBoardCard.tsx b/front/src/modules/companies/components/CompanyBoardCard.tsx index 3b889450c7..379b297193 100644 --- a/front/src/modules/companies/components/CompanyBoardCard.tsx +++ b/front/src/modules/companies/components/CompanyBoardCard.tsx @@ -166,8 +166,8 @@ export function CompanyBoardCard() { { setAvailableFilters(opportunitiesBoardOptions.filters); - setFieldsDefinitionsState(pipelineViewFields); + setFieldsDefinitionsState(pipelineAvailableFieldDefinitions); }); const [, setIsBoardLoaded] = useRecoilState(isBoardLoadedState); diff --git a/front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx b/front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx new file mode 100644 index 0000000000..80a79e7287 --- /dev/null +++ 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[] = + [ + { + id: 'name', + label: 'Name', + icon: , + size: 180, + order: 1, + metadata: { + type: 'chip', + urlFieldName: 'domainName', + contentFieldName: 'name', + relationType: Entity.Company, + }, + isVisible: true, + } as ColumnDefinition, + { + id: 'domainName', + label: 'URL', + icon: , + size: 100, + order: 2, + metadata: { + type: 'url', + fieldName: 'domainName', + placeHolder: 'example.com', + }, + isVisible: true, + } as ColumnDefinition, + { + id: 'accountOwner', + label: 'Account Owner', + icon: , + size: 150, + order: 3, + metadata: { + type: 'relation', + fieldName: 'accountOwner', + relationType: Entity.User, + }, + isVisible: true, + } satisfies ColumnDefinition, + { + id: 'createdAt', + label: 'Creation', + icon: , + size: 150, + order: 4, + metadata: { + type: 'date', + fieldName: 'createdAt', + }, + isVisible: true, + } satisfies ColumnDefinition, + { + id: 'employees', + label: 'Employees', + icon: , + size: 150, + order: 5, + metadata: { + type: 'number', + fieldName: 'employees', + isPositive: true, + }, + isVisible: true, + } satisfies ColumnDefinition, + { + id: 'linkedin', + label: 'LinkedIn', + icon: , + size: 170, + order: 6, + metadata: { + type: 'url', + fieldName: 'linkedinUrl', + placeHolder: 'LinkedIn URL', + }, + isVisible: true, + } satisfies ColumnDefinition, + { + id: 'address', + label: 'Address', + icon: , + size: 170, + order: 7, + metadata: { + type: 'text', + fieldName: 'address', + placeHolder: 'Addre​ss', // Hack: Fake character to prevent password-manager from filling the field + }, + isVisible: true, + } satisfies ColumnDefinition, + { + id: 'idealCustomerProfile', + label: 'ICP', + icon: , + size: 150, + order: 8, + metadata: { + type: 'boolean', + fieldName: 'idealCustomerProfile', + }, + isVisible: false, + } satisfies ColumnDefinition, + { + id: 'annualRecurringRevenue', + label: 'ARR', + icon: , + size: 150, + order: 8, + metadata: { + type: 'moneyAmount', + fieldName: 'annualRecurringRevenue', + }, + } satisfies ColumnDefinition, + { + id: 'xUrl', + label: 'Twitter', + icon: , + size: 150, + order: 8, + metadata: { + type: 'url', + fieldName: 'xUrl', + placeHolder: 'X', + }, + isVisible: false, + } satisfies ColumnDefinition, + ]; diff --git a/front/src/modules/companies/constants/companyViewFields.tsx b/front/src/modules/companies/constants/companyViewFields.tsx deleted file mode 100644 index 6036e0e7f8..0000000000 --- a/front/src/modules/companies/constants/companyViewFields.tsx +++ /dev/null @@ -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[] = [ - { - id: 'name', - columnLabel: 'Name', - columnIcon: , - columnSize: 180, - columnOrder: 1, - metadata: { - type: 'chip', - urlFieldName: 'domainName', - contentFieldName: 'name', - relationType: Entity.Company, - }, - isVisible: true, - } as ViewFieldDefinition, - { - id: 'domainName', - columnLabel: 'URL', - columnIcon: , - columnSize: 100, - columnOrder: 2, - metadata: { - type: 'url', - fieldName: 'domainName', - placeHolder: 'example.com', - }, - isVisible: true, - } as ViewFieldDefinition, - { - id: 'accountOwner', - columnLabel: 'Account Owner', - columnIcon: , - columnSize: 150, - columnOrder: 3, - metadata: { - type: 'relation', - fieldName: 'accountOwner', - relationType: Entity.User, - }, - isVisible: true, - } satisfies ViewFieldDefinition, - { - id: 'createdAt', - columnLabel: 'Creation', - columnIcon: , - columnSize: 150, - columnOrder: 4, - metadata: { - type: 'date', - fieldName: 'createdAt', - }, - isVisible: true, - } satisfies ViewFieldDefinition, - { - id: 'employees', - columnLabel: 'Employees', - columnIcon: , - columnSize: 150, - columnOrder: 5, - metadata: { - type: 'number', - fieldName: 'employees', - isPositive: true, - }, - isVisible: true, - } satisfies ViewFieldDefinition, - { - id: 'linkedin', - columnLabel: 'LinkedIn', - columnIcon: , - columnSize: 170, - columnOrder: 6, - metadata: { - type: 'url', - fieldName: 'linkedinUrl', - placeHolder: 'LinkedIn URL', - }, - isVisible: true, - } satisfies ViewFieldDefinition, - { - id: 'address', - columnLabel: 'Address', - columnIcon: , - columnSize: 170, - columnOrder: 7, - metadata: { - type: 'text', - fieldName: 'address', - placeHolder: 'Addre​ss', // Hack: Fake character to prevent password-manager from filling the field - }, - isVisible: true, - } satisfies ViewFieldDefinition, - { - id: 'idealCustomerProfile', - columnLabel: 'ICP', - columnIcon: , - columnSize: 150, - columnOrder: 8, - metadata: { - type: 'boolean', - fieldName: 'idealCustomerProfile', - }, - isVisible: false, - } satisfies ViewFieldDefinition, - { - id: 'annualRecurringRevenue', - columnLabel: 'ARR', - columnIcon: , - columnSize: 150, - columnOrder: 8, - metadata: { - type: 'moneyAmount', - fieldName: 'annualRecurringRevenue', - }, - } satisfies ViewFieldDefinition, - { - id: 'xUrl', - columnLabel: 'Twitter', - columnIcon: , - columnSize: 150, - columnOrder: 8, - metadata: { - type: 'url', - fieldName: 'xUrl', - placeHolder: 'X', - }, - isVisible: false, - } satisfies ViewFieldDefinition, -]; diff --git a/front/src/modules/companies/table/components/CompanyTable.tsx b/front/src/modules/companies/table/components/CompanyTable.tsx index fb45fdb085..dc32d428f3 100644 --- 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(); diff --git a/front/src/modules/companies/table/components/CompanyTableMockData.tsx b/front/src/modules/companies/table/components/CompanyTableMockData.tsx index b241edeadf..40199dc7c5 100644 --- 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 <>; diff --git a/front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx b/front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx new file mode 100644 index 0000000000..e3e6b15a20 --- /dev/null +++ b/front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx @@ -0,0 +1,138 @@ +import type { + ViewFieldDateMetadata, + ViewFieldDoubleTextChipMetadata, + ViewFieldEmailMetadata, + ViewFieldMetadata, + ViewFieldPhoneMetadata, + ViewFieldRelationMetadata, + ViewFieldTextMetadata, + ViewFieldURLMetadata, +} from '@/ui/editable-field/types/ViewField'; +import { + IconBrandLinkedin, + IconBrandX, + IconBriefcase, + IconBuildingSkyscraper, + IconCalendarEvent, + IconMail, + IconMap, + IconPhone, + IconUser, +} from '@/ui/icon/index'; +import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; +import type { ColumnDefinition } from '@/ui/table/types/ColumnDefinition'; + +export const peopleAvailableColumnDefinitions: ColumnDefinition[] = + [ + { + id: 'displayName', + label: 'People', + icon: , + size: 210, + order: 1, + metadata: { + type: 'double-text-chip', + firstValueFieldName: 'firstName', + secondValueFieldName: 'lastName', + firstValuePlaceholder: 'F​irst n​ame', // Hack: Fake character to prevent password-manager from filling the field + secondValuePlaceholder: 'L​ast n​ame', // Hack: Fake character to prevent password-manager from filling the field + avatarUrlFieldName: 'avatarUrl', + entityType: Entity.Person, + }, + } satisfies ColumnDefinition, + { + id: 'email', + label: 'Email', + icon: , + size: 150, + order: 2, + metadata: { + type: 'email', + fieldName: 'email', + placeHolder: 'Ema​il', // Hack: Fake character to prevent password-manager from filling the field + }, + } satisfies ColumnDefinition, + { + id: 'company', + label: 'Company', + icon: , + size: 150, + order: 3, + metadata: { + type: 'relation', + fieldName: 'company', + relationType: Entity.Company, + }, + } satisfies ColumnDefinition, + { + id: 'phone', + label: 'Phone', + icon: , + size: 150, + order: 4, + metadata: { + type: 'phone', + fieldName: 'phone', + placeHolder: 'Phon​e', // Hack: Fake character to prevent password-manager from filling the field + }, + } satisfies ColumnDefinition, + { + id: 'createdAt', + label: 'Creation', + icon: , + size: 150, + order: 5, + metadata: { + type: 'date', + fieldName: 'createdAt', + }, + } satisfies ColumnDefinition, + { + id: 'city', + label: 'City', + icon: , + size: 150, + order: 6, + metadata: { + type: 'text', + fieldName: 'city', + placeHolder: 'Cit​y', // Hack: Fake character to prevent password-manager from filling the field + }, + } satisfies ColumnDefinition, + { + id: 'jobTitle', + label: 'Job title', + icon: , + size: 150, + order: 7, + metadata: { + type: 'text', + fieldName: 'jobTitle', + placeHolder: 'Job title', + }, + } satisfies ColumnDefinition, + { + id: 'linkedin', + label: 'LinkedIn', + icon: , + size: 150, + order: 8, + metadata: { + type: 'url', + fieldName: 'linkedinUrl', + placeHolder: 'LinkedIn', + }, + } satisfies ColumnDefinition, + { + id: 'x', + label: 'Twitter', + icon: , + size: 150, + order: 9, + metadata: { + type: 'url', + fieldName: 'xUrl', + placeHolder: 'X', + }, + } satisfies ColumnDefinition, + ]; diff --git a/front/src/modules/people/constants/peopleViewFields.tsx b/front/src/modules/people/constants/peopleViewFields.tsx deleted file mode 100644 index 2194e3b1e8..0000000000 --- a/front/src/modules/people/constants/peopleViewFields.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import { - ViewFieldDateMetadata, - ViewFieldDefinition, - ViewFieldDoubleTextChipMetadata, - ViewFieldEmailMetadata, - ViewFieldMetadata, - ViewFieldPhoneMetadata, - ViewFieldRelationMetadata, - ViewFieldTextMetadata, - ViewFieldURLMetadata, -} from '@/ui/editable-field/types/ViewField'; -import { - IconBrandLinkedin, - IconBrandX, - IconBriefcase, - IconBuildingSkyscraper, - IconCalendarEvent, - IconMail, - IconMap, - IconPhone, - IconUser, -} from '@/ui/icon/index'; -import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; - -export const peopleViewFields: ViewFieldDefinition[] = [ - { - id: 'displayName', - columnLabel: 'People', - columnIcon: , - columnSize: 210, - columnOrder: 1, - metadata: { - type: 'double-text-chip', - firstValueFieldName: 'firstName', - secondValueFieldName: 'lastName', - firstValuePlaceholder: 'F​irst n​ame', // Hack: Fake character to prevent password-manager from filling the field - secondValuePlaceholder: 'L​ast n​ame', // Hack: Fake character to prevent password-manager from filling the field - avatarUrlFieldName: 'avatarUrl', - entityType: Entity.Person, - }, - } satisfies ViewFieldDefinition, - { - id: 'email', - columnLabel: 'Email', - columnIcon: , - columnSize: 150, - columnOrder: 2, - metadata: { - type: 'email', - fieldName: 'email', - placeHolder: 'Ema​il', // Hack: Fake character to prevent password-manager from filling the field - }, - } satisfies ViewFieldDefinition, - { - id: 'company', - columnLabel: 'Company', - columnIcon: , - columnSize: 150, - columnOrder: 3, - metadata: { - type: 'relation', - fieldName: 'company', - relationType: Entity.Company, - }, - } satisfies ViewFieldDefinition, - { - id: 'phone', - columnLabel: 'Phone', - columnIcon: , - columnSize: 150, - columnOrder: 4, - metadata: { - type: 'phone', - fieldName: 'phone', - placeHolder: 'Phon​e', // Hack: Fake character to prevent password-manager from filling the field - }, - } satisfies ViewFieldDefinition, - { - id: 'createdAt', - columnLabel: 'Creation', - columnIcon: , - columnSize: 150, - columnOrder: 5, - metadata: { - type: 'date', - fieldName: 'createdAt', - }, - } satisfies ViewFieldDefinition, - { - id: 'city', - columnLabel: 'City', - columnIcon: , - columnSize: 150, - columnOrder: 6, - metadata: { - type: 'text', - fieldName: 'city', - placeHolder: 'Cit​y', // Hack: Fake character to prevent password-manager from filling the field - }, - } satisfies ViewFieldDefinition, - { - id: 'jobTitle', - columnLabel: 'Job title', - columnIcon: , - columnSize: 150, - columnOrder: 7, - metadata: { - type: 'text', - fieldName: 'jobTitle', - placeHolder: 'Job title', - }, - } satisfies ViewFieldDefinition, - { - id: 'linkedin', - columnLabel: 'LinkedIn', - columnIcon: , - columnSize: 150, - columnOrder: 8, - metadata: { - type: 'url', - fieldName: 'linkedinUrl', - placeHolder: 'LinkedIn', - }, - } satisfies ViewFieldDefinition, - { - id: 'x', - columnLabel: 'Twitter', - columnIcon: , - columnSize: 150, - columnOrder: 9, - metadata: { - type: 'url', - fieldName: 'xUrl', - placeHolder: 'X', - }, - } satisfies ViewFieldDefinition, -]; diff --git a/front/src/modules/people/table/components/PeopleTable.tsx b/front/src/modules/people/table/components/PeopleTable.tsx index e2982319c1..97b7989458 100644 --- a/front/src/modules/people/table/components/PeopleTable.tsx +++ b/front/src/modules/people/table/components/PeopleTable.tsx @@ -1,4 +1,4 @@ -import { peopleViewFields } from '@/people/constants/peopleViewFields'; +import { peopleAvailableColumnDefinitions } from '@/people/constants/peopleAvailableColumnDefinitions'; import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries'; import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries'; import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport'; @@ -37,7 +37,7 @@ export function PeopleTable() { availableFilters: peopleFilters, availableSorts, objectId: 'person', - viewFieldDefinitions: peopleViewFields, + columnDefinitions: peopleAvailableColumnDefinitions, }); const { setContextMenuEntries } = usePersonTableContextMenuEntries(); diff --git a/front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx b/front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx new file mode 100644 index 0000000000..89a8202b28 --- /dev/null +++ b/front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx @@ -0,0 +1,61 @@ +import { + ViewFieldDateMetadata, + ViewFieldDefinition, + ViewFieldMetadata, + ViewFieldNumberMetadata, + ViewFieldProbabilityMetadata, + ViewFieldRelationMetadata, +} from '@/ui/editable-field/types/ViewField'; +import { + IconCalendarEvent, + IconCurrencyDollar, + IconProgressCheck, + IconUser, +} from '@/ui/icon'; +import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; + +export const pipelineAvailableFieldDefinitions: ViewFieldDefinition[] = + [ + { + id: 'closeDate', + label: 'Close Date', + icon: , + metadata: { + type: 'date', + fieldName: 'closeDate', + }, + isVisible: true, + } satisfies ViewFieldDefinition, + { + id: 'amount', + label: 'Amount', + icon: , + metadata: { + type: 'number', + fieldName: 'amount', + }, + isVisible: true, + } satisfies ViewFieldDefinition, + { + id: 'probability', + label: 'Probability', + icon: , + metadata: { + type: 'probability', + fieldName: 'probability', + }, + isVisible: true, + } satisfies ViewFieldDefinition, + { + id: 'pointOfContact', + label: 'Point of Contact', + icon: , + metadata: { + type: 'relation', + fieldName: 'pointOfContact', + relationType: Entity.Person, + useEditButton: true, + }, + isVisible: true, + } satisfies ViewFieldDefinition, + ]; diff --git a/front/src/modules/pipeline/constants/pipelineViewFields.tsx b/front/src/modules/pipeline/constants/pipelineViewFields.tsx deleted file mode 100644 index 4bce73430c..0000000000 --- a/front/src/modules/pipeline/constants/pipelineViewFields.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { - ViewFieldDateMetadata, - ViewFieldDefinition, - ViewFieldMetadata, - ViewFieldNumberMetadata, - ViewFieldProbabilityMetadata, - ViewFieldRelationMetadata, -} from '@/ui/editable-field/types/ViewField'; -import { - IconCalendarEvent, - IconCurrencyDollar, - IconProgressCheck, - IconUser, -} from '@/ui/icon'; -import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; - -export const pipelineViewFields: ViewFieldDefinition[] = [ - { - id: 'closeDate', - columnLabel: 'Close Date', - columnIcon: , - columnSize: 150, - columnOrder: 4, - metadata: { - type: 'date', - fieldName: 'closeDate', - }, - isVisible: true, - } satisfies ViewFieldDefinition, - { - id: 'amount', - columnLabel: 'Amount', - columnIcon: , - columnSize: 150, - columnOrder: 4, - metadata: { - type: 'number', - fieldName: 'amount', - }, - isVisible: true, - } satisfies ViewFieldDefinition, - { - id: 'probability', - columnLabel: 'Probability', - columnIcon: , - columnSize: 150, - columnOrder: 4, - metadata: { - type: 'probability', - fieldName: 'probability', - }, - isVisible: true, - } satisfies ViewFieldDefinition, - { - id: 'pointOfContact', - columnLabel: 'Point of Contact', - columnIcon: , - columnSize: 150, - columnOrder: 4, - metadata: { - type: 'relation', - fieldName: 'pointOfContact', - relationType: Entity.Person, - useEditButton: true, - }, - isVisible: true, - } satisfies ViewFieldDefinition, -]; diff --git a/front/src/modules/ui/editable-field/types/ViewField.ts b/front/src/modules/ui/editable-field/types/ViewField.ts index e450dfc6e3..68e916471f 100644 --- a/front/src/modules/ui/editable-field/types/ViewField.ts +++ b/front/src/modules/ui/editable-field/types/ViewField.ts @@ -117,11 +117,8 @@ export type ViewFieldMetadata = { type: ViewFieldType } & ( export type ViewFieldDefinition = { id: string; - columnLabel: string; - columnSize: number; - columnOrder: number; - columnIcon?: JSX.Element; - filterIcon?: JSX.Element; + label: string; + icon?: JSX.Element; isVisible?: boolean; metadata: T; }; diff --git a/front/src/modules/ui/table/components/EntityTableCell.tsx b/front/src/modules/ui/table/components/EntityTableCell.tsx index 2ba83d95cc..03ae5452d5 100644 --- a/front/src/modules/ui/table/components/EntityTableCell.tsx +++ b/front/src/modules/ui/table/components/EntityTableCell.tsx @@ -5,8 +5,8 @@ import { contextMenuIsOpenState } from '@/ui/context-menu/states/contextMenuIsOp import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPositionState'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; +import { ColumnContext } from '../contexts/ColumnContext'; import { ColumnIndexContext } from '../contexts/ColumnIndexContext'; -import { ViewFieldContext } from '../contexts/ViewFieldContext'; import { GenericEditableCell } from '../editable-cell/components/GenericEditableCell'; import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; @@ -26,9 +26,9 @@ export function EntityTableCell({ cellIndex }: { cellIndex: number }) { setContextMenuOpenState(true); } - const viewField = useContext(ViewFieldContext); + const columnDefinition = useContext(ColumnContext); - if (!viewField) { + if (!columnDefinition) { return null; } @@ -36,7 +36,7 @@ export function EntityTableCell({ cellIndex }: { cellIndex: number }) { handleContextMenu(event)}> - + diff --git a/front/src/modules/ui/table/components/EntityTableColumnMenu.tsx b/front/src/modules/ui/table/components/EntityTableColumnMenu.tsx index 552cb34261..51057b8731 100644 --- a/front/src/modules/ui/table/components/EntityTableColumnMenu.tsx +++ b/front/src/modules/ui/table/components/EntityTableColumnMenu.tsx @@ -53,11 +53,11 @@ export const EntityTableColumnMenu = ({ />, ]} > - {column.columnIcon && - cloneElement(column.columnIcon, { + {column.icon && + cloneElement(column.icon, { size: theme.icon.size.md, })} - {column.columnLabel} + {column.label} ))} diff --git a/front/src/modules/ui/table/components/EntityTableHeader.tsx b/front/src/modules/ui/table/components/EntityTableHeader.tsx index fef97d291a..f1b0bff1c2 100644 --- a/front/src/modules/ui/table/components/EntityTableHeader.tsx +++ b/front/src/modules/ui/table/components/EntityTableHeader.tsx @@ -114,16 +114,16 @@ export function EntityTableHeader() { const nextWidth = Math.round( Math.max( - columnsById[resizedFieldId].columnSize + + columnsById[resizedFieldId].size + snapshot.getLoadable(resizeFieldOffsetState).valueOrThrow(), COLUMN_MIN_WIDTH, ), ); - if (nextWidth !== columnsById[resizedFieldId].columnSize) { + if (nextWidth !== columnsById[resizedFieldId].size) { const nextColumns = columns.map((column) => column.id === resizedFieldId - ? { ...column, columnSize: nextWidth } + ? { ...column, size: nextWidth } : column, ); @@ -179,15 +179,12 @@ export function EntityTableHeader() { key={column.id} isResizing={resizedFieldId === column.id} columnWidth={Math.max( - columnsById[column.id].columnSize + + columnsById[column.id].size + (resizedFieldId === column.id ? offset : 0), COLUMN_MIN_WIDTH, )} > - + {columns.map((column, columnIndex) => { return ( - + - + ); })} diff --git a/front/src/modules/ui/table/contexts/ColumnContext.ts b/front/src/modules/ui/table/contexts/ColumnContext.ts new file mode 100644 index 0000000000..d7a7ec17e0 --- /dev/null +++ b/front/src/modules/ui/table/contexts/ColumnContext.ts @@ -0,0 +1,8 @@ +import { createContext } from 'react'; + +import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField'; + +import type { ColumnDefinition } from '../types/ColumnDefinition'; + +export const ColumnContext = + createContext | null>(null); diff --git a/front/src/modules/ui/table/contexts/ViewFieldContext.ts b/front/src/modules/ui/table/contexts/ViewFieldContext.ts deleted file mode 100644 index 179eed39b8..0000000000 --- a/front/src/modules/ui/table/contexts/ViewFieldContext.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createContext } from 'react'; - -import { - ViewFieldDefinition, - ViewFieldMetadata, -} from '../../editable-field/types/ViewField'; - -export const ViewFieldContext = - createContext | null>(null); diff --git a/front/src/modules/ui/table/editable-cell/components/GenericEditableCell.tsx b/front/src/modules/ui/table/editable-cell/components/GenericEditableCell.tsx index a36988ae6d..8be100b589 100644 --- a/front/src/modules/ui/table/editable-cell/components/GenericEditableCell.tsx +++ b/front/src/modules/ui/table/editable-cell/components/GenericEditableCell.tsx @@ -1,4 +1,5 @@ import { isViewFieldBoolean } from '@/ui/editable-field/types/guards/isViewFieldBoolean'; +import { isViewFieldChip } from '@/ui/editable-field/types/guards/isViewFieldChip'; import { isViewFieldDate } from '@/ui/editable-field/types/guards/isViewFieldDate'; import { isViewFieldDoubleText } from '@/ui/editable-field/types/guards/isViewFieldDoubleText'; import { isViewFieldDoubleTextChip } from '@/ui/editable-field/types/guards/isViewFieldDoubleTextChip'; @@ -9,12 +10,9 @@ import { isViewFieldPhone } from '@/ui/editable-field/types/guards/isViewFieldPh import { isViewFieldRelation } from '@/ui/editable-field/types/guards/isViewFieldRelation'; import { isViewFieldText } from '@/ui/editable-field/types/guards/isViewFieldText'; import { isViewFieldURL } from '@/ui/editable-field/types/guards/isViewFieldURL'; -import { - ViewFieldDefinition, - ViewFieldMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField'; -import { isViewFieldChip } from '../../../editable-field/types/guards/isViewFieldChip'; +import type { ColumnDefinition } from '../../types/ColumnDefinition'; import { GenericEditableBooleanCell } from '../type/components/GenericEditableBooleanCell'; import { GenericEditableChipCell } from '../type/components/GenericEditableChipCell'; import { GenericEditableDateCell } from '../type/components/GenericEditableDateCell'; @@ -29,37 +27,41 @@ import { GenericEditableTextCell } from '../type/components/GenericEditableTextC import { GenericEditableURLCell } from '../type/components/GenericEditableURLCell'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; -export function GenericEditableCell({ viewField: fieldDefinition }: OwnProps) { - if (isViewFieldEmail(fieldDefinition)) { - return ; - } else if (isViewFieldText(fieldDefinition)) { - return ; - } else if (isViewFieldRelation(fieldDefinition)) { - return ; - } else if (isViewFieldDoubleTextChip(fieldDefinition)) { - return ; - } else if (isViewFieldDoubleText(fieldDefinition)) { - return ; - } else if (isViewFieldPhone(fieldDefinition)) { - return ; - } else if (isViewFieldURL(fieldDefinition)) { - return ; - } else if (isViewFieldDate(fieldDefinition)) { - return ; - } else if (isViewFieldNumber(fieldDefinition)) { - return ; - } else if (isViewFieldBoolean(fieldDefinition)) { - return ; - } else if (isViewFieldChip(fieldDefinition)) { - return ; - } else if (isViewFieldMoney(fieldDefinition)) { - return ; +export function GenericEditableCell({ columnDefinition }: OwnProps) { + if (isViewFieldEmail(columnDefinition)) { + return ; + } else if (isViewFieldText(columnDefinition)) { + return ; + } else if (isViewFieldRelation(columnDefinition)) { + return ; + } else if (isViewFieldDoubleTextChip(columnDefinition)) { + return ( + + ); + } else if (isViewFieldDoubleText(columnDefinition)) { + return ( + + ); + } else if (isViewFieldPhone(columnDefinition)) { + return ; + } else if (isViewFieldURL(columnDefinition)) { + return ; + } else if (isViewFieldDate(columnDefinition)) { + return ; + } else if (isViewFieldNumber(columnDefinition)) { + return ; + } else if (isViewFieldBoolean(columnDefinition)) { + return ; + } else if (isViewFieldChip(columnDefinition)) { + return ; + } else if (isViewFieldMoney(columnDefinition)) { + return ; } else { console.warn( - `Unknown field metadata type: ${fieldDefinition.metadata.type} in GenericEditableCell`, + `Unknown field metadata type: ${columnDefinition.metadata.type} in GenericEditableCell`, ); return <>; } diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableBooleanCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableBooleanCell.tsx index a6666b5f85..6dad7de578 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableBooleanCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableBooleanCell.tsx @@ -2,18 +2,16 @@ import styled from '@emotion/styled'; import { IconCheck, IconX } from '@tabler/icons-react'; import { useRecoilState } from 'recoil'; -import { - ViewFieldBooleanMetadata, - ViewFieldDefinition, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldBooleanMetadata } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; import { EditableCellDisplayContainer } from '../../components/EditableCellContainer'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; editModeHorizontalAlign?: 'left' | 'right'; }; @@ -36,13 +34,13 @@ function capitalizeFirstLetter(value: string) { return value.charAt(0).toUpperCase() + value.slice(1); } -export function GenericEditableBooleanCell({ viewField }: OwnProps) { +export function GenericEditableBooleanCell({ columnDefinition }: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); const [fieldValue, setFieldValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -54,7 +52,7 @@ export function GenericEditableBooleanCell({ viewField }: OwnProps) { setFieldValue(newValue); if (currentRowEntityId && updateField) { - updateField(currentRowEntityId, viewField, newValue); + updateField(currentRowEntityId, columnDefinition, newValue); } } catch (error) { console.warn( diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCell.tsx index acb50f495e..f2ec46ae2d 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCell.tsx @@ -1,30 +1,31 @@ -import { - ViewFieldChipMetadata, - ViewFieldDefinition, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldChipMetadata } from '@/ui/editable-field/types/ViewField'; import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { GenericEditableChipCellDisplayMode } from './GenericEditableChipCellDisplayMode'; import { GenericEditableChipCellEditMode } from './GenericEditableChipCellEditMode'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; editModeHorizontalAlign?: 'left' | 'right'; placeholder?: string; }; export function GenericEditableChipCell({ - viewField, + columnDefinition, editModeHorizontalAlign, }: OwnProps) { return ( + } nonEditModeContent={ - + } > ); diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellDisplayMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellDisplayMode.tsx index 904b89b775..f6b6c9af6a 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellDisplayMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellDisplayMode.tsx @@ -1,39 +1,38 @@ import { useRecoilValue } from 'recoil'; import { CompanyChip } from '@/companies/components/CompanyChip'; -import { - ViewFieldChipMetadata, - ViewFieldDefinition, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldChipMetadata } from '@/ui/editable-field/types/ViewField'; import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { getLogoUrlFromDomainName } from '~/utils'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + type OwnProps = { - fieldDefinition: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; export function GenericEditableChipCellDisplayMode({ - fieldDefinition, + columnDefinition, }: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); const content = useRecoilValue( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: fieldDefinition.metadata.contentFieldName, + fieldName: columnDefinition.metadata.contentFieldName, }), ); const chipUrl = useRecoilValue( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: fieldDefinition.metadata.urlFieldName, + fieldName: columnDefinition.metadata.urlFieldName, }), ); - switch (fieldDefinition.metadata.relationType) { + switch (columnDefinition.metadata.relationType) { case Entity.Company: { return ( ; } diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellEditMode.tsx index ed998cd8fd..10937a8c34 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellEditMode.tsx @@ -1,27 +1,28 @@ import { useRecoilState } from 'recoil'; -import { - ViewFieldChipMetadata, - ViewFieldDefinition, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldChipMetadata } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { TextCellEdit } from './TextCellEdit'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; -export function GenericEditableChipCellEditMode({ viewField }: OwnProps) { +export function GenericEditableChipCellEditMode({ + columnDefinition, +}: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); // TODO: we could use a hook that would return the field value with the right type const [fieldValue, setFieldValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.contentFieldName, + fieldName: columnDefinition.metadata.contentFieldName, }), ); @@ -33,13 +34,13 @@ export function GenericEditableChipCellEditMode({ viewField }: OwnProps) { setFieldValue(newText); if (currentRowEntityId && updateField) { - updateField(currentRowEntityId, viewField, newText); + updateField(currentRowEntityId, columnDefinition, newText); } } return ( ; + columnDefinition: ColumnDefinition; editModeHorizontalAlign?: 'left' | 'right'; }; export function GenericEditableDateCell({ - viewField, + columnDefinition, editModeHorizontalAlign, }: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); @@ -25,7 +24,7 @@ export function GenericEditableDateCell({ const fieldValue = useRecoilValue( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -33,7 +32,7 @@ export function GenericEditableDateCell({ + } nonEditModeContent={} > diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx index c7b6567973..c914da6a0b 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx @@ -1,28 +1,29 @@ import { DateTime } from 'luxon'; import { useRecoilState } from 'recoil'; -import { - ViewFieldDateMetadata, - ViewFieldDefinition, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldDateMetadata } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { DateCellEdit } from './DateCellEdit'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; -export function GenericEditableDateCellEditMode({ viewField }: OwnProps) { +export function GenericEditableDateCellEditMode({ + columnDefinition, +}: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); // TODO: we could use a hook that would return the field value with the right type const [fieldValue, setFieldValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -40,7 +41,7 @@ export function GenericEditableDateCellEditMode({ viewField }: OwnProps) { setFieldValue(newDateISO); if (currentRowEntityId && updateField && newDateISO) { - updateField(currentRowEntityId, viewField, newDateISO); + updateField(currentRowEntityId, columnDefinition, newDateISO); } } diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCell.tsx index a8d9292491..23a78101df 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCell.tsx @@ -1,34 +1,33 @@ import { useRecoilValue } from 'recoil'; -import { - ViewFieldDefinition, - ViewFieldDoubleTextMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldDoubleTextMetadata } from '@/ui/editable-field/types/ViewField'; import { TextInputDisplay } from '@/ui/input/text/components/TextInputDisplay'; import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { GenericEditableDoubleTextCellEditMode } from './GenericEditableDoubleTextCellEditMode'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; -export function GenericEditableDoubleTextCell({ viewField }: OwnProps) { +export function GenericEditableDoubleTextCell({ columnDefinition }: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); const firstValue = useRecoilValue( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.firstValueFieldName, + fieldName: columnDefinition.metadata.firstValueFieldName, }), ); const secondValue = useRecoilValue( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.secondValueFieldName, + fieldName: columnDefinition.metadata.secondValueFieldName, }), ); @@ -37,7 +36,9 @@ export function GenericEditableDoubleTextCell({ viewField }: OwnProps) { return ( + } nonEditModeContent={{displayName}} > diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCellEditMode.tsx index 318a109345..f042314eea 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCellEditMode.tsx @@ -1,34 +1,35 @@ import { useRecoilState } from 'recoil'; -import { - ViewFieldDefinition, - ViewFieldDoubleTextMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldDoubleTextMetadata } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { DoubleTextCellEdit } from './DoubleTextCellEdit'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; -export function GenericEditableDoubleTextCellEditMode({ viewField }: OwnProps) { +export function GenericEditableDoubleTextCellEditMode({ + columnDefinition, +}: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); // TODO: we could use a hook that would return the field value with the right type const [firstValue, setFirstValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.firstValueFieldName, + fieldName: columnDefinition.metadata.firstValueFieldName, }), ); const [secondValue, setSecondValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.secondValueFieldName, + fieldName: columnDefinition.metadata.secondValueFieldName, }), ); @@ -41,7 +42,7 @@ export function GenericEditableDoubleTextCellEditMode({ viewField }: OwnProps) { setSecondValue(newSecondValue); if (currentRowEntityId && updateField) { - updateField(currentRowEntityId, viewField, { + updateField(currentRowEntityId, columnDefinition, { firstValue: newFirstValue, secondValue: newSecondValue, }); @@ -50,8 +51,8 @@ export function GenericEditableDoubleTextCellEditMode({ viewField }: OwnProps) { return ( ; + columnDefinition: ColumnDefinition; }; -export function GenericEditableDoubleTextChipCell({ viewField }: OwnProps) { +export function GenericEditableDoubleTextChipCell({ + columnDefinition, +}: OwnProps) { return ( + } nonEditModeContent={ - + } > ); diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx index 856f599c7c..08f5b9f614 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx @@ -2,48 +2,47 @@ import { useRecoilState } from 'recoil'; import { CompanyChip } from '@/companies/components/CompanyChip'; import { PersonChip } from '@/people/components/PersonChip'; -import { - ViewFieldDefinition, - ViewFieldDoubleTextChipMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldDoubleTextChipMetadata } from '@/ui/editable-field/types/ViewField'; import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; export function GenericEditableDoubleTextChipCellDisplayMode({ - viewField, + columnDefinition, }: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); const [firstValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.firstValueFieldName, + fieldName: columnDefinition.metadata.firstValueFieldName, }), ); const [secondValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.secondValueFieldName, + fieldName: columnDefinition.metadata.secondValueFieldName, }), ); const [avatarUrlValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.avatarUrlFieldName, + fieldName: columnDefinition.metadata.avatarUrlFieldName, }), ); const displayName = firstValue || secondValue ? `${firstValue} ${secondValue}` : ' '; - switch (viewField.metadata.entityType) { + switch (columnDefinition.metadata.entityType) { case Entity.Company: { return ; } @@ -58,7 +57,7 @@ export function GenericEditableDoubleTextChipCellDisplayMode({ } default: console.warn( - `Unknown relation type: "${viewField.metadata.entityType}" in GenericEditableDoubleTextChipCellDisplayMode`, + `Unknown relation type: "${columnDefinition.metadata.entityType}" in GenericEditableDoubleTextChipCellDisplayMode`, ); return <> ; } diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellEditMode.tsx index 6f6794dddf..2bfa5965cc 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellEditMode.tsx @@ -1,21 +1,20 @@ import { useRecoilState } from 'recoil'; -import { - ViewFieldDefinition, - ViewFieldDoubleTextChipMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldDoubleTextChipMetadata } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { DoubleTextCellEdit } from './DoubleTextCellEdit'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; export function GenericEditableDoubleTextChipCellEditMode({ - viewField, + columnDefinition, }: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); @@ -23,14 +22,14 @@ export function GenericEditableDoubleTextChipCellEditMode({ const [firstValue, setFirstValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.firstValueFieldName, + fieldName: columnDefinition.metadata.firstValueFieldName, }), ); const [secondValue, setSecondValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.secondValueFieldName, + fieldName: columnDefinition.metadata.secondValueFieldName, }), ); @@ -53,7 +52,7 @@ export function GenericEditableDoubleTextChipCellEditMode({ updateField && (firstValueChanged || secondValueChanged) ) { - updateField(currentRowEntityId, viewField, { + updateField(currentRowEntityId, columnDefinition, { firstValue: firstValueChanged ? newFirstValue : firstValue, secondValue: secondValueChanged ? newSecondValue : secondValue, }); @@ -62,8 +61,8 @@ export function GenericEditableDoubleTextChipCellEditMode({ return ( ; + columnDefinition: ColumnDefinition; editModeHorizontalAlign?: 'left' | 'right'; }; export function GenericEditableEmailCell({ - viewField, + columnDefinition, editModeHorizontalAlign, }: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); @@ -25,7 +24,7 @@ export function GenericEditableEmailCell({ const fieldValue = useRecoilValue( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -33,7 +32,7 @@ export function GenericEditableEmailCell({ + } nonEditModeContent={} > diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableEmailCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableEmailCellEditMode.tsx index e88587a44a..3458f8bd61 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableEmailCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableEmailCellEditMode.tsx @@ -1,27 +1,28 @@ import { useRecoilState } from 'recoil'; -import { - ViewFieldDefinition, - ViewFieldEmailMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldEmailMetadata } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { TextCellEdit } from './TextCellEdit'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; -export function GenericEditableEmailCellEditMode({ viewField }: OwnProps) { +export function GenericEditableEmailCellEditMode({ + columnDefinition, +}: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); // TODO: we could use a hook that would return the field value with the right type const [fieldValue, setFieldValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -33,13 +34,13 @@ export function GenericEditableEmailCellEditMode({ viewField }: OwnProps) { setFieldValue(newEmail); if (currentRowEntityId && updateField) { - updateField(currentRowEntityId, viewField, newEmail); + updateField(currentRowEntityId, columnDefinition, newEmail); } } return ( ; + columnDefinition: ColumnDefinition; editModeHorizontalAlign?: 'left' | 'right'; }; @@ -21,7 +20,7 @@ function formatNumber(value: number) { } export function GenericEditableMoneyCell({ - viewField, + columnDefinition, editModeHorizontalAlign, }: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); @@ -29,7 +28,7 @@ export function GenericEditableMoneyCell({ const fieldValue = useRecoilValue( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -37,7 +36,7 @@ export function GenericEditableMoneyCell({ + } nonEditModeContent={ <>{fieldValue ? `$${formatNumber(fieldValue)}` : ''} diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableMoneyCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableMoneyCellEditMode.tsx index a591b4c484..e4f153b2db 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableMoneyCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableMoneyCellEditMode.tsx @@ -1,26 +1,27 @@ import { useRecoilState } from 'recoil'; -import { - ViewFieldDefinition, - ViewFieldMoneyMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldMoneyMetadata } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { TextCellEdit } from './TextCellEdit'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; -export function GenericEditableMoneyCellEditMode({ viewField }: OwnProps) { +export function GenericEditableMoneyCellEditMode({ + columnDefinition, +}: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); const [fieldValue, setFieldValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -43,7 +44,7 @@ export function GenericEditableMoneyCellEditMode({ viewField }: OwnProps) { setFieldValue(numberValue.toString()); if (currentRowEntityId && updateField) { - updateField(currentRowEntityId, viewField, numberValue); + updateField(currentRowEntityId, columnDefinition, numberValue); } } catch (error) { console.warn( diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx index dced1a660d..6b9f1abc79 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx @@ -1,22 +1,21 @@ import { useRecoilValue } from 'recoil'; -import { - ViewFieldDefinition, - ViewFieldNumberMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldNumberMetadata } from '@/ui/editable-field/types/ViewField'; import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { GenericEditableNumberCellEditMode } from './GenericEditableNumberCellEditMode'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; editModeHorizontalAlign?: 'left' | 'right'; }; export function GenericEditableNumberCell({ - viewField, + columnDefinition, editModeHorizontalAlign, }: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); @@ -24,7 +23,7 @@ export function GenericEditableNumberCell({ const fieldValue = useRecoilValue( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -32,7 +31,9 @@ export function GenericEditableNumberCell({ + } nonEditModeContent={<>{fieldValue}} > diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCellEditMode.tsx index 056f5d396e..38bb8b5012 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCellEditMode.tsx @@ -1,9 +1,6 @@ import { useRecoilState } from 'recoil'; -import { - ViewFieldDefinition, - ViewFieldNumberMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldNumberMetadata } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; @@ -12,20 +9,24 @@ import { castAsPositiveIntegerOrNull, } from '~/utils/cast-as-positive-integer-or-null'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { TextCellEdit } from './TextCellEdit'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; -export function GenericEditableNumberCellEditMode({ viewField }: OwnProps) { +export function GenericEditableNumberCellEditMode({ + columnDefinition, +}: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); // TODO: we could use a hook that would return the field value with the right type const [fieldValue, setFieldValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -41,7 +42,7 @@ export function GenericEditableNumberCellEditMode({ viewField }: OwnProps) { throw new Error('Not a number'); } - if (viewField.metadata.isPositive) { + if (columnDefinition.metadata.isPositive) { if (!canBeCastAsPositiveIntegerOrNull(newText)) { return; } @@ -64,7 +65,7 @@ export function GenericEditableNumberCellEditMode({ viewField }: OwnProps) { setFieldValue(numberValue.toString()); if (currentRowEntityId && updateField) { - updateField(currentRowEntityId, viewField, numberValue); + updateField(currentRowEntityId, columnDefinition, numberValue); } } catch (error) { console.warn( diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCell.tsx index dd06da91b6..cbc8af6f57 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCell.tsx @@ -1,23 +1,22 @@ import { useRecoilValue } from 'recoil'; -import { - ViewFieldDefinition, - ViewFieldPhoneMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldPhoneMetadata } from '@/ui/editable-field/types/ViewField'; import { PhoneInputDisplay } from '@/ui/input/phone/components/PhoneInputDisplay'; import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { GenericEditablePhoneCellEditMode } from './GenericEditablePhoneCellEditMode'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; editModeHorizontalAlign?: 'left' | 'right'; }; export function GenericEditablePhoneCell({ - viewField, + columnDefinition, editModeHorizontalAlign, }: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); @@ -25,7 +24,7 @@ export function GenericEditablePhoneCell({ const fieldValue = useRecoilValue( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -34,7 +33,7 @@ export function GenericEditablePhoneCell({ useEditButton editModeHorizontalAlign={editModeHorizontalAlign} editModeContent={ - + } nonEditModeContent={} > diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCellEditMode.tsx index 9dc555b777..071cd42b7a 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCellEditMode.tsx @@ -1,27 +1,28 @@ import { useRecoilState } from 'recoil'; -import { - ViewFieldDefinition, - ViewFieldPhoneMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldPhoneMetadata } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { PhoneCellEdit } from './PhoneCellEdit'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; -export function GenericEditablePhoneCellEditMode({ viewField }: OwnProps) { +export function GenericEditablePhoneCellEditMode({ + columnDefinition, +}: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); // TODO: we could use a hook that would return the field value with the right type const [fieldValue, setFieldValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -33,13 +34,13 @@ export function GenericEditablePhoneCellEditMode({ viewField }: OwnProps) { setFieldValue(newText); if (currentRowEntityId && updateField) { - updateField(currentRowEntityId, viewField, newText); + updateField(currentRowEntityId, columnDefinition, newText); } } return ( ; + columnDefinition: ColumnDefinition; editModeHorizontalAlign?: 'left' | 'right'; placeholder?: string; }; export function GenericEditableRelationCell({ - fieldDefinition, + columnDefinition, editModeHorizontalAlign, placeholder, }: OwnProps) { @@ -25,11 +24,13 @@ export function GenericEditableRelationCell({ editModeHorizontalAlign={editModeHorizontalAlign} editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }} editModeContent={ - + } nonEditModeContent={ diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellDisplayMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellDisplayMode.tsx index 6e7780fadb..49ca8a9f3f 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellDisplayMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellDisplayMode.tsx @@ -1,24 +1,23 @@ import { useRecoilValue } from 'recoil'; import { CompanyChip } from '@/companies/components/CompanyChip'; -import { - ViewFieldDefinition, - ViewFieldRelationMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldRelationMetadata } from '@/ui/editable-field/types/ViewField'; import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { UserChip } from '@/users/components/UserChip'; import { getLogoUrlFromDomainName } from '~/utils'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + type OwnProps = { - fieldDefinition: ViewFieldDefinition; + columnDefinition: ColumnDefinition; editModeHorizontalAlign?: 'left' | 'right'; placeholder?: string; }; export function GenericEditableRelationCellDisplayMode({ - fieldDefinition, + columnDefinition, }: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); @@ -26,11 +25,11 @@ export function GenericEditableRelationCellDisplayMode({ const fieldValue = useRecoilValue( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: fieldDefinition.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); - switch (fieldDefinition.metadata.relationType) { + switch (columnDefinition.metadata.relationType) { case Entity.Company: { return ( ; } diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx index dc27b45c4a..03f8766508 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx @@ -4,10 +4,7 @@ import { CompanyPickerCell, CompanyPickerSelectedCompany, } from '@/companies/components/CompanyPickerCell'; -import { - ViewFieldDefinition, - ViewFieldRelationMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldRelationMetadata } from '@/ui/editable-field/types/ViewField'; import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell'; @@ -16,11 +13,15 @@ import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { UserPicker } from '@/users/components/UserPicker'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; -export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) { +export function GenericEditableRelationCellEditMode({ + columnDefinition, +}: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); const { closeEditableCell } = useEditableCell(); @@ -28,7 +29,7 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) { const [fieldValueEntity, setFieldValueEntity] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); const updateEntityField = useUpdateEntityField(); @@ -71,7 +72,7 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) { updateCachedCompanyField(newFieldEntity); updateEntityField( currentRowEntityId, - viewField, + columnDefinition, newFieldEntity, ); } @@ -86,7 +87,7 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) { updateEntityField ) { updateCachedPersonField(newFieldEntity); - updateEntityField(currentRowEntityId, viewField, newFieldEntity); + updateEntityField(currentRowEntityId, columnDefinition, newFieldEntity); } closeEditableCell(); @@ -96,14 +97,14 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) { closeEditableCell(); } - switch (viewField.metadata.relationType) { + switch (columnDefinition.metadata.relationType) { case Entity.Company: { return ( ); @@ -114,13 +115,13 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) { userId={fieldValueEntity?.id ?? null} onSubmit={handlePersonSubmit} onCancel={handleCancel} - width={viewField.columnSize} + width={columnDefinition.size} /> ); } default: console.warn( - `Unknown relation type: "${viewField.metadata.relationType}" in GenericEditableRelationCellEditMode`, + `Unknown relation type: "${columnDefinition.metadata.relationType}" in GenericEditableRelationCellEditMode`, ); return <>; } diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCell.tsx index a29ec86b4e..50d3ea35b1 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCell.tsx @@ -1,23 +1,22 @@ import { useRecoilValue } from 'recoil'; -import { - ViewFieldDefinition, - ViewFieldTextMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldTextMetadata } from '@/ui/editable-field/types/ViewField'; import { TextInputDisplay } from '@/ui/input/text/components/TextInputDisplay'; import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { GenericEditableTextCellEditMode } from './GenericEditableTextCellEditMode'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; editModeHorizontalAlign?: 'left' | 'right'; }; export function GenericEditableTextCell({ - viewField, + columnDefinition, editModeHorizontalAlign, }: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); @@ -25,7 +24,7 @@ export function GenericEditableTextCell({ const fieldValue = useRecoilValue( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -33,7 +32,7 @@ export function GenericEditableTextCell({ + } nonEditModeContent={{fieldValue}} > diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCellEditMode.tsx index dcda09d7d4..9e000375ea 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCellEditMode.tsx @@ -1,27 +1,28 @@ import { useRecoilState } from 'recoil'; -import { - ViewFieldDefinition, - ViewFieldTextMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldTextMetadata } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { TextCellEdit } from './TextCellEdit'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; -export function GenericEditableTextCellEditMode({ viewField }: OwnProps) { +export function GenericEditableTextCellEditMode({ + columnDefinition, +}: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); // TODO: we could use a hook that would return the field value with the right type const [fieldValue, setFieldValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -33,13 +34,13 @@ export function GenericEditableTextCellEditMode({ viewField }: OwnProps) { setFieldValue(newText); if (currentRowEntityId && updateField) { - updateField(currentRowEntityId, viewField, newText); + updateField(currentRowEntityId, columnDefinition, newText); } } return ( ; + columnDefinition: ColumnDefinition; editModeHorizontalAlign?: 'left' | 'right'; }; export function GenericEditableURLCell({ - viewField, + columnDefinition, editModeHorizontalAlign, }: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); @@ -26,7 +25,7 @@ export function GenericEditableURLCell({ const fieldValue = useRecoilValue( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -34,7 +33,9 @@ export function GenericEditableURLCell({ } + editModeContent={ + + } nonEditModeContent={ } diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCellEditMode.tsx index 28b6805a5a..8c381bf5d3 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCellEditMode.tsx @@ -1,28 +1,27 @@ import { useRecoilState } from 'recoil'; -import { - ViewFieldDefinition, - ViewFieldURLMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldURLMetadata } from '@/ui/editable-field/types/ViewField'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector'; import { isURL } from '~/utils/is-url'; +import type { ColumnDefinition } from '../../../types/ColumnDefinition'; + import { TextCellEdit } from './TextCellEdit'; type OwnProps = { - viewField: ViewFieldDefinition; + columnDefinition: ColumnDefinition; }; -export function GenericEditableURLCellEditMode({ viewField }: OwnProps) { +export function GenericEditableURLCellEditMode({ columnDefinition }: OwnProps) { const currentRowEntityId = useCurrentRowEntityId(); // TODO: we could use a hook that would return the field value with the right type const [fieldValue, setFieldValue] = useRecoilState( tableEntityFieldFamilySelector({ entityId: currentRowEntityId ?? '', - fieldName: viewField.metadata.fieldName, + fieldName: columnDefinition.metadata.fieldName, }), ); @@ -36,13 +35,13 @@ export function GenericEditableURLCellEditMode({ viewField }: OwnProps) { setFieldValue(newText); if (currentRowEntityId && updateField) { - updateField(currentRowEntityId, viewField, newText); + updateField(currentRowEntityId, columnDefinition, newText); } } return ( ( currentEntityId: string, - viewField: ViewFieldDefinition, + columnDefinition: ColumnDefinition, newFieldValue: ValueType, ) { const newFieldValueUnknown = newFieldValue as unknown; @@ -85,12 +85,12 @@ export function useUpdateEntityField() { // Relation if ( - isViewFieldRelation(viewField) && + isViewFieldRelation(columnDefinition) && isViewFieldRelationValue(newFieldValueUnknown) ) { const newSelectedEntity = newFieldValueUnknown; - const fieldName = viewField.metadata.fieldName; + const fieldName = columnDefinition.metadata.fieldName; if (!newSelectedEntity || newSelectedEntity.id === '') { updateEntity({ variables: { @@ -116,7 +116,7 @@ export function useUpdateEntityField() { } // Chip } else if ( - isViewFieldChip(viewField) && + isViewFieldChip(columnDefinition) && isViewFieldChipValue(newFieldValueUnknown) ) { const newContent = newFieldValueUnknown; @@ -124,12 +124,12 @@ export function useUpdateEntityField() { updateEntity({ variables: { where: { id: currentEntityId }, - data: { [viewField.metadata.contentFieldName]: newContent }, + data: { [columnDefinition.metadata.contentFieldName]: newContent }, }, }); // Text } else if ( - isViewFieldText(viewField) && + isViewFieldText(columnDefinition) && isViewFieldTextValue(newFieldValueUnknown) ) { const newContent = newFieldValueUnknown; @@ -137,12 +137,12 @@ export function useUpdateEntityField() { updateEntity({ variables: { where: { id: currentEntityId }, - data: { [viewField.metadata.fieldName]: newContent }, + data: { [columnDefinition.metadata.fieldName]: newContent }, }, }); // Double text } else if ( - isViewFieldDoubleText(viewField) && + isViewFieldDoubleText(columnDefinition) && isViewFieldDoubleTextValue(newFieldValueUnknown) ) { const newContent = newFieldValueUnknown; @@ -151,14 +151,16 @@ export function useUpdateEntityField() { variables: { where: { id: currentEntityId }, data: { - [viewField.metadata.firstValueFieldName]: newContent.firstValue, - [viewField.metadata.secondValueFieldName]: newContent.secondValue, + [columnDefinition.metadata.firstValueFieldName]: + newContent.firstValue, + [columnDefinition.metadata.secondValueFieldName]: + newContent.secondValue, }, }, }); // Double Text Chip } else if ( - isViewFieldDoubleTextChip(viewField) && + isViewFieldDoubleTextChip(columnDefinition) && isViewFieldDoubleTextChipValue(newFieldValueUnknown) ) { const newContent = newFieldValueUnknown; @@ -167,14 +169,16 @@ export function useUpdateEntityField() { variables: { where: { id: currentEntityId }, data: { - [viewField.metadata.firstValueFieldName]: newContent.firstValue, - [viewField.metadata.secondValueFieldName]: newContent.secondValue, + [columnDefinition.metadata.firstValueFieldName]: + newContent.firstValue, + [columnDefinition.metadata.secondValueFieldName]: + newContent.secondValue, }, }, }); // Phone } else if ( - isViewFieldPhone(viewField) && + isViewFieldPhone(columnDefinition) && isViewFieldPhoneValue(newFieldValueUnknown) ) { const newContent = newFieldValueUnknown; @@ -182,12 +186,12 @@ export function useUpdateEntityField() { updateEntity({ variables: { where: { id: currentEntityId }, - data: { [viewField.metadata.fieldName]: newContent }, + data: { [columnDefinition.metadata.fieldName]: newContent }, }, }); // URL } else if ( - isViewFieldURL(viewField) && + isViewFieldURL(columnDefinition) && isViewFieldURLValue(newFieldValueUnknown) ) { const newContent = newFieldValueUnknown; @@ -195,12 +199,12 @@ export function useUpdateEntityField() { updateEntity({ variables: { where: { id: currentEntityId }, - data: { [viewField.metadata.fieldName]: newContent }, + data: { [columnDefinition.metadata.fieldName]: newContent }, }, }); // Number } else if ( - isViewFieldNumber(viewField) && + isViewFieldNumber(columnDefinition) && isViewFieldNumberValue(newFieldValueUnknown) ) { const newContent = newFieldValueUnknown; @@ -208,12 +212,12 @@ export function useUpdateEntityField() { updateEntity({ variables: { where: { id: currentEntityId }, - data: { [viewField.metadata.fieldName]: newContent }, + data: { [columnDefinition.metadata.fieldName]: newContent }, }, }); // Boolean } else if ( - isViewFieldBoolean(viewField) && + isViewFieldBoolean(columnDefinition) && isViewFieldBooleanValue(newFieldValueUnknown) ) { const newContent = newFieldValueUnknown; @@ -221,12 +225,12 @@ export function useUpdateEntityField() { updateEntity({ variables: { where: { id: currentEntityId }, - data: { [viewField.metadata.fieldName]: newContent }, + data: { [columnDefinition.metadata.fieldName]: newContent }, }, }); // Money } else if ( - isViewFieldMoney(viewField) && + isViewFieldMoney(columnDefinition) && isViewFieldMoneyValue(newFieldValueUnknown) ) { const newContent = newFieldValueUnknown; @@ -234,12 +238,12 @@ export function useUpdateEntityField() { updateEntity({ variables: { where: { id: currentEntityId }, - data: { [viewField.metadata.fieldName]: newContent }, + data: { [columnDefinition.metadata.fieldName]: newContent }, }, }); // Date } else if ( - isViewFieldDate(viewField) && + isViewFieldDate(columnDefinition) && isViewFieldDateValue(newFieldValueUnknown) ) { const newContent = newFieldValueUnknown; @@ -247,7 +251,7 @@ export function useUpdateEntityField() { updateEntity({ variables: { where: { id: currentEntityId }, - data: { [viewField.metadata.fieldName]: newContent }, + data: { [columnDefinition.metadata.fieldName]: newContent }, }, }); } diff --git a/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx b/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx index 9e1ffc6ad2..1a23d3c7c4 100644 --- a/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx +++ b/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx @@ -12,10 +12,7 @@ import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu' import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer'; import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator'; import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton'; -import type { - ViewFieldDefinition, - ViewFieldMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField'; import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState'; import { savedFiltersScopedState } from '@/ui/filter-n-sort/states/savedFiltersScopedState'; import { savedSortsScopedState } from '@/ui/filter-n-sort/states/savedSortsScopedState'; @@ -44,6 +41,7 @@ import { tableViewsByIdState, tableViewsState, } from '../../states/tableViewsState'; +import type { ColumnDefinition } from '../../types/ColumnDefinition'; import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope'; import { TableOptionsDropdownSection } from './TableOptionsDropdownSection'; @@ -107,7 +105,7 @@ export function TableOptionsDropdownContent({ ); const renderFieldActions = useCallback( - (column: ViewFieldDefinition) => + (column: ColumnDefinition) => // Do not allow hiding last visible column !column.isVisible || visibleColumns.length > 1 ? [ diff --git a/front/src/modules/ui/table/options/components/TableOptionsDropdownSection.tsx b/front/src/modules/ui/table/options/components/TableOptionsDropdownSection.tsx index 422165bc7a..c7821003fe 100644 --- a/front/src/modules/ui/table/options/components/TableOptionsDropdownSection.tsx +++ b/front/src/modules/ui/table/options/components/TableOptionsDropdownSection.tsx @@ -7,17 +7,16 @@ import { } from '@/ui/dropdown/components/DropdownMenuItem'; import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer'; import { StyledDropdownMenuSubheader } from '@/ui/dropdown/components/StyledDropdownMenuSubheader'; -import { - ViewFieldDefinition, - ViewFieldMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField'; + +import type { ColumnDefinition } from '../../types/ColumnDefinition'; type TableOptionsDropdownSectionProps = { renderActions: ( - column: ViewFieldDefinition, + column: ColumnDefinition, ) => DropdownMenuItemProps['actions']; title: string; - columns: ViewFieldDefinition[]; + columns: ColumnDefinition[]; }; export function TableOptionsDropdownSection({ @@ -33,11 +32,11 @@ export function TableOptionsDropdownSection({ {columns.map((column) => ( - {column.columnIcon && - cloneElement(column.columnIcon, { + {column.icon && + cloneElement(column.icon, { size: theme.icon.size.md, })} - {column.columnLabel} + {column.label} ))} diff --git a/front/src/modules/ui/table/states/savedTableColumnsScopedState.ts b/front/src/modules/ui/table/states/savedTableColumnsScopedState.ts index 9c01580c38..d060b35162 100644 --- a/front/src/modules/ui/table/states/savedTableColumnsScopedState.ts +++ b/front/src/modules/ui/table/states/savedTableColumnsScopedState.ts @@ -1,12 +1,11 @@ import { atomFamily } from 'recoil'; -import type { - ViewFieldDefinition, - ViewFieldMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField'; + +import type { ColumnDefinition } from '../types/ColumnDefinition'; export const savedTableColumnsScopedState = atomFamily< - ViewFieldDefinition[], + ColumnDefinition[], string | undefined >({ key: 'savedTableColumnsScopedState', diff --git a/front/src/modules/ui/table/states/selectors/savedTableColumnsByIdScopedSelector.ts b/front/src/modules/ui/table/states/selectors/savedTableColumnsByIdScopedSelector.ts index 23db4df411..58a354e07e 100644 --- a/front/src/modules/ui/table/states/selectors/savedTableColumnsByIdScopedSelector.ts +++ b/front/src/modules/ui/table/states/selectors/savedTableColumnsByIdScopedSelector.ts @@ -1,10 +1,8 @@ import { selectorFamily } from 'recoil'; -import type { - ViewFieldDefinition, - ViewFieldMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField'; +import type { ColumnDefinition } from '../../types/ColumnDefinition'; import { savedTableColumnsScopedState } from '../savedTableColumnsScopedState'; export const savedTableColumnsByIdScopedSelector = selectorFamily({ @@ -13,6 +11,6 @@ export const savedTableColumnsByIdScopedSelector = selectorFamily({ (viewId: string | undefined) => ({ get }) => get(savedTableColumnsScopedState(viewId)).reduce< - Record> + Record> >((result, column) => ({ ...result, [column.id]: column }), {}), }); diff --git a/front/src/modules/ui/table/states/selectors/tableColumnsByIdScopedSelector.ts b/front/src/modules/ui/table/states/selectors/tableColumnsByIdScopedSelector.ts index 752fbdd2ac..1ab1356efc 100644 --- a/front/src/modules/ui/table/states/selectors/tableColumnsByIdScopedSelector.ts +++ b/front/src/modules/ui/table/states/selectors/tableColumnsByIdScopedSelector.ts @@ -1,10 +1,8 @@ import { selectorFamily } from 'recoil'; -import type { - ViewFieldDefinition, - ViewFieldMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField'; +import type { ColumnDefinition } from '../../types/ColumnDefinition'; import { tableColumnsScopedState } from '../tableColumnsScopedState'; export const tableColumnsByIdScopedSelector = selectorFamily({ @@ -13,6 +11,6 @@ export const tableColumnsByIdScopedSelector = selectorFamily({ (scopeId: string) => ({ get }) => get(tableColumnsScopedState(scopeId)).reduce< - Record> + Record> >((result, column) => ({ ...result, [column.id]: column }), {}), }); diff --git a/front/src/modules/ui/table/states/tableColumnsScopedState.ts b/front/src/modules/ui/table/states/tableColumnsScopedState.ts index 168c0f4777..8107eb6f7d 100644 --- a/front/src/modules/ui/table/states/tableColumnsScopedState.ts +++ b/front/src/modules/ui/table/states/tableColumnsScopedState.ts @@ -1,12 +1,11 @@ import { atomFamily } from 'recoil'; -import type { - ViewFieldDefinition, - ViewFieldMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField'; + +import type { ColumnDefinition } from '../types/ColumnDefinition'; export const tableColumnsScopedState = atomFamily< - ViewFieldDefinition[], + ColumnDefinition[], string >({ key: 'tableColumnsScopedState', diff --git a/front/src/modules/ui/table/types/ColumnDefinition.ts b/front/src/modules/ui/table/types/ColumnDefinition.ts new file mode 100644 index 0000000000..199806fc5d --- /dev/null +++ b/front/src/modules/ui/table/types/ColumnDefinition.ts @@ -0,0 +1,10 @@ +import type { + ViewFieldDefinition, + ViewFieldMetadata, +} from '@/ui/editable-field/types/ViewField'; + +export type ColumnDefinition = + ViewFieldDefinition & { + size: number; + order: number; + }; diff --git a/front/src/modules/views/hooks/useTableViewFields.ts b/front/src/modules/views/hooks/useTableViewFields.ts index d88f0f8341..c99d4d2344 100644 --- a/front/src/modules/views/hooks/useTableViewFields.ts +++ b/front/src/modules/views/hooks/useTableViewFields.ts @@ -2,7 +2,6 @@ import { useCallback } from 'react'; import { useRecoilValue, useSetRecoilState } from 'recoil'; import type { - ViewFieldDefinition, ViewFieldMetadata, ViewFieldTextMetadata, } from '@/ui/editable-field/types/ViewField'; @@ -11,6 +10,7 @@ import { savedTableColumnsScopedState } from '@/ui/table/states/savedTableColumn import { savedTableColumnsByIdScopedSelector } from '@/ui/table/states/selectors/savedTableColumnsByIdScopedSelector'; import { tableColumnsScopedState } from '@/ui/table/states/tableColumnsScopedState'; import { currentTableViewIdState } from '@/ui/table/states/tableViewsState'; +import type { ColumnDefinition } from '@/ui/table/types/ColumnDefinition'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { @@ -29,21 +29,21 @@ const DEFAULT_VIEW_FIELD_METADATA: ViewFieldTextMetadata = { const toViewFieldInput = ( objectName: 'company' | 'person', - viewFieldDefinition: ViewFieldDefinition, + fieldDefinition: ColumnDefinition, ) => ({ - fieldName: viewFieldDefinition.columnLabel, - index: viewFieldDefinition.columnOrder, - isVisible: viewFieldDefinition.isVisible ?? true, + fieldName: fieldDefinition.label, + index: fieldDefinition.order, + isVisible: fieldDefinition.isVisible ?? true, objectName, - sizeInPx: viewFieldDefinition.columnSize, + sizeInPx: fieldDefinition.size, }); export const useTableViewFields = ({ objectName, - viewFieldDefinitions, + columnDefinitions, }: { objectName: 'company' | 'person'; - viewFieldDefinitions: ViewFieldDefinition[]; + columnDefinitions: ColumnDefinition[]; }) => { const currentViewId = useRecoilScopedValue( currentTableViewIdState, @@ -65,7 +65,7 @@ export const useTableViewFields = ({ const createViewFields = useCallback( ( - columns: ViewFieldDefinition[], + columns: ColumnDefinition[], viewId = currentViewId, ) => { if (!viewId || !columns.length) return; @@ -83,7 +83,7 @@ export const useTableViewFields = ({ ); const updateViewFields = useCallback( - (columns: ViewFieldDefinition[]) => { + (columns: ColumnDefinition[]) => { if (!currentViewId || !columns.length) return; return Promise.all( @@ -92,7 +92,7 @@ export const useTableViewFields = ({ variables: { data: { isVisible: column.isVisible, - sizeInPx: column.columnSize, + sizeInPx: column.size, }, where: { id: column.id }, }, @@ -115,20 +115,20 @@ export const useTableViewFields = ({ onCompleted: async (data) => { if (!data.viewFields.length) { // Populate if empty - await createViewFields(viewFieldDefinitions); + await createViewFields(columnDefinitions); return refetch(); } const nextColumns = data.viewFields.map< - ViewFieldDefinition + ColumnDefinition >((viewField) => ({ - ...(viewFieldDefinitions.find( - ({ columnLabel }) => viewField.fieldName === columnLabel, + ...(columnDefinitions.find( + ({ label: columnLabel }) => viewField.fieldName === columnLabel, ) || { metadata: DEFAULT_VIEW_FIELD_METADATA }), id: viewField.id, - columnLabel: viewField.fieldName, - columnOrder: viewField.index, - columnSize: viewField.sizeInPx, + label: viewField.fieldName, + order: viewField.index, + size: viewField.sizeInPx, isVisible: viewField.isVisible, })); @@ -145,7 +145,7 @@ export const useTableViewFields = ({ const viewFieldsToUpdate = columns.filter( (column) => savedColumnsById[column.id] && - (savedColumnsById[column.id].columnSize !== column.columnSize || + (savedColumnsById[column.id].size !== column.size || savedColumnsById[column.id].isVisible !== column.isVisible), ); await updateViewFields(viewFieldsToUpdate); diff --git a/front/src/modules/views/hooks/useTableViews.ts b/front/src/modules/views/hooks/useTableViews.ts index 3fef0cfaa9..033d707442 100644 --- a/front/src/modules/views/hooks/useTableViews.ts +++ b/front/src/modules/views/hooks/useTableViews.ts @@ -1,9 +1,6 @@ import { useCallback } from 'react'; -import type { - ViewFieldDefinition, - ViewFieldMetadata, -} from '@/ui/editable-field/types/ViewField'; +import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField'; import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState'; import { sortsScopedState } from '@/ui/filter-n-sort/states/sortsScopedState'; import type { FilterDefinitionByEntity } from '@/ui/filter-n-sort/types/FilterDefinitionByEntity'; @@ -11,6 +8,7 @@ import type { SortType } from '@/ui/filter-n-sort/types/interface'; import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { tableColumnsScopedState } from '@/ui/table/states/tableColumnsScopedState'; import { currentTableViewIdState } from '@/ui/table/states/tableViewsState'; +import type { ColumnDefinition } from '@/ui/table/types/ColumnDefinition'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { useTableViewFields } from './useTableViewFields'; @@ -22,12 +20,12 @@ export const useTableViews = ({ availableFilters, availableSorts, objectId, - viewFieldDefinitions, + columnDefinitions, }: { availableFilters: FilterDefinitionByEntity[]; availableSorts: SortType[]; objectId: 'company' | 'person'; - viewFieldDefinitions: ViewFieldDefinition[]; + columnDefinitions: ColumnDefinition[]; }) => { const currentViewId = useRecoilScopedValue( currentTableViewIdState, @@ -48,7 +46,7 @@ export const useTableViews = ({ const { createViewFields, persistColumns } = useTableViewFields({ objectName: objectId, - viewFieldDefinitions, + columnDefinitions, }); const { createViewFilters, persistFilters } = useViewFilters({ availableFilters, diff --git a/front/src/testing/mock-data/companies.ts b/front/src/testing/mock-data/companies.ts index 77fa6f7645..70c29b61e6 100644 --- a/front/src/testing/mock-data/companies.ts +++ b/front/src/testing/mock-data/companies.ts @@ -1,4 +1,4 @@ -import { companyViewFields } from '@/companies/constants/companyViewFields'; +import { companiesAvailableColumnDefinitions } from '@/companies/constants/companiesAvailableColumnDefinitions'; import { Company, User, ViewField } from '~/generated/graphql'; type MockedCompany = Pick< @@ -144,14 +144,13 @@ export const mockedCompaniesData: Array = [ }, ]; -export const mockedCompanyViewFields = companyViewFields.map( - (viewFieldDefinition) => ({ +export const mockedCompanyViewFields = + companiesAvailableColumnDefinitions.map((viewFieldDefinition) => ({ __typename: 'ViewField', - fieldName: viewFieldDefinition.columnLabel, + fieldName: viewFieldDefinition.label, id: viewFieldDefinition.id, - index: viewFieldDefinition.columnOrder, + index: viewFieldDefinition.order, isVisible: true, objectName: 'company', - sizeInPx: viewFieldDefinition.columnSize, - }), -); + sizeInPx: viewFieldDefinition.size, + })); diff --git a/front/src/testing/mock-data/people.ts b/front/src/testing/mock-data/people.ts index 95c4c9224c..392ea022d9 100644 --- a/front/src/testing/mock-data/people.ts +++ b/front/src/testing/mock-data/people.ts @@ -1,4 +1,4 @@ -import { peopleViewFields } from '@/people/constants/peopleViewFields'; +import { peopleAvailableColumnDefinitions } from '@/people/constants/peopleAvailableColumnDefinitions'; import { Company, Person, ViewField } from '~/generated/graphql'; type RequiredAndNotNull = { @@ -123,14 +123,13 @@ export const mockedPeopleData: MockedPerson[] = [ }, ]; -export const mockedPersonViewFields = peopleViewFields.map( - (viewFieldDefinition) => ({ +export const mockedPersonViewFields = + peopleAvailableColumnDefinitions.map((viewFieldDefinition) => ({ __typename: 'ViewField', - fieldName: viewFieldDefinition.columnLabel, + fieldName: viewFieldDefinition.label, id: viewFieldDefinition.id, - index: viewFieldDefinition.columnOrder, + index: viewFieldDefinition.order, isVisible: true, objectName: 'person', - sizeInPx: viewFieldDefinition.columnSize, - }), -); + sizeInPx: viewFieldDefinition.size, + }));