125 lines
3.7 KiB
JavaScript
125 lines
3.7 KiB
JavaScript
import React, {
|
|
useState,
|
|
useEffect,
|
|
useRef,
|
|
useContext,
|
|
createContext,
|
|
} from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import moment from "moment";
|
|
import eventBus from "../../services/eventBus";
|
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
import useImageGallery from "../../hooks/useImageGallery";
|
|
import {
|
|
useProjectAssignedServices,
|
|
useProjectName,
|
|
} from "../../hooks/useProjects";
|
|
import { setProjectId } from "../../slices/localVariablesSlice";
|
|
import ImageGalleryListView from "../../components/gallary/ImageGalleryListView";
|
|
import "../../components/gallary/ImageGallery.css";
|
|
import { useSelectedProject } from "../../slices/apiDataManager";
|
|
import GlobalModel from "../../components/common/GlobalModel";
|
|
import ViewGallery from "../../components/gallary/ViewGallery";
|
|
import { useFab } from "../../Context/FabContext";
|
|
import GalleryFilterPanel from "../../components/gallary/GalleryFilterPanel";
|
|
|
|
const GalleryContext = createContext();
|
|
|
|
export const useGalleryContext = () => {
|
|
let context = useContext(GalleryContext);
|
|
|
|
if (!context) {
|
|
throw new Error("Error");
|
|
}
|
|
return context;
|
|
};
|
|
|
|
const ImageGalleryPage = () => {
|
|
const selectedProjectId = useSelectedProject();
|
|
const { projectNames } = useProjectName();
|
|
|
|
const [openGallery, setOpenGallery] = useState({ isOpen: false, data: null });
|
|
|
|
const { data: assignedServices = [], isLoading } =
|
|
useProjectAssignedServices(selectedProjectId);
|
|
|
|
const [selectedService, setSelectedService] = useState("");
|
|
|
|
const handleServiceChange = (e) => {
|
|
setSelectedService(e.target.value);
|
|
};
|
|
|
|
const contextMessager = {
|
|
setOpenGallery,
|
|
};
|
|
|
|
const { setOffcanvasContent, setShowTrigger } = useFab();
|
|
|
|
useEffect(()=>{
|
|
setShowTrigger(true);
|
|
setOffcanvasContent("Gallery Filter",<GalleryFilterPanel/>);
|
|
|
|
return ()=>{
|
|
setOffcanvasContent("",null)
|
|
setShowTrigger(false);
|
|
}
|
|
},[])
|
|
|
|
|
|
return (
|
|
<GalleryContext.Provider value={contextMessager}>
|
|
<div className="container-fluid">
|
|
<Breadcrumb
|
|
data={[{ label: "Home", link: "/" }, { label: "Gallery" }]}
|
|
/>
|
|
|
|
<div className="card page-min-h p-2">
|
|
{selectedProjectId && (
|
|
<div className="d-flex flex-row w-20 pb-2">
|
|
{!isLoading && assignedServices?.length === 0 ? (
|
|
<span className="badge bg-label-secondary">
|
|
Not service assiged yet
|
|
</span>
|
|
) : (
|
|
<select className="form-select form-select-sm">
|
|
<option>Select Service</option>
|
|
{isLoading ? (
|
|
<option>Loading...</option>
|
|
) : assignedServices.length === 1 ? (
|
|
<span className="badge bg-label-secondary">
|
|
{assignedServices[0].name}
|
|
</span>
|
|
) : (
|
|
assignedServices?.map((service) => (
|
|
<option key={service.id} value={service?.id}>
|
|
{service?.name}
|
|
</option>
|
|
))
|
|
)}
|
|
</select>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<ImageGalleryListView />
|
|
</div>
|
|
|
|
{openGallery?.isOpen && (
|
|
<GlobalModel
|
|
isOpen={openGallery?.isOpen}
|
|
closeModal={() => setOpenGallery({ isOpen: false, data: null })}
|
|
>
|
|
<ViewGallery
|
|
batch={openGallery?.data?.data}
|
|
index={openGallery?.data?.index}
|
|
/>
|
|
</GlobalModel>
|
|
)}
|
|
</div>
|
|
</GalleryContext.Provider>
|
|
);
|
|
};
|
|
|
|
export default ImageGalleryPage;
|