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';
/* ---------------------------------- types --------------------------------- */
type PaginationTableProps = {
current_page: number;
from: number;
@@ -64,11 +63,9 @@ interface EnhancedTableProps {
order: Order;
orderBy: string;
}
/* -------------------------------------------------------------------------- */
/* -------------------------- enchanced table head -------------------------- */
const headCells: readonly HeadCell[] = [
{
id: 'member_id',
@@ -141,7 +138,6 @@ function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps
</TableHead>
);
}
/* -------------------------------------------------------------------------- */
export default function TableList() {
@@ -180,7 +176,6 @@ export default function TableList() {
/* -------------------------------------------------------------------------- */
/* ----------------------------- Field Container ---------------------------- */
/* ----------------------------- division field ----------------------------- */
const optionDivisions = ['All'];
@@ -190,10 +185,6 @@ export default function TableList() {
/* ------------------------------ Search field ------------------------------ */
const [searchText, setSearchText] = useState('');
const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchText(event.target.value);
};
const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
setIsLoading(true);
@@ -223,72 +214,9 @@ export default function TableList() {
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 ---------------------------- */
/* ------------------------ button change pagination ------------------------ */
const onPageChangeHandle = async (
event: React.MouseEvent<HTMLButtonElement> | null,
@@ -318,7 +246,6 @@ export default function TableList() {
setIsLoading(false);
};
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
useEffect(() => {
@@ -354,7 +281,63 @@ export default function TableList() {
<Grid container>
{/* Field 1 */}
<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>
{/* End Field 1 */}
{/* Field 2 */}