Compare commits
No commits in common. "cb7df469c278125c05d160bce90ab7d3c72fc57e" and "58187db80ad7abe46ea83ea610c8a8610c5528c4" have entirely different histories.
cb7df469c2
...
58187db80a
@ -1,50 +1,17 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import moment from "moment";
|
||||
import { getProjectStatusName } from "../../utils/projectStatus";
|
||||
import {useProjectDetails, useUpdateProject} from "../../hooks/useProjects";
|
||||
import {useProjectDetails} from "../../hooks/useProjects";
|
||||
import {useParams} from "react-router-dom";
|
||||
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
|
||||
import {MANAGE_PROJECT} from "../../utils/constants";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import ManageProjectInfo from "./ManageProjectInfo";
|
||||
const AboutProject = () =>
|
||||
{
|
||||
const [ IsOpenModal, setIsOpenModal ] = useState( false )
|
||||
const {mutate: UpdateProjectDetails, isPending} = useUpdateProject( {
|
||||
onSuccessCallback: () =>
|
||||
{
|
||||
setIsOpenModal(false)
|
||||
}
|
||||
})
|
||||
const AboutProject = () => {
|
||||
const {projectId} = useParams();
|
||||
const manageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
const {projects_Details, isLoading, error,refetch} = useProjectDetails( projectId )
|
||||
const handleFormSubmit = ( updatedProject ) =>
|
||||
{
|
||||
if ( projects_Details?.id )
|
||||
{
|
||||
UpdateProjectDetails({ projectId: projects_Details?.id,updatedData: updatedProject,
|
||||
} );
|
||||
refetch()
|
||||
}
|
||||
};
|
||||
const {projects_Details,isLoading,error} = useProjectDetails(projectId)
|
||||
return (
|
||||
<>
|
||||
{IsOpenModal && (
|
||||
<GlobalModel isOpen={IsOpenModal} closeModal={()=>setIsOpenModal(false)}>
|
||||
<ManageProjectInfo
|
||||
project={projects_Details}
|
||||
handleSubmitForm={handleFormSubmit}
|
||||
onClose={() => setIsOpenModal( false )}
|
||||
isPending={isPending}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
{projects_Details && (
|
||||
<>
|
||||
<div className="card mb-6">
|
||||
<div className="card-header text-start">
|
||||
<h6 className="card-action-title mb-0">
|
||||
<div class="card-header text-start">
|
||||
<h6 class="card-action-title mb-0">
|
||||
{" "}
|
||||
<i className="fa fa-building rounded-circle text-primary"></i>
|
||||
<span className="ms-2">Project Profile</span>
|
||||
@ -83,7 +50,8 @@ const AboutProject = () =>
|
||||
<li className="d-flex align-items-center mb-3">
|
||||
<i className="bx bx-trophy"></i>
|
||||
<span className="fw-medium mx-2">Status:</span>{" "}
|
||||
<span>{getProjectStatusName(projects_Details.projectStatusId)}</span>
|
||||
<span>{projects_Details?.projectStatus?.status
|
||||
}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-3">
|
||||
<i className="bx bx-user"></i>
|
||||
@ -102,28 +70,10 @@ const AboutProject = () =>
|
||||
<div className="ms-4 text-start">{projects_Details.projectAddress}</div>
|
||||
)}
|
||||
</li>
|
||||
|
||||
<li className="d-flex justify-content-center mb-3">
|
||||
{manageProject && (
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm btn-primary ${
|
||||
!manageProject && "d-none"
|
||||
}`}
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#edit-project-modal"
|
||||
onClick={()=>setIsOpenModal(true)}
|
||||
>
|
||||
Modify Details
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading && <span>loading...</span>}
|
||||
</>
|
||||
|
||||
@ -149,7 +149,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
assignmentDate: new Date().toISOString(),
|
||||
workItemId: assignData?.workItem.id,
|
||||
};
|
||||
assignTask({payload:formattedData,workAreaId:assignData?.workArea?.id});
|
||||
|
||||
assignTask(formattedData);
|
||||
};
|
||||
|
||||
const closedModel = () => {
|
||||
|
||||
@ -63,9 +63,7 @@ const { mutate: UpdateTask, isPending } = useManageTask({
|
||||
showToast( response?.message, "success" )
|
||||
onClose()
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
});
|
||||
|
||||
const activityID = watch("activityID");
|
||||
|
||||
@ -84,13 +82,13 @@ const { mutate: UpdateTask, isPending } = useManageTask({
|
||||
|
||||
useEffect(() => {
|
||||
if (!workItem) return;
|
||||
console.log(workItem)
|
||||
|
||||
reset({
|
||||
activityID: String(
|
||||
workItem?.workItem?.activityId || workItem?.activityMaster?.id
|
||||
workItem?.workItem?.activityId || workItem?.activityId || ""
|
||||
),
|
||||
workCategoryId: String(
|
||||
workItem?.workItem?.workCategoryId || workItem?.workCategoryMaster?.id
|
||||
workItem?.workItem?.workCategoryId || workItem?.workCategoryId || ""
|
||||
),
|
||||
plannedWork:
|
||||
workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
|
||||
@ -98,13 +96,12 @@ useEffect(() => {
|
||||
workItem?.workItem?.completedWork || workItem?.completedWork || 0,
|
||||
comment: workItem?.workItem?.description || workItem?.description || "",
|
||||
});
|
||||
}, [workItem?.id,selectedActivity]);
|
||||
|
||||
}, [workItem?.id]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const selected = activities?.find((a) => a.id === activityID);
|
||||
setSelectedActivity( selected || null );
|
||||
setSelectedActivity(selected || null);
|
||||
}, [activityID, activities]);
|
||||
|
||||
const onSubmitForm = (data) =>
|
||||
|
||||
@ -14,8 +14,9 @@ const formatDate = (date) => {
|
||||
}
|
||||
return d.toLocaleDateString('en-CA');
|
||||
};
|
||||
const ManageProjectInfo = ({ project, handleSubmitForm, onClose,isPending }) => {
|
||||
const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
|
||||
const [CurrentProject, setCurrentProject] = useState();
|
||||
const [isloading, setLoading] = useState(false);
|
||||
const [addressLength, setAddressLength] = useState(0);
|
||||
const maxAddressLength = 500;
|
||||
|
||||
@ -115,10 +116,9 @@ const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
||||
|
||||
*/
|
||||
|
||||
const onSubmitForm = ( updatedProject ) =>
|
||||
{
|
||||
|
||||
handleSubmitForm(updatedProject);
|
||||
const onSubmitForm = (updatedProject) => {
|
||||
setLoading(true);
|
||||
handleSubmitForm(updatedProject, setLoading, reset);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
@ -313,15 +313,14 @@ const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 text-center">
|
||||
<button type="submit" className="btn btn-sm btn-primary me-3" disabled={isPending}>
|
||||
{isPending ? "Please Wait..." : project?.id ? "Update" : "Submit"}
|
||||
<button type="submit" className="btn btn-sm btn-primary me-3" disabled={isloading}>
|
||||
{isloading ? "Please Wait..." : project?.id ? "Update" : "Submit"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
onClick={handleCancel}
|
||||
aria-label="Close"
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
@ -78,7 +78,6 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
project={projects_Details}
|
||||
handleSubmitForm={handleFormSubmit}
|
||||
onClose={handleClose}
|
||||
isPending={isPending}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
@ -48,8 +48,9 @@
|
||||
}
|
||||
|
||||
.img-preview img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16 / 10;
|
||||
object-fit: cover;
|
||||
}
|
||||
max-width: 100%;
|
||||
max-height: 80vh;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
{
|
||||
"text": "Daily Expenses",
|
||||
"available": true,
|
||||
"link": "/activities/reports"
|
||||
"link": "/activities/gallary"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -390,15 +390,14 @@ export const useUpdateProject = ({ onSuccessCallback }) => {
|
||||
isSuccess,
|
||||
isError,
|
||||
} = useMutation({
|
||||
mutationFn: async ( {projectId, updatedData} ) =>
|
||||
{
|
||||
mutationFn: async ({ projectId, updatedData }) => {
|
||||
return await ProjectRepository.updateProject(projectId, updatedData);
|
||||
},
|
||||
|
||||
onSuccess: ( data, variables ) =>
|
||||
{
|
||||
const { projectId } = variables;
|
||||
|
||||
|
||||
queryClient.invalidateQueries({queryKey:["ProjectsList"]});
|
||||
queryClient.invalidateQueries( {queryKey: [ "projectinfo", projectId ]} );
|
||||
queryClient.invalidateQueries({queryKey:['basicProjectNameList']});
|
||||
@ -415,9 +414,7 @@ export const useUpdateProject = ({ onSuccessCallback }) => {
|
||||
}
|
||||
},
|
||||
|
||||
onError: ( error ) =>
|
||||
{
|
||||
console.log(error)
|
||||
onError: (error) => {
|
||||
showToast(error?.message || "Error while updating project", "error");
|
||||
},
|
||||
});
|
||||
|
||||
@ -173,13 +173,12 @@ export const useCreateTask = ( {onSuccessCallback, onErrorCallback} = {} ) =>
|
||||
{
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async ({payload,workAreaId}) => {
|
||||
mutationFn: async (payload) => {
|
||||
return await TasksRepository.assignTask(payload);
|
||||
},
|
||||
onSuccess: ( _, variables ) =>
|
||||
{
|
||||
queryClient.invalidateQueries( {queryKey: [ "taskList" ]} );
|
||||
queryClient.invalidateQueries( {queryKey: [ "WorkItems", variables?.workAreaId ]} );
|
||||
queryClient.invalidateQueries({queryKey:["taskList"]});
|
||||
showToast( "Task Assigned Successfully.", "success" );
|
||||
if (onSuccessCallback) onSuccessCallback(variables);
|
||||
},
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
// ImageGallery.js
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import "./ImageGallery.css";
|
||||
import { ImageGalleryAPI } from "./ImageGalleryAPI";
|
||||
@ -6,19 +7,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";
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
const SCROLL_THRESHOLD = 5;
|
||||
import DateRangePicker from "../../components/common/DateRangePicker"; // Assuming this is the path to your DateRangePicker
|
||||
|
||||
const ImageGallery = () => {
|
||||
const [images, setImages] = useState([]);
|
||||
const [allImagesData, setAllImagesData] = useState([]);
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const selectedProjectId = useSelector((store) => store.localVariables.projectId);
|
||||
const { openModal } = useModal();
|
||||
|
||||
@ -59,10 +51,8 @@ const ImageGallery = () => {
|
||||
const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
|
||||
const [hoveredImage, setHoveredImage] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
|
||||
const imageGroupRefs = useRef({});
|
||||
const loaderRef = useRef(null);
|
||||
const filterPanelRef = useRef(null);
|
||||
const filterButtonRef = useRef(null);
|
||||
|
||||
@ -78,159 +68,61 @@ const ImageGallery = () => {
|
||||
}
|
||||
};
|
||||
|
||||
if (isFilterPanelOpen) {
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
} else {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, [isFilterPanelOpen]);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedProjectId) {
|
||||
setImages([]);
|
||||
setAllImagesData([]);
|
||||
setLoading(false);
|
||||
setHasMore(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setImages([]);
|
||||
setPageNumber(1);
|
||||
setHasMore(true);
|
||||
setLoading(true);
|
||||
|
||||
setAllImagesData([]);
|
||||
fetchImages(1, appliedFilters, true);
|
||||
ImageGalleryAPI.ImagesGet(selectedProjectId, appliedFilters)
|
||||
.then((res) => {
|
||||
setImages(res.data);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Error fetching images:", err);
|
||||
setImages([]);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}, [selectedProjectId, appliedFilters]);
|
||||
|
||||
const fetchImages = useCallback(async (page, filters) => {
|
||||
if (!selectedProjectId) return;
|
||||
|
||||
try {
|
||||
if (page === 1) {
|
||||
setLoading(true);
|
||||
} else {
|
||||
setLoadingMore(true);
|
||||
}
|
||||
|
||||
const res = await ImageGalleryAPI.ImagesGet(selectedProjectId, filters, page, PAGE_SIZE);
|
||||
const newBatches = res.data || [];
|
||||
const receivedCount = newBatches.length;
|
||||
|
||||
setImages((prevImages) => {
|
||||
const uniqueNewBatches = newBatches.filter(
|
||||
(newBatch) => !prevImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId)
|
||||
);
|
||||
return [...prevImages, ...uniqueNewBatches];
|
||||
});
|
||||
|
||||
setAllImagesData((prevAllImages) => {
|
||||
const uniqueAllImages = newBatches.filter(
|
||||
(newBatch) => !prevAllImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId)
|
||||
);
|
||||
return [...prevAllImages, ...uniqueAllImages];
|
||||
});
|
||||
|
||||
setHasMore(receivedCount === PAGE_SIZE);
|
||||
} catch (err) {
|
||||
console.error("Error fetching images:", err);
|
||||
if (page === 1) {
|
||||
setImages([]);
|
||||
setAllImagesData([]);
|
||||
}
|
||||
setHasMore(false);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setLoadingMore(false);
|
||||
}
|
||||
}, [selectedProjectId]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleExternalEvent = (data) => {
|
||||
if (selectedProjectId === data.projectId) {
|
||||
setImages([]);
|
||||
setAllImagesData([]);
|
||||
setPageNumber(1);
|
||||
setHasMore(true);
|
||||
fetchImages(1, appliedFilters, true);
|
||||
}
|
||||
};
|
||||
|
||||
eventBus.on("image_gallery", handleExternalEvent);
|
||||
|
||||
return () => {
|
||||
eventBus.off("image_gallery", handleExternalEvent);
|
||||
};
|
||||
}, [appliedFilters, fetchImages, selectedProjectId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loaderRef.current) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && hasMore && !loadingMore && !loading) {
|
||||
setPageNumber((prevPageNumber) => prevPageNumber + 1);
|
||||
const getUniqueValuesWithIds = useCallback(
|
||||
(idKey, nameKey) => {
|
||||
const uniqueMap = new Map();
|
||||
images.forEach((img) => {
|
||||
if (img[idKey] && img[nameKey]) {
|
||||
uniqueMap.set(img[idKey], img[nameKey]);
|
||||
}
|
||||
},
|
||||
{
|
||||
root: null,
|
||||
rootMargin: "200px",
|
||||
threshold: 0.1,
|
||||
}
|
||||
);
|
||||
|
||||
observer.observe(loaderRef.current);
|
||||
|
||||
return () => {
|
||||
if (loaderRef.current) {
|
||||
observer.unobserve(loaderRef.current);
|
||||
}
|
||||
};
|
||||
}, [hasMore, loadingMore, loading]);
|
||||
|
||||
useEffect(() => {
|
||||
if (pageNumber > 1) {
|
||||
fetchImages(pageNumber, appliedFilters);
|
||||
}
|
||||
}, [pageNumber, fetchImages, appliedFilters]);
|
||||
|
||||
const getUniqueValuesWithIds = useCallback((idKey, nameKey) => {
|
||||
const map = new Map();
|
||||
allImagesData.forEach(batch => {
|
||||
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);
|
||||
}
|
||||
});
|
||||
return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
|
||||
}, [allImagesData]);
|
||||
});
|
||||
return Array.from(uniqueMap.entries());
|
||||
},
|
||||
[images]
|
||||
);
|
||||
|
||||
const getUniqueUploadedByUsers = useCallback(() => {
|
||||
const uniqueUsersMap = new Map();
|
||||
allImagesData.forEach(batch => {
|
||||
batch.documents.forEach(doc => {
|
||||
if (doc.uploadedBy && doc.uploadedBy.id) {
|
||||
const fullName = `${doc.uploadedBy.firstName || ""} ${doc.uploadedBy.lastName || ""}`.trim();
|
||||
if (fullName) {
|
||||
uniqueUsersMap.set(doc.uploadedBy.id, fullName);
|
||||
}
|
||||
images.forEach((img) => {
|
||||
if (img.uploadedBy && img.uploadedBy.id) {
|
||||
const fullName = `${img.uploadedBy.firstName || ""} ${
|
||||
img.uploadedBy.lastName || ""
|
||||
}`.trim();
|
||||
if (fullName) {
|
||||
uniqueUsersMap.set(img.uploadedBy.id, fullName);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
return Array.from(uniqueUsersMap.entries()).sort((a, b) => a[1].localeCompare(b[1]));
|
||||
}, [allImagesData]);
|
||||
return Array.from(uniqueUsersMap.entries());
|
||||
}, [images]);
|
||||
|
||||
const buildings = getUniqueValuesWithIds("buildingId", "buildingName");
|
||||
const floors = getUniqueValuesWithIds("floorIds", "floorName");
|
||||
@ -299,35 +191,9 @@ const ImageGallery = () => {
|
||||
startDate: selectedFilters.startDate || null,
|
||||
endDate: selectedFilters.endDate || null,
|
||||
};
|
||||
|
||||
const areFiltersChanged = Object.keys(payload).some(key => {
|
||||
const oldVal = appliedFilters[key];
|
||||
const newVal = payload[key];
|
||||
|
||||
if (Array.isArray(oldVal) && Array.isArray(newVal)) {
|
||||
if (oldVal.length !== newVal.length) return true;
|
||||
const oldSet = new Set(oldVal);
|
||||
const newSet = new Set(newVal);
|
||||
if (oldSet.size !== newSet.size) return true;
|
||||
for (const item of newSet) {
|
||||
if (!oldSet.has(item)) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) {
|
||||
return false;
|
||||
}
|
||||
return oldVal !== newVal;
|
||||
});
|
||||
|
||||
if (areFiltersChanged) {
|
||||
setAppliedFilters(payload);
|
||||
setImages([]);
|
||||
setPageNumber(1);
|
||||
setHasMore(true);
|
||||
}
|
||||
// Removed setIsFilterPanelOpen(false); to keep the drawer open
|
||||
}, [selectedFilters, appliedFilters]);
|
||||
setAppliedFilters(payload);
|
||||
setIsFilterPanelOpen(false);
|
||||
}, [selectedFilters]);
|
||||
|
||||
const handleClearAllFilters = useCallback(() => {
|
||||
const initialStateSelected = {
|
||||
@ -353,11 +219,49 @@ const ImageGallery = () => {
|
||||
endDate: null,
|
||||
};
|
||||
setAppliedFilters(initialStateApplied);
|
||||
setImages([]);
|
||||
setPageNumber(1);
|
||||
setHasMore(true);
|
||||
}, []);
|
||||
|
||||
const filteredImages = images.filter((img) => {
|
||||
const uploadedAtMoment = moment(img.uploadedAt);
|
||||
const startDateMoment = appliedFilters.startDate
|
||||
? moment(appliedFilters.startDate)
|
||||
: null;
|
||||
const endDateMoment = appliedFilters.endDate
|
||||
? moment(appliedFilters.endDate)
|
||||
: null;
|
||||
|
||||
const isWithinDateRange =
|
||||
(!startDateMoment || uploadedAtMoment.isSameOrAfter(startDateMoment, "day")) &&
|
||||
(!endDateMoment || uploadedAtMoment.isSameOrBefore(endDateMoment, "day"));
|
||||
|
||||
const passesCategoryFilters =
|
||||
(appliedFilters.buildingIds === null ||
|
||||
appliedFilters.buildingIds.includes(img.buildingId)) &&
|
||||
(appliedFilters.floorIds === null ||
|
||||
appliedFilters.floorIds.includes(img.floorIds)) &&
|
||||
(appliedFilters.activityIds === null ||
|
||||
appliedFilters.activityIds.includes(img.activityId)) &&
|
||||
(appliedFilters.workAreaIds === null ||
|
||||
appliedFilters.workAreaIds.includes(img.workAreaId)) &&
|
||||
(appliedFilters.uploadedByIds === null ||
|
||||
appliedFilters.uploadedByIds.includes(img.uploadedBy?.id)) &&
|
||||
(appliedFilters.workCategoryIds === null ||
|
||||
appliedFilters.workCategoryIds.includes(img.workCategoryId));
|
||||
|
||||
return isWithinDateRange && passesCategoryFilters;
|
||||
});
|
||||
|
||||
const imagesByActivityUser = {};
|
||||
filteredImages.forEach((img) => {
|
||||
const userName = `${img.uploadedBy?.firstName || ""} ${
|
||||
img.uploadedBy?.lastName || ""
|
||||
}`.trim();
|
||||
const workArea = img.workAreaName || "Unknown";
|
||||
const key = `${img.activityName}__${userName}__${workArea}`;
|
||||
if (!imagesByActivityUser[key]) imagesByActivityUser[key] = [];
|
||||
imagesByActivityUser[key].push(img);
|
||||
});
|
||||
|
||||
const scrollLeft = useCallback((key) => {
|
||||
imageGroupRefs.current[key]?.scrollBy({ left: -200, behavior: "smooth" });
|
||||
}, []);
|
||||
@ -367,8 +271,8 @@ const ImageGallery = () => {
|
||||
}, []);
|
||||
|
||||
const renderFilterCategory = (label, items, type) => (
|
||||
<div className={`dropdown my-2 ${collapsedFilters[type] ? "collapsed" : ""}`}>
|
||||
<div className="dropdown-header bg-label-primary" onClick={() => toggleCollapse(type)}>
|
||||
<div className={`dropdown ${collapsedFilters[type] ? "collapsed" : ""}`}>
|
||||
<div className="dropdown-header" onClick={() => toggleCollapse(type)}>
|
||||
<strong>{label}</strong>
|
||||
<div className="header-controls">
|
||||
{type === "dateRange" && (selectedFilters.startDate || selectedFilters.endDate) && (
|
||||
@ -403,15 +307,7 @@ const ImageGallery = () => {
|
||||
{!collapsedFilters[type] && (
|
||||
<div className="dropdown-content">
|
||||
{type === "dateRange" ? (
|
||||
<div className="date-range-inputs">
|
||||
<DateRangePicker
|
||||
onRangeChange={setDateRange}
|
||||
defaultStartDate={selectedFilters.startDate || yesterday}
|
||||
defaultEndDate={selectedFilters.endDate || moment().format('YYYY-MM-DD')}
|
||||
startDate={selectedFilters.startDate}
|
||||
endDate={selectedFilters.endDate}
|
||||
/>
|
||||
</div>
|
||||
null
|
||||
) : (
|
||||
items.map((item) => {
|
||||
const itemId = item[0];
|
||||
@ -438,59 +334,38 @@ const ImageGallery = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`gallery-container container-fluid ${ isFilterPanelOpen ? "filter-panel-open-end" : "" }`}>
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/" },
|
||||
{ label: "Gallary", link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
<div className={`gallery-container ${isFilterPanelOpen ? "filter-panel-open" : ""}`}>
|
||||
<div className="main-content">
|
||||
<button
|
||||
className={`filter-button btn-primary ${isFilterPanelOpen ? "closed-icon" : ""}`}
|
||||
onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
|
||||
ref={filterButtonRef}
|
||||
>
|
||||
{isFilterPanelOpen ? (
|
||||
<i className="fa-solid fa-times fs-5"></i>
|
||||
) : (
|
||||
<><i className="fa-solid fa-filter ms-1 fs-5"></i></>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="activity-section">
|
||||
{loading && pageNumber === 1 ? (
|
||||
{loading ? (
|
||||
<div className="spinner-container">
|
||||
<div className="spinner" />
|
||||
</div>
|
||||
) : 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 showScrollButtons = batch.documents.length > SCROLL_THRESHOLD;
|
||||
) : Object.entries(imagesByActivityUser).length > 0 ? (
|
||||
Object.entries(imagesByActivityUser).map(([key, imgs]) => {
|
||||
const [activity, userName, workArea] = key.split("__");
|
||||
const { buildingName, floorName, uploadedAt, workCategoryName } = imgs[0];
|
||||
const date = moment(uploadedAt).format("YYYY-MM-DD");
|
||||
const time = moment(uploadedAt).format("hh:mm A");
|
||||
|
||||
return (
|
||||
<div key={batch.batchId} className="grouped-section">
|
||||
<div key={key} className="grouped-section">
|
||||
<div className="group-heading">
|
||||
<div className="d-flex flex-column">
|
||||
<div className="d-flex align-items-center mb-1">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={firstDoc?.uploadedBy?.firstName}
|
||||
lastName={firstDoc?.uploadedBy?.lastName}
|
||||
size="xxs"
|
||||
firstName={imgs[0].uploadedBy?.firstName}
|
||||
lastName={imgs[0].uploadedBy?.lastName}
|
||||
className="me-2"
|
||||
/>
|
||||
<div className="d-flex flex-column align-items-start">
|
||||
<strong className="user-name-text">
|
||||
{userName}
|
||||
{imgs[0].uploadedBy?.firstName}{" "}
|
||||
{imgs[0].uploadedBy?.lastName}
|
||||
</strong>
|
||||
<span className="me-2">
|
||||
{date}
|
||||
{date} {time}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -498,14 +373,13 @@ const ImageGallery = () => {
|
||||
|
||||
<div className="location-line">
|
||||
<div>
|
||||
{batch.buildingName} > {batch.floorName} >{" "}
|
||||
<strong>{batch.workAreaName || "Unknown"} >{" "}
|
||||
{batch.activityName}</strong>
|
||||
{buildingName} > {floorName} > <strong> {workArea} >{" "}
|
||||
{activity}</strong>
|
||||
</div>
|
||||
{batch.workCategoryName && (
|
||||
{workCategoryName && (
|
||||
<div className="work-category-display ms-2">
|
||||
<span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1">
|
||||
{batch.workCategoryName}
|
||||
{workCategoryName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@ -513,36 +387,34 @@ const ImageGallery = () => {
|
||||
</div>
|
||||
|
||||
<div className="image-group-wrapper">
|
||||
{showScrollButtons && (
|
||||
<button
|
||||
className="scroll-arrow left-arrow"
|
||||
onClick={() => scrollLeft(batch.batchId)}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="scroll-arrow left-arrow"
|
||||
onClick={() => scrollLeft(key)}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<div
|
||||
className="image-group-horizontal"
|
||||
ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
|
||||
ref={(el) => (imageGroupRefs.current[key] = el)}
|
||||
>
|
||||
{batch.documents.map((doc, idx) => {
|
||||
const hoverDate = moment(doc.uploadedAt).format("DD-MM-YYYY");
|
||||
const hoverTime = moment(doc.uploadedAt).format("hh:mm A");
|
||||
{imgs.map((img, idx) => {
|
||||
const hoverDate = moment(img.uploadedAt).format("YYYY-MM-DD");
|
||||
const hoverTime = moment(img.uploadedAt).format("hh:mm A");
|
||||
|
||||
return (
|
||||
<div
|
||||
key={doc.id}
|
||||
key={img.imageUrl}
|
||||
className="image-card"
|
||||
onClick={() =>
|
||||
openModal(<ImagePop batch={batch} initialIndex={idx} />)
|
||||
openModal(<ImagePop images={imgs} initialIndex={idx} />)
|
||||
}
|
||||
onMouseEnter={() => setHoveredImage(doc)}
|
||||
onMouseEnter={() => setHoveredImage(img)}
|
||||
onMouseLeave={() => setHoveredImage(null)}
|
||||
>
|
||||
<div className="image-wrapper">
|
||||
<img src={doc.url} alt={`Image ${idx + 1}`} />
|
||||
<img src={img.imageUrl} alt={`Image ${idx + 1}`} />
|
||||
</div>
|
||||
{hoveredImage === doc && (
|
||||
{hoveredImage === img && (
|
||||
<div className="image-hover-description">
|
||||
<p>
|
||||
<strong>Date:</strong> {hoverDate}
|
||||
@ -551,7 +423,7 @@ const ImageGallery = () => {
|
||||
<strong>Time:</strong> {hoverTime}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Activity:</strong> {batch.activityName}
|
||||
<strong>Activity:</strong> {img.activityName}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@ -559,61 +431,61 @@ const ImageGallery = () => {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{showScrollButtons && (
|
||||
<button
|
||||
className="scroll-arrow right-arrow"
|
||||
onClick={() => scrollRight(batch.batchId)}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="scroll-arrow right-arrow"
|
||||
onClick={() => scrollRight(key)}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
!loading && <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>
|
||||
<p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>
|
||||
No images match the selected filters.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div ref={loaderRef} style={{ height: '50px', margin: '20px 0', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
{loadingMore && hasMore && <div className="spinner" />}
|
||||
{!hasMore && !loading && images.length > 0 && (
|
||||
<p style={{ color: '#aaa' }}>You've reached the end of the images.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`offcanvas offcanvas-end ${isFilterPanelOpen ? "show" : ""}`}
|
||||
tabIndex="-1"
|
||||
id="filterOffcanvas"
|
||||
aria-labelledby="filterOffcanvasLabel"
|
||||
ref={filterPanelRef}
|
||||
>
|
||||
<div className="offcanvas-header">
|
||||
<h5 className="offcanvas-title" id="filterOffcanvasLabel">
|
||||
Filters
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={() => setIsFilterPanelOpen(false)}
|
||||
aria-label="Close"
|
||||
></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 className="filter-drawer-wrapper">
|
||||
<button
|
||||
className={`filter-button btn-primary ${isFilterPanelOpen ? "" : "closed-icon"}`}
|
||||
onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
|
||||
ref={filterButtonRef}
|
||||
>
|
||||
{isFilterPanelOpen ? (
|
||||
<>
|
||||
Filter <span className="ms-1">✖</span> {/* Added ms-1 for spacing */}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="fa-solid fa-filter ms-1 fs-5"></i>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<div className={`filter-panel ${isFilterPanelOpen ? "open" : ""}`} ref={filterPanelRef}>
|
||||
<div className={`dropdown ${collapsedFilters.dateRange ? 'collapsed' : ''}`}>
|
||||
<div className="dropdown-header" onClick={() => toggleCollapse('dateRange')}>
|
||||
<strong>Date Range</strong>
|
||||
|
||||
<span className="collapse-icon">
|
||||
{collapsedFilters.dateRange ? '+' : '-'}
|
||||
</span>
|
||||
</div>
|
||||
{!collapsedFilters.dateRange && (
|
||||
<div className="datepicker" >
|
||||
<DateRangePicker
|
||||
onRangeChange={setDateRange}
|
||||
defaultStartDate={selectedFilters.startDate || yesterday}
|
||||
defaultEndDate={selectedFilters.endDate || moment().format('YYYY-MM-DD')}
|
||||
startDate={selectedFilters.startDate}
|
||||
endDate={selectedFilters.endDate}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="offcanvas-body d-flex flex-column">
|
||||
{renderFilterCategory("Date Range", [], "dateRange")}
|
||||
{renderFilterCategory("Building", buildings, "building")}
|
||||
{renderFilterCategory("Floor", floors, "floor")}
|
||||
{renderFilterCategory("Work Area", workAreas, "workArea")}
|
||||
@ -621,7 +493,14 @@ const ImageGallery = () => {
|
||||
{renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
|
||||
{renderFilterCategory("Work Category", workCategories, "workCategory")}
|
||||
|
||||
|
||||
<div className="filter-actions">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
/* ImageGallery.css */
|
||||
.gallery-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 50px;
|
||||
gap: 4px;
|
||||
/* padding: 25px; */
|
||||
padding: 25px;
|
||||
font-family: sans-serif;
|
||||
height: calc(100vh - 20px);
|
||||
box-sizing: border-box;
|
||||
background-color: #f7f9fc;
|
||||
transition: grid-template-columns 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@ -65,9 +69,8 @@
|
||||
transition: background-color 0.2s ease, box-shadow 0.2s ease, width 0.3s ease-in-out,
|
||||
height 0.3s ease-in-out, border-radius 0.3s ease-in-out, padding 0.3s ease-in-out;
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
z-index: 100;
|
||||
@ -137,7 +140,7 @@
|
||||
border-radius: 0 0 4px 4px;
|
||||
max-height: 150px;
|
||||
/* Default max-height for scrollable dropdowns */
|
||||
|
||||
overflow-y: auto;
|
||||
/* Default overflow for scrollable dropdowns */
|
||||
transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
|
||||
}
|
||||
@ -194,6 +197,9 @@
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.dropdown-content label:hover {
|
||||
background-color: #eef2ff;
|
||||
}
|
||||
|
||||
.dropdown-content input[type="checkbox"] {
|
||||
-webkit-appearance: none;
|
||||
@ -394,7 +400,6 @@
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scroll-behavior: smooth;
|
||||
width: 100%;
|
||||
margin-left: 34px;
|
||||
}
|
||||
|
||||
.scroll-arrow {
|
||||
@ -538,4 +543,4 @@ hr {
|
||||
.datepicker {
|
||||
margin-right: 135px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
import { api } from "../../utils/axiosClient";
|
||||
|
||||
export const ImageGalleryAPI = {
|
||||
ImagesGet: (projectId, filter, pageNumber, pageSize) => {
|
||||
|
||||
ImagesGet: (projectId, filter) => {
|
||||
const payloadJsonString = JSON.stringify(filter);
|
||||
// Corrected API endpoint with pagination parameters
|
||||
return api.get(`/api/image/images/${projectId}?filter=${payloadJsonString}&pageNumber=${pageNumber}&pageSize=${pageSize}`);
|
||||
return api.get(`/api/image/images/${projectId}?filter=${payloadJsonString}`)
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -2,38 +2,32 @@ import React, { useState, useEffect } from "react";
|
||||
import "./ImagePop.css";
|
||||
import { useModal } from "./ModalContext";
|
||||
import moment from "moment";
|
||||
import {formatUTCToLocalTime} from "../../utils/dateUtils";
|
||||
|
||||
const ImagePop = ({ batch, initialIndex = 0 }) => {
|
||||
const ImagePop = ({ images, initialIndex = 0 }) => {
|
||||
const { closeModal } = useModal();
|
||||
// State to keep track of the currently displayed image's index
|
||||
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
||||
|
||||
// Effect to update currentIndex if the initialIndex prop changes
|
||||
// Effect to update currentIndex if the initialIndex prop changes (e.g., if the modal is reused)
|
||||
useEffect(() => {
|
||||
setCurrentIndex(initialIndex);
|
||||
}, [initialIndex, batch]);
|
||||
}, [initialIndex, images]);
|
||||
|
||||
// If no batch or documents are provided, don't render
|
||||
if (!batch || !batch.documents || batch.documents.length === 0) return null;
|
||||
// If no images are provided or the array is empty, don't render
|
||||
if (!images || images.length === 0) return null;
|
||||
|
||||
// Get the current image document from the batch's documents array
|
||||
const image = batch.documents[currentIndex];
|
||||
// Get the current image based on currentIndex
|
||||
const image = images[currentIndex];
|
||||
|
||||
// Fallback if for some reason the image at the current index doesn't exist
|
||||
if (!image) return null;
|
||||
|
||||
// Format details for display from the individual image document
|
||||
// Format details for display
|
||||
const fullName = `${image.uploadedBy?.firstName || ""} ${
|
||||
image.uploadedBy?.lastName || ""
|
||||
}`.trim();
|
||||
const date = formatUTCToLocalTime(image.uploadedAt);
|
||||
|
||||
// Location and category details from the 'batch' object (as previously corrected)
|
||||
const buildingName = batch.buildingName;
|
||||
const floorName = batch.floorName;
|
||||
const workAreaName = batch.workAreaName;
|
||||
const activityName = batch.activityName;
|
||||
const batchComment = batch.comment;
|
||||
const date = moment(image.uploadedAt).format("YYYY-MM-DD");
|
||||
const time = moment(image.uploadedAt).format("hh:mm A");
|
||||
|
||||
// Handler for navigating to the previous image
|
||||
const handlePrev = () => {
|
||||
@ -43,13 +37,13 @@ const ImagePop = ({ batch, initialIndex = 0 }) => {
|
||||
// Handler for navigating to the next image
|
||||
const handleNext = () => {
|
||||
setCurrentIndex((prevIndex) =>
|
||||
Math.min(batch.documents.length - 1, prevIndex + 1)
|
||||
Math.min(images.length - 1, prevIndex + 1)
|
||||
);
|
||||
};
|
||||
|
||||
// Determine if previous/next buttons should be enabled/visible
|
||||
const hasPrev = currentIndex > 0;
|
||||
const hasNext = currentIndex < batch.documents.length - 1;
|
||||
const hasNext = currentIndex < images.length - 1;
|
||||
|
||||
return (
|
||||
<div className="image-modal-overlay">
|
||||
@ -67,7 +61,7 @@ const ImagePop = ({ batch, initialIndex = 0 }) => {
|
||||
)}
|
||||
|
||||
{/* The main image display */}
|
||||
<img src={image.url} alt="Preview" className="modal-image" />
|
||||
<img src={image.imageUrl} alt="Preview" className="modal-image" />
|
||||
|
||||
{/* Next button, only shown if there's a next image */}
|
||||
{hasNext && (
|
||||
@ -82,15 +76,14 @@ const ImagePop = ({ batch, initialIndex = 0 }) => {
|
||||
<strong>👤 Uploaded By:</strong> {fullName}
|
||||
</p>
|
||||
<p>
|
||||
<strong>📅 Date:</strong> {date}
|
||||
<strong>📅 Date:</strong> {date} {time}
|
||||
</p>
|
||||
<p>
|
||||
<strong>🏢 Location:</strong> {buildingName} > {floorName} >{" "}
|
||||
{workAreaName || "Unknown"} > {activityName}
|
||||
<strong>🏢 Location:</strong> {image.buildingName} >{" "}
|
||||
{image.floorName} > {image.activityName}
|
||||
</p>
|
||||
<p>
|
||||
{/* Display the comment from the batch object */}
|
||||
<strong>📝 Comments:</strong> {batchComment || "N/A"}
|
||||
<strong>📝 Comments:</strong> {image.comment}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -141,11 +141,11 @@ const ProjectDetails = () => {
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
if (msg.keyword === "Update_Project" && projects_Details.id === msg.response.id) {
|
||||
if (msg.keyword === "Update_Project" && project.id === msg.response.id) {
|
||||
refetch()
|
||||
}
|
||||
},
|
||||
[projects_Details, handleDataChange]
|
||||
[project, handleDataChange]
|
||||
);
|
||||
useEffect(() => {
|
||||
eventBus.on("project", handler);
|
||||
|
||||
@ -25,13 +25,12 @@ const ProjectList = () => {
|
||||
const { profile: loginUser } = useProfile();
|
||||
const [listView, setListView] = useState(false);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
const { projects, loading, error, refetch } = useProjects();
|
||||
const [projectList, setProjectList] = useState([]);
|
||||
|
||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||
const [HasManageProject, setHasManageProject] = useState(HasManageProjectPermission);
|
||||
|
||||
const [HasManageProject, setHasManageProject] = useState(
|
||||
HasManageProjectPermission
|
||||
);
|
||||
const { mutate: createProject } = useCreateProject({
|
||||
onSuccessCallback: () => {
|
||||
setShowModal(false);
|
||||
@ -44,7 +43,7 @@ const ProjectList = () => {
|
||||
"603e994b-a27f-4e5d-a251-f3d69b0498ba",
|
||||
"ef1c356e-0fe0-42df-a5d3-8daee355492d",
|
||||
"cdad86aa-8a56-4ff4-b633-9c629057dfef",
|
||||
"33deaef9-9af1-4f2a-b443-681ea0d04f81",
|
||||
"33deaef9-9af1-4f2a-b443-681ea0d04f81",
|
||||
]);
|
||||
|
||||
const handleShow = () => setShowModal(true);
|
||||
@ -63,32 +62,32 @@ const ProjectList = () => {
|
||||
.filter((statusId) => grouped[statusId])
|
||||
.flatMap((statusId) =>
|
||||
grouped[statusId].sort((a, b) =>
|
||||
a.name.toLowerCase().localeCompare(b.name.toLowerCase())
|
||||
a.name.toLowerCase()?.localeCompare(b.name.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
setProjectList((prev) => {
|
||||
const isSame = JSON.stringify(prev) === JSON.stringify(sortedGrouped);
|
||||
return isSame ? prev : sortedGrouped;
|
||||
});
|
||||
setProjectList(sortedGrouped);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && projects) {
|
||||
sortingProject(projects);
|
||||
}
|
||||
}, [projects, loading, selectedStatuses]); // Include selectedStatuses if it changes filtering
|
||||
sortingProject(projects);
|
||||
}, [projects, loginUser?.projects, loading]);
|
||||
|
||||
useEffect(() => {
|
||||
setHasManageProject(loginUser ? HasManageProjectPermission : false);
|
||||
if (loginUser) {
|
||||
setHasManageProject(HasManageProjectPermission);
|
||||
} else {
|
||||
setHasManageProject(false);
|
||||
}
|
||||
}, [loginUser, HasManageProjectPermission]);
|
||||
|
||||
const handleSubmitForm = (newProject, setLoading, reset) => {
|
||||
setLoading(true);
|
||||
|
||||
|
||||
const handleSubmitForm = (newProject, setloading, reset) => {
|
||||
setloading(true);
|
||||
createProject(newProject, {
|
||||
onSettled: () => {
|
||||
setLoading(false);
|
||||
setloading(false);
|
||||
reset();
|
||||
},
|
||||
});
|
||||
@ -115,15 +114,11 @@ const ProjectList = () => {
|
||||
return matchesStatus && matchesSearch;
|
||||
});
|
||||
|
||||
const totalPages = Math.ceil(filteredProjects.length / ITEMS_PER_PAGE);
|
||||
|
||||
const {
|
||||
currentItems,
|
||||
currentPage,
|
||||
paginate,
|
||||
setCurrentPage,
|
||||
} = usePagination(filteredProjects, ITEMS_PER_PAGE);
|
||||
const totalPages = Math.ceil( filteredProjects.length / ITEMS_PER_PAGE );
|
||||
|
||||
const {currentItems,currentPage,paginate,setCurrentPage} = usePagination(filteredProjects, ITEMS_PER_PAGE)
|
||||
|
||||
useEffect(() => {
|
||||
const tooltipTriggerList = Array.from(
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
@ -131,6 +126,8 @@ const ProjectList = () => {
|
||||
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
|
||||
@ -80,8 +80,7 @@ const ProjectListView = ({ projectData, recall }) => {
|
||||
<GlobalModel isOpen={showModal} closeModal={handleClose}> <ManageProjectInfo
|
||||
project={projects_Details}
|
||||
handleSubmitForm={handleFormSubmit}
|
||||
onClose={handleClose}
|
||||
isPending={isPending}
|
||||
onClose={handleClose}
|
||||
/></GlobalModel>
|
||||
)}
|
||||
|
||||
|
||||
@ -103,17 +103,6 @@ export function startSignalR(loggedUser) {
|
||||
queryClient
|
||||
eventBus.emit("employee", data);
|
||||
}
|
||||
|
||||
if (data.keyword == "Task_Report") {
|
||||
if(data.numberOfImages > 0){
|
||||
eventBus.emit("image_gallery", data);
|
||||
}
|
||||
}
|
||||
if (data.keyword == "Task_Comment") {
|
||||
if(data.numberOfImages > 0){
|
||||
eventBus.emit("image_gallery", data);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import moment from "moment";
|
||||
|
||||
// utils/dateUtils.js
|
||||
export const getDateDifferenceInDays = (startDate, endDate) => {
|
||||
if (!startDate || !endDate) {
|
||||
throw new Error("Both startDate and endDate must be provided");
|
||||
@ -60,13 +59,10 @@ export const checkIfCurrentDate = (dateString) => {
|
||||
currentDate.setHours(0, 0, 0, 0);
|
||||
inputDate.setHours(0, 0, 0, 0);
|
||||
|
||||
return currentDate?.getTime() === inputDate?.getTime();
|
||||
return currentDate.getTime() === inputDate.getTime();
|
||||
};
|
||||
|
||||
export const formatNumber = (num) => {
|
||||
if (num == null || isNaN(num)) return "NA";
|
||||
return Number.isInteger(num) ? num : num.toFixed(2);
|
||||
};
|
||||
export const formatUTCToLocalTime = (datetime) =>{
|
||||
return moment.utc(datetime).local().format("MMMM DD, YYYY [at] hh:mm A");
|
||||
}
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user