admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Add GUI improvements in directory notes

Browse Source
This commit is contained in:
Vikas Nale 2025-07-26 11:23:12 +05:30 committed by Kartik Sharma
parent 2cb601dc16
commit e0fa59e747
1 changed files with 78 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
src/components/Directory/NotesDirectory.jsx
View File

@ -22,7 +22,10 @@ const NotesDirectory = ({
setProfileContact,
}) => {
const [IsActive, setIsActive] = useState(true);
const { contactNotes, refetch } = useContactNotes(contactProfile?.id, IsActive);
const { contactNotes, refetch } = useContactNotes(
contactProfile?.id,
IsActive
);
const [IsSubmitting, setIsSubmitting] = useState(false);
const [showEditor, setShowEditor] = useState(false);
@ -67,7 +70,10 @@ const NotesDirectory = ({
...cached_contactProfile.data,
notes: [...(cached_contactProfile.data.notes || []), createdNote],
};
cacheData("Contact Profile", { contactId: contactProfile?.id, data: updatedProfile });
cacheData("Contact Profile", {
contactId: contactProfile?.id,
data: updatedProfile,
});
}
setValue("note", "");
@ -100,36 +106,34 @@ const NotesDirectory = ({
};
// Use the fullName from contactProfile, which now includes middle and last names if available
const contactName = contactProfile?.fullName || contactProfile?.firstName || "Contact";
const contactName =
contactProfile?.fullName || contactProfile?.firstName || "Contact";
const noNotesMessage = `Be the first to share your insights! ${contactName} currently has no notes.`;
const notesToDisplay = IsActive ? (contactProfile?.notes || []) : (contactNotes || []);
const notesToDisplay = IsActive
? contactProfile?.notes || []
: contactNotes || [];
return (
<div className="text-start mt-10">
<div className="d-flex align-items-center justify-content-between">
<p className="fw-semibold m-0 ms-3">Notes :</p>
</div>
<div className="d-flex align-items-center justify-content-between mb-5">
<div className="m-0 d-flex align-items-center">
{(contactProfile?.notes?.length > 0 || contactNotes?.length > 0) && (
<label className="switch switch-primary">
<input
type="checkbox"
className="switch-input"
onChange={handleSwitch}
checked={!IsActive}
/>
<span className="switch-toggle-slider">
<span className="switch-on"></span>
<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">
<div className="row w-100 align-items-center">
<div className="col col-2">
<p className="fw-semibold m-0 ms-3">Notes :</p>
</div>
<div className="col d-flex justify-content-end gap-2 pe-0">
{" "}
<div className="d-flex align-items-center justify-content-between">
<label
className="switch switch-primary"
style={{
visibility:
contactProfile?.notes?.length > 0 ||
contactNotes?.length > 0
? "visible"
: "hidden",
}}
>
<input type="checkbox" className="switch-input" />
<span className="switch-toggle-slider">
<span className="switch-on"></span>
@ -137,43 +141,43 @@ const NotesDirectory = ({
</span>
<span className="switch-label">Include Deleted Notes</span>
</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>
{!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 && (
<div className="card m-2 mb-5 position-relative">
<button
<span
type="button"
className="btn-close btn-secondary position-absolute top-0 end-0 m-2 mt-3 rounded-circle"
className="position-absolute top-0 end-0 mt-3 bg-secondary rounded-circle"
aria-label="Close"
style={{ backgroundColor: "#eee", color: "white" }}
onClick={() => setShowEditor(false)}
></button>
>
<i className="bx bx-x fs-5 p-1 text-white"></i>
</span>
<form onSubmit={handleSubmit(onSubmit)}>
<Editor
value={noteValue}
@ -196,31 +200,28 @@ const NotesDirectory = ({
<p>Loading...</p>{" "}
</div>
)}
{!isLoading && notesToDisplay.length > 0 ? (
notesToDisplay
.slice()
.reverse()
.map((noteItem) => (
<NoteCardDirectory
refetchProfile={refetchProfile}
refetchNotes={refetch}
refetchContact={refetch}
noteItem={noteItem}
contactId={contactProfile?.id}
setProfileContact={setProfileContact}
key={noteItem.id}
/>
))
) : (
!isLoading && !showEditor && (
<div className="text-center mt-5">
{noNotesMessage}
</div>
)
)}
{!isLoading && notesToDisplay.length > 0
? notesToDisplay
.slice()
.reverse()
.map((noteItem) => (
<NoteCardDirectory
refetchProfile={refetchProfile}
refetchNotes={refetch}
refetchContact={refetch}
noteItem={noteItem}
contactId={contactProfile?.id}
setProfileContact={setProfileContact}
key={noteItem.id}
/>
))
: !isLoading &&
!showEditor && (
<div className="text-center mt-5">{noNotesMessage}</div>
)}
</div>
</div>
);
};
export default NotesDirectory;
export default NotesDirectory;