Complete Fix view work (#2272)

* Fix views

* Make view sorts and view filters functional

* Complete Company table view fix

* Fix model creation

* Start fixing board

* Complete work

front/src/pages/people/People.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { v4 } from 'uuid';
 
 import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
-import { PeopleTable } from '@/people/table/components/PeopleTable';
+import { PersonTable } from '@/people/table/components/PersonTable';
 import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
 import { DataTableActionBar } from '@/ui/data/data-table/action-bar/components/DataTableActionBar';
 import { DataTableContextMenu } from '@/ui/data/data-table/context-menu/components/DataTableContextMenu';
@@ -62,7 +62,7 @@ export const People = () => {
             CustomRecoilScopeContext={TableRecoilScopeContext}
           >
             <StyledTableContainer>
-              <PeopleTable />
+              <PersonTable />
             </StyledTableContainer>
             <DataTableActionBar />
             <DataTableContextMenu />

front/src/pages/people/PersonShow.tsx

@@ -31,7 +31,7 @@ import {
 import { PeopleFullNameEditableField } from '../../modules/people/editable-field/components/PeopleFullNameEditableField';
 import { ShowPageContainer } from '../../modules/ui/layout/page/ShowPageContainer';
 
-import { personShowFieldDefinition } from './constants/personShowFieldDefinition';
+import { personShowFieldDefinition } from './constants/personShowFieldDefinitions';
 
 export const PersonShow = () => {
   const personId = useParams().personId ?? '';

front/src/pages/people/constants/personTableFilterDefinitions.tsx

@@ -0,0 +1,59 @@
+import { FilterDropdownCompanySearchSelect } from '@/companies/components/FilterDropdownCompanySearchSelect';
+import { FilterDefinitionByEntity } from '@/ui/data/filter/types/FilterDefinitionByEntity';
+import {
+  IconBuildingSkyscraper,
+  IconCalendarEvent,
+  IconMail,
+  IconMap,
+  IconPhone,
+  IconUser,
+} from '@/ui/display/icon/index';
+import { Person } from '~/generated/graphql';
+
+export const personTableFilterDefinitions: FilterDefinitionByEntity<Person>[] =
+  [
+    {
+      fieldId: 'firstName',
+      label: 'First name',
+      Icon: IconUser,
+      type: 'text',
+    },
+    {
+      fieldId: 'lastName',
+      label: 'Last name',
+      Icon: IconUser,
+      type: 'text',
+    },
+    {
+      fieldId: 'email',
+      label: 'Email',
+      Icon: IconMail,
+      type: 'text',
+    },
+    {
+      fieldId: 'companyId',
+      label: 'Company',
+      Icon: IconBuildingSkyscraper,
+      type: 'entity',
+      // TODO: replace this with a component that selects the dropdown to use based on the entity type
+      entitySelectComponent: <FilterDropdownCompanySearchSelect />,
+    },
+    {
+      fieldId: 'phone',
+      label: 'Phone',
+      Icon: IconPhone,
+      type: 'text',
+    },
+    {
+      fieldId: 'createdAt',
+      label: 'Created at',
+      Icon: IconCalendarEvent,
+      type: 'date',
+    },
+    {
+      fieldId: 'city',
+      label: 'City',
+      Icon: IconMap,
+      type: 'text',
+    },
+  ];

front/src/pages/people/constants/personTableSortDefinitions.tsx

@@ -9,9 +9,9 @@ import {
   IconUser,
 } from '@/ui/display/icon/index';
 
-export const peopleAvailableSorts: SortDefinition[] = [
+export const personTableSortDefinitions: SortDefinition[] = [
   {
-    key: 'fullname',
+    fieldId: 'fullname',
     label: 'People',
     Icon: IconUser,
 
@@ -21,7 +21,7 @@ export const peopleAvailableSorts: SortDefinition[] = [
     ],
   },
   {
-    key: 'company_name',
+    fieldId: 'company_name',
     label: 'Company',
     Icon: IconBuildingSkyscraper,
     getOrderByTemplate: (direction: SortDirection) => [
@@ -29,22 +29,22 @@ export const peopleAvailableSorts: SortDefinition[] = [
     ],
   },
   {
-    key: 'email',
+    fieldId: 'email',
     label: 'Email',
     Icon: IconMail,
   },
   {
-    key: 'phone',
+    fieldId: 'phone',
     label: 'Phone',
     Icon: IconPhone,
   },
   {
-    key: 'createdAt',
+    fieldId: 'createdAt',
     label: 'Created at',
     Icon: IconCalendarEvent,
   },
   {
-    key: 'city',
+    fieldId: 'city',
     label: 'City',
     Icon: IconMap,
   },

front/src/pages/people/people-filters.tsx

@@ -1,58 +0,0 @@
-import { FilterDropdownCompanySearchSelect } from '@/companies/components/FilterDropdownCompanySearchSelect';
-import { FilterDefinitionByEntity } from '@/ui/data/filter/types/FilterDefinitionByEntity';
-import {
-  IconBuildingSkyscraper,
-  IconCalendarEvent,
-  IconMail,
-  IconMap,
-  IconPhone,
-  IconUser,
-} from '@/ui/display/icon/index';
-import { Person } from '~/generated/graphql';
-
-export const peopleAvailableFilters: FilterDefinitionByEntity<Person>[] = [
-  {
-    key: 'firstName',
-    label: 'First name',
-    Icon: IconUser,
-    type: 'text',
-  },
-  {
-    key: 'lastName',
-    label: 'Last name',
-    Icon: IconUser,
-    type: 'text',
-  },
-  {
-    key: 'email',
-    label: 'Email',
-    Icon: IconMail,
-    type: 'text',
-  },
-  {
-    key: 'companyId',
-    label: 'Company',
-    Icon: IconBuildingSkyscraper,
-    type: 'entity',
-    // TODO: replace this with a component that selects the dropdown to use based on the entity type
-    entitySelectComponent: <FilterDropdownCompanySearchSelect />,
-  },
-  {
-    key: 'phone',
-    label: 'Phone',
-    Icon: IconPhone,
-    type: 'text',
-  },
-  {
-    key: 'createdAt',
-    label: 'Created at',
-    Icon: IconCalendarEvent,
-    type: 'date',
-  },
-  {
-    key: 'city',
-    label: 'City',
-    Icon: IconMap,
-    type: 'text',
-  },
-];