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

fix params

Browse Source
This commit is contained in:
Muhammad Fajar
2022-12-03 09:30:59 +07:00
parent 3dc3c474eb
commit d12fe31a82
2 changed files with 116 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,7 +14,6 @@ import {
IconButton,
Card,
Grid,
Autocomplete,
} from '@mui/material';
import { visuallyHidden } from '@mui/utils';
/* ---------------------------------- axios --------------------------------- */
@@ -24,8 +23,6 @@ import { useEffect, useState } from 'react';
/* -------------------------------- component ------------------------------- */
import Iconify from '../../components/Iconify';
import BaseTablePagination from '../../components/BaseTablePagination';
/* ---------------------------------- hooks --------------------------------- */
import useMap from '../../hooks/useMap';
/* ---------------------------------- theme --------------------------------- */
import palette from '../../theme/palette';
import { useSearchParams } from 'react-router-dom';
@@ -46,9 +43,8 @@ type PaginationTableProps = {
type DataTableProps = {
name: string;
member_id: string;
service: string;
start_date: string;
end_date: string;
division: string;
limit: string;
status: string;
};
@@ -76,31 +72,31 @@ const headCells: readonly HeadCell[] = [
id: 'member_id',
align: 'left',
label: 'Member ID',
isSort: false,
isSort: true,
},
{
id: 'name',
align: 'center',
label: 'Name',
isSort: false,
isSort: true,
},
{
id: 'division',
align: 'center',
label: 'Divisi',
isSort: false,
isSort: true,
},
{
id: 'limit',
align: 'center',
label: 'Limit',
isSort: false,
isSort: true,
},
{
id: 'status',
align: 'center',
label: 'Status',
isSort: false,
isSort: true,
},
];
@@ -191,11 +187,7 @@ export default function TableList() {
const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
setIsLoading(true);
const params = Object.fromEntries([
...customSearchParams.entries(),
['page', 0],
['search', searchText],
]);
const params = Object.fromEntries([...customSearchParams.entries(), ['search', searchText]]);
await new Promise((resolve) => setTimeout(resolve, 500));
setAppliedParams(params);
setIsLoading(false);
@@ -210,12 +202,7 @@ export default function TableList() {
newPage: number
) => {
setIsLoading(true);
const params = Object.fromEntries([
...customSearchParams.entries(),
['page', newPage + 1],
['order', order],
['orderBy', orderBy],
]);
const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]);
setPage(newPage);
await new Promise((resolve) => setTimeout(resolve, 500));
setAppliedParams(params);
@@ -230,16 +217,12 @@ export default function TableList() {
setPage(0);
const params = Object.fromEntries([
...customSearchParams.entries(),
['page', 0],
['order', order],
['orderBy', orderBy],
['per_page', parseInt(event.target.value, 10)],
]);
setRowsPerPage(parseInt(event.target.value, 10));
await new Promise((resolve) => setTimeout(resolve, 500));
setAppliedParams(params);
setIsLoading(false);
// setCustomSearchParams.set('per_page', parseInt(event.target.value, 10));
};
/* -------------------------------------------------------------------------- */
@@ -254,8 +237,8 @@ export default function TableList() {
? appliedParams
: Object.fromEntries([
...customSearchParams.entries(),
// ['order', order],
// ['orderBy', orderBy],
['order', order],
['orderBy', orderBy],
]);
const response = await axios.get('http://localhost:8001/api/dashboard', {
@@ -265,12 +248,13 @@ export default function TableList() {
const division = await axios.get('http://localhost:8001/api/division');
setDataDivision(division.data);
setCustomSearchParams(params);
setDataTable(response.data.data);
setPaginationTable(response.data.meta);
setRowsPerPage(response.data.meta.per_page);
setIsLoading(false);
})();
}, [appliedParams, customSearchParams, order, orderBy]);
}, [appliedParams, customSearchParams, order, orderBy, setCustomSearchParams]);
return (
<Card>
@@ -310,19 +294,18 @@ export default function TableList() {
<TableRow key={index}>
<TableCell align="left">{row.member_id}</TableCell>
<TableCell align="center">{row.name}</TableCell>
<TableCell align="center">{row.service}</TableCell>
<TableCell align="center">{row.start_date}</TableCell>
<TableCell align="center">{row.division}</TableCell>
<TableCell align="center">{row.limit}</TableCell>
<TableCell align="center">
{row.status.toLowerCase() === 'active' ? (
<Button
sx={{
backgroundColor: 'rgba(84, 214, 44, 0.16)',
color: palette.dark.success.dark,
paddingX: 1.5,
paddingY: 1,
paddingY: 0,
'&:hover': {
backgroundColor: palette.light.grey[400],
color: palette.light.grey[800],
backgroundColor: 'rgba(84, 214, 44, 0.32)',
color: palette.dark.success.darker,
},
}}
>
@@ -331,13 +314,12 @@ export default function TableList() {
) : (
<Button
sx={{
backgroundColor: '#CD7B2E',
color: '#FFFF',
paddingX: 1.5,
paddingY: 1,
backgroundColor: 'rgba(255, 72, 66, 0.16)',
color: palette.dark.error.dark,
paddingY: 0,
'&:hover': {
backgroundColor: '#BF6919',
color: '#FFFF',
backgroundColor: 'rgba(255, 72, 66, 0.32)',
color: palette.dark.error.darker,
},
}}
>