persist date
This commit is contained in:
parent
f867a692ed
commit
24501b3c76
@ -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 (
|
||||
|
@ -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 (
|
||||
<>
|
||||
|
@ -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();
|
||||
|
@ -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";
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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"],
|
||||
|
@ -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-------------------
|
||||
|
||||
|
@ -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) => {
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user