From 1149edd8ef7473f027e0dd49994587e6b0c98fd8 Mon Sep 17 00:00:00 2001 From: Ahmed0-0Kallel Date: Wed, 24 Jan 2024 23:38:37 +0100 Subject: [PATCH] Feature: Filtering UI Update --- package.json | 2 +- pages/index.tsx | 241 +++++++++++++++++++++++++++----------------- styles/globals.scss | 10 +- 3 files changed, 159 insertions(+), 94 deletions(-) diff --git a/package.json b/package.json index 9b481841..59f187ad 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "@radix-ui/react-toast": "^1.1.2", "@radix-ui/react-toggle": "^1.0.1", "@radix-ui/react-toggle-group": "^1.0.1", - "@radix-ui/react-tooltip": "^1.0.3", + "@radix-ui/react-tooltip": "^1.0.7", "@stoplight/elements": "^7.7.13", "@swc/helpers": "^0.5.1", "@tailwindcss/forms": "^0.5.3", diff --git a/pages/index.tsx b/pages/index.tsx index 19668e8f..42a2982c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -11,23 +11,19 @@ import { ChevronRightIcon, Search } from "lucide-react" import { useTheme } from "next-themes" import CountUp from "react-countup" import { - ClearRefinements, Configure, - DynamicWidgets, - HierarchicalMenu, - Highlight, - Hits, - HitsPerPage, InstantSearch, - Menu, - Pagination, // RatingMenu, RefinementList, - SearchBox, - SortBy, Stats, - ToggleRefinement, } from "react-instantsearch" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu'; +import { Button } from '@/components/ui/button'; + import { badgeCategories } from "@/config/badge_categories" // imprt color mode from config @@ -45,6 +41,7 @@ import CustomHitsTags, { import { connectToDatabase } from "../lib/mongodb" import Footer from "./Footer" import header from "./header" +import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; export const Grid = dynamic(() => import("@/components/Grid"), { ssr: false }) //feetch initial data from api @@ -94,7 +91,7 @@ export async function getStaticProps() { export default function IndexPage(props) { const { theme } = useTheme() - const [isFilterVisible, setIsFilterVisible] = useState(true) + const [isFilterVisible, setIsFilterVisible] = useState(false) const [searchInput, setSearchInput] = useState("") // const { data, isLoading, isError, error } = useLabels(searchInput, props) @@ -107,8 +104,25 @@ export default function IndexPage(props) { setSearchInput(e.target.query.value) } const toggleFilterVisibility = () => { - setIsFilterVisible(!isFilterVisible) - } + setIsFilterVisible(prevState => !prevState); // Toggle the state + }; + // Mock data, replace with your actual data + const activities = [ + { label_type: 'Activity 1', count: 10 }, + { label_type: 'Activity 2', count: 20 }, + // ... other activities + ]; + + const contractTypes = [ + { label_subtype: 'Contract Type 1', count: 5 }, + { label_subtype: 'Contract Type 2', count: 8 }, + // ... other contract types + ]; + + // Function to sort items based on count + const transformAndSortItems = (items, attribute) => { + return items.sort((a, b) => (a[attribute] < b[attribute] ? 1 : -1)); + }; const OldSearchBar = (
@@ -147,7 +161,7 @@ export default function IndexPage(props) { exit={{ y: -10, opacity: 0 }} transition={{ ease: "easeOut", duration: 0.53 }} className="z-30 " - // key={currentIndex} + // key={currentIndex} >
@@ -255,7 +269,7 @@ export default function IndexPage(props) {
-
+
+
+
+

+ {/* Number of entries: {data ? data.length : "Loading"} */} + {/* Number of entries: {nbHits} */} +

+

+ + ⌘F + + to search the table +

+
+ +
{/* {OldSearchBar} */} -
+
{/* add vertical navbar */} -
-
-
-
-
Filter by Activity
+ className={` + ${isFilterVisible ? " block" : "hidden"} + m-2 w-auto + min-w-[16rem] + overflow-hidden duration-200 + transition-opacity + + `} + > +
+
+ + + + + setinitialSearch(true)} + transformItems={items => items.sort((a, b) => a.count < b.count ? 1 : -1)} + classNames={{ + checkbox: 'hidden', + list: 'max-h-60 overflow-auto w-59 dropdown-menu-scrollbar ', + item: 'mb-2 text-left pl-2 hover:bg-gray-200 rounded-md', // Align text to the left + selectedItem: 'font-bold bg-gray-200 rounded-md ', + label: 'text-xl', + count: 'invisible', + searchBox: ' w-full rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50' + }} + /> + + +
+ + +
+ + + + + + + setinitialSearch(true)} + transformItems={items => items.sort((a, b) => a.count < b.count ? 1 : -1)} + classNames={{ + checkbox: 'hidden', + list: 'max-h-60 overflow-auto w-59 dropdown-menu-scrollbar ', + item: 'mb-2 text-left pl-2 hover:bg-gray-200 rounded-md', // Align text to the left + selectedItem: 'font-bold bg-gray-200 rounded-md ', + label: 'text-xl', + count: 'invisible', + searchBox: ' w-full rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50' + }} + /> + + - setinitialSearch(true)} - transformItems={items => - items.sort((a, b) => (a.count < b.count ? 1 : -1)) - } - /> -
Contract Type
- setinitialSearch(true)} - className="mt-3" - attributes={["label_subtype"]} - // defaultRefinement={["label_type"]} - transformItems={items => - items.sort((a, b) => (a.count < b.count ? 1 : -1)) - } - /> -
 
-
+ + +
-
- -
-

- {/* Number of entries: {data ? data.length : "Loading"} */} - {/* Number of entries: {nbHits} */} -

-

- - ⌘F - - to search the table -

-
-
+ {initialSearch ? ( ) : props.data ? ( diff --git a/styles/globals.scss b/styles/globals.scss index 66d609b1..c777bf90 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -315,7 +315,15 @@ } - + .dropdown-menu-scrollbar::-webkit-scrollbar { + display: none; + } + + /* Hide scrollbar for IE, Edge, and Firefox on elements with class .dropdown-menu-scrollbar */ + .dropdown-menu-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } .btn { display: inline-block; padding: 6px 12px; text-align: center; vertical-align: middle; } .btn-primary { background-color: #007bff; border-color: #007bff; color: #fff; }