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

fix table dashboard

Browse Source
This commit is contained in:
Muhammad Fajar
2022-12-07 03:10:02 +07:00
parent 52633f438f
commit f20cb5b44c
1 changed files with 57 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
frontend/client-portal/src/sections/dashboard/TableList.tsx
View File

@@ -30,7 +30,6 @@ import palette from '../../theme/palette';
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from 'react-router-dom';
/* ---------------------------------- types --------------------------------- */ /* ---------------------------------- types --------------------------------- */
type PaginationTableProps = { type PaginationTableProps = {
current_page: number; current_page: number;
from: number; from: number;
@@ -64,11 +63,9 @@ interface EnhancedTableProps {
order: Order; order: Order;
orderBy: string; orderBy: string;
} }
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* -------------------------- enchanced table head -------------------------- */ /* -------------------------- enchanced table head -------------------------- */
const headCells: readonly HeadCell[] = [ const headCells: readonly HeadCell[] = [
{ {
id: 'member_id', id: 'member_id',
@@ -141,7 +138,6 @@ function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps
</TableHead> </TableHead>
); );
} }
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
export default function TableList() { export default function TableList() {
@@ -180,7 +176,6 @@ export default function TableList() {
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* ----------------------------- Field Container ---------------------------- */ /* ----------------------------- Field Container ---------------------------- */
/* ----------------------------- division field ----------------------------- */ /* ----------------------------- division field ----------------------------- */
const optionDivisions = ['All']; const optionDivisions = ['All'];
@@ -190,10 +185,6 @@ export default function TableList() {
/* ------------------------------ Search field ------------------------------ */ /* ------------------------------ Search field ------------------------------ */
const [searchText, setSearchText] = useState(''); const [searchText, setSearchText] = useState('');
const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchText(event.target.value);
};
const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => { const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault();
setIsLoading(true); setIsLoading(true);
@@ -223,72 +214,9 @@ export default function TableList() {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
}; };
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
const FieldContainer = () => (
<Grid container spacing={2}>
<Grid item xs={12} lg={3} xl={2}>
<Autocomplete
disablePortal
options={optionDivisions}
value={value}
onChange={(event: any, newValue: string | null) => {
console.log(newValue);
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} label="Division" />}
/>
</Grid>
<Grid item xs={12} lg={5} xl={6}>
<form onSubmit={handleSearchSubmit}>
<TextField
id="search-input"
label="Search"
variant="outlined"
onChange={handleSearch}
value={searchText}
fullWidth
/>
</form>
</Grid>
<Grid item xs={12} lg={2} xl={2}>
<Button
id="import-button"
variant="outlined"
startIcon={<Iconify icon="material-symbols:download-rounded" />}
component="label"
fullWidth
sx={{ height: '100%' }}
>
Import
<input
type="file"
id="file"
ref={importForm}
style={{ display: 'none' }}
onChange={handleImportChange}
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
/>
</Button>
</Grid>
<Grid item xs={12} lg={2} xl={2}>
<Button
id="import-button"
variant="contained"
startIcon={<AddIcon />}
onClick={handleClick}
fullWidth
sx={{ height: '100%' }}
>
Add Data
</Button>
</Grid>
</Grid>
);
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* ---------------------------- table pagination ---------------------------- */ /* ---------------------------- table pagination ---------------------------- */
/* ------------------------ button change pagination ------------------------ */ /* ------------------------ button change pagination ------------------------ */
const onPageChangeHandle = async ( const onPageChangeHandle = async (
event: React.MouseEvent<HTMLButtonElement> | null, event: React.MouseEvent<HTMLButtonElement> | null,
@@ -318,7 +246,6 @@ export default function TableList() {
setIsLoading(false); setIsLoading(false);
}; };
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
useEffect(() => { useEffect(() => {
@@ -354,7 +281,63 @@ export default function TableList() {
<Grid container> <Grid container>
{/* Field 1 */} {/* Field 1 */}
<Grid item xs={12} paddingX="24px" paddingY="20px"> <Grid item xs={12} paddingX="24px" paddingY="20px">
<FieldContainer /> <Grid container spacing={2}>
<Grid item xs={12} lg={3} xl={2}>
<Autocomplete
disablePortal
options={optionDivisions}
value={value}
onChange={(event: any, newValue: string | null) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} label="Division" />}
/>
</Grid>
<Grid item xs={12} lg={5} xl={6}>
<form onSubmit={handleSearchSubmit}>
<TextField
id="search-input"
label="Search"
variant="outlined"
onChange={(event) => setSearchText(event.target.value)}
value={searchText}
fullWidth
/>
</form>
</Grid>
<Grid item xs={12} lg={2} xl={2}>
<Button
id="import-button"
variant="outlined"
startIcon={<Iconify icon="material-symbols:download-rounded" />}
component="label"
fullWidth
sx={{ height: '100%' }}
>
Import
<input
type="file"
id="file"
ref={importForm}
style={{ display: 'none' }}
onChange={handleImportChange}
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
/>
</Button>
</Grid>
<Grid item xs={12} lg={2} xl={2}>
<Button
id="import-button"
variant="contained"
startIcon={<AddIcon />}
onClick={handleClick}
fullWidth
sx={{ height: '100%' }}
>
Add Data
</Button>
</Grid>
</Grid>
</Grid> </Grid>
{/* End Field 1 */} {/* End Field 1 */}
{/* Field 2 */} {/* Field 2 */}