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

Simplifies search through relations usage (#126)

Browse Source
This commit is contained in:
Charles Bochet
2023-05-17 23:10:00 +02:00
committed by GitHub
parent 434e020846
commit cdc9e24ac0
15 changed files with 455 additions and 491 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
front/src/pages/companies/Companies.tsx
View File

@ -1,7 +1,7 @@
import { FaRegBuilding, FaList } from 'react-icons/fa';
import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
import styled from '@emotion/styled';
import { useState, useCallback, useEffect, useRef } from 'react';
import { FaRegBuilding, FaList } from 'react-icons/fa';
import styled from '@emotion/styled';
import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
import { v4 as uuidv4 } from 'uuid';
import {
CompaniesSelectedSortType,
@ -15,22 +15,18 @@ import {
Company,
mapToCompany,
} from '../../interfaces/entities/company.interface';
import {
useCompaniesColumns,
availableFilters,
availableSorts,
} from './companies-table';
import {
reduceFiltersToWhere,
reduceSortsToOrderBy,
} from '../../components/table/table-header/helpers';
import {
Companies_Bool_Exp,
Companies_Order_By,
} from '../../generated/graphql';
import { useSearch } from '../../services/api/search/search';
import { Companies_Order_By } from '../../generated/graphql';
import ActionBar from '../../components/table/action-bar/ActionBar';
import { SelectedFilterType } from '../../interfaces/filters/interface';
import { BoolExpType } from '../../interfaces/entities/generic.interface';
import { useCompaniesColumns } from './companies-columns';
import { availableSorts } from './companies-sorts';
import { availableFilters } from './companies-filters';
const StyledCompaniesContainer = styled.div`
display: flex;
@ -39,12 +35,10 @@ const StyledCompaniesContainer = styled.div`
function Companies() {
const [orderBy, setOrderBy] = useState<Companies_Order_By[]>(defaultOrderBy);
const [where, setWhere] = useState<Companies_Bool_Exp>({});
const [where, setWhere] = useState<BoolExpType<Company>>({});
const [internalData, setInternalData] = useState<Array<Company>>([]);
const [selectedRowIds, setSelectedRowIds] = useState<Array<string>>([]);
const [filterSearchResults, setSearhInput, setFilterSearch] = useSearch();
const updateSorts = useCallback((sorts: Array<CompaniesSelectedSortType>) => {
setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
}, []);
@ -113,13 +107,8 @@ function Companies() {
viewIcon={<FaList />}
availableSorts={availableSorts}
availableFilters={availableFilters}
filterSearchResults={filterSearchResults}
onSortsUpdate={updateSorts}
onFiltersUpdate={updateFilters}
onFilterSearch={(filter, searchValue) => {
setSearhInput(searchValue);
setFilterSearch(filter);
}}
onRowSelectionChange={setSelectedRowIds}
/>
</StyledCompaniesContainer>

143
front/src/pages/companies/companies-table.tsx → front/src/pages/companies/companies-columns.tsx
View File

@ -1,12 +1,4 @@
import { CellContext, createColumnHelper } from '@tanstack/react-table';
import {
Company,
mapToCompany,
} from '../../interfaces/entities/company.interface';
import { updateCompany } from '../../services/api/companies';
import ColumnHead from '../../components/table/ColumnHead';
import CompanyChip from '../../components/chips/CompanyChip';
import EditableText from '../../components/editable-cell/EditableText';
import { useMemo } from 'react';
import {
FaRegBuilding,
FaCalendar,
@ -14,126 +6,27 @@ import {
FaMapPin,
FaRegUser,
FaUsers,
FaBuilding,
} from 'react-icons/fa';
import { CellContext, createColumnHelper } from '@tanstack/react-table';
import { SEARCH_USER_QUERY } from '../../services/api/search/search';
import { SearchConfigType } from '../../interfaces/search/interface';
import { Company } from '../../interfaces/entities/company.interface';
import { updateCompany } from '../../services/api/companies';
import { User, mapToUser } from '../../interfaces/entities/user.interface';
import ColumnHead from '../../components/table/ColumnHead';
import Checkbox from '../../components/form/Checkbox';
import { SelectAllCheckbox } from '../../components/table/SelectAllCheckbox';
import EditableDate from '../../components/editable-cell/EditableDate';
import EditableRelation from '../../components/editable-cell/EditableRelation';
import EditableChip from '../../components/editable-cell/EditableChip';
import EditableText from '../../components/editable-cell/EditableText';
import PersonChip, {
PersonChipPropsType,
} from '../../components/chips/PersonChip';
import EditableChip from '../../components/editable-cell/EditableChip';
import { Companies_Order_By } from '../../generated/graphql';
import {
SEARCH_COMPANY_QUERY,
SEARCH_USER_QUERY,
} from '../../services/api/search/search';
import EditableDate from '../../components/editable-cell/EditableDate';
import EditableRelation from '../../components/editable-cell/EditableRelation';
import { User, mapToUser } from '../../interfaces/entities/user.interface';
import { useMemo } from 'react';
import { SelectAllCheckbox } from '../../components/table/SelectAllCheckbox';
import Checkbox from '../../components/form/Checkbox';
import { SortType } from '../../interfaces/sorts/interface';
import { FilterConfigType } from '../../interfaces/filters/interface';
import { SearchConfigType } from '../../interfaces/search/interface';
export const availableSorts = [
{
key: 'name',
label: 'Name',
icon: <FaBuilding />,
_type: 'default_sort',
},
{
key: 'employees',
label: 'Employees',
icon: <FaUsers />,
_type: 'default_sort',
},
{
key: 'domain_name',
label: 'Url',
icon: <FaLink />,
_type: 'default_sort',
},
{
key: 'address',
label: 'Address',
icon: <FaMapPin />,
_type: 'default_sort',
},
{
key: 'created_at',
label: 'Creation',
icon: <FaCalendar />,
_type: 'default_sort',
},
] satisfies Array<SortType<Companies_Order_By>>;
export const availableFilters = [
{
key: 'company_name',
label: 'Company',
icon: <FaBuilding />,
searchConfig: {
query: SEARCH_COMPANY_QUERY,
template: (searchInput) => ({
name: { _ilike: `%${searchInput}%` },
}),
resultMapper: (company) => ({
render: (company) => company.name,
value: mapToCompany(company),
}),
},
selectedValueRender: (company) => company.name || '',
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (company) => ({
name: { _eq: company.name },
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (company) => ({
_not: { name: { _eq: company.name } },
}),
},
],
} satisfies FilterConfigType<Company, Company>,
{
key: 'company_domain_name',
label: 'Url',
icon: <FaLink />,
searchConfig: {
query: SEARCH_COMPANY_QUERY,
template: (searchInput) => ({
name: { _ilike: `%${searchInput}%` },
}),
resultMapper: (company) => ({
render: (company) => company.domainName,
value: mapToCompany(company),
}),
},
selectedValueRender: (company) => company.domainName || '',
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (company) => ({
domain_name: { _eq: company.domainName },
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (company) => ({
_not: { domain_name: { _eq: company.domainName } },
}),
},
],
} satisfies FilterConfigType<Company, Company>,
];
import CompanyChip from '../../components/chips/CompanyChip';
const columnHelper = createColumnHelper<Company>();

74
front/src/pages/companies/companies-filters.tsx Normal file
View File

@ -0,0 +1,74 @@
import {
Company,
mapToCompany,
} from '../../interfaces/entities/company.interface';
import { FaLink, FaBuilding } from 'react-icons/fa';
import { SEARCH_COMPANY_QUERY } from '../../services/api/search/search';
import { FilterConfigType } from '../../interfaces/filters/interface';
export const availableFilters = [
{
key: 'company_name',
label: 'Company',
icon: <FaBuilding />,
searchConfig: {
query: SEARCH_COMPANY_QUERY,
template: (searchInput) => ({
name: { _ilike: `%${searchInput}%` },
}),
resultMapper: (company) => ({
render: (company) => company.name,
value: mapToCompany(company),
}),
},
selectedValueRender: (company) => company.name || '',
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (company) => ({
name: { _eq: company.name },
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (company) => ({
_not: { name: { _eq: company.name } },
}),
},
],
} satisfies FilterConfigType<Company, Company>,
{
key: 'company_domain_name',
label: 'Url',
icon: <FaLink />,
searchConfig: {
query: SEARCH_COMPANY_QUERY,
template: (searchInput) => ({
name: { _ilike: `%${searchInput}%` },
}),
resultMapper: (company) => ({
render: (company) => company.domainName,
value: mapToCompany(company),
}),
},
selectedValueRender: (company) => company.domainName || '',
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (company) => ({
domain_name: { _eq: company.domainName },
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (company) => ({
_not: { domain_name: { _eq: company.domainName } },
}),
},
],
} satisfies FilterConfigType<Company, Company>,
];

42
front/src/pages/companies/companies-sorts.tsx Normal file
View File

@ -0,0 +1,42 @@
import {
FaCalendar,
FaLink,
FaMapPin,
FaUsers,
FaBuilding,
} from 'react-icons/fa';
import { Companies_Order_By } from '../../generated/graphql';
import { SortType } from '../../interfaces/sorts/interface';
export const availableSorts = [
{
key: 'name',
label: 'Name',
icon: <FaBuilding />,
_type: 'default_sort',
},
{
key: 'employees',
label: 'Employees',
icon: <FaUsers />,
_type: 'default_sort',
},
{
key: 'domain_name',
label: 'Url',
icon: <FaLink />,
_type: 'default_sort',
},
{
key: 'address',
label: 'Address',
icon: <FaMapPin />,
_type: 'default_sort',
},
{
key: 'created_at',
label: 'Creation',
icon: <FaCalendar />,
_type: 'default_sort',
},
] satisfies Array<SortType<Companies_Order_By>>;

27
front/src/pages/people/People.tsx
View File

@ -1,18 +1,15 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { FaRegUser, FaList } from 'react-icons/fa';
import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
import Table from '../../components/table/Table';
import { v4 as uuidv4 } from 'uuid';
import styled from '@emotion/styled';
import {
availableFilters,
availableSorts,
usePeopleColumns,
} from './people-table';
import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
import Table from '../../components/table/Table';
import {
Person,
mapToPerson,
} from '../../interfaces/entities/person.interface';
import { useCallback, useEffect, useRef, useState } from 'react';
import {
PeopleSelectedSortType,
defaultOrderBy,
@ -20,14 +17,16 @@ import {
insertPerson,
usePeopleQuery,
} from '../../services/api/people';
import { useSearch } from '../../services/api/search/search';
import { People_Bool_Exp } from '../../generated/graphql';
import {
reduceFiltersToWhere,
reduceSortsToOrderBy,
} from '../../components/table/table-header/helpers';
import ActionBar from '../../components/table/action-bar/ActionBar';
import { SelectedFilterType } from '../../interfaces/filters/interface';
import { BoolExpType } from '../../interfaces/entities/generic.interface';
import { usePeopleColumns } from './people-columns';
import { availableSorts } from './people-sorts';
import { availableFilters } from './people-filters';
const StyledPeopleContainer = styled.div`
display: flex;
@ -37,8 +36,7 @@ const StyledPeopleContainer = styled.div`
function People() {
const [orderBy, setOrderBy] = useState(defaultOrderBy);
const [where, setWhere] = useState<People_Bool_Exp>({});
const [filterSearchResults, setSearchInput, setFilterSearch] = useSearch();
const [where, setWhere] = useState<BoolExpType<Person>>({});
const [internalData, setInternalData] = useState<Array<Person>>([]);
const [selectedRowIds, setSelectedRowIds] = useState<Array<string>>([]);
@ -111,13 +109,8 @@ function People() {
viewIcon={<FaList />}
availableSorts={availableSorts}
availableFilters={availableFilters}
filterSearchResults={filterSearchResults}
onSortsUpdate={updateSorts}
onFiltersUpdate={updateFilters}
onFilterSearch={(filter, searchValue) => {
setSearchInput(searchValue);
setFilterSearch(filter);
}}
onRowSelectionChange={setSelectedRowIds}
/>
</StyledPeopleContainer>

5
front/src/pages/people/__tests__/people-filter.test.ts
View File

@ -1,4 +1,4 @@
import { cityFilter } from '../people-table';
import { cityFilter } from '../people-filters';
describe('PeopleFilter', () => {
it(`should render the filter ${cityFilter.key}`, () => {
@ -11,8 +11,9 @@ describe('PeopleFilter', () => {
lastname: 'Doe',
phone: '0123456789',
creationDate: new Date(),
pipe: null,
pipes: [],
company: null,
__typename: 'people',
}),
).toMatchSnapshot();
});

232
front/src/pages/people/people-table.tsx → front/src/pages/people/people-columns.tsx
View File

@ -1,3 +1,4 @@
import { useMemo } from 'react';
import {
FaRegBuilding,
FaCalendar,
@ -5,233 +6,30 @@ import {
FaRegUser,
FaMapPin,
FaPhone,
FaUser,
FaBuilding,
} from 'react-icons/fa';
import { CellContext, createColumnHelper } from '@tanstack/react-table';
import ColumnHead from '../../components/table/ColumnHead';
import Checkbox from '../../components/form/Checkbox';
import CompanyChip, {
CompanyChipPropsType,
} from '../../components/chips/CompanyChip';
import {
Person,
mapToPerson,
} from '../../interfaces/entities/person.interface';
import EditableText from '../../components/editable-cell/EditableText';
import { Order_By, People_Order_By } from '../../generated/graphql';
import {
SEARCH_COMPANY_QUERY,
SEARCH_PEOPLE_QUERY,
} from '../../services/api/search/search';
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 { updatePerson } from '../../services/api/people';
import { useMemo } from 'react';
import { SelectAllCheckbox } from '../../components/table/SelectAllCheckbox';
import { SortType } from '../../interfaces/sorts/interface';
import { FilterConfigType } from '../../interfaces/filters/interface';
import { SearchConfigType } from '../../interfaces/search/interface';
export const availableSorts = [
{
key: 'fullname',
label: 'People',
icon: <FaRegUser />,
_type: 'custom_sort',
orderByTemplate: (order: Order_By) => ({
firstname: order,
lastname: order,
}),
},
{
key: 'company_name',
label: 'Company',
icon: <FaRegBuilding />,
_type: 'custom_sort',
orderByTemplate: (order: Order_By) => ({ company: { name: order } }),
},
{
key: 'email',
label: 'Email',
icon: <FaEnvelope />,
_type: 'default_sort',
},
{
key: 'phone',
label: 'Phone',
icon: <FaPhone />,
_type: 'default_sort',
},
{
key: 'created_at',
label: 'Created at',
icon: <FaCalendar />,
_type: 'default_sort',
},
{
key: 'city',
label: 'City',
icon: <FaMapPin />,
_type: 'default_sort',
},
] satisfies Array<SortType<People_Order_By>>;
export const fullnameFilter = {
key: 'fullname',
label: 'People',
icon: <FaUser />,
searchConfig: {
query: SEARCH_PEOPLE_QUERY,
template: (searchInput: string) => ({
_or: [
{ firstname: { _ilike: `%${searchInput}%` } },
{ lastname: { _ilike: `%${searchInput}%` } },
],
}),
resultMapper: (person) => ({
render: (person) => `${person.firstname} ${person.lastname}`,
value: mapToPerson(person),
}),
},
selectedValueRender: (person) => `${person.firstname} ${person.lastname}`,
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (person) => ({
_and: [
{ firstname: { _eq: `${person.firstname}` } },
{ lastname: { _eq: `${person.lastname}` } },
],
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (person) => ({
_not: {
_and: [
{ firstname: { _eq: `${person.firstname}` } },
{ lastname: { _eq: `${person.lastname}` } },
],
},
}),
},
],
} satisfies FilterConfigType<Person, Person>;
export const companyFilter = {
key: 'company_name',
label: 'Company',
icon: <FaBuilding />,
searchConfig: {
query: SEARCH_COMPANY_QUERY,
template: (searchInput: string) => ({
name: { _ilike: `%${searchInput}%` },
}),
resultMapper: (data) => ({
value: mapToCompany(data),
render: (company) => company.name,
}),
},
selectedValueRender: (company) => company.name || '',
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (company) => ({
company: { name: { _eq: company.name } },
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (company) => ({
_not: { company: { name: { _eq: company.name } } },
}),
},
],
} satisfies FilterConfigType<Person, Company>;
export const emailFilter = {
key: 'email',
label: 'Email',
icon: <FaEnvelope />,
searchConfig: {
query: SEARCH_PEOPLE_QUERY,
template: (searchInput: string) => ({
email: { _ilike: `%${searchInput}%` },
}),
resultMapper: (person) => ({
render: (person) => person.email,
value: mapToPerson(person),
}),
},
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (person) => ({
email: { _eq: person.email },
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (person) => ({
_not: { email: { _eq: person.email } },
}),
},
],
selectedValueRender: (person) => person.email || '',
} satisfies FilterConfigType<Person, Person>;
export const cityFilter = {
key: 'city',
label: 'City',
icon: <FaMapPin />,
searchConfig: {
query: SEARCH_PEOPLE_QUERY,
template: (searchInput: string) => ({
city: { _ilike: `%${searchInput}%` },
}),
resultMapper: (person) => ({
render: (person) => person.city,
value: mapToPerson(person),
}),
},
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (person) => ({
city: { _eq: person.city },
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (person) => ({
_not: { city: { _eq: person.city } },
}),
},
],
selectedValueRender: (person) => person.email || '',
} satisfies FilterConfigType<Person, Person>;
export const availableFilters = [
fullnameFilter,
companyFilter,
emailFilter,
cityFilter,
] satisfies FilterConfigType<Person, any>[];
import CompanyChip, {
CompanyChipPropsType,
} from '../../components/chips/CompanyChip';
const columnHelper = createColumnHelper<Person>();

164
front/src/pages/people/people-filters.tsx Normal file
View File

@ -0,0 +1,164 @@
import { FaEnvelope, FaMapPin, FaUser, FaBuilding } from 'react-icons/fa';
import {
Person,
mapToPerson,
} from '../../interfaces/entities/person.interface';
import {
SEARCH_COMPANY_QUERY,
SEARCH_PEOPLE_QUERY,
} from '../../services/api/search/search';
import {
Company,
mapToCompany,
} from '../../interfaces/entities/company.interface';
import { FilterConfigType } from '../../interfaces/filters/interface';
export const fullnameFilter = {
key: 'fullname',
label: 'People',
icon: <FaUser />,
searchConfig: {
query: SEARCH_PEOPLE_QUERY,
template: (searchInput: string) => ({
_or: [
{ firstname: { _ilike: `%${searchInput}%` } },
{ lastname: { _ilike: `%${searchInput}%` } },
],
}),
resultMapper: (person) => ({
render: (person) => `${person.firstname} ${person.lastname}`,
value: mapToPerson(person),
}),
},
selectedValueRender: (person) => `${person.firstname} ${person.lastname}`,
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (person) => ({
_and: [
{ firstname: { _eq: `${person.firstname}` } },
{ lastname: { _eq: `${person.lastname}` } },
],
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (person) => ({
_not: {
_and: [
{ firstname: { _eq: `${person.firstname}` } },
{ lastname: { _eq: `${person.lastname}` } },
],
},
}),
},
],
} satisfies FilterConfigType<Person, Person>;
export const companyFilter = {
key: 'company_name',
label: 'Company',
icon: <FaBuilding />,
searchConfig: {
query: SEARCH_COMPANY_QUERY,
template: (searchInput: string) => ({
name: { _ilike: `%${searchInput}%` },
}),
resultMapper: (data) => ({
value: mapToCompany(data),
render: (company) => company.name,
}),
},
selectedValueRender: (company) => company.name || '',
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (company) => ({
company: { name: { _eq: company.name } },
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (company) => ({
_not: { company: { name: { _eq: company.name } } },
}),
},
],
} satisfies FilterConfigType<Person, Company>;
export const emailFilter = {
key: 'email',
label: 'Email',
icon: <FaEnvelope />,
searchConfig: {
query: SEARCH_PEOPLE_QUERY,
template: (searchInput: string) => ({
email: { _ilike: `%${searchInput}%` },
}),
resultMapper: (person) => ({
render: (person) => person.email,
value: mapToPerson(person),
}),
},
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (person) => ({
email: { _eq: person.email },
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (person) => ({
_not: { email: { _eq: person.email } },
}),
},
],
selectedValueRender: (person) => person.email || '',
} satisfies FilterConfigType<Person, Person>;
export const cityFilter = {
key: 'city',
label: 'City',
icon: <FaMapPin />,
searchConfig: {
query: SEARCH_PEOPLE_QUERY,
template: (searchInput: string) => ({
city: { _ilike: `%${searchInput}%` },
}),
resultMapper: (person) => ({
render: (person) => person.city,
value: mapToPerson(person),
}),
},
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (person) => ({
city: { _eq: person.city },
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (person) => ({
_not: { city: { _eq: person.city } },
}),
},
],
selectedValueRender: (person) => person.email || '',
} satisfies FilterConfigType<Person, Person>;
export const availableFilters = [
fullnameFilter,
companyFilter,
emailFilter,
cityFilter,
] satisfies FilterConfigType<Person, any>[];

54
front/src/pages/people/people-sorts.tsx Normal file
View File

@ -0,0 +1,54 @@
import {
FaRegBuilding,
FaCalendar,
FaEnvelope,
FaRegUser,
FaMapPin,
FaPhone,
} from 'react-icons/fa';
import { Order_By, People_Order_By } from '../../generated/graphql';
import { SortType } from '../../interfaces/sorts/interface';
export const availableSorts = [
{
key: 'fullname',
label: 'People',
icon: <FaRegUser />,
_type: 'custom_sort',
orderByTemplate: (order: Order_By) => ({
firstname: order,
lastname: order,
}),
},
{
key: 'company_name',
label: 'Company',
icon: <FaRegBuilding />,
_type: 'custom_sort',
orderByTemplate: (order: Order_By) => ({ company: { name: order } }),
},
{
key: 'email',
label: 'Email',
icon: <FaEnvelope />,
_type: 'default_sort',
},
{
key: 'phone',
label: 'Phone',
icon: <FaPhone />,
_type: 'default_sort',
},
{
key: 'created_at',
label: 'Created at',
icon: <FaCalendar />,
_type: 'default_sort',
},
{
key: 'city',
label: 'City',
icon: <FaMapPin />,
_type: 'default_sort',
},
] satisfies Array<SortType<People_Order_By>>;