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

Sammy/t 195 aau i see filters and sort on company (#104)

Browse Source 
* feature: add company filter by name

* feature: add fitler on URL

* feature: set icons for sorts

* feature: add creation date and address sorts

* Add tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Sammy Teillet
2023-05-06 07:59:30 +02:00
committed by GitHub
parent 406e1dc02e
commit 354cdb6ad9
17 changed files with 350 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,8 +9,21 @@ import {
} from '../../services/companies';
import Table from '../../components/table/Table';
import { mapCompany } from '../../interfaces/company.interface';
import { companiesColumns, sortsAvailable } from './companies-table';
import { reduceSortsToOrderBy } from '../../components/table/table-header/helpers';
import {
companiesColumns,
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 { SelectedFilterType } from '../../components/table/table-header/interface';
import { useSearch } from '../../services/search/search';
const StyledCompaniesContainer = styled.div`
display: flex;
@ -18,15 +31,23 @@ const StyledCompaniesContainer = styled.div`
`;
function Companies() {
const [, setSorts] = useState([] as Array<CompaniesSelectedSortType>);
const [orderBy, setOrderBy] = useState(defaultOrderBy);
const [orderBy, setOrderBy] = useState<Companies_Order_By[]>(defaultOrderBy);
const [where, setWhere] = useState<Companies_Bool_Exp>({});
const [filterSearchResults, setSearhInput, setFilterSearch] = useSearch();
const updateSorts = useCallback((sorts: Array<CompaniesSelectedSortType>) => {
setSorts(sorts);
setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
}, []);
const { data } = useCompaniesQuery(orderBy);
const updateFilters = useCallback(
(filters: Array<SelectedFilterType<Companies_Bool_Exp>>) => {
setWhere(reduceFiltersToWhere(filters));
},
[],
);
const { data } = useCompaniesQuery(orderBy, where);
return (
<WithTopBarContainer title="Companies" icon={<FaRegBuilding />}>
@ -36,8 +57,15 @@ function Companies() {
columns={companiesColumns}
viewName="All Companies"
viewIcon={<FaList />}
availableSorts={availableSorts}
availableFilters={availableFilters}
filterSearchResults={filterSearchResults}
onSortsUpdate={updateSorts}
availableSorts={sortsAvailable}
onFiltersUpdate={updateFilters}
onFilterSearch={(filter, searchValue) => {
setSearhInput(searchValue);
setFilterSearch(filter);
}}
/>
</StyledCompaniesContainer>
</WithTopBarContainer>