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

93
frontend/client-portal/pnpm-lock.yaml generated
View File

@@ -26,6 +26,7 @@ specifiers:
'@typescript-eslint/eslint-plugin': ^5.35.1
'@typescript-eslint/parser': ^5.35.1
'@vitejs/plugin-react': ^1.3.2
apexcharts: ^3.36.3
axios: ^0.27.2
change-case: ^4.1.2
csstype: ^3.1.0
@@ -52,12 +53,14 @@ specifiers:
numeral: ^2.0.6
prettier: ^2.7.1
react: ^17.0.2
react-apexcharts: ^1.4.0
react-dom: ^17.0.2
react-dropzone: ^14.2.2
react-helmet-async: ^1.3.0
react-hook-form: ^7.34.2
react-intersection-observer: ^8.34.0
react-lazy-load-image-component: ^1.5.5
react-number-format: ^5.1.1
react-quill: 2.0.0-beta.4
react-router: ^6.3.0
react-router-dom: ^6.3.0
@@ -85,6 +88,7 @@ dependencies:
'@mui/x-data-grid': 5.16.0_r4jqxufjb3aftjrjm24vhpn4hm
'@mui/x-date-pickers': 5.0.0-beta.2_y3fv7pzpxqpbmxcbzsros3kjnu
'@vitejs/plugin-react': 1.3.2
apexcharts: 3.36.3
axios: 0.27.2
change-case: 4.1.2
csstype: 3.1.0
@@ -98,12 +102,14 @@ dependencies:
nprogress: 0.2.0
numeral: 2.0.6
react: 17.0.2
react-apexcharts: 1.4.0_rurziszfowucu2gmkqclv6xeru
react-dom: 17.0.2_react@17.0.2
react-dropzone: 14.2.2_react@17.0.2
react-helmet-async: 1.3.0_sfoxds7t5ydpegc3knd667wn6m
react-hook-form: 7.34.2_react@17.0.2
react-intersection-observer: 8.34.0_react@17.0.2
react-lazy-load-image-component: 1.5.5_sfoxds7t5ydpegc3knd667wn6m
react-number-format: 5.1.2_sfoxds7t5ydpegc3knd667wn6m
react-quill: 2.0.0-beta.4_sfoxds7t5ydpegc3knd667wn6m
react-router: 6.3.0_react@17.0.2
react-router-dom: 6.3.0_sfoxds7t5ydpegc3knd667wn6m
@@ -2683,6 +2689,17 @@ packages:
color-convert: 2.0.1
dev: true
/apexcharts/3.36.3:
resolution: {integrity: sha512-8/FXEs0ohXMff07Gv28XjhPwEJphIUdq2/wii/pcvi54Tw6z1mjrV8ydN8rlWi/ve8BAPBefJkLmRWv7UOBsLw==}
dependencies:
svg.draggable.js: 2.2.2
svg.easing.js: 2.0.0
svg.filter.js: 2.0.2
svg.pathmorphing.js: 0.1.3
svg.resize.js: 1.4.3
svg.select.js: 3.0.1
dev: false
/argparse/2.0.1:
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
dev: true
@@ -4934,6 +4951,17 @@ packages:
safe-buffer: 5.2.1
dev: true
/react-apexcharts/1.4.0_rurziszfowucu2gmkqclv6xeru:
resolution: {integrity: sha512-DrcMV4aAMrUG+n6412yzyATWEyCDWlpPBBhVbpzBC4PDeuYU6iF84SmExbck+jx5MUm4U5PM3/T307Mc3kzc9Q==}
peerDependencies:
apexcharts: ^3.18.0
react: '>=0.13'
dependencies:
apexcharts: 3.36.3
prop-types: 15.8.1
react: 17.0.2
dev: false
/react-dom/17.0.2_react@17.0.2:
resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
peerDependencies:
@@ -5016,6 +5044,17 @@ packages:
react-dom: 17.0.2_react@17.0.2
dev: false
/react-number-format/5.1.2_sfoxds7t5ydpegc3knd667wn6m:
resolution: {integrity: sha512-NXm/MvZVjmPqrFbjAut/prCyBZ+pA+O+C12rDkWZrwS3JXz1J42RC1kpclkdnkx2KDjRCNFLb21FlwGcNBZddw==}
peerDependencies:
react: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^18.0.0
react-dom: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^18.0.0
dependencies:
prop-types: 15.8.1
react: 17.0.2
react-dom: 17.0.2_react@17.0.2
dev: false
/react-quill/2.0.0-beta.4_sfoxds7t5ydpegc3knd667wn6m:
resolution: {integrity: sha512-KyAHvAlPjP4xLElKZJefMth91Z6FbbXRvq9OSu6xN3KBaoasLP9p+3dcxg4Ywr4tBlpMGXcPszYSAgd5CpJ45Q==}
peerDependencies:
@@ -5461,6 +5500,60 @@ packages:
resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
dev: false
/svg.draggable.js/2.2.2:
resolution: {integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==}
engines: {node: '>= 0.8.0'}
dependencies:
svg.js: 2.7.1
dev: false
/svg.easing.js/2.0.0:
resolution: {integrity: sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==}
engines: {node: '>= 0.8.0'}
dependencies:
svg.js: 2.7.1
dev: false
/svg.filter.js/2.0.2:
resolution: {integrity: sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==}
engines: {node: '>= 0.8.0'}
dependencies:
svg.js: 2.7.1
dev: false
/svg.js/2.7.1:
resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==}
dev: false
/svg.pathmorphing.js/0.1.3:
resolution: {integrity: sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==}
engines: {node: '>= 0.8.0'}
dependencies:
svg.js: 2.7.1
dev: false
/svg.resize.js/1.4.3:
resolution: {integrity: sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==}
engines: {node: '>= 0.8.0'}
dependencies:
svg.js: 2.7.1
svg.select.js: 2.1.2
dev: false
/svg.select.js/2.1.2:
resolution: {integrity: sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==}
engines: {node: '>= 0.8.0'}
dependencies:
svg.js: 2.7.1
dev: false
/svg.select.js/3.0.1:
resolution: {integrity: sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==}
engines: {node: '>= 0.8.0'}
dependencies:
svg.js: 2.7.1
dev: false
/temp-dir/2.0.0:
resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
engines: {node: '>=8'}

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,
},
}}
>