tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fixing table filter and search on dashboard

Browse Source
This commit is contained in:
Fajar
2023-03-24 15:23:41 +07:00
parent 606b3c871a
commit 127cdf8708
6 changed files with 225 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
frontend/client-portal/src/components/Table.tsx
View File

@@ -28,7 +28,7 @@ import { visuallyHidden } from '@mui/utils';
/* ---------------------------------- axios --------------------------------- */
import axios from '../utils/axios';
/* ---------------------------------- react --------------------------------- */
import { useContext, useEffect, useState } from 'react';
import { Fragment, useContext, useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
/* -------------------------------- component ------------------------------- */
import BaseTablePagination from './BaseTablePagination';
@@ -61,6 +61,8 @@ export default function Table<T>({
orders,
loadings,
params,
filters,
searchs,
}: TableListProps<T>) {
/* ------------------------------- handle sort ------------------------------ */
const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
@@ -120,46 +122,6 @@ export default function Table<T>({
};
/* -------------------------------------------------------------------------- */
/* ----------------------------- division field ----------------------------- */
// const [divisionValue, setDivisionValue] = useState('all');
// const [divisionData, setDivisionData] = useState([]);
// const handleDivisionChange = (event: SelectChangeEvent) => {
// setDivisionValue(event.target.value as string);
// if (event.target.value === 'all') {
// searchParams.delete('division');
// const params = Object.fromEntries([...searchParams.entries()]);
// setAppliedParams(params);
// } else {
// const params = Object.fromEntries([
// ...searchParams.entries(),
// ['division', event.target.value as string],
// ]);
// setAppliedParams(params);
// }
// };
/* -------------------------------------------------------------------------- */
/* ------------------------------ Search field ------------------------------ */
// const [searchText, setSearchText] = useState('');
// const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
// event.preventDefault();
// setIsLoading(true);
// if (searchText === '') {
// searchParams.delete('search');
// const params = Object.fromEntries([...searchParams.entries()]);
// setAppliedParams(params);
// } else {
// const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
// setAppliedParams(params);
// }
// await new Promise((resolve) => setTimeout(resolve, 500));
// setIsLoading(false);
// };
/* -------------------------------------------------------------------------- */
/* ------------------------ button change pagination ------------------------ */
const onPageChangeHandle = async (
event: React.MouseEvent<HTMLButtonElement> | null,
@@ -194,41 +156,58 @@ export default function Table<T>({
<Card>
<Grid container>
{/* Field 1 */}
{/* <Grid item xs={12} paddingX="24px" paddingY="20px">
<Grid item xs={12} paddingX="24px" paddingY="20px">
<Grid container spacing={2}>
<Grid item xs={12} lg={3} xl={2}>
<FormControl fullWidth>
<InputLabel id="simple-division-select-lable">Division</InputLabel>
<Select
labelId="simple-division-select-lable"
id="division-select-lable"
value={divisionValue}
label="Division"
onChange={handleDivisionChange}
>
<MenuItem value="all">All</MenuItem>
{divisionData.map((row: DivisionDataProps, index) => (
<MenuItem key={index} value={row.id}>
{row.name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid item xs={12} lg={9} xl={10}>
<form onSubmit={handleSearchSubmit}>
<TextField
id="search-input"
label="Search"
variant="outlined"
onChange={(event) => setSearchText(event.target.value)}
value={searchText}
fullWidth
/>
</form>
</Grid>
{filters && filters.useFilter ? (
<Fragment>
<Grid item xs={12} lg={3} xl={2}>
<FormControl fullWidth>
<InputLabel id="simple-division-select-lable">Division</InputLabel>
<Select
labelId="simple-division-select-lable"
id="division-select-lable"
value={filters.config.divisionValue}
label="Division"
onChange={filters.config.handleDivisionChange}
>
<MenuItem value="all">All</MenuItem>
{filters.config.divisionData.map((row: DivisionDataProps, index) => (
<MenuItem key={index} value={row.id}>
{row.name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid item xs={12} lg={9} xl={10}>
<form onSubmit={searchs.handleSearchSubmit}>
<TextField
id="search-input"
label="Search"
variant="outlined"
onChange={(event) => searchs.setSearchText(event.target.value)}
value={searchs.searchText}
fullWidth
/>
</form>
</Grid>
</Fragment>
) : (
<Grid item xs={12}>
<form onSubmit={searchs.handleSearchSubmit}>
<TextField
id="search-input"
label="Search"
variant="outlined"
onChange={(event) => searchs.setSearchText(event.target.value)}
value={searchs.searchText}
fullWidth
/>
</form>
</Grid>
)}
</Grid>
</Grid> */}
</Grid>
{/* End Field 1 */}
{/* Field 2 */}
<Grid item xs={12}>