Add cosmatc changes for font sizes

This commit is contained in:
Vikas Nale 2025-06-10 13:16:44 +05:30
parent c3a52c46eb
commit ff8fca72fa
5 changed files with 131 additions and 118 deletions

View File

@ -12,13 +12,12 @@ import EmployeeList from "./EmployeeList";
import { useAllEmployees, useEmployees } from "../../hooks/useEmployees";
import { useSortableData } from "../../hooks/useSortableData";
import ConfirmModal from "../common/ConfirmModal";
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
import {DIRECTORY_ADMIN, DIRECTORY_MANAGER} from "../../utils/constants";
import {useProfile} from "../../hooks/useProfile";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { DIRECTORY_ADMIN, DIRECTORY_MANAGER } from "../../utils/constants";
import { useProfile } from "../../hooks/useProfile";
const ManageBucket = () =>
{
const {profile} =useProfile()
const ManageBucket = () => {
const { profile } = useProfile();
const [bucketList, setBucketList] = useState([]);
const { employeesList } = useAllEmployees(false);
const [selectedEmployee, setSelectEmployee] = useState([]);
@ -27,9 +26,9 @@ const ManageBucket = () =>
const [isSubmitting, setSubmitting] = useState(false);
const [selected_bucket, select_bucket] = useState(null);
const [deleteBucket, setDeleteBucket] = useState(null);
const [ searchTerm, setSearchTerm ] = useState( "" );
const DirManager = useHasUserPermission( DIRECTORY_MANAGER )
const DirAdmin = useHasUserPermission(DIRECTORY_ADMIN)
const [searchTerm, setSearchTerm] = useState("");
const DirManager = useHasUserPermission(DIRECTORY_MANAGER);
const DirAdmin = useHasUserPermission(DIRECTORY_ADMIN);
const {
items: sortedBuckteList,
requestSort,
@ -228,7 +227,7 @@ const ManageBucket = () =>
<div className="d-flex justify-content-center">
<p className="fs-6 fw-semibold m-0">Manage Buckets</p>
</div>
<div className="d-flex justify-content-between px-2 px-sm-0 mt-5 mt-sm-1 align-items-center">
<div className="d-flex justify-content-between px-2 px-sm-0 mt-5 mt-3 align-items-center ">
{action_bucket ? (
<i
className={`fa-solid fa-arrow-left fs-5 cursor-pointer`}
@ -255,7 +254,7 @@ const ManageBucket = () =>
<button
type="button"
className={`btn btn-xs btn-primary ms-auto ${
className={`btn btn-sm btn-primary ms-auto ${
action_bucket ? "d-none" : ""
}`}
onClick={() => setAction_bucket(true)}
@ -266,9 +265,9 @@ const ManageBucket = () =>
</div>
<div>
{!action_bucket ? (
<div className="table-responsive text-nowrap pt-1 px-2 px-sm-0">
<div className="table-responsive text-nowrap pt-1 px-2 px-sm-0 mt-3">
<table className="table px-2">
<thead className="p-0 table-light">
<thead className="p-0">
<tr className="p-0">
<th
colSpan={2}
@ -332,29 +331,28 @@ const ManageBucket = () =>
<td
className="text-start d-none d-sm-table-cell text-truncate"
style={{
maxWidth: "300px",
maxWidth: "300px",
whiteSpace: "wrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
title={bucket.description}
title={bucket.description}
>
{bucket.description}
</td>
<td>{bucket.numberOfContacts}</td>
<td className="justify-content-center">
{(DirManager ||
{(DirManager ||
DirAdmin ||
bucket?.createdBy?.id ===
profile?.employeeInfo?.id) && (
<div className="d-flex justify-content-center align-items-center gap-2">
<i
<i
className="bx bx-edit bx-sm text-primary cursor-pointer "
onClick={() => {
select_bucket(bucket);
setAction_bucket(true);
}}
}}
></i>
<i
className="bx bx-trash bx-sm text-danger cursor-pointer"

View File

@ -7,12 +7,18 @@ import showToast from "../../services/toastService";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import "../common/TextEditor/Editor.css";
const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, setProfileContact, }) => {
const NoteCardDirectory = ({
refetchProfile,
refetchNotes,
noteItem,
contactId,
setProfileContact,
}) => {
const [editing, setEditing] = useState(false);
const [editorValue, setEditorValue] = useState(noteItem.note);
const [isLoading, setIsLoading] = useState(false);
const [ isDeleting, setIsDeleting ] = useState( false );
const [isActivProcess,setActiveProcessing]= useState(false)
const [isDeleting, setIsDeleting] = useState(false);
const [isActivProcess, setActiveProcessing] = useState(false);
const handleUpdateNote = async () => {
try {
setIsLoading(true);
@ -51,8 +57,8 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
cacheData("Contact Profile", updatedProfile);
}
setEditing(false);
setIsLoading( false );
setIsLoading(false);
showToast("Note Updated successfully", "success");
} catch (error) {
setIsLoading(false);
@ -66,8 +72,11 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
const handleDeleteNote = async (activeStatue) => {
try {
activeStatue ? setActiveProcessing(true) : setIsDeleting(true)
const resp = await DirectoryRepository.DeleteNote(noteItem.id,activeStatue);
activeStatue ? setActiveProcessing(true) : setIsDeleting(true);
const resp = await DirectoryRepository.DeleteNote(
noteItem.id,
activeStatue
);
setProfileContact((prev) => ({
...prev,
notes: prev.notes.filter((note) => note.id !== noteItem.id),
@ -91,11 +100,14 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
cacheData("Contact Profile", updatedCache);
}
setIsDeleting( false );
setActiveProcessing( false )
refetchNotes( contactId, false )
refetchProfile(contactId)
showToast(`Note ${activeStatue ? "Restored":"Deleted"} Successfully`, "success");
setIsDeleting(false);
setActiveProcessing(false);
refetchNotes(contactId, false);
refetchProfile(contactId);
showToast(
`Note ${activeStatue ? "Restored" : "Deleted"} Successfully`,
"success"
);
} catch (error) {
setIsDeleting(false);
const msg =
@ -107,11 +119,15 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
};
return (
<div
className="card p-1 shadow-sm border-1 mb-2 conntactNote"
style={{ width: "100%", minWidth: "300px", borderRadius: "0px", background: `${noteItem.isActive ? "": "#f8f6f6"}` }}
className="card p-1 shadow-sm border-1 mb-5 conntactNote rounded"
style={{
width: "100%",
minWidth: "300px",
borderRadius: "0px",
background: `${noteItem.isActive ? "" : "#f8f6f6"}`,
}}
key={noteItem.id}
>
<div className="d-flex justify-content-between align-items-center mb-1">
<div className="d-flex align-items-center">
<Avatar
@ -133,40 +149,38 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
</span>
</div>
</div>
<div>
{noteItem.isActive ? (
<>
<i
className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
onClick={() => setEditing(true)}
></i>
<div>
{noteItem.isActive ? (
<>
<i
className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
onClick={() => setEditing(true)}
></i>
{!isDeleting ? (
<i
className="bx bx-trash bx-sm me-1 text-secondary cursor-pointer"
onClick={() => handleDeleteNote(!noteItem.isActive)}
></i>
) : (
<div
className="spinner-border spinner-border-sm text-secondary"
role="status"
>
<span className="visually-hidden">Loading...</span>
{!isDeleting ? (
<i
className="bx bx-trash bx-sm me-1 text-secondary cursor-pointer"
onClick={() => handleDeleteNote(!noteItem.isActive)}
></i>
) : (
<div
className="spinner-border spinner-border-sm text-secondary"
role="status"
>
<span className="visually-hidden">Loading...</span>
</div>
)}
</>
) : isActivProcess ? (
<i className="bx bx-loader-alt bx-spin text-primary"></i>
) : (
<i
className="bx bx-recycle me-1 text-primary cursor-pointer"
onClick={() => handleDeleteNote(!noteItem.isActive)}
title="Restore"
></i>
)}
</div>
)}
</>
) : isActivProcess ? (
< i className='bx bx-loader-alt bx-spin text-primary' ></i>
) : (
<i
className="bx bx-recycle me-1 text-primary cursor-pointer"
onClick={() => handleDeleteNote(!noteItem.isActive)}
title="Restore"
></i>
)}
</div>
</div>
<hr className="mt-0" />

View File

@ -16,13 +16,18 @@ const schema = z.object({
note: z.string().min(1, { message: "Note is required" }),
});
const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileContact }) => {
const NotesDirectory = ({
refetchProfile,
isLoading,
contactProfile,
setProfileContact,
}) => {
const [IsActive, setIsActive] = useState(true);
const {contactNotes,refetch} = useContactNotes( contactProfile?.id, true );
const { contactNotes, refetch } = useContactNotes(contactProfile?.id, true);
const [NotesData, setNotesData] = useState();
const [IsSubmitting, setIsSubmitting] = useState(false);
const [addNote, setAddNote] = useState(false);
const [addNote, setAddNote] = useState(true);
const {
register,
handleSubmit,
@ -70,7 +75,7 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
setValue("note", "");
setIsSubmitting(false);
showToast("Note added successfully!", "success");
setAddNote(false);
setAddNote(true);
setIsActive(true);
} catch (error) {
setIsSubmitting(false);
@ -85,14 +90,12 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
const onCancel = () => {
setValue("note", "");
};
const handleSwitch = () =>
{
setIsActive( !IsActive )
if ( IsActive )
{
refetch(contactProfile?.id, false)
const handleSwitch = () => {
setIsActive(!IsActive);
if (IsActive) {
refetch(contactProfile?.id, false);
}
}
};
return (
<div className="text-start">
@ -103,7 +106,7 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
<input
type="checkbox"
className="switch-input"
onChange={()=>handleSwitch(!IsActive)}
onChange={() => handleSwitch(!IsActive)}
value={IsActive}
/>
<span className="switch-toggle-slider">
@ -114,24 +117,11 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
{/* <i class="icon-base bx bx-x"></i> */}
</span>
</span>
<span className="switch-label small-text">Show Including Inactive Notes</span>
<span className="switch-label ">Show Including Inactive Notes</span>
</label>
</div>
</div>
<div className="d-flex justify-content-end px-2">
<span
className={`btn btn-xs ${addNote ? "btn-danger" : "btn-primary"}`}
onClick={() => setAddNote(!addNote)}
>
{/* <i
className={`icon-base bx ${
addNote ? "bx-x bx-sm" : "bx-pencil"
} bx-xs `}
></i> */}
{addNote ? "close" : "Add Note"}
</span>
</div>
{addNote && (
<form onSubmit={handleSubmit(onSubmit)}>
<Editor
@ -146,6 +136,14 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
)}
</form>
)}
<div className="d-flex justify-content-end px-2">
<span
className={`btn btn-sm ${addNote ? "btn-danger" : "btn-primary"}`}
onClick={() => setAddNote(!addNote)}
>
{addNote ? "Hide Editor" : "Add Note"}
</span>
</div>
<div className=" justify-content-start px-1 mt-1">
{isLoading && (
<div className="text-center">
@ -154,32 +152,31 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
</div>
)}
{!isLoading &&
[...(IsActive ? contactProfile?.notes || [] : contactNotes || [])]
.reverse()
.map((noteItem) => (
<NoteCardDirectory
refetchProfile={refetchProfile}
refetchNotes={refetch}
refetchContact ={refetch}
noteItem={noteItem}
contactId={contactProfile?.id}
setProfileContact={setProfileContact}
key={noteItem.id}
/>
))}
[...(IsActive ? contactProfile?.notes || [] : contactNotes || [])]
.reverse()
.map((noteItem) => (
<NoteCardDirectory
refetchProfile={refetchProfile}
refetchNotes={refetch}
refetchContact={refetch}
noteItem={noteItem}
contactId={contactProfile?.id}
setProfileContact={setProfileContact}
key={noteItem.id}
/>
))}
{IsActive && (
<div>
{!isLoading && contactProfile?.notes.length == 0 && !addNote && (
<div className="text-center">No Notes Found</div>
<div className="text-center mt-5">No Notes Found</div>
)}
</div>
)}
{!IsActive && (
<div>
{!isLoading && contactNotes.length == 0 && !addNote && (
<div className="text-center">No Notes Found</div>
<div className="text-center mt-5">No Notes Found</div>
)}
</div>
)}

View File

@ -11,7 +11,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
const [profileContact, setProfileContact] = useState();
const [expanded, setExpanded] = useState(false);
const description = contactProfile?.description || "";
const limit = 100;
const limit = 500;
const toggleReadMore = () => setExpanded(!expanded);
@ -107,10 +107,10 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
<p className="m-0">Created : </p>
</div>
<div className="d-flex align-items-center">
<li className="list-inline-item">
<i className="bx bx-calendar-week bx-xs me-1"></i>
{moment(contactProfile.createdAt).format("MMMM, DD YYYY")}
</li>
<li className="list-inline-item">
<i className="bx bx-calendar-week bx-xs me-1"></i>
{moment(contactProfile.createdAt).format("MMMM, DD YYYY")}
</li>
</div>
</div>
)}
@ -202,8 +202,11 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
</div>
)}
<div className="p-3 alert alert-secondary text-small text-start rounded muted">
<small className="fw-130">
<div className="d-flex mb-2 align-items-start">
<div style={{ minWidth: "100px" }}>
<p className="m-0 text-start">Description :</p>
</div>
<div className="text-start">
{displayText}
{isLong && (
<span
@ -213,8 +216,9 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
{expanded ? "Read less" : "Read more"}
</span>
)}
</small>
</div>
</div>
<hr className="my-1" />
<NotesDirectory
refetchProfile={refetch}

View File

@ -33,7 +33,7 @@ const Editor = ({
];
return (
<div className="editor-wrapper">
<div className="editor-wrapper m-5">
<div id="custom-toolbar" className="ql-toolbar ql-snow custom-toolbar">
<div className="d-flex justify-content-between align-items-center w-100">
{/* Left: Quill Format Buttons */}