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

Solve bug in picking date in product list view

parent 0f3494fe
Branches
1 requête de fusion!501Solve bug in picking date in product list view
Pipeline #16858 réussi avec l'étape
in 11 minutes et 7 secondes
......@@ -2,7 +2,6 @@ import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import FormHelperText from '@mui/material/FormHelperText';
......@@ -12,26 +11,32 @@ import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { useResponsive } from '@/hooks';
import { DateRangePickerProps } from './types';
import { useState } from 'react';
import { useState, useEffect } from 'react';
// ----------------------------------------------------------------------
export default function CustomDateRangePicker({
variant = 'calendar',
//
startDate,
endDate,
//
onChangeStartDate,
onChangeEndDate,
//
open,
onClose,
}: DateRangePickerProps) {
const mdUp = useResponsive('up', 'md');
const [localStartDate, setLocalStartDate] = useState(startDate);
const [localEndDate, setLocalEndDate] = useState(startDate);
const [localEndDate, setLocalEndDate] = useState(endDate);
const [error, setError] = useState(false);
useEffect(() => {
if (open) {
setLocalStartDate(startDate);
setLocalEndDate(endDate);
setError(false);
}
}, [open, startDate, endDate]);
function handleChangeLocalStartDate(date: Date | null) {
if (date && localEndDate && date > localEndDate) {
......@@ -57,7 +62,6 @@ export default function CustomDateRangePicker({
onClose();
}
const isCalendarView = variant === 'calendar';
return (
......@@ -140,4 +144,4 @@ export default function CustomDateRangePicker({
</DialogActions>
</Dialog>
);
}
}
\ No newline at end of file
......@@ -11,6 +11,12 @@ import { IProductTableFilters, IProductTableFilterValue } from "@/shared/types/p
import { Button, TextField } from "@mui/material";
import CustomDateRangePicker from "@/shared/components/custom-date-range-picker";
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
type Props = {
filters: IProductTableFilters;
onFilters: (name: string, value: IProductTableFilterValue) => void;
......@@ -125,32 +131,64 @@ export default function ProductTableToolbar({
[onFilters, priceMin]
);
const [isDateRangeOpen, setIsDateRangeOpen] = useState(false);
const formatDateForBackend = (date: Date | null): string | null => {
if (!date) return null;
return date.toISOString()
.replace(/\.\d{3}Z$/, '');
// Format for Spring backend @DateTimeFormat annotation
// Use date string format that matches what Spring expects
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
// For start date: beginning of day
if (date.getHours() === 0) {
return `${year}-${month}-${day}T00:00:00`;
}
else {
return `${year}-${month}-${day}T23:59:59`;
}
};
const onChangeStartDate = (newStartDate: Date | null) => {
if (newStartDate) {
const formattedDate = formatDateForBackend(newStartDate);
// Create a new date at midnight local time to avoid timezone offset issues
const startOfDay = new Date(
newStartDate.getFullYear(),
newStartDate.getMonth(),
newStartDate.getDate(),
0, 0, 0, 0
);
const formattedDate = formatDateForBackend(startOfDay);
onFilters("startDate", formattedDate);
} else {
onFilters("startDate", null);
}
};
const onChangeEndDate = (newEndDate: Date | null) => {
if (newEndDate) {
const formattedDate = formatDateForBackend(newEndDate);
const endOfDay = new Date(
newEndDate.getFullYear(),
newEndDate.getMonth(),
newEndDate.getDate(),
23, 59, 59, 999
);
const formattedDate = formatDateForBackend(endOfDay);
onFilters("endDate", formattedDate);
} else {
onFilters("endDate", null);
}
};
const formatDateForDisplay = (dateString: string | null): string => {
if (!dateString) return '';
const date = new Date(dateString);
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};
const closeDateRange = () => {
setIsDateRangeOpen(!isDateRangeOpen);
}
......@@ -289,7 +327,9 @@ export default function ProductTableToolbar({
}
onClick={() => setIsDateRangeOpen(true)}
>
{filters.startDate?.split("T")[0]} {filters.endDate != null && filters.startDate != null && " / "} {filters.endDate?.split("T")[0]}
{formatDateForDisplay(filters.startDate)}
{filters.endDate && filters.startDate && " / "}
{formatDateForDisplay(filters.endDate)}
</Button>
<CustomPopover
open={popover.open}
......@@ -314,14 +354,10 @@ export default function ProductTableToolbar({
startDate={filters.startDate ? new Date(filters.startDate) : null}
endDate={filters.endDate ? new Date(filters.endDate) : null}
onChangeEndDate={(newValue: Date | null) => {
if (newValue) {
onChangeEndDate(newValue);
}
onChangeEndDate(newValue);
}}
onChangeStartDate={(newValue: Date | null) => {
if (newValue) {
onChangeStartDate(newValue);
}
onChangeStartDate(newValue);
}}
/>
</>
......
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