Changes in Date picker .
This commit is contained in:
parent
6f6e688249
commit
94358c7aa2
@ -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;
|
||||
@ -5,11 +5,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 SCROLL_THRESHOLD = 5;
|
||||
|
||||
@ -153,8 +152,15 @@ const ImageGallery = () => {
|
||||
const getUniqueValuesWithIds = useCallback((idKey, nameKey) => {
|
||||
const map = new Map();
|
||||
allImagesData.forEach(batch => {
|
||||
let id = idKey === "floorIds" ? batch.floorIds : batch[idKey];
|
||||
let id;
|
||||
if (idKey === "floorIds") {
|
||||
id = batch.floorIds;
|
||||
} else {
|
||||
id = batch[idKey];
|
||||
}
|
||||
|
||||
const name = batch[nameKey];
|
||||
|
||||
if (id && name && !map.has(id)) {
|
||||
map.set(id, name);
|
||||
}
|
||||
@ -175,7 +181,6 @@ 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");
|
||||
@ -240,7 +245,9 @@ const ImageGallery = () => {
|
||||
}
|
||||
return false;
|
||||
}
|
||||
if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) return false;
|
||||
if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) {
|
||||
return false;
|
||||
}
|
||||
return oldVal !== newVal;
|
||||
});
|
||||
|
||||
@ -319,10 +326,9 @@ const ImageGallery = () => {
|
||||
<div className="dropdown-content">
|
||||
{type === "dateRange" ? (
|
||||
<div className="date-range-inputs">
|
||||
<DateRangePickerNoDefault
|
||||
<DateRangePicker
|
||||
onRangeChange={setDateRange}
|
||||
endDateMode="today"
|
||||
endDateMode="today"
|
||||
startDate={selectedFilters.startDate}
|
||||
endDate={selectedFilters.endDate}
|
||||
/>
|
||||
@ -346,7 +352,12 @@ const ImageGallery = () => {
|
||||
|
||||
return (
|
||||
<div className={`gallery-container container-fluid ${isFilterPanelOpen ? "filter-panel-open-end" : ""}`}>
|
||||
<Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Gallary", link: null }]} />
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/" },
|
||||
{ label: "Gallary", link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
<div className="main-content">
|
||||
<button
|
||||
className={`filter-button btn-primary ${isFilterPanelOpen ? "closed-icon" : ""}`}
|
||||
@ -362,8 +373,12 @@ const ImageGallery = () => {
|
||||
) : images.length > 0 ? (
|
||||
images.map((batch) => {
|
||||
const firstDoc = batch.documents[0];
|
||||
const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""}`.trim();
|
||||
const date = formatUTCToLocalTime(firstDoc?.uploadedAt);
|
||||
const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""
|
||||
}`.trim();
|
||||
const date = formatUTCToLocalTime(firstDoc?.uploadedAt)
|
||||
|
||||
|
||||
|
||||
const showScrollButtons = batch.documents.length > SCROLL_THRESHOLD;
|
||||
|
||||
return (
|
||||
@ -373,8 +388,12 @@ const ImageGallery = () => {
|
||||
<div className="d-flex align-items-center mb-1">
|
||||
<Avatar size="xs" firstName={firstDoc?.uploadedBy?.firstName} lastName={firstDoc?.uploadedBy?.lastName} className="me-2" />
|
||||
<div className="d-flex flex-column align-items-start">
|
||||
<strong className="user-name-text">{userName}</strong>
|
||||
<span className="me-2">{date}</span>
|
||||
<strong className="user-name-text">
|
||||
{userName}
|
||||
</strong>
|
||||
<span className="me-2">
|
||||
{date}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -433,8 +452,12 @@ const ImageGallery = () => {
|
||||
<button type="button" className="btn-close" onClick={() => setIsFilterPanelOpen(false)} aria-label="Close" />
|
||||
</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>
|
||||
<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")}
|
||||
@ -444,6 +467,8 @@ const ImageGallery = () => {
|
||||
{renderFilterCategory("Activity", activities, "activity")}
|
||||
{renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
|
||||
{renderFilterCategory("Work Category", workCategories, "workCategory")}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user