130 lines
4.0 KiB
TypeScript
130 lines
4.0 KiB
TypeScript
import { useMemo } from 'react';
|
|
import { createColumnHelper } from '@tanstack/react-table';
|
|
|
|
import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
|
|
import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
|
|
import { Person } from '@/people/interfaces/person.interface';
|
|
import { updatePerson } from '@/people/services';
|
|
import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
|
|
import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone';
|
|
import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
|
|
import { ColumnHead } from '@/ui/components/table/ColumnHead';
|
|
import {
|
|
IconBuilding,
|
|
IconCalendar,
|
|
IconMail,
|
|
IconMapPin,
|
|
IconPhone,
|
|
IconUser,
|
|
} from '@/ui/icons/index';
|
|
import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn';
|
|
|
|
const columnHelper = createColumnHelper<Person>();
|
|
|
|
export const usePeopleColumns = () => {
|
|
return useMemo(() => {
|
|
return [
|
|
getCheckBoxColumn(),
|
|
columnHelper.accessor('firstname', {
|
|
header: () => (
|
|
<ColumnHead viewName="People" viewIcon={<IconUser size={16} />} />
|
|
),
|
|
cell: (props) => (
|
|
<>
|
|
<EditablePeopleFullName
|
|
person={props.row.original}
|
|
onChange={async (firstName: string, lastName: string) => {
|
|
const person = props.row.original;
|
|
person.firstname = firstName;
|
|
person.lastname = lastName;
|
|
await updatePerson(person);
|
|
}}
|
|
/>
|
|
</>
|
|
),
|
|
size: 210,
|
|
}),
|
|
columnHelper.accessor('email', {
|
|
header: () => (
|
|
<ColumnHead viewName="Email" viewIcon={<IconMail size={16} />} />
|
|
),
|
|
cell: (props) => (
|
|
<EditableText
|
|
placeholder="Email"
|
|
content={props.row.original.email || ''}
|
|
changeHandler={(value: string) => {
|
|
const person = props.row.original;
|
|
person.email = value;
|
|
updatePerson(person);
|
|
}}
|
|
/>
|
|
),
|
|
size: 200,
|
|
}),
|
|
columnHelper.accessor('company', {
|
|
header: () => (
|
|
<ColumnHead
|
|
viewName="Company"
|
|
viewIcon={<IconBuilding size={16} />}
|
|
/>
|
|
),
|
|
cell: (props) => <PeopleCompanyCell people={props.row.original} />,
|
|
size: 150,
|
|
}),
|
|
columnHelper.accessor('phone', {
|
|
header: () => (
|
|
<ColumnHead viewName="Phone" viewIcon={<IconPhone size={16} />} />
|
|
),
|
|
cell: (props) => (
|
|
<EditablePhone
|
|
placeholder="Phone"
|
|
value={props.row.original.phone || ''}
|
|
changeHandler={(value: string) => {
|
|
const person = props.row.original;
|
|
person.phone = value;
|
|
updatePerson(person);
|
|
}}
|
|
/>
|
|
),
|
|
size: 130,
|
|
}),
|
|
columnHelper.accessor('createdAt', {
|
|
header: () => (
|
|
<ColumnHead
|
|
viewName="Creation"
|
|
viewIcon={<IconCalendar size={16} />}
|
|
/>
|
|
),
|
|
cell: (props) => (
|
|
<EditableDate
|
|
value={props.row.original.createdAt || new Date()}
|
|
changeHandler={(value: Date) => {
|
|
const person = props.row.original;
|
|
person.createdAt = value;
|
|
updatePerson(person);
|
|
}}
|
|
/>
|
|
),
|
|
size: 100,
|
|
}),
|
|
columnHelper.accessor('city', {
|
|
header: () => (
|
|
<ColumnHead viewName="City" viewIcon={<IconMapPin size={16} />} />
|
|
),
|
|
cell: (props) => (
|
|
<EditableText
|
|
editModeHorizontalAlign="right"
|
|
placeholder="City"
|
|
content={props.row.original.city || ''}
|
|
changeHandler={(value: string) => {
|
|
const person = props.row.original;
|
|
person.city = value;
|
|
updatePerson(person);
|
|
}}
|
|
/>
|
|
),
|
|
}),
|
|
];
|
|
}, []);
|
|
};
|