admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: add ColumnDefinition type (#1357)

Browse Source 
* refactor: add ColumnDefinition type

Closes #1193

* refactor: code review - rename things

* fix: fix wrong import and lint
This commit is contained in:
Thaïs
2023-08-28 18:33:03 +02:00
committed by GitHub
parent 0d7b869274
commit 74919eff7a
57 changed files with 770 additions and 772 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx Normal file
View File

@ -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<ViewFieldMetadata>[] =
[
{
id: 'displayName',
label: 'People',
icon: <IconUser />,
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<ViewFieldDoubleTextChipMetadata>,
{
id: 'email',
label: 'Email',
icon: <IconMail />,
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<ViewFieldEmailMetadata>,
{
id: 'company',
label: 'Company',
icon: <IconBuildingSkyscraper />,
size: 150,
order: 3,
metadata: {
type: 'relation',
fieldName: 'company',
relationType: Entity.Company,
},
} satisfies ColumnDefinition<ViewFieldRelationMetadata>,
{
id: 'phone',
label: 'Phone',
icon: <IconPhone />,
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<ViewFieldPhoneMetadata>,
{
id: 'createdAt',
label: 'Creation',
icon: <IconCalendarEvent />,
size: 150,
order: 5,
metadata: {
type: 'date',
fieldName: 'createdAt',
},
} satisfies ColumnDefinition<ViewFieldDateMetadata>,
{
id: 'city',
label: 'City',
icon: <IconMap />,
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<ViewFieldTextMetadata>,
{
id: 'jobTitle',
label: 'Job title',
icon: <IconBriefcase />,
size: 150,
order: 7,
metadata: {
type: 'text',
fieldName: 'jobTitle',
placeHolder: 'Job title',
},
} satisfies ColumnDefinition<ViewFieldTextMetadata>,
{
id: 'linkedin',
label: 'LinkedIn',
icon: <IconBrandLinkedin />,
size: 150,
order: 8,
metadata: {
type: 'url',
fieldName: 'linkedinUrl',
placeHolder: 'LinkedIn',
},
} satisfies ColumnDefinition<ViewFieldURLMetadata>,
{
id: 'x',
label: 'Twitter',
icon: <IconBrandX />,
size: 150,
order: 9,
metadata: {
type: 'url',
fieldName: 'xUrl',
placeHolder: 'X',
},
} satisfies ColumnDefinition<ViewFieldURLMetadata>,
];

137
front/src/modules/people/constants/peopleViewFields.tsx
View File

@ -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<ViewFieldMetadata>[] = [
{
id: 'displayName',
columnLabel: 'People',
columnIcon: <IconUser />,
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<ViewFieldDoubleTextChipMetadata>,
{
id: 'email',
columnLabel: 'Email',
columnIcon: <IconMail />,
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<ViewFieldEmailMetadata>,
{
id: 'company',
columnLabel: 'Company',
columnIcon: <IconBuildingSkyscraper />,
columnSize: 150,
columnOrder: 3,
metadata: {
type: 'relation',
fieldName: 'company',
relationType: Entity.Company,
},
} satisfies ViewFieldDefinition<ViewFieldRelationMetadata>,
{
id: 'phone',
columnLabel: 'Phone',
columnIcon: <IconPhone />,
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<ViewFieldPhoneMetadata>,
{
id: 'createdAt',
columnLabel: 'Creation',
columnIcon: <IconCalendarEvent />,
columnSize: 150,
columnOrder: 5,
metadata: {
type: 'date',
fieldName: 'createdAt',
},
} satisfies ViewFieldDefinition<ViewFieldDateMetadata>,
{
id: 'city',
columnLabel: 'City',
columnIcon: <IconMap />,
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<ViewFieldTextMetadata>,
{
id: 'jobTitle',
columnLabel: 'Job title',
columnIcon: <IconBriefcase />,
columnSize: 150,
columnOrder: 7,
metadata: {
type: 'text',
fieldName: 'jobTitle',
placeHolder: 'Job title',
},
} satisfies ViewFieldDefinition<ViewFieldTextMetadata>,
{
id: 'linkedin',
columnLabel: 'LinkedIn',
columnIcon: <IconBrandLinkedin />,
columnSize: 150,
columnOrder: 8,
metadata: {
type: 'url',
fieldName: 'linkedinUrl',
placeHolder: 'LinkedIn',
},
} satisfies ViewFieldDefinition<ViewFieldURLMetadata>,
{
id: 'x',
columnLabel: 'Twitter',
columnIcon: <IconBrandX />,
columnSize: 150,
columnOrder: 9,
metadata: {
type: 'url',
fieldName: 'xUrl',
placeHolder: 'X',
},
} satisfies ViewFieldDefinition<ViewFieldURLMetadata>,
];

4
front/src/modules/people/table/components/PeopleTable.tsx
View File

@ -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();