In Contact View, empty Description and Notes section should be hidden and its needs to be fixed the UI of this pop-up

This commit is contained in:
Kartik Sharma 2025-08-18 11:29:38 +05:30
parent 7283140a3a
commit 2b5df10137
2 changed files with 82 additions and 76 deletions

View File

@ -114,55 +114,56 @@ const NotesDirectory = ({
? contactProfile?.notes || []
: contactNotes || [];
const hasNotes = notesToDisplay.length > 0;
return (
<div className="text-start mt-10">
<div className="d-flex align-items-center justify-content-between">
<div className="row w-100 align-items-center">
<div className="col col-2">
<p className="fw-semibold m-0 ms-3">Notes :</p>
</div>
{hasNotes && (
<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",
fontSize: "15px", // smaller text
}}
>
<input
type="checkbox"
className="switch-input"
onChange={() => handleSwitch(!IsActive)}
checked={IsActive}
<label
className="switch switch-primary"
style={{
transform: "scale(0.8)", // smaller toggle
fontSize: "15px",
}}
/>
<span
className="switch-toggle-slider"
style={{
>
<input
type="checkbox"
className="switch-input"
onChange={() => handleSwitch(!IsActive)}
checked={IsActive}
style={{
transform: "scale(0.8)", // smaller toggle
}}
/>
<span
className="switch-toggle-slider"
style={{
width: "30px", // narrower slider
height: "15px", // shorter slider
}}
>
<span className="switch-on"></span>
<span className="switch-off"></span>
</span>
<span
className="switch-label"
style={{
}}
>
<span className="switch-on"></span>
<span className="switch-off"></span>
</span>
<span
className="switch-label"
style={{
fontSize: "14px", // smaller label text
marginLeft: "-14px"
}}
>
Include Deleted Notes
</span>
</label>
}}
>
Include Deleted Notes
</span>
</label>
{!showEditor && (
<div className="d-flex justify-content-end">
@ -224,23 +225,23 @@ const NotesDirectory = ({
)}
{!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}
/>
))
.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 className="text-center mt-5">{noNotesMessage}</div>
)}
</div>
</div>
);

View File

@ -11,6 +11,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
const [profileContactState, setProfileContactState] = useState(null);
const [expanded, setExpanded] = useState(false);
// Safely access description, defaulting to an empty string if not present
const description = profileContactState?.description || "";
const limit = 500;
@ -40,7 +41,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
middleName = names[1]; // This was an error in the original prompt, corrected to names[1]
lastName = names[names.length - 1];
// Reconstruct full name to be precise with spacing
fullName = `${firstName} ${middleName ? middleName + ' ' : ''}${lastName}`;
fullName = `${firstName} ${middleName ? middleName + " " : ""}${lastName}`;
} else {
// Fallback if no names or empty string
firstName = "Contact";
@ -113,7 +114,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
</span>
<i
className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${copiedIndex === idx ? "text-secondary" : "text-primary"
}`}
}`}
title={copiedIndex === idx ? "Copied!" : "Copy Email"}
style={{ flexShrink: 0 }}
onClick={() => handleCopy(email.emailAddress, idx)}
@ -292,31 +293,35 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
)}
</div>
<div className="d-flex mb-2 align-items-start" style={{ marginLeft: "3rem" }}>
<div className="d-flex" style={{ minWidth: "130px" }}>
<span className="d-flex align-items-start">
<i className="bx bx-book me-1"></i>
<span>Description</span>
</span>
<span style={{ marginLeft: "10px" }}>:</span>
</div>
{description && (
<div
className="d-flex mb-2 align-items-start"
style={{ marginLeft: "3rem" }}
>
<div className="d-flex" style={{ minWidth: "130px" }}>
<span className="d-flex align-items-start">
<i className="bx bx-book me-1"></i>
<span>Description</span>
</span>
<span style={{ marginLeft: "10px" }}>:</span>
</div>
<div className="text-start">
{displayText}
{isLong && (
<>
<br />
<span
onClick={toggleReadMore}
className="text-primary mx-1 cursor-pointer"
>
{expanded ? "Read less" : "Read more"}
</span>
</>
)}
<div className="text-start">
{displayText}
{isLong && (
<>
<br />
<span
onClick={toggleReadMore}
className="text-primary mx-1 cursor-pointer"
>
{expanded ? "Read less" : "Read more"}
</span>
</>
)}
</div>
</div>
</div>
)}
<hr className="my-1" />
<NotesDirectory