Compare commits
No commits in common. "2bdaed1d83a6bce24ae641777101ad7a1f57ba8f" and "f932a4c5a466512d494dcaa10a230e2452951f1e" have entirely different histories.
2bdaed1d83
...
f932a4c5a4
@ -1,256 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import ReactQuill from "react-quill";
|
|
||||||
import moment from "moment";
|
|
||||||
import Avatar from "../common/Avatar";
|
|
||||||
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
|
|
||||||
import showToast from "../../services/toastService";
|
|
||||||
import { cacheData, getCachedData } from "../../slices/apiDataManager";
|
|
||||||
import ConfirmModal from "../common/ConfirmModal"; // Make sure path is correct
|
|
||||||
import "../common/TextEditor/Editor.css";
|
|
||||||
import ProfileContactDirectory from "./ProfileContactDirectory";
|
|
||||||
import GlobalModel from "../common/GlobalModel";
|
|
||||||
|
|
||||||
const NoteCardDirectoryEditable = ({
|
|
||||||
noteItem,
|
|
||||||
contactId,
|
|
||||||
onNoteUpdate,
|
|
||||||
onNoteDelete,
|
|
||||||
}) => {
|
|
||||||
const [editing, setEditing] = useState(false);
|
|
||||||
const [editorValue, setEditorValue] = useState(noteItem.note);
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
const [isDeleting, setIsDeleting] = useState(false);
|
|
||||||
const [isRestoring, setIsRestoring] = useState(false);
|
|
||||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
|
||||||
const [open_contact, setOpen_contact] = useState(null);
|
|
||||||
const [isOpenModalNote, setIsOpenModalNote] = useState(false);
|
|
||||||
|
|
||||||
const handleUpdateNote = async () => {
|
|
||||||
try {
|
|
||||||
setIsLoading(true);
|
|
||||||
const payload = {
|
|
||||||
id: noteItem.id,
|
|
||||||
note: editorValue,
|
|
||||||
contactId,
|
|
||||||
};
|
|
||||||
const response = await DirectoryRepository.UpdateNote(noteItem.id, payload);
|
|
||||||
|
|
||||||
const cachedContactProfile = getCachedData("Contact Profile");
|
|
||||||
if (cachedContactProfile?.contactId === contactId) {
|
|
||||||
const updatedCache = {
|
|
||||||
...cachedContactProfile,
|
|
||||||
data: {
|
|
||||||
...cachedContactProfile.data,
|
|
||||||
notes: cachedContactProfile.data.notes.map((note) =>
|
|
||||||
note.id === noteItem.id ? response.data : note
|
|
||||||
),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
cacheData("Contact Profile", updatedCache);
|
|
||||||
}
|
|
||||||
|
|
||||||
onNoteUpdate?.(response.data);
|
|
||||||
setEditing(false);
|
|
||||||
showToast("Note updated successfully", "success");
|
|
||||||
} catch (error) {
|
|
||||||
showToast("Failed to update note", "error");
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const suspendEmployee = async () => {
|
|
||||||
try {
|
|
||||||
setIsDeleting(true);
|
|
||||||
await DirectoryRepository.DeleteNote(noteItem.id, false);
|
|
||||||
onNoteDelete?.(noteItem.id);
|
|
||||||
setIsDeleteModalOpen(false);
|
|
||||||
showToast("Note deleted successfully", "success");
|
|
||||||
} catch (error) {
|
|
||||||
showToast("Failed to delete note", "error");
|
|
||||||
} finally {
|
|
||||||
setIsDeleting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const contactProfile = (contactId) => {
|
|
||||||
DirectoryRepository.GetContactProfile(contactId).then((res) => {
|
|
||||||
setOpen_contact(res?.data);
|
|
||||||
setIsOpenModalNote(true);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRestore = async () => {
|
|
||||||
try {
|
|
||||||
setIsRestoring(true);
|
|
||||||
await DirectoryRepository.DeleteNote(noteItem.id, true);
|
|
||||||
onNoteDelete?.(noteItem.id);
|
|
||||||
showToast("Note restored successfully", "success");
|
|
||||||
} catch (error) {
|
|
||||||
showToast("Failed to restore note", "error");
|
|
||||||
} finally {
|
|
||||||
setIsRestoring(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
|
|
||||||
{isOpenModalNote && (
|
|
||||||
<GlobalModel
|
|
||||||
isOpen={isOpenModalNote}
|
|
||||||
closeModal={() => {
|
|
||||||
setOpen_contact(null);
|
|
||||||
setIsOpenModalNote(false);
|
|
||||||
}}
|
|
||||||
size="xl"
|
|
||||||
>
|
|
||||||
{open_contact && (
|
|
||||||
<ProfileContactDirectory
|
|
||||||
contact={open_contact}
|
|
||||||
setOpen_contact={setOpen_contact}
|
|
||||||
closeModal={() => setIsOpenModalNote(false)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</GlobalModel>
|
|
||||||
)}
|
|
||||||
<div
|
|
||||||
className="card p-1 shadow-sm border-1 mb-4 p-4 rounded"
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
background: noteItem.isActive ? "#fff" : "#f8f6f6",
|
|
||||||
}}
|
|
||||||
key={noteItem.id}
|
|
||||||
>
|
|
||||||
{/* Header */}
|
|
||||||
<div className="d-flex justify-content-between align-items-center mb-1">
|
|
||||||
<div className="d-flex align-items-center">
|
|
||||||
|
|
||||||
<Avatar
|
|
||||||
size="xs"
|
|
||||||
firstName={noteItem?.createdBy?.firstName}
|
|
||||||
lastName={noteItem?.createdBy?.lastName}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<div className="d-flex ms-0 align-middle cursor-pointer" onClick={() =>contactProfile(noteItem.contactId)}>
|
|
||||||
<span>
|
|
||||||
<span className="fw-bold "> {noteItem?.contactName} </span> <span className="text-muted font-weight-normal">
|
|
||||||
( {noteItem?.organizationName})
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="d-flex ms-0 align-middle">
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="d-flex ms-0 mt-2">
|
|
||||||
<span className="text-muted">
|
|
||||||
by <span className="fw-bold "> {noteItem?.createdBy?.firstName} {noteItem?.createdBy?.lastName} </span>
|
|
||||||
<span className="text-muted">
|
|
||||||
on {moment
|
|
||||||
.utc(noteItem?.createdAt)
|
|
||||||
.add(5, "hours")
|
|
||||||
.add(30, "minutes")
|
|
||||||
.format("MMMM DD, YYYY [at] hh:mm A")}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Action Icons */}
|
|
||||||
<div>
|
|
||||||
{noteItem.isActive ? (
|
|
||||||
<>
|
|
||||||
<i
|
|
||||||
className="bx bxs-edit bx-sm me-2 text-primary cursor-pointer"
|
|
||||||
onClick={() => setEditing(true)}
|
|
||||||
title="Edit"
|
|
||||||
></i>
|
|
||||||
{!isDeleting ? (
|
|
||||||
<i
|
|
||||||
className="bx bx-trash bx-sm me-2 text-danger cursor-pointer"
|
|
||||||
onClick={() => setIsDeleteModalOpen(true)}
|
|
||||||
title="Delete"
|
|
||||||
></i>
|
|
||||||
) : (
|
|
||||||
<div className="spinner-border spinner-border-sm text-danger" />
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : isRestoring ? (
|
|
||||||
<i className="bx bx-loader-alt bx-spin text-primary"></i>
|
|
||||||
) : (
|
|
||||||
<i
|
|
||||||
className="bx bx-recycle me-2 text-success cursor-pointer"
|
|
||||||
onClick={handleRestore}
|
|
||||||
title="Restore"
|
|
||||||
></i>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr className="mt-0 mb-2" />
|
|
||||||
|
|
||||||
{/* Editor or Content */}
|
|
||||||
{editing ? (
|
|
||||||
<>
|
|
||||||
<ReactQuill
|
|
||||||
value={editorValue}
|
|
||||||
onChange={setEditorValue}
|
|
||||||
theme="snow"
|
|
||||||
className="compact-editor"
|
|
||||||
/>
|
|
||||||
<div className="d-flex justify-content-end gap-3 mt-2">
|
|
||||||
<span
|
|
||||||
className="text-secondary cursor-pointer"
|
|
||||||
onClick={() => setEditing(false)}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className="text-primary cursor-pointer"
|
|
||||||
onClick={handleUpdateNote}
|
|
||||||
>
|
|
||||||
{isLoading ? "Saving..." : "Submit"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
className="px-10 pb-2 text-start"
|
|
||||||
dangerouslySetInnerHTML={{ __html: noteItem.note }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Delete Confirm Modal */}
|
|
||||||
{isDeleteModalOpen && (
|
|
||||||
<div
|
|
||||||
className={`modal fade ${isDeleteModalOpen ? "show" : ""}`}
|
|
||||||
tabIndex="-1"
|
|
||||||
role="dialog"
|
|
||||||
style={{
|
|
||||||
display: isDeleteModalOpen ? "block" : "none",
|
|
||||||
backgroundColor: "rgba(0,0,0,0.5)",
|
|
||||||
}}
|
|
||||||
aria-hidden="false"
|
|
||||||
>
|
|
||||||
<ConfirmModal
|
|
||||||
type={"delete"}
|
|
||||||
header={"Delete Note"}
|
|
||||||
message={"Are you sure you want to delete this note?"}
|
|
||||||
onSubmit={suspendEmployee}
|
|
||||||
onClose={() => setIsDeleteModalOpen(false)}
|
|
||||||
loading={isDeleting}
|
|
||||||
paramData={noteItem}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NoteCardDirectoryEditable;
|
|
||||||
@ -1,173 +0,0 @@
|
|||||||
import React, { useEffect, useState, useMemo } from "react";
|
|
||||||
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
|
|
||||||
import NoteCardDirectoryEditable from "./NoteCardDirectoryEditable";
|
|
||||||
|
|
||||||
const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAppliedNotes }) => {
|
|
||||||
const [allNotes, setAllNotes] = useState([]);
|
|
||||||
const [filteredNotes, setFilteredNotes] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
|
||||||
const [totalPages, setTotalPages] = useState(1);
|
|
||||||
const [selectedCreators, setSelectedCreators] = useState([]);
|
|
||||||
const [selectedOrgs, setSelectedOrgs] = useState([]);
|
|
||||||
const pageSize = 20;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchNotes();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const fetchNotes = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const response = await DirectoryRepository.GetNotes(1000, 1);
|
|
||||||
const fetchedNotes = response.data?.data || [];
|
|
||||||
setAllNotes(fetchedNotes);
|
|
||||||
setNotesForFilter(fetchedNotes)
|
|
||||||
|
|
||||||
const creatorsSet = new Set();
|
|
||||||
const orgsSet = new Set();
|
|
||||||
|
|
||||||
fetchedNotes.forEach((note) => {
|
|
||||||
const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim();
|
|
||||||
if (creator) creatorsSet.add(creator);
|
|
||||||
|
|
||||||
const org = note.organizationName;
|
|
||||||
if (org) orgsSet.add(org);
|
|
||||||
});
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to fetch notes:", error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const applyCombinedFilter = () => {
|
|
||||||
const lowerSearch = searchText?.toLowerCase() || "";
|
|
||||||
|
|
||||||
const filtered = allNotes.filter((noteItem) => {
|
|
||||||
const creator = `${noteItem.createdBy?.firstName || ""} ${noteItem.createdBy?.lastName || ""}`.trim();
|
|
||||||
const org = noteItem.organizationName;
|
|
||||||
|
|
||||||
const matchesCreator = selectedCreators.length === 0 || selectedCreators.includes(creator);
|
|
||||||
const matchesOrg = selectedOrgs.length === 0 || selectedOrgs.includes(org);
|
|
||||||
|
|
||||||
const plainNote = noteItem?.note?.replace(/<[^>]+>/g, "").toLowerCase();
|
|
||||||
|
|
||||||
const stringValues = [];
|
|
||||||
const extractStrings = (obj) => {
|
|
||||||
for (const key in obj) {
|
|
||||||
const value = obj[key];
|
|
||||||
if (typeof value === "string") {
|
|
||||||
stringValues.push(value.toLowerCase());
|
|
||||||
} else if (typeof value === "object" && value !== null) {
|
|
||||||
extractStrings(value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
extractStrings(noteItem);
|
|
||||||
stringValues.push(plainNote, creator.toLowerCase());
|
|
||||||
|
|
||||||
const matchesSearch = stringValues.some((val) => val.includes(lowerSearch));
|
|
||||||
|
|
||||||
return matchesCreator && matchesOrg && matchesSearch;
|
|
||||||
});
|
|
||||||
|
|
||||||
setFilteredNotes(filtered);
|
|
||||||
setCurrentPage(1);
|
|
||||||
setTotalPages(Math.ceil(filtered.length / pageSize));
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
applyCombinedFilter();
|
|
||||||
}, [searchText, allNotes]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setFilteredNotes(filterAppliedNotes);
|
|
||||||
}, [filterAppliedNotes])
|
|
||||||
|
|
||||||
const currentItems = useMemo(() => {
|
|
||||||
const startIndex = (currentPage - 1) * pageSize;
|
|
||||||
return filteredNotes.slice(startIndex, startIndex + pageSize);
|
|
||||||
}, [filteredNotes, currentPage]);
|
|
||||||
|
|
||||||
const handlePageClick = (page) => {
|
|
||||||
if (page !== currentPage) {
|
|
||||||
setCurrentPage(page);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) return <p className="mt-10 text-center">Loading notes...</p>;
|
|
||||||
|
|
||||||
if (!filteredNotes.length) return <p className="mt-10 text-center">No matching notes found</p>;
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-100 h-100 ">
|
|
||||||
{/* Filter Dropdown */}
|
|
||||||
<div className="dropdown mb-3 ms-2">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Notes List */}
|
|
||||||
<div className="d-flex flex-column text-start" style={{ gap: "0rem", minHeight: "100%" }}>
|
|
||||||
{currentItems.map((noteItem) => (
|
|
||||||
<NoteCardDirectoryEditable
|
|
||||||
key={noteItem.id}
|
|
||||||
noteItem={noteItem}
|
|
||||||
contactId={noteItem.contactId}
|
|
||||||
onNoteUpdate={(updatedNote) => {
|
|
||||||
setAllNotes((prevNotes) =>
|
|
||||||
prevNotes.map((n) => (n.id === updatedNote.id ? updatedNote : n))
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
onNoteDelete={() => fetchNotes()}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Pagination */}
|
|
||||||
{totalPages > 1 && (
|
|
||||||
<div className="d-flex justify-content-end mt-3 me-3">
|
|
||||||
<div className="d-flex align-items-center gap-2">
|
|
||||||
<button
|
|
||||||
className="btn btn-sm rounded-circle border"
|
|
||||||
onClick={() => handlePageClick(Math.max(1, currentPage - 1))}
|
|
||||||
disabled={currentPage === 1}
|
|
||||||
title="Previous"
|
|
||||||
>
|
|
||||||
«
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{[...Array(totalPages)].map((_, i) => {
|
|
||||||
const page = i + 1;
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={page}
|
|
||||||
className={`btn btn-sm rounded-circle border ${page === currentPage ? "btn-primary text-white" : "btn-outline-primary"
|
|
||||||
}`}
|
|
||||||
style={{ width: "32px", height: "32px", padding: 0 }}
|
|
||||||
onClick={() => handlePageClick(page)}
|
|
||||||
>
|
|
||||||
{page}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
<button
|
|
||||||
className="btn btn-sm rounded-circle border"
|
|
||||||
onClick={() => handlePageClick(Math.min(totalPages, currentPage + 1))}
|
|
||||||
disabled={currentPage === totalPages}
|
|
||||||
title="Next"
|
|
||||||
>
|
|
||||||
»
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NotesCardViewDirectory;
|
|
||||||
@ -20,7 +20,6 @@ import DirectoryPageHeader from "./DirectoryPageHeader";
|
|||||||
import ManageBucket from "../../components/Directory/ManageBucket";
|
import ManageBucket from "../../components/Directory/ManageBucket";
|
||||||
import { useFab } from "../../Context/FabContext";
|
import { useFab } from "../../Context/FabContext";
|
||||||
import { DireProvider, useDir } from "../../Context/DireContext";
|
import { DireProvider, useDir } from "../../Context/DireContext";
|
||||||
import NotesCardViewDirectory from "../../components/Directory/NotesCardViewDirectory";
|
|
||||||
|
|
||||||
const Directory = ({ IsPage = true, prefernceContacts }) => {
|
const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||||
const [projectPrefernce, setPerfence] = useState(null);
|
const [projectPrefernce, setPerfence] = useState(null);
|
||||||
@ -32,17 +31,11 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
|||||||
const [ContactList, setContactList] = useState([]);
|
const [ContactList, setContactList] = useState([]);
|
||||||
const [contactCategories, setContactCategories] = useState([]);
|
const [contactCategories, setContactCategories] = useState([]);
|
||||||
const [searchText, setSearchText] = useState("");
|
const [searchText, setSearchText] = useState("");
|
||||||
const [viewType, setViewType] = useState("notes");
|
const [listView, setListView] = useState(false);
|
||||||
const [selectedBucketIds, setSelectedBucketIds] = useState([]);
|
const [selectedBucketIds, setSelectedBucketIds] = useState([]);
|
||||||
const [deleteContact, setDeleteContact] = useState(null);
|
const [deleteContact, setDeleteContact] = useState(null);
|
||||||
const [IsDeleting, setDeleting] = useState(false);
|
const [IsDeleting, setDeleting] = useState(false);
|
||||||
const [openBucketModal, setOpenBucketModal] = useState(false);
|
const [openBucketModal, setOpenBucketModal] = useState(false);
|
||||||
const [notes, setNotes] = useState([]);
|
|
||||||
const [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
|
|
||||||
// const [selectedOrgs, setSelectedOrgs] = useState([]);
|
|
||||||
|
|
||||||
// ✅ Changed to an array for multiple selections
|
|
||||||
const [selectedNoteNames, setSelectedNoteNames] = useState([]);
|
|
||||||
|
|
||||||
const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
|
const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
|
||||||
const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
|
const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
|
||||||
@ -78,6 +71,8 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
|||||||
setIsOpenModal(false);
|
setIsOpenModal(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
|
||||||
|
// setContactList(updatedContacts);
|
||||||
refetch(IsActive, prefernceContacts);
|
refetch(IsActive, prefernceContacts);
|
||||||
refetchBucket();
|
refetchBucket();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@ -254,7 +249,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
|||||||
|
|
||||||
return () => setActions([]);
|
return () => setActions([]);
|
||||||
}, [IsPage, buckets]);
|
}, [IsPage, buckets]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setPerfence(prefernceContacts);
|
setPerfence(prefernceContacts);
|
||||||
}, [prefernceContacts]);
|
}, [prefernceContacts]);
|
||||||
@ -332,14 +326,14 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
|||||||
</GlobalModel>
|
</GlobalModel>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="card p-0 mb-0">
|
<div className="card p-0 mb-2 ">
|
||||||
<div className="card-body p-1 pb-0">
|
<div className="card-body p-1 pb-0">
|
||||||
<DirectoryPageHeader
|
<DirectoryPageHeader
|
||||||
searchText={searchText}
|
searchText={searchText}
|
||||||
setSearchText={setSearchText}
|
setSearchText={setSearchText}
|
||||||
setIsActive={setIsActive}
|
setIsActive={setIsActive}
|
||||||
viewType={viewType}
|
listView={listView}
|
||||||
setViewType={setViewType}
|
setListView={setListView}
|
||||||
filteredBuckets={filteredBuckets}
|
filteredBuckets={filteredBuckets}
|
||||||
tempSelectedBucketIds={tempSelectedBucketIds}
|
tempSelectedBucketIds={tempSelectedBucketIds}
|
||||||
handleTempBucketChange={handleTempBucketChange}
|
handleTempBucketChange={handleTempBucketChange}
|
||||||
@ -352,33 +346,56 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
|||||||
IsActive={IsActive}
|
IsActive={IsActive}
|
||||||
setOpenBucketModal={setOpenBucketModal}
|
setOpenBucketModal={setOpenBucketModal}
|
||||||
contactsToExport={contacts}
|
contactsToExport={contacts}
|
||||||
notesToExport={notes}
|
|
||||||
selectedNoteNames={selectedNoteNames}
|
|
||||||
setSelectedNoteNames={setSelectedNoteNames}
|
|
||||||
notesForFilter={notes}
|
|
||||||
setFilterAppliedNotes={setFilterAppliedNotes}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="card-minHeight mt-0">
|
<div className="card-minHeight">
|
||||||
{(viewType === "card" || viewType === "list" || viewType === "notes") && (
|
{/* Messages when listView is false */}
|
||||||
<div className="d-flex flex-column justify-content-center align-items-center text-center">
|
{!listView && (
|
||||||
{!loading && (viewType === "card" || viewType === "list") && contacts?.length === 0 && (
|
<div className="d-flex flex-column justify-content-center align-items-center text-center ">
|
||||||
|
{loading && <p className="mt-10">Loading...</p>}
|
||||||
|
{!loading && contacts?.length === 0 && (
|
||||||
<p className="mt-10">No contact found</p>
|
<p className="mt-10">No contact found</p>
|
||||||
)}
|
)}
|
||||||
{!loading &&
|
{!loading && contacts?.length > 0 && currentItems.length === 0 && (
|
||||||
(viewType === "card" || viewType === "list") &&
|
<p className="mt-10">No matching contact found</p>
|
||||||
contacts?.length > 0 &&
|
)}
|
||||||
currentItems.length === 0 && (
|
|
||||||
<p className="mt-10">No matching contact found</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{viewType === "list" && (
|
{/* Table view (listView === true) */}
|
||||||
|
|
||||||
|
{listView ? (
|
||||||
<div className="card cursor-pointer mt-5">
|
<div className="card cursor-pointer mt-5">
|
||||||
<div className="card-body p-2 pb-1">
|
<div className="card-body p-2 pb-1">
|
||||||
<DirectoryListTableHeader>
|
<DirectoryListTableHeader>
|
||||||
|
{loading && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={10}>
|
||||||
|
{" "}
|
||||||
|
<p className="mt-10">Loading...</p>{" "}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loading && contacts?.length === 0 && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={10}>
|
||||||
|
<p className="mt-10">No contact found</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loading &&
|
||||||
|
currentItems.length === 0 &&
|
||||||
|
contacts?.length > 0 && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={10}>
|
||||||
|
<p className="mt-10">No matching contact found</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
|
||||||
{!loading &&
|
{!loading &&
|
||||||
currentItems.map((contact) => (
|
currentItems.map((contact) => (
|
||||||
<ListViewDirectory
|
<ListViewDirectory
|
||||||
@ -396,10 +413,8 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
|||||||
</DirectoryListTableHeader>
|
</DirectoryListTableHeader>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
) : (
|
||||||
|
<div className="row mt-5">
|
||||||
{viewType === "card" && (
|
|
||||||
<div className="row mt-4">
|
|
||||||
{!loading &&
|
{!loading &&
|
||||||
currentItems.map((contact) => (
|
currentItems.map((contact) => (
|
||||||
<div
|
<div
|
||||||
@ -421,26 +436,15 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{viewType === "notes" && (
|
|
||||||
<div className="mt-0">
|
|
||||||
<NotesCardViewDirectory
|
|
||||||
notes={notes}
|
|
||||||
setNotesForFilter={setNotes}
|
|
||||||
searchText={searchText}
|
|
||||||
setIsOpenModalNote={setIsOpenModalNote}
|
|
||||||
filterAppliedNotes={filterAppliedNotes}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Pagination */}
|
{/* Pagination */}
|
||||||
{!loading &&
|
{!loading &&
|
||||||
viewType !== "notes" &&
|
|
||||||
contacts?.length > 0 &&
|
contacts?.length > 0 &&
|
||||||
currentItems.length > ITEMS_PER_PAGE && (
|
currentItems.length > ITEMS_PER_PAGE && (
|
||||||
<nav aria-label="Page navigation">
|
<nav aria-label="Page navigation">
|
||||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
<li
|
||||||
|
className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
|
||||||
|
>
|
||||||
<button
|
<button
|
||||||
className="page-link btn-xs"
|
className="page-link btn-xs"
|
||||||
onClick={() => paginate(currentPage - 1)}
|
onClick={() => paginate(currentPage - 1)}
|
||||||
@ -452,8 +456,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
|||||||
{[...Array(totalPages)].map((_, index) => (
|
{[...Array(totalPages)].map((_, index) => (
|
||||||
<li
|
<li
|
||||||
key={index}
|
key={index}
|
||||||
className={`page-item ${currentPage === index + 1 ? "active" : ""
|
className={`page-item ${
|
||||||
}`}
|
currentPage === index + 1 ? "active" : ""
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="page-link"
|
className="page-link"
|
||||||
@ -464,7 +469,11 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
|||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
<li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
|
<li
|
||||||
|
className={`page-item ${
|
||||||
|
currentPage === totalPages ? "disabled" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
<button
|
<button
|
||||||
className="page-link"
|
className="page-link"
|
||||||
onClick={() => paginate(currentPage + 1)}
|
onClick={() => paginate(currentPage + 1)}
|
||||||
@ -480,4 +489,4 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Directory;
|
export default Directory;
|
||||||
|
|||||||
@ -1,12 +1,13 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState, useRef } from "react";
|
||||||
|
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||||
import { exportToCSV, exportToExcel, printTable, exportToPDF } from "../../utils/tableExportUtils";
|
import { exportToCSV, exportToExcel, printTable, exportToPDF } from "../../utils/tableExportUtils";
|
||||||
|
|
||||||
const DirectoryPageHeader = ({
|
const DirectoryPageHeader = ({
|
||||||
searchText,
|
searchText,
|
||||||
setSearchText,
|
setSearchText,
|
||||||
setIsActive,
|
setIsActive,
|
||||||
viewType,
|
listView,
|
||||||
setViewType,
|
setListView,
|
||||||
filteredBuckets,
|
filteredBuckets,
|
||||||
tempSelectedBucketIds,
|
tempSelectedBucketIds,
|
||||||
handleTempBucketChange,
|
handleTempBucketChange,
|
||||||
@ -17,410 +18,142 @@ const DirectoryPageHeader = ({
|
|||||||
applyFilter,
|
applyFilter,
|
||||||
loading,
|
loading,
|
||||||
IsActive,
|
IsActive,
|
||||||
contactsToExport,
|
setOpenBucketModal,
|
||||||
notesToExport,
|
contactsToExport, // This prop receives the paginated data (currentItems)
|
||||||
selectedNoteNames,
|
|
||||||
setSelectedNoteNames,
|
|
||||||
notesForFilter,
|
|
||||||
setFilterAppliedNotes
|
|
||||||
}) => {
|
}) => {
|
||||||
const [filtered, setFiltered] = useState(0);
|
const [filtered, setFiltered] = useState(0);
|
||||||
const [filteredNotes, setFilteredNotes] = useState([]);
|
|
||||||
const [noteCreators, setNoteCreators] = useState([]);
|
|
||||||
const [allCreators, setAllCreators] = useState([]);
|
|
||||||
const [allOrganizations, setAllOrganizations] = useState([]);
|
|
||||||
const [filteredOrganizations, setFilteredOrganizations] = useState([]);
|
|
||||||
const [selectedCreators, setSelectedCreators] = useState([]);
|
|
||||||
const [selectedOrgs, setSelectedOrgs] = useState([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
const handleExport = (type) => {
|
||||||
setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
|
// Check if there's data to export
|
||||||
}, [tempSelectedBucketIds, tempSelectedCategoryIds]);
|
if (!contactsToExport || contactsToExport.length === 0) {
|
||||||
|
console.warn("No data to export. The current view is empty.");
|
||||||
|
// Optionally, you might want to show a user-friendly toast message here
|
||||||
useEffect(() => {
|
// showToast("No data to export on the current page.", "info");
|
||||||
if (viewType === "notes") {
|
|
||||||
if (notesToExport && notesToExport.length > 0) {
|
|
||||||
const uniqueNames = [...new Set(notesToExport.map(note => {
|
|
||||||
const firstName = note.createdBy?.firstName || "";
|
|
||||||
const lastName = note.createdBy?.lastName || "";
|
|
||||||
return `${firstName} ${lastName}`.trim();
|
|
||||||
}).filter(name => name !== ""))];
|
|
||||||
setNoteCreators(uniqueNames.sort());
|
|
||||||
} else {
|
|
||||||
setNoteCreators([]);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setNoteCreators([]);
|
|
||||||
}
|
|
||||||
}, [notesToExport, viewType]);
|
|
||||||
|
|
||||||
// Separate effect to clear selection only when switching away from notes
|
|
||||||
useEffect(() => {
|
|
||||||
if (viewType !== "notes" && selectedNoteNames.length > 0) {
|
|
||||||
setSelectedNoteNames([]);
|
|
||||||
}
|
|
||||||
}, [viewType]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const creatorsSet = new Set();
|
|
||||||
const orgsSet = new Set();
|
|
||||||
|
|
||||||
notesForFilter.forEach((note) => {
|
|
||||||
const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim();
|
|
||||||
if (creator) creatorsSet.add(creator);
|
|
||||||
|
|
||||||
const org = note.organizationName;
|
|
||||||
if (org) orgsSet.add(org);
|
|
||||||
});
|
|
||||||
|
|
||||||
setAllCreators([...creatorsSet].sort());
|
|
||||||
setAllOrganizations([...orgsSet].sort());
|
|
||||||
setFilteredOrganizations([...orgsSet].sort());
|
|
||||||
}, [notesForFilter])
|
|
||||||
|
|
||||||
|
|
||||||
const handleToggleNoteName = (name) => {
|
|
||||||
setSelectedNoteNames(prevSelectedNames => {
|
|
||||||
if (prevSelectedNames.includes(name)) {
|
|
||||||
return prevSelectedNames.filter(n => n !== name);
|
|
||||||
} else {
|
|
||||||
return [...prevSelectedNames, name];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateFilteredOrganizations = () => {
|
|
||||||
if (selectedCreators.length === 0) {
|
|
||||||
setFilteredOrganizations(allOrganizations);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const filteredOrgsSet = new Set();
|
// --- Core Change: Map contactsToExport to a simplified format ---
|
||||||
notesForFilter.forEach((note) => {
|
// const simplifiedContacts = contactsToExport.map(contact => ({
|
||||||
const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim();
|
// Name: contact.name || '',
|
||||||
if (selectedCreators.includes(creator)) {
|
// Organization: contact.organization || '', // Added Organization
|
||||||
if (note.organizationName) {
|
// Email: contact.contactEmails && contact.contactEmails.length > 0 ? contact.contactEmails[0].emailAddress : '',
|
||||||
filteredOrgsSet.add(note.organizationName);
|
// Phone: contact.contactPhones && contact.contactPhones.length > 0 ? contact.contactPhones[0].phoneNumber : '', // Changed 'Contact' to 'Phone' for clarity
|
||||||
}
|
// Category: contact.contactCategory ? contact.contactCategory.name : '', // Changed 'Role' to 'Category'
|
||||||
}
|
// }));
|
||||||
});
|
|
||||||
|
|
||||||
setFilteredOrganizations([...filteredOrgsSet].sort());
|
const simplifiedContacts = contactsToExport.map(contact => ({
|
||||||
};
|
Name: contact.name || '',
|
||||||
|
Organization: contact.organization || '',
|
||||||
const handleToggleCreator = (name) => {
|
Email: contact.contactEmails && contact.contactEmails.length > 0
|
||||||
const updated = selectedCreators.includes(name)
|
? contact.contactEmails.map(email => email.emailAddress).join(', ')
|
||||||
? selectedCreators.filter((n) => n !== name)
|
: '',
|
||||||
: [...selectedCreators, name];
|
Phone: contact.contactPhones && contact.contactPhones.length > 0
|
||||||
|
? contact.contactPhones.map(phone => phone.phoneNumber).join(', ')
|
||||||
setSelectedCreators(updated);
|
: '',
|
||||||
};
|
Category: contact.contactCategory ? contact.contactCategory.name : '',
|
||||||
|
}));
|
||||||
const handleToggleOrg = (name) => {
|
|
||||||
const updated = selectedOrgs.includes(name)
|
|
||||||
? selectedOrgs.filter((n) => n !== name)
|
|
||||||
: [...selectedOrgs, name];
|
|
||||||
|
|
||||||
setSelectedOrgs(updated);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
updateFilteredOrganizations();
|
|
||||||
}, [selectedCreators]);
|
|
||||||
|
|
||||||
const handleExport = (type) => {
|
|
||||||
let dataToExport = [];
|
|
||||||
|
|
||||||
if (viewType === "notes") {
|
|
||||||
if (!notesToExport || notesToExport.length === 0) {
|
|
||||||
console.warn("No notes to export.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const decodeHtmlEntities = (html) => {
|
|
||||||
const textarea = document.createElement("textarea");
|
|
||||||
textarea.innerHTML = html;
|
|
||||||
return textarea.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
const cleanNoteText = (html) => {
|
|
||||||
if (!html) return "";
|
|
||||||
const stripped = html.replace(/<[^>]+>/g, "");
|
|
||||||
const decoded = decodeHtmlEntities(stripped);
|
|
||||||
return decoded.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
|
|
||||||
};
|
|
||||||
|
|
||||||
const cleanName = (name) => {
|
|
||||||
if (!name) return "";
|
|
||||||
return name.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
|
|
||||||
};
|
|
||||||
|
|
||||||
dataToExport = notesToExport.map(note => ({
|
|
||||||
"Name": cleanName(`${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`),
|
|
||||||
"Notes": cleanNoteText(note.note),
|
|
||||||
"Created At": note.createdAt
|
|
||||||
? new Date(note.createdAt).toLocaleString("en-IN")
|
|
||||||
: "",
|
|
||||||
"Updated At": note.updatedAt
|
|
||||||
? new Date(note.updatedAt).toLocaleString("en-IN")
|
|
||||||
: "",
|
|
||||||
"Updated By": cleanName(
|
|
||||||
`${note.updatedBy?.firstName || ""} ${note.updatedBy?.lastName || ""}`
|
|
||||||
),
|
|
||||||
}));
|
|
||||||
|
|
||||||
} else {
|
|
||||||
if (!contactsToExport || contactsToExport.length === 0) {
|
|
||||||
console.warn("No contacts to export.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
dataToExport = contactsToExport.map(contact => ({
|
|
||||||
Name: contact.name || '',
|
|
||||||
Organization: contact.organization || '',
|
|
||||||
Email: contact.contactEmails?.map(email => email.emailAddress).join(', ') || '',
|
|
||||||
Phone: contact.contactPhones?.map(phone => phone.phoneNumber).join(', ') || '',
|
|
||||||
Category: contact.contactCategory?.name || '',
|
|
||||||
Tags: contact.tags?.map(tag => tag.name).join(', ') || '',
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
const today = new Date();
|
|
||||||
const formattedDate = `${today.getFullYear()}${String(today.getMonth() + 1).padStart(2, '0')}${String(today.getDate()).padStart(2, '0')}`;
|
|
||||||
|
|
||||||
const filename =
|
|
||||||
viewType === "notes"
|
|
||||||
? `Directory_Notes_${formattedDate}`
|
|
||||||
: `Directory_Contacts_${formattedDate}`;
|
|
||||||
|
|
||||||
|
console.log("Kaerik", simplifiedContacts)
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case "csv":
|
case "csv":
|
||||||
exportToCSV(dataToExport, filename);
|
exportToCSV(simplifiedContacts, "directory_contacts");
|
||||||
break;
|
break;
|
||||||
case "excel":
|
case "excel":
|
||||||
exportToExcel(dataToExport, filename);
|
exportToExcel(simplifiedContacts, "directory_contacts");
|
||||||
break;
|
break;
|
||||||
case "pdf":
|
case "pdf":
|
||||||
exportToPDF(dataToExport, filename);
|
exportToPDF(simplifiedContacts, "directory_contacts");
|
||||||
break;
|
break;
|
||||||
case "print":
|
case "print":
|
||||||
printTable(dataToExport, filename);
|
printTable(simplifiedContacts, "directory_contacts");
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const applyCombinedFilter = () => {
|
useEffect(() => {
|
||||||
const lowerSearch = searchText?.toLowerCase() || "";
|
setFiltered(
|
||||||
|
tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length
|
||||||
const filtered = notesForFilter.filter((noteItem) => {
|
);
|
||||||
const creator = `${noteItem.createdBy?.firstName || ""} ${noteItem.createdBy?.lastName || ""}`.trim();
|
}, [tempSelectedBucketIds, tempSelectedCategoryIds]);
|
||||||
const org = noteItem.organizationName;
|
|
||||||
|
|
||||||
const matchesCreator = selectedCreators.length === 0 || selectedCreators.includes(creator);
|
|
||||||
const matchesOrg = selectedOrgs.length === 0 || selectedOrgs.includes(org);
|
|
||||||
|
|
||||||
const plainNote = noteItem?.note?.replace(/<[^>]+>/g, "").toLowerCase();
|
|
||||||
|
|
||||||
const stringValues = [];
|
|
||||||
const extractStrings = (obj) => {
|
|
||||||
for (const key in obj) {
|
|
||||||
const value = obj[key];
|
|
||||||
if (typeof value === "string") {
|
|
||||||
stringValues.push(value.toLowerCase());
|
|
||||||
} else if (typeof value === "object" && value !== null) {
|
|
||||||
extractStrings(value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
extractStrings(noteItem);
|
|
||||||
stringValues.push(plainNote, creator.toLowerCase());
|
|
||||||
|
|
||||||
const matchesSearch = stringValues.some((val) => val.includes(lowerSearch));
|
|
||||||
|
|
||||||
return matchesCreator && matchesOrg && matchesSearch;
|
|
||||||
});
|
|
||||||
|
|
||||||
setFilteredNotes(filtered);
|
|
||||||
setFilterAppliedNotes(filtered);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="row mx-0 px-0 align-items-center mt-0">
|
<div className="row mx-0 px-0 align-items-center mt-2">
|
||||||
<div className="col-12 col-md-6 mb-0 px-1 d-flex align-items-center gap-4">
|
<div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
|
||||||
<ul className="nav nav-tabs mb-0" role="tablist">
|
|
||||||
<li className="nav-item" role="presentation">
|
|
||||||
<button
|
|
||||||
className={`nav-link ${viewType === "notes" ? "active" : ""}`}
|
|
||||||
onClick={() => setViewType("notes")}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i className="bx bx-note me-1"></i> Notes
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li className="nav-item" role="presentation">
|
|
||||||
<button
|
|
||||||
className={`nav-link ${viewType === "card" ? "active" : ""}`}
|
|
||||||
onClick={() => setViewType("card")}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<i className="bx bx-user me-1"></i> Contacts
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr className="my-0 mb-2" style={{ borderTop: "1px solid #dee2e6" }} />
|
|
||||||
|
|
||||||
<div className="row mx-0 px-0 align-items-center mt-0">
|
|
||||||
<div className="col-12 col-md-6 mb-2 px-5 d-flex align-items-center gap-4">
|
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type="search"
|
type="search"
|
||||||
className="form-control me-0"
|
className="form-control form-control-sm me-2"
|
||||||
placeholder={viewType === "notes" ? "Search Notes..." : "Search Contact..."}
|
placeholder="Search Contact..."
|
||||||
value={searchText}
|
value={searchText}
|
||||||
onChange={(e) => setSearchText(e.target.value)}
|
onChange={(e) => setSearchText(e.target.value)}
|
||||||
style={{ width: "200px" }}
|
style={{ width: "200px" }}
|
||||||
/>
|
/>
|
||||||
|
<div className="d-flex gap-2 ">
|
||||||
{/* Filter by funnel icon for Notes view */}
|
<button
|
||||||
{viewType === "notes" && (
|
type="button"
|
||||||
<div className="dropdown" style={{ width: "fit-content", minWidth: "400px" }}> {/* Added minWidth here */}
|
className={`btn btn-xs ${!listView ? "btn-primary" : "btn-outline-primary"
|
||||||
|
}`}
|
||||||
|
onClick={() => setListView(false)}
|
||||||
|
data-bs-toggle="tooltip"
|
||||||
|
data-bs-offset="0,8"
|
||||||
|
data-bs-placement="top"
|
||||||
|
data-bs-custom-class="tooltip"
|
||||||
|
title="Card View"
|
||||||
|
>
|
||||||
|
<i className="bx bx-grid-alt"></i>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`btn btn-xs ${listView ? "btn-primary" : "btn-outline-primary"
|
||||||
|
}`}
|
||||||
|
onClick={() => setListView(true)}
|
||||||
|
data-bs-toggle="tooltip"
|
||||||
|
data-bs-offset="0,8"
|
||||||
|
data-bs-placement="top"
|
||||||
|
data-bs-custom-class="tooltip"
|
||||||
|
title="List View"
|
||||||
|
>
|
||||||
|
<i className="bx bx-list-ul "></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="dropdown" style={{ width: "fit-content" }}>
|
||||||
|
<div className="dropdown" style={{ width: "fit-content" }}>
|
||||||
<a
|
<a
|
||||||
className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
|
className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
|
||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
>
|
>
|
||||||
<i className={`fa-solid fa-filter ms-1 fs-5 ${selectedCreators.length > 0 || selectedOrgs.length > 0 ? "text-primary" : "text-muted"}`}></i>
|
<i
|
||||||
{/* Removed the numerical badge for notes filter */}
|
className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? "text-primary" : "text-muted"
|
||||||
</a>
|
}`}
|
||||||
|
></i>
|
||||||
|
|
||||||
<div
|
|
||||||
className="dropdown-menu p-3"
|
|
||||||
style={{
|
|
||||||
minWidth: "600px",
|
|
||||||
maxHeight: "400px",
|
|
||||||
overflowY: "auto",
|
|
||||||
overflowX: "hidden",
|
|
||||||
whiteSpace: "normal"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="d-flex">
|
|
||||||
{/* Created By */}
|
|
||||||
<div className="pe-3" style={{ flex: 1 }}>
|
|
||||||
<p className="text-muted mb-1">Created By</p>
|
|
||||||
{allCreators.map((name, idx) => (
|
|
||||||
<div className="form-check mb-1" key={`creator-${idx}`}>
|
|
||||||
<input
|
|
||||||
className="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
id={`creator-${idx}`}
|
|
||||||
checked={selectedCreators.includes(name)}
|
|
||||||
onChange={() => handleToggleCreator(name)}
|
|
||||||
/>
|
|
||||||
<label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
|
|
||||||
{name}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Divider */}
|
|
||||||
{/* <div style={{ width: "1px", backgroundColor: "#dee2e6", margin: "0 12px" }}></div> */}
|
|
||||||
|
|
||||||
{/* Organization */}
|
|
||||||
<div className="ps-3" style={{ flex: 1 }}>
|
|
||||||
<p className="text-muted mb-1">Organization</p>
|
|
||||||
{filteredOrganizations.map((org, idx) => (
|
|
||||||
<div className="form-check mb-1" key={`org-${idx}`}>
|
|
||||||
<input
|
|
||||||
className="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
id={`org-${idx}`}
|
|
||||||
checked={selectedOrgs.includes(org)}
|
|
||||||
onChange={() => handleToggleOrg(org)}
|
|
||||||
/>
|
|
||||||
<label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
|
|
||||||
{org}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Buttons */}
|
|
||||||
<div className="d-flex justify-content-between mt-3">
|
|
||||||
<button
|
|
||||||
className="btn btn-sm btn-outline-danger"
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedCreators([]);
|
|
||||||
setSelectedOrgs([]);
|
|
||||||
setFilteredOrganizations(allOrganizations);
|
|
||||||
setFilterAppliedNotes(notesForFilter);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Clear
|
|
||||||
</button>
|
|
||||||
<button className="btn btn-sm btn-primary" onClick={applyCombinedFilter}>
|
|
||||||
Apply Filter
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
|
|
||||||
{(viewType === "card" || viewType === "list") && (
|
|
||||||
<div className="d-flex gap-2">
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`btn btn-xs ${viewType === "card" ? "btn-primary" : "btn-outline-primary"}`}
|
|
||||||
onClick={() => setViewType("card")}
|
|
||||||
>
|
|
||||||
<i className="bx bx-grid-alt"></i>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`btn btn-xs ${viewType === "list" ? "btn-primary" : "btn-outline-primary"}`}
|
|
||||||
onClick={() => setViewType("list")}
|
|
||||||
>
|
|
||||||
<i className="bx bx-list-ul me-1"></i>
|
|
||||||
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Filter by funnel icon for Contacts view (retains numerical badge) */}
|
|
||||||
{viewType !== "notes" && (
|
|
||||||
<div className="dropdown-center" style={{ width: "fit-content" }}>
|
|
||||||
<a
|
|
||||||
className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
|
|
||||||
data-bs-toggle="dropdown"
|
|
||||||
aria-expanded="false"
|
|
||||||
>
|
|
||||||
<i className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? "text-primary" : "text-muted"}`}></i>
|
|
||||||
{filtered > 0 && (
|
{filtered > 0 && (
|
||||||
<span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning" style={{ fontSize: "0.4rem" }}>
|
<span
|
||||||
|
className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning"
|
||||||
|
style={{ fontSize: "0.4rem" }}
|
||||||
|
>
|
||||||
{filtered}
|
{filtered}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<ul className="dropdown-menu p-3" style={{ width: "700px" }}>
|
<ul className="dropdown-menu p-3" style={{ width: "320px" }}>
|
||||||
<p className="text-muted m-0 h6">Filter by</p>
|
<div>
|
||||||
|
<p className="text-muted m-0 h6 ">Filter by</p>
|
||||||
|
|
||||||
<div className="d-flex flex-nowrap">
|
{/* Bucket Filter */}
|
||||||
<div className="mt-1 me-4" style={{ flexBasis: "50%" }}>
|
<div className="mt-1">
|
||||||
<p className="text-small mb-1">Buckets</p>
|
<p className="text-small mb-1 ">Buckets</p>
|
||||||
<div className="d-flex flex-wrap">
|
<div className="d-flex flex-wrap">
|
||||||
{filteredBuckets.map(({ id, name }) => (
|
{filteredBuckets.map(({ id, name }) => (
|
||||||
<div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
|
<div
|
||||||
|
className="form-check me-3 mb-1"
|
||||||
|
style={{ minWidth: "33.33%" }}
|
||||||
|
key={id}
|
||||||
|
>
|
||||||
<input
|
<input
|
||||||
className="form-check-input"
|
className="form-check-input"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@ -428,18 +161,27 @@ const DirectoryPageHeader = ({
|
|||||||
checked={tempSelectedBucketIds.includes(id)}
|
checked={tempSelectedBucketIds.includes(id)}
|
||||||
onChange={() => handleTempBucketChange(id)}
|
onChange={() => handleTempBucketChange(id)}
|
||||||
/>
|
/>
|
||||||
<label className="form-check-label text-nowrap text-small" htmlFor={`bucket-${id}`}>
|
<label
|
||||||
|
className="form-check-label text-nowrap text-small "
|
||||||
|
htmlFor={`bucket-${id}`}
|
||||||
|
>
|
||||||
{name}
|
{name}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-1" style={{ flexBasis: "50%" }}>
|
<hr className="m-0" />
|
||||||
<p className="text-small mb-1">Categories</p>
|
{/* Category Filter */}
|
||||||
|
<div className="mt-1">
|
||||||
|
<p className="text-small mb-1 ">Categories</p>
|
||||||
<div className="d-flex flex-wrap">
|
<div className="d-flex flex-wrap">
|
||||||
{filteredCategories.map(({ id, name }) => (
|
{filteredCategories.map(({ id, name }) => (
|
||||||
<div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
|
<div
|
||||||
|
className="form-check me-3 mb-1"
|
||||||
|
style={{ minWidth: "33.33%" }}
|
||||||
|
key={id}
|
||||||
|
>
|
||||||
<input
|
<input
|
||||||
className="form-check-input"
|
className="form-check-input"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@ -447,53 +189,72 @@ const DirectoryPageHeader = ({
|
|||||||
checked={tempSelectedCategoryIds.includes(id)}
|
checked={tempSelectedCategoryIds.includes(id)}
|
||||||
onChange={() => handleTempCategoryChange(id)}
|
onChange={() => handleTempCategoryChange(id)}
|
||||||
/>
|
/>
|
||||||
<label className="form-check-label text-nowrap text-small" htmlFor={`cat-${id}`}>
|
<label
|
||||||
|
className="form-check-label text-nowrap text-small"
|
||||||
|
htmlFor={`cat-${id}`}
|
||||||
|
>
|
||||||
{name}
|
{name}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-end gap-2 mt-1">
|
<div className="d-flex justify-content-end gap-2 mt-1">
|
||||||
<button className="btn btn-xs btn-secondary" onClick={clearFilter}>Clear</button>
|
<button
|
||||||
<button className="btn btn-xs btn-primary" onClick={applyFilter}>Apply Filter</button>
|
className="btn btn-xs btn-secondary"
|
||||||
|
onClick={clearFilter}
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-xs btn-primary"
|
||||||
|
onClick={applyFilter}
|
||||||
|
>
|
||||||
|
Apply Filter
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-12 col-md-6 mb-2 px-1 d-flex justify-content-end align-items-center gap-0">
|
||||||
|
<label className="switch switch-primary mb-0">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="switch-input me-3"
|
||||||
|
onChange={() => setIsActive(!IsActive)}
|
||||||
|
checked={!IsActive}
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
<span className="switch-toggle-slider">
|
||||||
|
<span className="switch-on"></span>
|
||||||
|
<span className="switch-off"></span>
|
||||||
|
</span>
|
||||||
|
<span className="ms-12 ">
|
||||||
|
Show Inactive Contacts
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
<div className="col-12 col-md-6 mb-2 px-5 d-flex justify-content-end align-items-center gap-2">
|
{/* Export Dropdown */}
|
||||||
{(viewType === "list" || viewType === "card") && (
|
|
||||||
<label className="switch switch-primary mb-0">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="switch-input me-3"
|
|
||||||
onChange={() => setIsActive(!IsActive)}
|
|
||||||
checked={!IsActive}
|
|
||||||
disabled={loading}
|
|
||||||
/>
|
|
||||||
<span className="switch-toggle-slider">
|
|
||||||
<span className="switch-on"></span>
|
|
||||||
<span className="switch-off"></span>
|
|
||||||
</span>
|
|
||||||
<span className="ms-12">Show Inactive Contacts</span>
|
|
||||||
</label>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="btn-group">
|
<div className="btn-group">
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-label-secondary dropdown-toggle"
|
|
||||||
type="button"
|
type="button"
|
||||||
|
className="btn btn-sm btn-icon rounded-pill dropdown-toggle hide-arrow"
|
||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
|
aria-label="Export options"
|
||||||
|
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
|
||||||
>
|
>
|
||||||
<i className="bx bx-export me-2 bx-sm"></i>Export
|
<i className="bx bx-dots-vertical-rounded bx-sm"></i>
|
||||||
</button>
|
</button>
|
||||||
<ul className="dropdown-menu">
|
<ul className="dropdown-menu">
|
||||||
|
<li>
|
||||||
|
<a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("print"); }}>
|
||||||
|
<i className="bx bx-printer me-1"></i> Print
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("csv"); }}>
|
<a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("csv"); }}>
|
||||||
<i className="bx bx-file me-1"></i> CSV
|
<i className="bx bx-file me-1"></i> CSV
|
||||||
@ -504,16 +265,13 @@ const DirectoryPageHeader = ({
|
|||||||
<i className="bx bxs-file-export me-1"></i> Excel
|
<i className="bx bxs-file-export me-1"></i> Excel
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{viewType !== "notes" && (
|
<li>
|
||||||
<li>
|
<a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("pdf"); }}>
|
||||||
<a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("pdf"); }}>
|
<i className="bx bxs-file-pdf me-1"></i> PDF
|
||||||
<i className="bx bxs-file-pdf me-1"></i> PDF
|
</a>
|
||||||
</a>
|
</li>
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -32,7 +32,4 @@ export const DirectoryRepository = {
|
|||||||
UpdateNote: (id, data) => api.put(`/api/directory/note/${id}`, data),
|
UpdateNote: (id, data) => api.put(`/api/directory/note/${id}`, data),
|
||||||
DeleteNote: (id, isActive) =>
|
DeleteNote: (id, isActive) =>
|
||||||
api.delete(`/api/directory/note/${id}?active=${isActive}`),
|
api.delete(`/api/directory/note/${id}?active=${isActive}`),
|
||||||
|
|
||||||
GetNotes: (pageSize, pageNumber) =>
|
|
||||||
api.get(`/api/directory/notes?pageSize=${pageSize}&pageNumber=${pageNumber}`),
|
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user