admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Changes in Date picker .

Browse Source
This commit is contained in:
Kartik sharma 2025-07-11 11:40:09 +05:30 committed by pramod mahajan
parent 2f37dba1a2
commit 3fa5a2ba45
2 changed files with 25 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/pages/Gallary/DateRangePickerNoDefault.jsx
View File

@ -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 (
<input
type="text"
className="form-control form-control-sm ms-1"
placeholder="DD-MM-YYYY to DD-MM-YYYY"
id="flatpickr-range"
ref={inputRef}
/>
);
};
export default DateRangePickerNoDefault;

52
src/pages/Gallary/ImageGallary.jsx
View File

@ -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 = () => {
<div className="dropdown-content">
{type === "dateRange" ? (
<div className="date-range-inputs">
<DateRangePickerNoDefault
<DateRangePicker
onRangeChange={setDateRange}
defaultStartDate={selectedFilters.startDate || yesterday}
defaultEndDate={selectedFilters.endDate || moment().format('YYYY-MM-DD')}
endDateMode="today"
startDate={selectedFilters.startDate}
endDate={selectedFilters.endDate}
/>
@ -439,12 +437,12 @@ const ImageGallery = () => {
);
return (
<div className={`gallery-container container-fluid ${ isFilterPanelOpen ? "filter-panel-open-end" : "" }`}>
<Breadcrumb
data={[
{ label: "Home", link: "/" },
{ label: "Gallary", link: null },
]}
<div className={`gallery-container container-fluid ${isFilterPanelOpen ? "filter-panel-open-end" : ""}`}>
<Breadcrumb
data={[
{ label: "Home", link: "/" },
{ label: "Gallary", link: null },
]}
></Breadcrumb>
<div className="main-content">
<button
@ -470,8 +468,8 @@ const ImageGallery = () => {
const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""
}`.trim();
const date = formatUTCToLocalTime(firstDoc?.uploadedAt)
const showScrollButtons = batch.documents.length > SCROLL_THRESHOLD;
@ -491,7 +489,7 @@ const ImageGallery = () => {
{userName}
</strong>
<span className="me-2">
{date}
{date}
</span>
</div>
</div>
@ -606,13 +604,13 @@ const ImageGallery = () => {
></button>
</div>
<div className="filter-actions mt-auto mx-2">
<button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>
Clear All
</button>
<button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>
Apply Filters
</button>
</div>
<button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>
Clear All
</button>
<button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>
Apply Filters
</button>
</div>
<div className="offcanvas-body d-flex flex-column">
{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")}
</div>
</div>
</div>