Skip to content
Extraits de code Groupes Projets
Valider 012c5ce1 rédigé par hamza.bouslama's avatar hamza.bouslama
Parcourir les fichiers

solving bug in refund order category filter

parent 506b0389
Branches
1 requête de fusion!508solving bug in refund order category filter
Pipeline #19209 réussi avec l'étape
in 4 minutes et 43 secondes
Masquer les modifications d'espaces
En ligne Côte à côte
src/shared/api/refundOrders.ts
+ 31
− 27
Voir le fichier @ 012c5ce1
......@@ -23,37 +23,41 @@ export async function useCreateRefundOrder(data: CreateRefundOrderRequest) {
return newData;
}
export async function useGetAllRefundOrders(
refundMethods: RefundMethod[],
keyword: string,
startDate: Date | null,
endDate: Date | null,
page: number,
pageSize: number
export function useGetAllRefundOrders(
refundMethods: RefundMethod[],
keyword: string,
startDate: Date | null,
endDate: Date | null,
page: number,
pageSize: number
) {
const refundMethodsQuery = refundMethods.length > 0 ? `&refundMethods=${encodeURIComponent(refundMethods.join(','))}` : '';
const keywordQuery = keyword ? `&keyword=${encodeURIComponent(keyword)}` : '';
const startDateQuery = startDate ? `&startDate=${encodeURIComponent(startDate.toISOString())}` : '';
const endDateQuery = endDate ? `&endDate=${encodeURIComponent(endDate.toISOString())}` : '';
const URL = `${endpoints.order.refundOrder.getAllRefundOrders}?page=${page}&pageSize=${pageSize}` +
refundMethodsQuery + keywordQuery + startDateQuery + endDateQuery;
const refundMethodsQuery = refundMethods.length > 0 ? `&refundMethods=${encodeURIComponent(refundMethods.join(','))}` : '';
const keywordQuery = keyword ? `&keyword=${encodeURIComponent(keyword)}` : '';
const startDateQuery = startDate ? `&startDate=${encodeURIComponent(startDate.toISOString())}` : '';
const endDateQuery = endDate ? `&endDate=${encodeURIComponent(endDate.toISOString())}` : '';
const URL = `${endpoints.order.refundOrder.getAllRefundOrders}?page=${page}&pageSize=${pageSize}` +
refundMethodsQuery + keywordQuery + startDateQuery + endDateQuery;
const { data, error, isLoading, isValidating, mutate } = useSWR(URL, fetcher);
const { data, error, isLoading, isValidating, mutate } = useSWR(URL, fetcher);
// Adjust response structure based on backend changes
const refundOrdersResponse = useMemo(() => data?.refundOrdersPage?.content || [], [data?.refundOrdersPage?.content]);
const totalPages = useMemo(() => data?.refundOrdersPage?.totalPages || 1, [data?.refundOrdersPage?.totalPages]);
const totalElements = useMemo(() => data?.refundOrdersPage?.totalElements || 0, [data?.refundOrdersPage?.totalElements]);
const methodCounts = useMemo(() => data?.methodCounts || {}, [data?.methodCounts]);
const refundOrdersResponse = useMemo(() => data?.content || [], [data?.content]);
const totalPages = useMemo(() => data?.totalPages || 1, [data?.totalPages]);
return {
refundOrdersResponse,
refundOrdersError: error,
refundOrdersLoading: isLoading,
refundOrdersValidating: isValidating,
refundOrdersEmpty: refundOrdersResponse.length === 0,
totalPages,
currentPage: page,
mutateRefundOrders: mutate,
};
return {
refundOrdersResponse,
refundOrdersError: error,
refundOrdersLoading: isLoading,
refundOrdersValidating: isValidating,
refundOrdersEmpty: refundOrdersResponse.length === 0,
totalPages,
totalElements,
methodCounts,
currentPage: page,
mutateRefundOrders: mutate,
};
}
export function getRefundOrdersByOrderId(orderId: string) {
......
src/shared/sections/order/refund-order/all/refund-order-list-view.tsx
+ 181
− 218
Voir le fichier @ 012c5ce1
......@@ -12,7 +12,7 @@ import { alpha, useTheme } from "@mui/material/styles";
import TableContainer from "@mui/material/TableContainer";
import { paths } from "@/routes/paths";
import { isAfter } from "@/utils/format-time";
import Label from "@/shared/components/label";
import Label, { LabelColor } from "@/shared/components/label";
import Scrollbar from "@/components/scrollbar";
import { useSettingsContext } from "@/components/settings";
import CustomBreadcrumbs from "@/components/custom-breadcrumbs";
......@@ -24,13 +24,20 @@ import {
TableHeadCustom,
TableSelectedAction,
} from "@/shared/components/table";
import { CircularProgress } from '@mui/material';
import { getRefundMethodColor, IRefundOrderTableFilters, IRefundOrderTableFilterValue, RefundMethod, refundMethodLabels, RefundOrderItem } from '@/contexts/types/refundOrder';
import RefundOrderTableToolbar from './refund-order-table-toolbar';
import RefundOrderTableRow from './refund-order-table-row';
import { useGetAllRefundOrders } from '@/shared/api/refundOrders';
import RefundOrderTableFiltersResult from './refund-order-table-filters-result';
import CustomPagination from '../../order-components/CustomPagination';
import { CircularProgress } from "@mui/material";
import {
getRefundMethodColor,
IRefundOrderTableFilters,
IRefundOrderTableFilterValue,
RefundMethod,
refundMethodLabels,
RefundOrderItem,
} from "@/contexts/types/refundOrder";
import RefundOrderTableToolbar from "./refund-order-table-toolbar";
import RefundOrderTableRow from "./refund-order-table-row";
import { useGetAllRefundOrders } from "@/shared/api/refundOrders";
import RefundOrderTableFiltersResult from "./refund-order-table-filters-result";
import CustomPagination from "../../order-components/CustomPagination";
// ----------------------------------------------------------------------
......@@ -57,100 +64,90 @@ const defaultFilters: IRefundOrderTableFilters = {
// ----------------------------------------------------------------------
// ... (toutes les autres importations restent inchangées)
export default function RefundOrderListView() {
const theme = useTheme();
const settings = useSettingsContext();
const table = useTable({ defaultOrderBy: "id", defaultOrder: "desc" });
const [tableData, setTableData] = useState<RefundOrderItem[]>([]);
const defaultFiltersLocalStorage: IRefundOrderTableFilters = localStorage.getItem("lastRefundListFilters")
?
JSON.parse(localStorage.getItem("lastRefundListFilters")!)
:
{
keyword: "",
refundMethods: [],
startDate: null,
endDate: null,
page: 0,
pageSize: 10,
};
const getFilterFromLocalStorage = (): IRefundOrderTableFilters => {
try {
const savedFilters = localStorage.getItem("lastRefundListFilters");
if (!savedFilters) return defaultFilters;
const parsed = JSON.parse(savedFilters);
return {
...parsed,
startDate: parsed.startDate ? new Date(parsed.startDate) : null,
endDate: parsed.endDate ? new Date(parsed.endDate) : null
};
} catch (error) {
console.error("Error loading filters:", error);
return defaultFilters;
}
};
const getFilterFromLocalStorage = (): IRefundOrderTableFilters => {
try {
const savedFilters = localStorage.getItem("lastRefundListFilters");
if (!savedFilters) return defaultFilters;
const parsed = JSON.parse(savedFilters);
return {
...parsed,
refundMethods: Array.isArray(parsed.refundMethods) ? parsed.refundMethods : [],
startDate: parsed.startDate ? new Date(parsed.startDate) : null,
endDate: parsed.endDate ? new Date(parsed.endDate) : null,
};
} catch (error) {
console.error("Error loading filters:", error);
return defaultFilters;
}
};
const [filters, setFilters] = useState(getFilterFromLocalStorage());
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const dateError = isAfter(filters.startDate, filters.endDate);
const [loading, setLoading] = useState(false);
const {
refundOrdersResponse,
refundOrdersLoading,
totalPages,
totalElements,
methodCounts,
} = useGetAllRefundOrders(
filters.refundMethods,
filters.keyword,
filters.startDate,
filters.endDate,
page,
rowsPerPage
);
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [totalPages, setTotalPages] = useState(0);
useEffect(() => {
localStorage.removeItem("lastRefundListFilters");
localStorage.setItem("lastRefundListFilters", JSON.stringify(filters));
}, [filters]);
useGetAllRefundOrders(filters.refundMethods, filters.keyword, filters.startDate, filters.endDate, page, rowsPerPage).then((response) => {
setTableData(response.refundOrdersResponse);
setTotalPages(response.totalPages);
});
const denseHeight = table.dense ? 56 : 56 + 20;
const denseHeight = table.dense ? 56 : 76;
const canReset =
!!filters.keyword ||
!!filters.refundMethods.length ||
(!!filters.startDate && !!filters.endDate);
const notFound = (!tableData.length && canReset) || !tableData.length;
const getRefundOrdersLength = (refundMethod: RefundMethod) =>
tableData.filter((item) => item.refundMethod === refundMethod).length;
const notFound = (!refundOrdersResponse.length && canReset) || !refundOrdersResponse.length;
const TABS = [
{ value: [], label: "Tous", color: "default", count: tableData.length },
{
value: [RefundMethod.CREDIT_CARD],
value: '',
label: 'Tous',
color: 'default' as const,
count: totalElements || 0,
},
{
value: RefundMethod.CREDIT_CARD,
label: refundMethodLabels[RefundMethod.CREDIT_CARD],
color: getRefundMethodColor(RefundMethod.CREDIT_CARD),
count: getRefundOrdersLength(RefundMethod.CREDIT_CARD),
color: getRefundMethodColor(RefundMethod.CREDIT_CARD) as LabelColor,
count: methodCounts[RefundMethod.CREDIT_CARD] || 0,
},
{
value: [RefundMethod.PAYPAL],
value: RefundMethod.PAYPAL,
label: refundMethodLabels[RefundMethod.PAYPAL],
color: getRefundMethodColor(RefundMethod.PAYPAL),
count: getRefundOrdersLength(RefundMethod.PAYPAL),
color: getRefundMethodColor(RefundMethod.PAYPAL) as LabelColor,
count: methodCounts[RefundMethod.PAYPAL] || 0,
},
{
value: [RefundMethod.MANUAL],
value: RefundMethod.MANUAL,
label: refundMethodLabels[RefundMethod.MANUAL],
color: getRefundMethodColor(RefundMethod.MANUAL),
count: getRefundOrdersLength(RefundMethod.MANUAL),
color: getRefundMethodColor(RefundMethod.MANUAL) as LabelColor,
count: methodCounts[RefundMethod.MANUAL] || 0,
},
] as const;
];
const handleFilters = useCallback(
(name: string, value: IRefundOrderTableFilterValue) => {
......@@ -161,7 +158,7 @@ export default function RefundOrderListView() {
[name]: value,
}));
},
[]
[table]
);
const handleResetFilters = useCallback(() => {
......@@ -171,166 +168,132 @@ export default function RefundOrderListView() {
const handleFilterRefundMethod = useCallback(
(event: React.SyntheticEvent, newValue: string) => {
handleFilters("refundMethods", newValue);
const methods = newValue === '' ? [] : [newValue as RefundMethod];
handleFilters("refundMethods", methods);
setPage(0);
},
[handleFilters]
);
function arraysEqual(a: any[], b: any[]) {
if (a.length !== b.length) return false;
return a.every((value, index) => value === b[index]);
}
const currentRefundMethod = filters.refundMethods[0] ?? '';
return (
<>
<Container maxWidth={settings.themeStretch ? false : "lg"}>
<CustomBreadcrumbs
heading="Liste des remboursements"
links={[
{
name: "Tableau de bord",
href: paths.dashboard.root,
},
{
name: "Liste des remboursements",
href: paths.dashboard.admin.order.refund.root,
}
]}
<Container maxWidth={settings.themeStretch ? false : "lg"}>
<CustomBreadcrumbs
heading="Liste des remboursements"
links={[
{ name: "Tableau de bord", href: paths.dashboard.root },
{ name: "Liste des remboursements", href: paths.dashboard.admin.order.refund.root },
]}
sx={{ mb: { xs: 3, md: 5 } }}
/>
<Card>
<Tabs
value={currentRefundMethod}
onChange={handleFilterRefundMethod}
sx={{
mb: { xs: 3, md: 5 },
px: 2.5,
boxShadow: `inset 0 -2px 0 0 ${alpha(theme.palette.grey[500], 0.08)}`,
}}
/>
>
{TABS.map((tab) => (
<Tab
key={tab.value}
value={tab.value}
label={tab.label}
iconPosition="end"
icon={
<Label
variant={currentRefundMethod === tab.value ? "filled" : "soft"}
color={tab.color}
>
{tab.count}
</Label>
}
/>
))}
</Tabs>
<Card>
<Tabs
value={filters.refundMethods}
onChange={handleFilterRefundMethod}
sx={{
px: 2.5,
boxShadow: `inset 0 -2px 0 0 ${alpha(
theme.palette.grey[500],
0.08
)}`,
}}
>
{TABS.map((tab, index) => (
<Tab
key={index}
value={tab.value}
label={tab.label}
iconPosition="end"
icon={
<Label
variant={
(arraysEqual(tab.value.slice(), filters.refundMethods.slice()) || arraysEqual(tab.value.slice(), [])) ? "filled" : "soft"
}
color={tab.color}
>
{tab.count}
</Label>
}
/>
))}
</Tabs>
<RefundOrderTableToolbar
filters={filters}
onFilters={handleFilters}
dateError={dateError}
/>
<RefundOrderTableToolbar
{canReset && (
<RefundOrderTableFiltersResult
filters={filters}
onFilters={handleFilters}
dateError={dateError}
onResetFilters={handleResetFilters}
results={totalElements}
sx={{ p: 2.5, pt: 0 }}
/>
{canReset && (
<RefundOrderTableFiltersResult
filters={filters}
onFilters={handleFilters}
//
onResetFilters={handleResetFilters}
//
results={tableData.length}
sx={{ p: 2.5, pt: 0 }}
/>
)}
<TableContainer sx={{ position: "relative", overflow: "unset" }}>
<TableSelectedAction
dense={table.dense}
numSelected={table.selected.length}
rowCount={tableData.length}
onSelectAllRows={(checked) => {
table.onSelectAllRows(
checked,
tableData.map((row) => row.id.toString())
);
}}
/>
{
loading ? (
<Stack alignItems="center" justifyContent="center" sx={{ py: 5 }}>
<CircularProgress />
</Stack>
) : (
<Scrollbar>
<Table
size={table.dense ? "small" : "medium"}
sx={{ minWidth: 800 }}
>
<TableHeadCustom
order={table.order}
orderBy={table.orderBy}
headLabel={TABLE_HEAD}
rowCount={tableData.length}
numSelected={table.selected.length}
onSort={table.onSort}
onSelectAllRows={(checked) =>
table.onSelectAllRows(
checked,
tableData.map((row) => row.id.toString())
)
}
/>
<TableBody>
{tableData
.map((row) => (
<RefundOrderTableRow
key={row.id}
row={row}
selected={table.selected.includes(row.id.toString())}
onSelectRow={() => table.onSelectRow(row.id.toString())}
/>
))}
<TableEmptyRows
height={denseHeight}
emptyRows={emptyRows(
table.page,
table.rowsPerPage,
tableData.length
)}
/>
<TableNoData notFound={notFound} />
</TableBody>
</Table>
</Scrollbar>
)
}
</TableContainer>
<CustomPagination
count={tableData?.length}
page={page}
rowsPerPage={rowsPerPage}
setPage={setPage}
setRowsPerPage={setRowsPerPage}
rowsPerPageOptions={[10, 25, 50]}
totalPages={totalPages}
)}
<TableContainer sx={{ position: "relative", overflow: "unset" }}>
<TableSelectedAction
dense={table.dense}
numSelected={table.selected.length}
rowCount={refundOrdersResponse.length}
onSelectAllRows={(checked) => {
table.onSelectAllRows(
checked,
refundOrdersResponse.map((row: RefundOrderItem) => row.id.toString())
);
}}
/>
</Card>
</Container>
</>
{refundOrdersLoading ? (
<Stack alignItems="center" justifyContent="center" sx={{ py: 5 }}>
<CircularProgress />
</Stack>
) : (
<Scrollbar>
<Table size={table.dense ? "small" : "medium"} sx={{ minWidth: 800 }}>
<TableHeadCustom
order={table.order}
orderBy={table.orderBy}
headLabel={TABLE_HEAD}
rowCount={refundOrdersResponse.length}
numSelected={table.selected.length}
onSort={table.onSort}
onSelectAllRows={(checked) =>
table.onSelectAllRows(
checked,
refundOrdersResponse.map((row: RefundOrderItem) => row.id.toString())
)
}
/>
<TableBody>
{refundOrdersResponse.map((row: RefundOrderItem) => (
<RefundOrderTableRow
key={row.id}
row={row}
selected={table.selected.includes(row.id.toString())}
onSelectRow={() => table.onSelectRow(row.id.toString())}
/>
))}
<TableEmptyRows
height={denseHeight}
emptyRows={emptyRows(table.page, table.rowsPerPage, refundOrdersResponse.length)}
/>
<TableNoData notFound={notFound} />
</TableBody>
</Table>
</Scrollbar>
)}
</TableContainer>
<CustomPagination
count={totalElements}
page={page}
rowsPerPage={rowsPerPage}
setPage={setPage}
setRowsPerPage={setRowsPerPage}
rowsPerPageOptions={[10, 25, 50]}
totalPages={totalPages}
/>
</Card>
</Container>
);
}
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