UI changes in Contact Profile page.

This commit is contained in:
Kartik Sharma 2025-07-26 10:00:27 +05:30
parent 7556234635
commit 2cb601dc16

View File

@ -19,18 +19,13 @@ const NotesDirectory = ({
refetchProfile, refetchProfile,
isLoading, isLoading,
contactProfile, // This contactProfile now reliably includes firstName, middleName, lastName, and fullName contactProfile, // This contactProfile now reliably includes firstName, middleName, lastName, and fullName
contactProfile, // This contactProfile now reliably includes firstName, middleName, lastName, and fullName
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);
const [showEditor, setShowEditor] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -71,30 +66,22 @@ const NotesDirectory = ({
const updatedProfile = { const updatedProfile = {
...cached_contactProfile.data, ...cached_contactProfile.data,
notes: [...(cached_contactProfile.data.notes || []), createdNote], 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", "");
setIsSubmitting(false); setIsSubmitting(false);
showToast("Note added successfully!", "success"); showToast("Note added successfully!", "success");
setShowEditor(false); setShowEditor(false);
setShowEditor(false);
setIsActive(true); setIsActive(true);
refetch(contactProfile?.id, true); refetch(contactProfile?.id, true);
refetch(contactProfile?.id, true);
} catch (error) { } catch (error) {
setIsSubmitting(false); setIsSubmitting(false);
const msg = const msg =
error.response?.data?.message ||
error.response?.data?.message || error.response?.data?.message ||
error.message || error.message ||
"Error occurred during API calling"; "Error occurred during API calling";
"Error occurred during API calling";
showToast(msg, "error"); showToast(msg, "error");
} }
}; };
@ -102,11 +89,8 @@ const NotesDirectory = ({
const onCancel = () => { const onCancel = () => {
setValue("note", ""); setValue("note", "");
setShowEditor(false); setShowEditor(false);
setValue("note", "");
setShowEditor(false);
}; };
const handleSwitch = () => { const handleSwitch = () => {
setIsActive((prevIsActive) => { setIsActive((prevIsActive) => {
const newState = !prevIsActive; const newState = !prevIsActive;
@ -116,35 +100,36 @@ 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"> <div className="text-start mt-10">
<div className="d-flex align-items-center justify-content-between"> <div className="d-flex align-items-center justify-content-between">
<div className="row w-100 align-items-center"> <p className="fw-semibold m-0 ms-3">Notes :</p>
<div className="col col-2"> </div>
<p className="fw-semibold m-0 ms-3">Notes :</p> <div className="d-flex align-items-center justify-content-between mb-5">
</div> <div className="m-0 d-flex align-items-center">
<div className="col d-flex justify-content-end gap-2 pe-0"> {(contactProfile?.notes?.length > 0 || contactNotes?.length > 0) && (
{" "} <label className="switch switch-primary">
<div className="d-flex align-items-center justify-content-between"> <input
<label type="checkbox"
className="switch switch-primary" className="switch-input"
style={{ onChange={handleSwitch}
visibility: checked={!IsActive}
contactProfile?.notes?.length > 0 || />
contactNotes?.length > 0 <span className="switch-toggle-slider">
? "visible" <span className="switch-on"></span>
: "hidden", <span className="switch-off"></span>
}} </span>
> <span className="switch-label">Include Deleted Notes</span>
</label>
)}
{!(contactProfile?.notes?.length > 0 || contactNotes?.length > 0) && (
<div style={{ visibility: "hidden" }}>
<label className="switch switch-primary">
<input type="checkbox" className="switch-input" /> <input type="checkbox" className="switch-input" />
<span className="switch-toggle-slider"> <span className="switch-toggle-slider">
<span className="switch-on"></span> <span className="switch-on"></span>
@ -152,43 +137,43 @@ const NotesDirectory = ({
</span> </span>
<span className="switch-label">Include Deleted Notes</span> <span className="switch-label">Include Deleted Notes</span>
</label> </label>
{!showEditor && (
<div className="d-flex justify-content-end">
<button
type="button"
className="btn btn-sm d-flex align-items-center"
onClick={() => setShowEditor(true)}
style={{
color: "#6c757d",
backgroundColor: "transparent",
boxShadow: "none",
border: "none",
}}
>
<i
className="bx bx-plus-circle me-0 text-primary"
style={{ fontSize: "1.5rem", color: "#6c757d" }}
></i>
Add a Note
</button>
</div>
)}
</div> </div>
</div> )}
</div> </div>
{!showEditor && (
<div className="d-flex justify-content-end">
<button
type="button"
className="btn btn-sm d-flex align-items-center"
onClick={() => setShowEditor(true)}
style={{
color: "#6c757d",
backgroundColor: "transparent",
boxShadow: "none",
border: "none",
}}
>
<i
className="bx bx-plus-circle me-0"
style={{ fontSize: "1.5rem", color: "#6c757d" }}
></i>
Add a Note
</button>
</div>
)}
</div> </div>
{showEditor && ( {showEditor && (
<div className="card m-2 mb-5 position-relative"> <div className="card m-2 mb-5 position-relative">
<span <button
type="button" type="button"
className="position-absolute top-0 end-0 mt-3 bg-secondary rounded-circle" className="btn-close btn-secondary position-absolute top-0 end-0 m-2 mt-3 rounded-circle"
aria-label="Close" aria-label="Close"
style={{ backgroundColor: "#eee", color: "white" }}
onClick={() => setShowEditor(false)} onClick={() => setShowEditor(false)}
> ></button>
<i className="bx bx-x fs-5 p-1 text-white"></i>
</span>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<Editor <Editor
value={noteValue} value={noteValue}
@ -197,7 +182,6 @@ const NotesDirectory = ({
onCancel={onCancel} onCancel={onCancel}
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
/> />
{errors.note && (
{errors.note && ( {errors.note && (
<p className="text-danger small mt-1">{errors.note.message}</p> <p className="text-danger small mt-1">{errors.note.message}</p>
)} )}
@ -205,7 +189,6 @@ const NotesDirectory = ({
</div> </div>
)} )}
<div className=" justify-content-start px-1 mt-1">
<div className=" justify-content-start px-1 mt-1"> <div className=" justify-content-start px-1 mt-1">
{isLoading && ( {isLoading && (
<div className="text-center"> <div className="text-center">
@ -213,28 +196,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;