Skip to content
Extraits de code Groupes Projets
Valider 599a1daa rédigé par anas elhaddad's avatar anas elhaddad
Parcourir les fichiers

add pagination, sort and search for unregistred client

parent 7e278c19
Branches
1 requête de fusion!461MS-21/add pagination, sort and search for unregistred client
Pipeline #12114 réussi avec l'étape
in 8 minutes et 31 secondes
Masquer les modifications d'espaces
En ligne Côte à côte
src/shared/api/saleSession.ts
+ 38
− 1
Voir le fichier @ 599a1daa
import { endpoints, axiosInstance, fetcher } from "./server";
import useSWR, { mutate, useSWRConfig } from 'swr';
import { useMemo } from 'react';
import { IUserItem, IUnregistredClientItem, ILiveItem, ISessionOrder, IClientPage, SearchClientParams, SearchSaleSessionParams, ISaleSessionPage } from '../types/saleSession';
import { IUserItem, IUnregistredClientItem, ILiveItem, ISessionOrder, IClientPage, SearchClientParams, SearchSaleSessionParams, ISaleSessionPage, IUnregistredClientPage } from '../types/saleSession';
import { AxiosResponse } from "axios";
export function useGetClients() {
......@@ -700,4 +700,41 @@ export function useDeletedSaleSessionCountsByType({
}),
[data, error]
);
}
export function useSearchUnregistredClient({
pseudo = "",
page = 0,
size = 10,
sortBy = "id",
sortDir = "DESC",
}: {
pseudo?: string;
page?: Number;
size?: Number;
sortBy?: string;
sortDir?: string;
}) {
const filterParams = new URLSearchParams({
pseudo: pseudo || "",
page: page.toString(),
size: size.toString(),
sortBy: sortBy || "",
sortDir: sortDir || "",
});
const url = `${endpoints.salleSession.getUnregisteredClientPage}?${filterParams.toString()}`;
const { data, error, isValidating, mutate } = useSWR<IUnregistredClientPage>(url, fetcher);
return {
unregistredClients: data?.content || [],
totalUnregistredClients: data?.totalElements || 0,
totalPages: data?.totalPages || 0,
pageNumber: data?.pageable.pageNumber || 0,
pageSize: data?.pageable.pageSize || 0,
loading: !data && !error,
isError: error,
isValidating,
revalidate: mutate,
};
}
\ No newline at end of file
src/shared/api/server.ts
+ 2
− 1
Voir le fichier @ 599a1daa
......@@ -437,7 +437,8 @@ export const endpoints = {
getSeleSessionPage: "/api/cart/page",
getTypeCount:"/api/cart/count-type",
getDeletedSeleSessionPage: "/api/cart/deleted/page",
getDeletedTypeCount:"/api/cart/deleted/count-type"
getDeletedTypeCount:"/api/cart/deleted/count-type",
getUnregisteredClientPage:"/api/user/unregistered-client/page"
},
supplier: {
getAllSupplier: "/api/user/supplier",
......
src/shared/sections/cart/all-NewUsers/All-NewUsers-view.tsx
+ 95
− 107
Voir le fichier @ 599a1daa
"use client";
import isEqual from "lodash/isEqual";
import { useState, useCallback, useMemo, useEffect } from "react";
import { useState, useCallback, useEffect } from "react";
import Tab from "@mui/material/Tab";
import Tabs from "@mui/material/Tabs";
import Card from "@mui/material/Card";
import Table from "@mui/material/Table";
import { alpha } from "@mui/material/styles";
import TableBody from "@mui/material/TableBody";
import TableContainer from "@mui/material/TableContainer";
import { _User, USER_STATUS_OPTIONS } from "@/shared/_mock/_cartLive";
import Label from "@/shared/components/label";
import { _User } from "@/shared/_mock/_cartLive";
import Scrollbar from "@/components/scrollbar";
import {
useTable,
emptyRows,
TableNoData,
getComparator,
TableEmptyRows,
TableHeadCustom,
TableSelectedAction,
TablePaginationCustom,
} from "@/shared/components/table";
import {
IUserItem,
IUserTableFilters,
IUserTableFilterValue,
} from "@/shared/_mock/_cartLive";
......@@ -38,8 +27,8 @@ import {
import UserTableRow from "./NewUser-table-row";
import UserTableToolbar from "./NewUser-table-toolbar";
import UserTableFiltersResult from "./NewUser-table-filters-result";
import { Box, Divider, Grid, Stack, Typography } from "@mui/material";
import { useGetUnregistredClients } from '@/shared/api/saleSession';
import { Box, CircularProgress, Divider, Grid, Stack, TableCell, TableRow, Typography } from "@mui/material";
import { useSearchUnregistredClient } from '@/shared/api/saleSession';
import { IUnregistredClientItem } from '@/shared/types/saleSession';
// ----------------------------------------------------------------------
......@@ -64,45 +53,63 @@ type AllUsersViewProps = {
export default function AllNewUsersView({ onAddToCart }: AllUsersViewProps) {
const table = useTable();
const { clients: unregisteredClients, clientsLoading, clientsError } = useGetUnregistredClients();
const [tableData, setTableData] = useState<IUnregistredClientItem[]>([]);
const [filters, setFilters] = useState(defaultFilters);
const memoizedApplyFilter = useMemo(() => applyFilter, []);
useEffect(() => {
if (unregisteredClients && unregisteredClients.length > 0) {
setTableData(unregisteredClients);
}
}, [unregisteredClients]);
const dataFiltered = memoizedApplyFilter({
inputData: tableData,
comparator: getComparator(table.order, table.orderBy),
filters,
const {
unregistredClients,
totalUnregistredClients,
totalPages,
pageNumber,
pageSize,
loading,
revalidate,
} = useSearchUnregistredClient({
pseudo: filters.name,
page: table.page,
size: table.rowsPerPage,
sortBy: table.orderBy,
sortDir: table.order,
});
const dataInPage = dataFiltered.slice(
table.page * table.rowsPerPage,
table.page * table.rowsPerPage + table.rowsPerPage
);
const denseHeight = table.dense ? 56 : 56 + 20;
const canReset = !isEqual(defaultFilters, filters);
const notFound = (!dataFiltered.length && canReset) || !dataFiltered.length;
const handleFilters = useCallback(
(name: string, value: IUserTableFilterValue) => {
table.onResetPage();
setFilters((prevState) => ({
...prevState,
[name]: value,
}));
},
[table]
);
useEffect(() => {
if (unregistredClients && unregistredClients.length > 0) {
setTableData(unregistredClients);
}
}, [unregistredClients, table.page, table.rowsPerPage]);
useEffect(() => {
if (
filters.name
) {
revalidate();
}
}, [filters, revalidate]);
const dataInPage = tableData.slice(
table.page * table.rowsPerPage,
table.page * table.rowsPerPage + table.rowsPerPage
);
const denseHeight = table.dense ? 56 : 56 + 20;
const canReset = !isEqual(defaultFilters, filters);
const notFound = totalUnregistredClients === 0 && canReset;
const handleFilters = useCallback(
(name: string, value: IUserTableFilterValue) => {
table.onResetPage();
setFilters((prevState) => ({
...prevState,
[name]: value,
}));
},
[table]
);
const handleResetFilters = useCallback(() => {
setFilters(defaultFilters);
}, []);
......@@ -141,7 +148,7 @@ export default function AllNewUsersView({ onAddToCart }: AllUsersViewProps) {
//
onResetFilters={handleResetFilters}
//
results={dataFiltered.length}
results={totalUnregistredClients}
sx={{ p: 2.5, pt: 0 }}
/>
)}
......@@ -150,11 +157,11 @@ export default function AllNewUsersView({ onAddToCart }: AllUsersViewProps) {
<TableSelectedAction
dense={table.dense}
numSelected={table.selected.length}
rowCount={dataFiltered.length}
rowCount={totalUnregistredClients}
onSelectAllRows={(checked) =>
table.onSelectAllRows(
checked,
dataFiltered.map((row: IUnregistredClientItem) => row.id)
tableData.map((row: IUnregistredClientItem) => row.id)
)
}
/>
......@@ -168,44 +175,54 @@ export default function AllNewUsersView({ onAddToCart }: AllUsersViewProps) {
order={table.order}
orderBy={table.orderBy}
headLabel={TABLE_HEAD}
rowCount={dataFiltered.length}
rowCount={totalUnregistredClients}
numSelected={table.selected.length}
onSort={table.onSort}
/>
<TableBody>
{dataFiltered
.slice(
table.page * table.rowsPerPage,
table.page * table.rowsPerPage + table.rowsPerPage
)
.map((row: IUnregistredClientItem) => (
<UserTableRow
key={row.id}
row={row}
onAddToCart={onAddToCart}
<TableBody>
{loading ? (
<TableRow>
<TableCell
colSpan={TABLE_HEAD.length}
style={{ textAlign: "center", padding: "20px" }}
>
<CircularProgress />
</TableCell>
</TableRow>
) : (
<>
{notFound ? (
<TableNoData notFound={notFound} />
) : (
tableData.map((row) => (
<UserTableRow
key={row.id}
row={row}
onAddToCart={onAddToCart}
/>
))
)}
<TableEmptyRows
height={denseHeight}
emptyRows={emptyRows(
table.page,
table.rowsPerPage,
totalUnregistredClients
)}
/>
))}
<TableEmptyRows
height={denseHeight}
emptyRows={emptyRows(
table.page,
table.rowsPerPage,
dataFiltered.length
)}
/>
<TableNoData notFound={notFound} />
</>
)}
</TableBody>
</Table>
</Scrollbar>
</TableContainer>
<TablePaginationCustom
count={dataFiltered.length}
page={table.page}
rowsPerPage={table.rowsPerPage}
count={totalUnregistredClients}
page={pageNumber}
rowsPerPage={pageSize}
onPageChange={table.onChangePage}
onRowsPerPageChange={table.onChangeRowsPerPage}
//
......@@ -220,32 +237,3 @@ export default function AllNewUsersView({ onAddToCart }: AllUsersViewProps) {
// ----------------------------------------------------------------------
function applyFilter({
inputData,
comparator,
filters,
}: {
inputData: IUnregistredClientItem[];
comparator: (a: any, b: any) => number;
filters: IUserTableFilters;
}) {
const { name, status } = filters;
const stabilizedThis = inputData.map((el, index) => [el, index] as const);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) return order;
return a[1] - b[1];
});
inputData = stabilizedThis.map((el) => el[0]);
if (name) {
inputData = inputData.filter(
(client) => client.pseudo.toLowerCase().indexOf(name.toLowerCase()) !== -1
);
}
return inputData;
}
\ No newline at end of file
src/shared/types/saleSession.ts
+ 25
− 0
Voir le fichier @ 599a1daa
......@@ -94,6 +94,31 @@ export type IUnregistredClientItem = {
pseudo: string;
creationDate: Date | string;
};
export interface IUnregistredClientPage {
content: IUnregistredClientItem[];
pageable: {
sort: {
empty: boolean;
sorted: boolean;
unsorted: boolean;
},
offset: number;
pageNumber: number;
pageSize: number;
unpaged: boolean;
paged: boolean;
},
totalPages: number,
totalElements: number,
last: boolean;
sort: {
empty: boolean;
sorted: boolean;
unsorted: boolean; };
}
export type IOrder = {
orderId:string;
id: string;
......
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter