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

added filter action while apply filter

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-27 12:31:48 +05:30
parent ad145db3c7
commit c3643683c8
1 changed files with 79 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/pages/Directory/DirectoryPageHeader.jsx
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect, useState } from "react";
const DirectoryPageHeader = ({
searchText,
@ -16,14 +16,19 @@ const DirectoryPageHeader = ({
applyFilter,
loading,
IsActive,
setIsOpenModal,
setOpenBucketModal
setIsOpenModal,
setOpenBucketModal,
}) => {
const [filtered, setFiltered] = useState();
useEffect(() => {
setFiltered(
tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length
);
}, [tempSelectedBucketIds, tempSelectedCategoryIds]);
return (
<>
<div className="row">
</div>
<div className="row"></div>
<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
@ -66,22 +71,31 @@ const DirectoryPageHeader = ({
<div className="dropdown" style={{ width: "fit-content" }}>
<div className="dropdown" style={{ width: "fit-content" }}>
<a
className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
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"></i>
<i className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? 'text-primary' : 'text-muted'}`}></i>
{filtered > 0 && (
<span
className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning"
style={{ fontSize: "0.4rem"}}
>
{filtered}
</span>
)}
</a>
<ul className="dropdown-menu p-3" style={{ width: "320px" }}>
<div>
<p className="small-text fw-semibold text-muted m-0">
<p className="text-small text-muted m-0">
Filter by
</p>
{/* Bucket Filter */}
<div className="mt-1">
<p className="small-text mb-1 fw-semibold">Buckets</p>
<p className="text-small mb-1 ">Buckets</p>
<div className="d-flex flex-wrap">
{filteredBuckets.map(({ id, name }) => (
<div
@ -97,7 +111,7 @@ const DirectoryPageHeader = ({
onChange={() => handleTempBucketChange(id)}
/>
<label
className="form-check-label text-nowrap small-text "
className="form-check-label text-nowrap text-small "
htmlFor={`bucket-${id}`}
>
{name}
@ -109,7 +123,7 @@ const DirectoryPageHeader = ({
<hr className="m-0" />
{/* Category Filter */}
<div className="mt-1">
<p className="small-text mb-1 fw-semibold">Categories</p>
<p className="text-small mb-1 ">Categories</p>
<div className="d-flex flex-wrap">
{filteredCategories.map(({ id, name }) => (
<div
@ -125,7 +139,7 @@ const DirectoryPageHeader = ({
onChange={() => handleTempCategoryChange(id)}
/>
<label
className="form-check-label text-nowrap small-text"
className="form-check-label text-nowrap text-small"
htmlFor={`cat-${id}`}
>
{name}
@ -154,49 +168,69 @@ const DirectoryPageHeader = ({
</div>
</div>
</div>
<div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
<label className="switch switch-primary">
<input
type="checkbox"
className="switch-input"
onChange={() => setIsActive(!IsActive)}
value={IsActive}
disabled={loading}
/>
<span className="switch-toggle-slider">
<span className="switch-on">
{/* <i class="icon-base bx bx-check"></i> */}
</span>
<span className="switch-off">
{/* <i class="icon-base bx bx-x"></i> */}
</span>
</span>
<span className="switch-label small-text">
Show Inactive Contacts
</span>
</label>
<div className="col-12 col-md-8 mb-2 px-1 d-flex justify-content-end gap-2 align-items-center text-end">
<button
type="button"
className="btn btn-xs btn-primary"
className="btn btn-sm btn-primary"
onClick={() => setIsOpenModal(true)}
>
<i className="bx bx-plus-circle me-2"></i>
New Contact
</button>
</div>
<div className={`dropdown `}>
<button
type="button"
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i
className="bx bx-dots-vertical-rounded bx-md text-muted "
data-bs-toggle="tooltip"
data-bs-offset="0,8"
data-bs-placement="top"
data-bs-custom-class="tooltip-dark"
title="More Action"
></i>
</button>
<ul className="dropdown-menu dropdown-menu-end w-auto">
<li>
<a className="dropdown-item px-2 ">
<label className="switch switch-primary align-self-start mb-2">
<input
type="checkbox"
className="switch-input"
onChange={() => setIsActive(!IsActive)}
value={IsActive}
disabled={loading}
/>
<span className="switch-toggle-slider">
<span className="switch-on"></span>
<span className="switch-off"></span>
</span>
<span className=" list-inline-item ">
Show Inactive Contacts
</span>
</label>
</a>
</li>
<li>
<a
className="dropdown-item cursor-pointer px-2 "
onClick={() => setOpenBucketModal(true)}
>
<i className="fa-solid fa-bucket fs-5 me-4"></i>
<span className="align-left">Manage Buckets</span>
</a>
</li>
</ul>
</div>
<div className="col-12 d-flex justify-content-end">
<button
type="button"
className="btn btn-xs btn-primary"
onClick={()=>setOpenBucketModal(true)}
>
<i className="bx bx-plus-circle me-2"></i>
Manage Buckets
</button>
</div>
</div>
</>
);
};
export default DirectoryPageHeader;