UI changes in Contact Profile page.
This commit is contained in:
parent
7556234635
commit
2cb601dc16
@ -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;
|
Loading…
x
Reference in New Issue
Block a user