persist date

This commit is contained in:
pramod.mahajan 2025-10-10 12:48:37 +05:30
parent f867a692ed
commit 24501b3c76
9 changed files with 128 additions and 75 deletions

View File

@ -6,7 +6,12 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { queryClient } from "./layouts/AuthLayout";
import ModalProvider from "./ModalProvider";
window.addEventListener("unhandledrejection", (event) => {
if (event.reason?.message?.includes("Failed to fetch")) {
event.preventDefault();
console.debug("Network issue (fetch failed) - suppressed");
}
});
const App = () => {
return (

View File

@ -1,15 +1,14 @@
import React, { useEffect } from "react";
import { useOrganizationModal } from "./hooks/useOrganization";
import OrganizationModal from "./components/Organization/OrganizationModal";
import { useAuthModal } from "./hooks/useAuth";
import { useAuthModal, useModal } from "./hooks/useAuth";
import SwitchTenant from "./pages/authentication/SwitchTenant";
import { useProjectModal } from "./hooks/useProjects";
import { ProjectModal } from "./components/Project/ManageProjectInfo";
const ModalProvider = () => {
const { isOpen, onClose } = useOrganizationModal();
const { isOpen: isAuthOpen } = useAuthModal();
const {isOpen:isOpenProject} = useProjectModal()
const {isOpen:isOpenProject} = useModal("ManageProject")
return (
<>

View File

@ -22,9 +22,19 @@ const Regularization = ({ handleRequest, searchTerm, projectId, organizationId,
const { regularizes, loading, error, refetch } =
useRegularizationRequests(selectedProject, organizationId, IncludeInActive);
useEffect(() => {
setregularizedList(regularizes);
}, [regularizes]);
useEffect(() => {
if (regularizes && regularizes.length) {
setregularizedList((prev) => {
const prevIds = prev.map((i) => i.id).join(",");
const newIds = regularizes.map((i) => i.id).join(",");
if (prevIds !== newIds) {
return regularizes;
}
return prev;
});
}
}, [regularizes]);
const sortByName = (a, b) => {
const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();

View File

@ -8,7 +8,6 @@ import DatePicker from "../common/DatePicker";
import {
useCreateProject,
useProjectDetails,
useProjectModal,
useUpdateProject,
} from "../../hooks/useProjects";
@ -23,6 +22,7 @@ import {
} from "../../hooks/useOrganization";
import { localToUtc } from "../../utils/appUtils";
import Modal from "../common/Modal";
import { useModal } from "../../hooks/useAuth";
const currentDate = new Date().toLocaleDateString("en-CA");
const formatDate = (date) => {
@ -38,7 +38,7 @@ const formatDate = (date) => {
const ManageProjectInfo = ({ project, onClose }) => {
const [addressLength, setAddressLength] = useState(0);
const maxAddressLength = 500;
const { onOpen, startStep, flowType } = useOrganizationModal();
const { onOpen, startStep, flowType } = useModal("ManageProject");
const ACTIVE_STATUS_ID = "b74da4c2-d07e-46f2-9919-e75e49b12731";

View File

@ -1,5 +1,7 @@
import React, { useEffect, useRef } from "react";
import { useController, useFormContext, useWatch } from "react-hook-form";
import { useSelector } from "react-redux";
const DateRangePicker = ({
md,
sm,
@ -9,19 +11,29 @@ const DateRangePicker = ({
}) => {
const inputRef = useRef(null);
const persistedRange = useSelector(
(store) => store.localVariables.attendance.defaultDateRange
);
useEffect(() => {
const endDate = new Date();
if (endDateMode === "yesterday") {
endDate.setDate(endDate.getDate() - 1);
let startDate, endDate;
if (persistedRange?.startDate && persistedRange?.endDate) {
startDate = new Date(persistedRange.startDate);
endDate = new Date(persistedRange.endDate);
} else {
endDate = new Date();
if (endDateMode === "yesterday") {
endDate.setDate(endDate.getDate() - 1);
}
endDate.setHours(0, 0, 0, 0);
startDate = new Date(endDate);
startDate.setDate(endDate.getDate() - (DateDifference - 1));
startDate.setHours(0, 0, 0, 0);
}
endDate.setHours(0, 0, 0, 0);
const startDate = new Date(endDate);
startDate.setDate(endDate.getDate() - (DateDifference - 1));
startDate.setHours(0, 0, 0, 0);
const fp = flatpickr(inputRef.current, {
const fp = flatpickr(inputRef.current, {
mode: "range",
dateFormat: "Y-m-d",
altInput: true,
@ -41,14 +53,12 @@ const DateRangePicker = ({
endDate: endDate.toLocaleDateString("en-CA"),
});
return () => {
fp.destroy();
};
}, [onRangeChange, DateDifference, endDateMode]);
return () => fp.destroy();
}, [onRangeChange, DateDifference, endDateMode, persistedRange]);
const handleIconClick = () => {
if (inputRef.current) {
inputRef.current._flatpickr.open(); // directly opens flatpickr
if (inputRef.current?._flatpickr) {
inputRef.current._flatpickr.open();
}
};
@ -63,9 +73,10 @@ const DateRangePicker = ({
/>
<i
className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50 translate-middle-y " onClick={handleIconClick}
className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50 translate-middle-y"
onClick={handleIconClick}
style={{ right: "22px", bottom: "-8px" }}
></i>
/>
</div>
);
};
@ -76,6 +87,7 @@ export default DateRangePicker;
export const DateRangePicker1 = ({
startField = "startDate",
endField = "endDate",
@ -85,7 +97,6 @@ export const DateRangePicker1 = ({
resetSignal,
defaultRange = true,
maxDate = null,
sm,md,
...rest
}) => {
const inputRef = useRef(null);
@ -169,12 +180,11 @@ export const DateRangePicker1 = ({
const formattedValue = start && end ? `${start} To ${end}` : "";
return (
<div className={`col-${sm} col-sm-${md} px-1 position-relative`}>
<div className={`position-relative ${className}`}>
<input
type="text"
className="form-control form-control-sm ps-2 pe-5 me-4 cursor-pointer"
placeholder="From to End"
id="flatpickr-range"
className="form-control form-control-sm"
placeholder={placeholder}
defaultValue={formattedValue}
ref={(el) => {
inputRef.current = el;
@ -183,10 +193,12 @@ export const DateRangePicker1 = ({
readOnly={!allowText}
autoComplete="off"
/>
<i
className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2"
<span
className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
onClick={() => inputRef.current?._flatpickr?.open()}
></i>
>
<i className="bx bx-calendar bx-sm fs-5 text-muted"></i>
</span>
</div>
);
};

View File

@ -14,6 +14,23 @@ import {
} from "../slices/localVariablesSlice.jsx";
import { removeSession } from "../utils/authUtils.js";
// ----------------------------Modal--------------------------
export const useModal = (modalType) => {
const dispatch = useDispatch();
const isOpen = useSelector(
(state) => state.localVariables.modals[modalType]?.isOpen
);
const onOpen = (data = {}) => dispatch(openModal({ modalType, data }));
const onClose = () => dispatch(closeModal({ modalType }));
const onToggle = () => dispatch(toggleModal({ modalType }));
return { isOpen, onOpen, onClose, onToggle };
};
export const useTenants = () => {
return useQuery({
queryKey: ["tenantlist"],

View File

@ -3,7 +3,7 @@ import { cacheData, getCachedData } from "../slices/apiDataManager";
import ProjectRepository from "../repositories/ProjectRepository";
import { useProfile } from "./useProfile";
import { useDispatch, useSelector } from "react-redux";
import { closeProjectModal, openProjectModal, setProjectId } from "../slices/localVariablesSlice";
import { setProjectId } from "../slices/localVariablesSlice";
import EmployeeList from "../components/Directory/EmployeeList";
import eventBus from "../services/eventBus";
import {
@ -12,23 +12,25 @@ import {
useQuery,
useQueryClient,
} from "@tanstack/react-query";
import showToast from "../services/toastService";
export const useCurrentService = () => {
return useSelector((store) => store.globalVariables.selectedServiceId);
};
export const useProjectModal = () => {
const dispatch = useDispatch();
const { isOpen, data } = useSelector((state) => state.localVariables.ProjectModal);
// export const useProjectModal = () => {
// const dispatch = useDispatch();
// const { isOpen, data } = useSelector((state) => state.localVariables.ProjectModal);
return {
isOpen,
data,
openModal: (payload = null) => dispatch(openProjectModal(payload)),
closeModal: () => dispatch(closeProjectModal()),
};
};
// return {
// isOpen,
// data,
// openModal: (payload = null) => dispatch(openProjectModal(payload)),
// closeModal: () => dispatch(closeProjectModal()),
// };
// };
// ------------------------------Query-------------------

View File

@ -70,7 +70,8 @@ const AttendancePage = () => {
};
const handleModalData = (employee) => {
setModelConfig(employee);
setModelConfig(employee);
if (employee !== null) setIsCreateModalOpen(true);
};
const closeModal = () => {
@ -78,11 +79,7 @@ const AttendancePage = () => {
setIsCreateModalOpen(false);
};
useEffect(() => {
if (modelConfig !== null) {
openModel();
}
}, [modelConfig, isCreateModalOpen]);
// Handler to change tab and reset search term
const handleTabChange = (tabName) => {

View File

@ -4,10 +4,18 @@ const localVariablesSlice = createSlice({
name: "localVariables",
initialState: {
selectedMaster: "Application Role",
regularizationCount: 0,
defaultDateRange: {
startDate: null,
endDate: null,
// Attendances
attendance: {
regularizationCount: 0,
defaultDateRange: { startDate: null, endDate: null },
SelectedOrg: "",
},
// Modal for all simple pass Name
modals: {
auth: { isOpen: false },
organization: { isOpen: false },
},
projectId: null,
reload: false,
@ -19,10 +27,6 @@ const localVariablesSlice = createSlice({
startStep: 1,
flowType: "default",
},
ProjectModal:{
isOpen: false,
data: null,
},
AuthModal: {
isOpen: false,
@ -32,9 +36,18 @@ const localVariablesSlice = createSlice({
changeMaster: (state, action) => {
state.selectedMaster = action.payload;
},
// ATTENDANCE
updateRegularizationCount: (state, action) => {
state.regularizationCount = action.payload;
state.attendance.regularizationCount = action.payload;
},
setDefaultDateRange: (state, action) => {
state.attendance.defaultDateRange = action.payload;
},
setOrganization: (state, action) => {
state.attendance.SelectedOrg = action.payload;
},
setProjectId: (state, action) => {
localStorage.setItem("project", null);
state.projectId = action.payload;
@ -43,10 +56,6 @@ const localVariablesSlice = createSlice({
refreshData: (state, action) => {
state.reload = action.payload;
},
setDefaultDateRange: (state, action) => {
state.defaultDateRange = action.payload;
},
openOrgModal: (state, action) => {
state.OrganizationModal.isOpen = true;
state.OrganizationModal.orgData = action.payload?.orgData || null;
@ -75,15 +84,17 @@ const localVariablesSlice = createSlice({
state.AuthModal.isOpen = false;
},
// project modal
openProjectModal: (state, action) => {
state.ProjectModal.isOpen = true;
state.ProjectModal.data = action.payload || null;
openModal: (state, action) => {
const { modalType, data } = action.payload;
state.modals[modalType] = { isOpen: true, ...data };
},
closeProjectModal: (state) => {
state.ProjectModal.isOpen = false;
state.ProjectModal.data = null;
closeModal: (state, action) => {
const { modalType } = action.payload;
state.modals[modalType] = { ...state.modals[modalType], isOpen: false };
},
toggleModal: (state, action) => {
const { modalType } = action.payload;
state.modals[modalType].isOpen = !state.modals[modalType].isOpen;
},
},
});
@ -99,6 +110,6 @@ export const {
toggleOrgModal,
openAuthModal,
closeAuthModal,
openProjectModal, closeProjectModal
setOrganization,openModal, closeModal, toggleModal
} = localVariablesSlice.actions;
export default localVariablesSlice.reducer;
export default localVariablesSlice.reducer;