UI changes in Contact Profile page.
This commit is contained in:
parent
49d9034a45
commit
116fe04f97
@ -22,10 +22,7 @@ const NotesDirectory = ({
|
|||||||
setProfileContact,
|
setProfileContact,
|
||||||
}) => {
|
}) => {
|
||||||
const [IsActive, setIsActive] = useState(true);
|
const [IsActive, setIsActive] = useState(true);
|
||||||
const { contactNotes, refetch } = useContactNotes(
|
const { contactNotes, refetch } = useContactNotes(contactProfile?.id, IsActive);
|
||||||
contactProfile?.id,
|
|
||||||
IsActive
|
|
||||||
);
|
|
||||||
|
|
||||||
const [IsSubmitting, setIsSubmitting] = useState(false);
|
const [IsSubmitting, setIsSubmitting] = useState(false);
|
||||||
const [showEditor, setShowEditor] = useState(false);
|
const [showEditor, setShowEditor] = useState(false);
|
||||||
@ -70,10 +67,7 @@ const NotesDirectory = ({
|
|||||||
...cached_contactProfile.data,
|
...cached_contactProfile.data,
|
||||||
notes: [...(cached_contactProfile.data.notes || []), createdNote],
|
notes: [...(cached_contactProfile.data.notes || []), createdNote],
|
||||||
};
|
};
|
||||||
cacheData("Contact Profile", {
|
cacheData("Contact Profile", { contactId: contactProfile?.id, data: updatedProfile });
|
||||||
contactId: contactProfile?.id,
|
|
||||||
data: updatedProfile,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setValue("note", "");
|
setValue("note", "");
|
||||||
@ -104,13 +98,10 @@ const NotesDirectory = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Use the fullName from contactProfile, which now includes middle and last names if available
|
// Use the fullName from contactProfile, which now includes middle and last names if available
|
||||||
const contactName =
|
const contactName = contactProfile?.fullName || contactProfile?.firstName || "Contact";
|
||||||
contactProfile?.fullName || contactProfile?.firstName || "Contact";
|
|
||||||
const noNotesMessage = `Be the first to share your insights! ${contactName} currently has no notes.`;
|
const noNotesMessage = `Be the first to share your insights! ${contactName} currently has no notes.`;
|
||||||
|
|
||||||
const notesToDisplay = IsActive
|
const notesToDisplay = IsActive ? (contactProfile?.notes || []) : (contactNotes || []);
|
||||||
? contactProfile?.notes || []
|
|
||||||
: contactNotes || [];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="text-start mt-10">
|
<div className="text-start mt-10">
|
||||||
@ -202,28 +193,31 @@ const NotesDirectory = ({
|
|||||||
<p>Loading...</p>{" "}
|
<p>Loading...</p>{" "}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{!isLoading && notesToDisplay.length > 0
|
{!isLoading && notesToDisplay.length > 0 ? (
|
||||||
? notesToDisplay
|
notesToDisplay
|
||||||
.slice()
|
.slice()
|
||||||
.reverse()
|
.reverse()
|
||||||
.map((noteItem) => (
|
.map((noteItem) => (
|
||||||
<NoteCardDirectory
|
<NoteCardDirectory
|
||||||
refetchProfile={refetchProfile}
|
refetchProfile={refetchProfile}
|
||||||
refetchNotes={refetch}
|
refetchNotes={refetch}
|
||||||
refetchContact={refetch}
|
refetchContact={refetch}
|
||||||
noteItem={noteItem}
|
noteItem={noteItem}
|
||||||
contactId={contactProfile?.id}
|
contactId={contactProfile?.id}
|
||||||
setProfileContact={setProfileContact}
|
setProfileContact={setProfileContact}
|
||||||
key={noteItem.id}
|
key={noteItem.id}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
: !isLoading &&
|
) : (
|
||||||
!showEditor && (
|
!isLoading && !showEditor && (
|
||||||
<div className="text-center mt-5">{noNotesMessage}</div>
|
<div className="text-center mt-5">
|
||||||
)}
|
{noNotesMessage}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default NotesDirectory;
|
export default NotesDirectory;
|
@ -8,7 +8,6 @@ import {
|
|||||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||||
import AttendanceLog from "../../components/Activities/AttendcesLogs";
|
import AttendanceLog from "../../components/Activities/AttendcesLogs";
|
||||||
import Attendance from "../../components/Activities/Attendance";
|
import Attendance from "../../components/Activities/Attendance";
|
||||||
// import AttendanceModel from "../../components/Activities/AttendanceModel";
|
|
||||||
import showToast from "../../services/toastService";
|
import showToast from "../../services/toastService";
|
||||||
import Regularization from "../../components/Activities/Regularization";
|
import Regularization from "../../components/Activities/Regularization";
|
||||||
import { useAttendance } from "../../hooks/useAttendance";
|
import { useAttendance } from "../../hooks/useAttendance";
|
||||||
@ -18,12 +17,12 @@ import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice"
|
|||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||||
import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
|
import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
|
||||||
import eventBus from "../../services/eventBus";
|
import eventBus from "../../services/eventBus";
|
||||||
// import AttendanceRepository from "../../repositories/AttendanceRepository";
|
import AttendanceRepository from "../../repositories/AttendanceRepository"; // Make sure this is imported if used
|
||||||
import { useProjectName } from "../../hooks/useProjects";
|
import { useProjectName } from "../../hooks/useProjects";
|
||||||
import GlobalModel from "../../components/common/GlobalModel";
|
import GlobalModel from "../../components/common/GlobalModel";
|
||||||
import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm";
|
import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm";
|
||||||
import AttendLogs from "../../components/Activities/AttendLogs";
|
import AttendLogs from "../../components/Activities/AttendLogs";
|
||||||
// import Confirmation from "../../components/Activities/Confirmation";
|
import Confirmation from "../../components/Activities/Confirmation"; // Make sure this is imported if used
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
|
|
||||||
const AttendancePage = () => {
|
const AttendancePage = () => {
|
||||||
@ -37,7 +36,7 @@ const AttendancePage = () => {
|
|||||||
attendance,
|
attendance,
|
||||||
loading: attLoading,
|
loading: attLoading,
|
||||||
recall: attrecall,
|
recall: attrecall,
|
||||||
} = useAttendace(selectedProject);
|
} = useAttendance(selectedProject); // Corrected typo: useAttendace to useAttendance
|
||||||
const [attendances, setAttendances] = useState();
|
const [attendances, setAttendances] = useState();
|
||||||
const [empRoles, setEmpRoles] = useState(null);
|
const [empRoles, setEmpRoles] = useState(null);
|
||||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||||
@ -58,10 +57,10 @@ const AttendancePage = () => {
|
|||||||
// Ensure attendances is not null before mapping
|
// Ensure attendances is not null before mapping
|
||||||
const updatedAttendance = attendances
|
const updatedAttendance = attendances
|
||||||
? attendances.map((item) =>
|
? attendances.map((item) =>
|
||||||
item.employeeId === msg.response.employeeId
|
item.employeeId === msg.response.employeeId
|
||||||
? { ...item, ...msg.response }
|
? { ...item, ...msg.response }
|
||||||
: item
|
: item
|
||||||
)
|
)
|
||||||
: [msg.response]; // If attendances is null, initialize with new response
|
: [msg.response]; // If attendances is null, initialize with new response
|
||||||
|
|
||||||
cacheData("Attendance", {
|
cacheData("Attendance", {
|
||||||
@ -71,12 +70,13 @@ const AttendancePage = () => {
|
|||||||
setAttendances(updatedAttendance);
|
setAttendances(updatedAttendance);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[selectedProject, attendances] // Removed attrecall as it's not a direct dependency for this state update
|
[selectedProject, attendances]
|
||||||
);
|
);
|
||||||
|
|
||||||
const employeeHandler = useCallback(
|
const employeeHandler = useCallback(
|
||||||
(msg) => {
|
(msg) => {
|
||||||
if (attendances?.some((item) => item.employeeId === msg.employeeId)) {
|
if (attendances?.some((item) => item.employeeId === msg.employeeId)) {
|
||||||
|
// Ensure AttendanceRepository is imported and available
|
||||||
AttendanceRepository.getAttendance(selectedProject)
|
AttendanceRepository.getAttendance(selectedProject)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
cacheData("Attendance", { data: response.data, selectedProject });
|
cacheData("Attendance", { data: response.data, selectedProject });
|
||||||
@ -127,10 +127,10 @@ const AttendancePage = () => {
|
|||||||
if (action.payload && action.payload.employeeId) {
|
if (action.payload && action.payload.employeeId) {
|
||||||
const updatedAttendance = attendances
|
const updatedAttendance = attendances
|
||||||
? attendances.map((item) =>
|
? attendances.map((item) =>
|
||||||
item.employeeId === action.payload.employeeId
|
item.employeeId === action.payload.employeeId
|
||||||
? { ...item, ...action.payload }
|
? { ...item, ...action.payload }
|
||||||
: item
|
: item
|
||||||
)
|
)
|
||||||
: [action.payload]; // If attendances is null, initialize with new payload
|
: [action.payload]; // If attendances is null, initialize with new payload
|
||||||
|
|
||||||
cacheData("Attendance", {
|
cacheData("Attendance", {
|
||||||
@ -151,6 +151,7 @@ const AttendancePage = () => {
|
|||||||
const handleToggle = (event) => {
|
const handleToggle = (event) => {
|
||||||
setShowPending(event.target.checked);
|
setShowPending(event.target.checked);
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (selectedProject === null && projectNames.length > 0) {
|
if (selectedProject === null && projectNames.length > 0) {
|
||||||
dispatch(setProjectId(projectNames[0]?.id));
|
dispatch(setProjectId(projectNames[0]?.id));
|
||||||
@ -162,8 +163,8 @@ const AttendancePage = () => {
|
|||||||
if (modelConfig !== null) {
|
if (modelConfig !== null) {
|
||||||
openModel();
|
openModel();
|
||||||
}
|
}
|
||||||
}, [modelConfig]); // Removed isCreateModalOpen from here as it's set by openModel()
|
}, [modelConfig]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setAttendances(attendance);
|
setAttendances(attendance);
|
||||||
}, [attendance]);
|
}, [attendance]);
|
||||||
@ -204,27 +205,8 @@ const AttendancePage = () => {
|
|||||||
return () => eventBus.off("attendance", handler);
|
return () => eventBus.off("attendance", handler);
|
||||||
}, [handler]);
|
}, [handler]);
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// eventBus.on("employee", employeeHandler);
|
|
||||||
// return () => eventBus.off("employee", employeeHandler);
|
|
||||||
// }, [employeeHandler]);
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* {isCreateModalOpen && modelConfig && (
|
|
||||||
<div
|
|
||||||
className="modal fade show"
|
|
||||||
style={{ display: "block" }}
|
|
||||||
id="check-Out-modalg"
|
|
||||||
tabIndex="-1"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<AttendanceModel
|
|
||||||
modelConfig={modelConfig}
|
|
||||||
closeModal={closeModal}
|
|
||||||
handleSubmitForm={handleSubmit}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)} */}
|
|
||||||
{isCreateModalOpen && modelConfig && (
|
{isCreateModalOpen && modelConfig && (
|
||||||
<GlobalModel
|
<GlobalModel
|
||||||
isOpen={isCreateModalOpen}
|
isOpen={isCreateModalOpen}
|
||||||
@ -309,16 +291,14 @@ const AttendancePage = () => {
|
|||||||
</ul>
|
</ul>
|
||||||
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3" >
|
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3" >
|
||||||
{activeTab === "all" && (
|
{activeTab === "all" && (
|
||||||
<div className="tab-pane fade show active py-0">
|
<div className="tab-pane fade show active py-0">
|
||||||
<Attendance
|
<Attendance
|
||||||
attendance={filteredAndSearchedTodayAttendance()}
|
attendance={filteredAndSearchedTodayAttendance()}
|
||||||
handleModalData={handleModalData}
|
handleModalData={handleModalData}
|
||||||
getRole={getRole}
|
getRole={getRole}
|
||||||
setshowOnlyCheckout={setShowPending}
|
setshowOnlyCheckout={setShowPending}
|
||||||
showOnlyCheckout={showPending}
|
showOnlyCheckout={showPending}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!attLoading && filteredAndSearchedTodayAttendance()?.length === 0 && (
|
{!attLoading && filteredAndSearchedTodayAttendance()?.length === 0 && (
|
||||||
<p>
|
<p>
|
||||||
{" "}
|
{" "}
|
||||||
@ -327,7 +307,7 @@ const AttendancePage = () => {
|
|||||||
: "No Employee assigned yet."}{" "}
|
: "No Employee assigned yet."}{" "}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</>
|
</div>
|
||||||
)}
|
)}
|
||||||
{activeTab === "logs" && (
|
{activeTab === "logs" && (
|
||||||
<div className="tab-pane fade show active py-0">
|
<div className="tab-pane fade show active py-0">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user