modified display active as well as inactives contact

This commit is contained in:
Pramod Mahajan 2025-05-23 16:59:14 +05:30
parent 7e4f4c8973
commit 64973029cc

View File

@ -16,7 +16,9 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory";
import ConfirmModal from "../../components/common/ConfirmModal";
const Directory = () => {
const Directory = () =>
{
const[IsActivite,setIsActive] = useState(true)
const [isOpenModal, setIsOpenModal] = useState(false);
const [isOpenModalNote, setIsOpenModalNote] = useState(false);
const [selectedContact, setSelectedContact] = useState(null);
@ -32,7 +34,7 @@ const Directory = () => {
const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
const { contacts, loading } = useDirectory();
const { contacts, loading } = useDirectory(IsActivite);
const { contactCategory, loading: contactCategoryLoading } =
useContactCategory();
const { buckets } = useBuckets();
@ -247,7 +249,7 @@ const Directory = () => {
</div>
)}
<div className="card p-2">
<div className="card p-2" >
<div className="row mx-0 px-0 align-items-center">
<div className="col-12 col-md-4 mb-2 px-1 d-flex align-items-center ">
<input
@ -299,7 +301,7 @@ const Directory = () => {
<ul className="dropdown-menu p-3" style={{ width: "320px" }}>
<div>
<p className="small-text text-muted m-0">Filter by</p>
<p className="small-text fw-semibold text-muted m-0">Filter by</p>
{/* Bucket Filter */}
<div className="mt-1">
@ -377,17 +379,17 @@ const Directory = () => {
</div>
</div>
<div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
<label class="switch switch-primary">
<input type="checkbox" class="switch-input" />
<span class="switch-toggle-slider">
<span class="switch-on">
<label className="switch switch-primary">
<input type="checkbox" className="switch-input" onChange={()=>setIsActive(!IsActivite)} value={IsActivite} />
<span className="switch-toggle-slider">
<span className="switch-on">
{/* <i class="icon-base bx bx-check"></i> */}
</span>
<span class="switch-off">
<span className="switch-off">
{/* <i class="icon-base bx bx-x"></i> */}
</span>
</span>
<span class="switch-label">Show Inactive Contacts</span>
<span className="switch-label small-text">Show Inactive Contacts</span>
</label>
<button
type="button"
@ -456,7 +458,7 @@ const Directory = () => {
</tr>
</thead>
<tbody className="table-border-bottom-0 overflow-auto ">
{loading && ContatList.length === 0 && (
{loading && (
<tr>
<td colSpan={10}>Loading...</td>
</tr>
@ -484,12 +486,13 @@ const Directory = () => {
</div>
) : (
<div className="row">
{currentItems.map((contact, index) => (
{!loading && currentItems.map((contact, index) => (
<div
key={contact.id}
className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
>
<CardViewDirectory
IsActive={IsActivite}
contact={contact}
setSelectedContact={setSelectedContact}
setIsOpenModal={setIsOpenModal}