From 80abfd599ae53b7204bab8a61dfe9d0e48492265 Mon Sep 17 00:00:00 2001 From: Kartik sharma Date: Tue, 8 Jul 2025 13:09:10 +0530 Subject: [PATCH 1/3] In filter DatePicker should not display dates in Image Gallery. --- .../Gallary/DateRangePickerNoDefault.jsx | 55 +++++++++++++++++++ src/pages/Gallary/ImageGallary.jsx | 3 +- 2 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 src/pages/Gallary/DateRangePickerNoDefault.jsx diff --git a/src/pages/Gallary/DateRangePickerNoDefault.jsx b/src/pages/Gallary/DateRangePickerNoDefault.jsx new file mode 100644 index 00000000..6c793b86 --- /dev/null +++ b/src/pages/Gallary/DateRangePickerNoDefault.jsx @@ -0,0 +1,55 @@ +import React, { useEffect, useRef } from "react"; + +const DateRangePickerNoDefault = ({ + onRangeChange, + startDate, + endDate, +}) => { + const inputRef = useRef(null); + + useEffect(() => { + const fp = flatpickr(inputRef.current, { + mode: "range", + dateFormat: "Y-m-d", + altInput: true, + altFormat: "d-m-Y", + static: true, + clickOpens: true, + onChange: (selectedDates, dateStr) => { + if (selectedDates.length === 2) { + const [startDateString, endDateString] = dateStr.split(" to "); + onRangeChange?.({ startDate: startDateString, endDate: endDateString }); + } else if (selectedDates.length === 0) { + onRangeChange?.({ startDate: "", endDate: "" }); + } + }, + onReady: (selectedDates, dateStr, instance) => { + if (startDate && endDate) { + instance.setDate([startDate, endDate], true); + } + }, + }); + + if (startDate && endDate) { + fp.setDate([startDate, endDate], false); + } else if (!startDate && !endDate) { + fp.clear(); + } + + return () => { + fp.destroy(); + }; + }, [onRangeChange, startDate, endDate]); + + return ( + + ); +}; + +export default DateRangePickerNoDefault; diff --git a/src/pages/Gallary/ImageGallary.jsx b/src/pages/Gallary/ImageGallary.jsx index 016d2bc6..eeb6e872 100644 --- a/src/pages/Gallary/ImageGallary.jsx +++ b/src/pages/Gallary/ImageGallary.jsx @@ -10,6 +10,7 @@ import DateRangePicker from "../../components/common/DateRangePicker"; import eventBus from "../../services/eventBus"; import Breadcrumb from "../../components/common/Breadcrumb"; import {formatUTCToLocalTime} from "../../utils/dateUtils"; +import DateRangePickerNoDefault from "./DateRangePickerNoDefault"; const PAGE_SIZE = 10; const SCROLL_THRESHOLD = 5; @@ -404,7 +405,7 @@ const ImageGallery = () => {
{type === "dateRange" ? (
- Date: Wed, 9 Jul 2025 13:09:44 +0530 Subject: [PATCH 2/3] In the Image Gallery, the filter drawer's date picker should default to the last 7 days (today minus 7 days). --- .../Gallary/DateRangePickerNoDefault.jsx | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/src/pages/Gallary/DateRangePickerNoDefault.jsx b/src/pages/Gallary/DateRangePickerNoDefault.jsx index 6c793b86..dd364daf 100644 --- a/src/pages/Gallary/DateRangePickerNoDefault.jsx +++ b/src/pages/Gallary/DateRangePickerNoDefault.jsx @@ -8,6 +8,15 @@ const DateRangePickerNoDefault = ({ const inputRef = useRef(null); useEffect(() => { + const today = new Date(); + const sevenDaysAgo = new Date(); + sevenDaysAgo.setDate(today.getDate() - 7); + + const formatDate = (date) => date.toISOString().split('T')[0]; + + const defaultStartDate = formatDate(sevenDaysAgo); + const defaultEndDate = formatDate(today); + const fp = flatpickr(inputRef.current, { mode: "range", dateFormat: "Y-m-d", @@ -24,7 +33,10 @@ const DateRangePickerNoDefault = ({ } }, onReady: (selectedDates, dateStr, instance) => { - if (startDate && endDate) { + if (!startDate && !endDate) { + instance.setDate([defaultStartDate, defaultEndDate], true); + onRangeChange?.({ startDate: defaultStartDate, endDate: defaultEndDate }); + } else if (startDate && endDate) { instance.setDate([startDate, endDate], true); } }, @@ -32,8 +44,12 @@ const DateRangePickerNoDefault = ({ if (startDate && endDate) { fp.setDate([startDate, endDate], false); - } else if (!startDate && !endDate) { + } else if (!startDate && !endDate && fp.selectedDates.length > 0) { fp.clear(); + onRangeChange?.({ startDate: defaultStartDate, endDate: defaultEndDate }); + } else if (!startDate && !endDate && fp.selectedDates.length === 0) { + fp.setDate([defaultStartDate, defaultEndDate], false); + onRangeChange?.({ startDate: defaultStartDate, endDate: defaultEndDate }); } return () => { @@ -52,4 +68,4 @@ const DateRangePickerNoDefault = ({ ); }; -export default DateRangePickerNoDefault; +export default DateRangePickerNoDefault; \ No newline at end of file -- 2.43.0 From 39dedd9b3724771625d79d4f0a2deac84413aecb Mon Sep 17 00:00:00 2001 From: Kartik sharma Date: Fri, 11 Jul 2025 11:40:09 +0530 Subject: [PATCH 3/3] Changes in Date picker . --- .../Gallary/DateRangePickerNoDefault.jsx | 71 ------------------- src/pages/Gallary/ImageGallary.jsx | 52 +++++++------- 2 files changed, 25 insertions(+), 98 deletions(-) delete mode 100644 src/pages/Gallary/DateRangePickerNoDefault.jsx diff --git a/src/pages/Gallary/DateRangePickerNoDefault.jsx b/src/pages/Gallary/DateRangePickerNoDefault.jsx deleted file mode 100644 index dd364daf..00000000 --- a/src/pages/Gallary/DateRangePickerNoDefault.jsx +++ /dev/null @@ -1,71 +0,0 @@ -import React, { useEffect, useRef } from "react"; - -const DateRangePickerNoDefault = ({ - onRangeChange, - startDate, - endDate, -}) => { - const inputRef = useRef(null); - - useEffect(() => { - const today = new Date(); - const sevenDaysAgo = new Date(); - sevenDaysAgo.setDate(today.getDate() - 7); - - const formatDate = (date) => date.toISOString().split('T')[0]; - - const defaultStartDate = formatDate(sevenDaysAgo); - const defaultEndDate = formatDate(today); - - const fp = flatpickr(inputRef.current, { - mode: "range", - dateFormat: "Y-m-d", - altInput: true, - altFormat: "d-m-Y", - static: true, - clickOpens: true, - onChange: (selectedDates, dateStr) => { - if (selectedDates.length === 2) { - const [startDateString, endDateString] = dateStr.split(" to "); - onRangeChange?.({ startDate: startDateString, endDate: endDateString }); - } else if (selectedDates.length === 0) { - onRangeChange?.({ startDate: "", endDate: "" }); - } - }, - onReady: (selectedDates, dateStr, instance) => { - if (!startDate && !endDate) { - instance.setDate([defaultStartDate, defaultEndDate], true); - onRangeChange?.({ startDate: defaultStartDate, endDate: defaultEndDate }); - } else if (startDate && endDate) { - instance.setDate([startDate, endDate], true); - } - }, - }); - - if (startDate && endDate) { - fp.setDate([startDate, endDate], false); - } else if (!startDate && !endDate && fp.selectedDates.length > 0) { - fp.clear(); - onRangeChange?.({ startDate: defaultStartDate, endDate: defaultEndDate }); - } else if (!startDate && !endDate && fp.selectedDates.length === 0) { - fp.setDate([defaultStartDate, defaultEndDate], false); - onRangeChange?.({ startDate: defaultStartDate, endDate: defaultEndDate }); - } - - return () => { - fp.destroy(); - }; - }, [onRangeChange, startDate, endDate]); - - return ( - - ); -}; - -export default DateRangePickerNoDefault; \ No newline at end of file diff --git a/src/pages/Gallary/ImageGallary.jsx b/src/pages/Gallary/ImageGallary.jsx index eeb6e872..172d9d8c 100644 --- a/src/pages/Gallary/ImageGallary.jsx +++ b/src/pages/Gallary/ImageGallary.jsx @@ -6,11 +6,10 @@ import { useSelector } from "react-redux"; import { useModal } from "./ModalContext"; import ImagePop from "./ImagePop"; import Avatar from "../../components/common/Avatar"; -import DateRangePicker from "../../components/common/DateRangePicker"; import eventBus from "../../services/eventBus"; import Breadcrumb from "../../components/common/Breadcrumb"; -import {formatUTCToLocalTime} from "../../utils/dateUtils"; -import DateRangePickerNoDefault from "./DateRangePickerNoDefault"; +import { formatUTCToLocalTime } from "../../utils/dateUtils"; +import DateRangePicker from "../../components/common/DateRangePicker"; const PAGE_SIZE = 10; const SCROLL_THRESHOLD = 5; @@ -208,9 +207,9 @@ const ImageGallery = () => { } else { id = batch[idKey]; } - + const name = batch[nameKey]; - + if (id && name && !map.has(id)) { map.set(id, name); } @@ -230,7 +229,7 @@ const ImageGallery = () => { } }); }); - return Array.from(uniqueUsersMap.entries()).sort((a, b) => a[1].localeCompare(b[1])); + return Array.from(uniqueUsersMap.entries()).sort((a, b) => a[1].localeCompare(b[1])); }, [allImagesData]); const buildings = getUniqueValuesWithIds("buildingId", "buildingName"); @@ -316,7 +315,7 @@ const ImageGallery = () => { return false; } if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) { - return false; + return false; } return oldVal !== newVal; }); @@ -405,10 +404,9 @@ const ImageGallery = () => {
{type === "dateRange" ? (
- @@ -439,12 +437,12 @@ const ImageGallery = () => { ); return ( -
- +
@@ -606,13 +604,13 @@ const ImageGallery = () => { >
- - -
+ + +
{renderFilterCategory("Date Range", [], "dateRange")} {renderFilterCategory("Building", buildings, "building")} @@ -622,7 +620,7 @@ const ImageGallery = () => { {renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")} {renderFilterCategory("Work Category", workCategories, "workCategory")} - +
-- 2.43.0