Simplifies search through relations usage (#126)

2023-05-17 23:10:00 +02:00
parent 434e020846
commit cdc9e24ac0
15 changed files with 455 additions and 491 deletions
--- a/front/src/pages/people/people-columns.tsx
+++ b/front/src/pages/people/people-columns.tsx
@ -0,0 +1,171 @@
+import { useMemo } from 'react';
+import {
+  FaRegBuilding,
+  FaCalendar,
+  FaEnvelope,
+  FaRegUser,
+  FaMapPin,
+  FaPhone,
+} from 'react-icons/fa';
+import { CellContext, createColumnHelper } from '@tanstack/react-table';
+
+import { SEARCH_COMPANY_QUERY } from '../../services/api/search/search';
+import { SearchConfigType } from '../../interfaces/search/interface';
+
+import {
+  Company,
+  mapToCompany,
+} from '../../interfaces/entities/company.interface';
+import { Person } from '../../interfaces/entities/person.interface';
+import { updatePerson } from '../../services/api/people';
+
+import ColumnHead from '../../components/table/ColumnHead';
+import Checkbox from '../../components/form/Checkbox';
+import { SelectAllCheckbox } from '../../components/table/SelectAllCheckbox';
+import EditablePhone from '../../components/editable-cell/EditablePhone';
+import EditableFullName from '../../components/editable-cell/EditableFullName';
+import EditableDate from '../../components/editable-cell/EditableDate';
+import EditableText from '../../components/editable-cell/EditableText';
+import EditableRelation from '../../components/editable-cell/EditableRelation';
+import CompanyChip, {
+  CompanyChipPropsType,
+} from '../../components/chips/CompanyChip';
+
+const columnHelper = createColumnHelper<Person>();
+
+export const usePeopleColumns = () => {
+  return useMemo(() => {
+    return [
+      {
+        id: 'select',
+        header: ({ table }: any) => (
+          <SelectAllCheckbox
+            checked={table.getIsAllRowsSelected()}
+            indeterminate={table.getIsSomeRowsSelected()}
+            onChange={table.getToggleAllRowsSelectedHandler()}
+          />
+        ),
+        cell: (props: CellContext<Person, string>) => (
+          <Checkbox
+            id={`person-selected-${props.row.original.id}`}
+            name={`person-selected-${props.row.original.id}`}
+            checked={props.row.getIsSelected()}
+            onChange={props.row.getToggleSelectedHandler()}
+          />
+        ),
+      },
+      columnHelper.accessor('firstname', {
+        header: () => <ColumnHead viewName="People" viewIcon={<FaRegUser />} />,
+        cell: (props) => (
+          <EditableFullName
+            firstname={props.row.original.firstname || ''}
+            lastname={props.row.original.lastname || ''}
+            changeHandler={(firstName: string, lastName: string) => {
+              const person = props.row.original;
+              person.firstname = firstName;
+              person.lastname = lastName;
+              updatePerson(person);
+            }}
+          />
+        ),
+      }),
+      columnHelper.accessor('email', {
+        header: () => <ColumnHead viewName="Email" viewIcon={<FaEnvelope />} />,
+        cell: (props) => (
+          <EditableText
+            placeholder="Email"
+            content={props.row.original.email || ''}
+            changeHandler={(value: string) => {
+              const person = props.row.original;
+              person.email = value;
+              updatePerson(person);
+            }}
+          />
+        ),
+      }),
+      columnHelper.accessor('company', {
+        header: () => (
+          <ColumnHead viewName="Company" viewIcon={<FaRegBuilding />} />
+        ),
+        cell: (props) => (
+          <EditableRelation<Company, CompanyChipPropsType>
+            relation={props.row.original.company}
+            searchPlaceholder="Company"
+            ChipComponent={CompanyChip}
+            chipComponentPropsMapper={(company): CompanyChipPropsType => {
+              return {
+                name: company.name || '',
+                picture: `https://www.google.com/s2/favicons?domain=${company.domainName}&sz=256`,
+              };
+            }}
+            changeHandler={(relation) => {
+              const person = props.row.original;
+              if (person.company) {
+                person.company.id = relation.id;
+              } else {
+                person.company = relation;
+              }
+              updatePerson(person);
+            }}
+            searchConfig={
+              {
+                query: SEARCH_COMPANY_QUERY,
+                template: (searchInput: string) => ({
+                  name: { _ilike: `%${searchInput}%` },
+                }),
+                resultMapper: (company) => ({
+                  render: (company) => company.name,
+                  value: mapToCompany(company),
+                }),
+              } satisfies SearchConfigType<Company>
+            }
+          />
+        ),
+      }),
+      columnHelper.accessor('phone', {
+        header: () => <ColumnHead viewName="Phone" viewIcon={<FaPhone />} />,
+        cell: (props) => (
+          <EditablePhone
+            placeholder="Phone"
+            value={props.row.original.phone || ''}
+            changeHandler={(value: string) => {
+              const person = props.row.original;
+              person.phone = value;
+              updatePerson(person);
+            }}
+          />
+        ),
+      }),
+      columnHelper.accessor('creationDate', {
+        header: () => (
+          <ColumnHead viewName="Creation" viewIcon={<FaCalendar />} />
+        ),
+        cell: (props) => (
+          <EditableDate
+            value={props.row.original.creationDate || new Date()}
+            changeHandler={(value: Date) => {
+              const person = props.row.original;
+              person.creationDate = value;
+              updatePerson(person);
+            }}
+          />
+        ),
+      }),
+      columnHelper.accessor('city', {
+        header: () => <ColumnHead viewName="City" viewIcon={<FaMapPin />} />,
+        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);
+            }}
+          />
+        ),
+      }),
+    ];
+  }, []);
+};