Apply Pagination

This commit is contained in:
2022-08-03 18:35:21 +07:00
parent f72a641f56
commit 4fb1723b76
12 changed files with 77 additions and 14 deletions

View File

@@ -6,12 +6,13 @@ import AddIcon from '@mui/icons-material/Add';
import UploadIcon from '@mui/icons-material/Upload';
import CancelIcon from '@mui/icons-material/Cancel';
// hooks
import React, { Component, useEffect, useRef, useState } from 'react';
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
import { useParams, useSearchParams } from 'react-router-dom';
// components
import axios from '../../../utils/axios';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import BasePagination from '../../../components/BasePagination';
export default function PlanList() {
const { themeStretch } = useSettings();
@@ -323,11 +324,17 @@ export default function PlanList() {
fontWeight: 'bold',
};
const applyFilter = async (searchFilter) => {
const applyFilter = async (searchFilter: string) => {
await loadDataTableData({ "search" : searchFilter });
setSearchParams({ "search" : searchFilter });
}
const handlePageChange = (event : ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
loadDataTableData(filter);
setSearchParams(filter);
}
useEffect(() => {
loadDataTableData();
}, [])
@@ -429,6 +436,8 @@ export default function PlanList() {
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
</Card>
</Stack>
);

View File

@@ -6,13 +6,14 @@ import AddIcon from '@mui/icons-material/Add';
import UploadIcon from '@mui/icons-material/Upload';
import CancelIcon from '@mui/icons-material/Cancel';
// hooks
import React, { Component, useEffect, useRef, useState } from 'react';
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
import { useParams, useSearchParams } from 'react-router-dom';
// components
import axios from '../../../utils/axios';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import { Icd } from '../../../@types/diagnosis';
import BasePagination from '../../../components/BasePagination';
export default function List() {
const { themeStretch } = useSettings();
@@ -265,6 +266,12 @@ export default function List() {
setSearchParams({ "search" : searchFilter });
}
const handlePageChange = (event : ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
loadDataTableData(filter);
setSearchParams(filter);
}
useEffect(() => {
loadDataTableData();
}, [])
@@ -313,6 +320,8 @@ export default function List() {
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
</Card>
</Stack>
);

View File

@@ -13,6 +13,7 @@ import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
import axios from '../../../utils/axios';
import { CorporatePlan } from '../../../@types/corporates';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import BasePagination from '../../../components/BasePagination';
export default function PlanList() {
const { themeStretch } = useSettings();
@@ -161,6 +162,13 @@ export default function PlanList() {
setSearchParams({ "search" : searchFilter });
}
const handlePageChange = (event : ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
loadDataTableData(filter);
setSearchParams(filter);
}
useEffect(() => {
loadDataTableData();
}, [])
@@ -219,6 +227,7 @@ export default function PlanList() {
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
</Card>
</Stack>
);

View File

@@ -6,7 +6,7 @@ import AddIcon from '@mui/icons-material/Add';
import UploadIcon from '@mui/icons-material/Upload';
import CancelIcon from '@mui/icons-material/Cancel';
// hooks
import React, { Component, useEffect, useRef, useState } from 'react';
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
import { useParams, useSearchParams } from 'react-router-dom';
// components
@@ -14,6 +14,7 @@ import axios from '../../../utils/axios';
import { Plan } from '../../../@types/corporates';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import { Member } from '../../../@types/member';
import BasePagination from '../../../components/BasePagination';
export default function CorporatePlanList() {
const { themeStretch } = useSettings();
@@ -48,11 +49,17 @@ export default function CorporatePlanList() {
setDataTableData(response.data);
}
const applyFilter = async (searchFilter) => {
const applyFilter = async (searchFilter: string) => {
await loadDataTableData({ "search" : searchFilter });
setSearchParams({ "search" : searchFilter });
}
const handlePageChange = (event : ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
loadDataTableData(filter);
setSearchParams(filter);
}
useEffect(() => {
loadDataTableData();
}, [])
@@ -331,6 +338,8 @@ export default function CorporatePlanList() {
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
</Card>
</Stack>
);

View File

@@ -6,13 +6,14 @@ import AddIcon from '@mui/icons-material/Add';
import UploadIcon from '@mui/icons-material/Upload';
import CancelIcon from '@mui/icons-material/Cancel';
// hooks
import React, { Component, useEffect, useRef, useState } from 'react';
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
import { useParams, useSearchParams } from 'react-router-dom';
// components
import axios from '../../../utils/axios';
import { Plan } from '../../../@types/corporates';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import BasePagination from '../../../components/BasePagination';
export default function CorporatePlanList() {
const { themeStretch } = useSettings();
@@ -314,11 +315,17 @@ export default function CorporatePlanList() {
fontWeight: 'bold',
};
const applyFilter = async (searchFilter) => {
const applyFilter = async (searchFilter: string) => {
await loadDataTableData({ "search" : searchFilter });
setSearchParams({ "search" : searchFilter });
}
const handlePageChange = (event : ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
loadDataTableData(filter);
setSearchParams(filter);
}
useEffect(() => {
loadDataTableData();
}, [])
@@ -411,6 +418,8 @@ export default function CorporatePlanList() {
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
</Card>
</Stack>
);

View File

@@ -243,7 +243,7 @@ export default function List() {
fontWeight: 'bold',
};
const applyFilter = async (searchFilter: any) => {
const applyFilter = async (searchFilter: string) => {
await loadDataTableData({ "search" : searchFilter });
setSearchParams({ "search" : searchFilter });
}