add filter applied bar (#418)

* add filter applied bar * add changelog
Azure · Jul 31, 2024 · b0fea80 · b0fea80
1 parent 96853c4
commit b0fea80
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 45 deletions.
diff --git a/website/CHANGELOG.md b/website/CHANGELOG.md
@@ -1,14 +1,10 @@
 # Release History
 
-## 0.5.0 (Unreleased)
+## 0.5.0 (2024-07-31)
 
 ### Features Added
 
-### Breaking Changes
-
-### Bugs Fixed
-
-### Other Changes
+- [[418]](https://github.com/Azure/awesome-azd/pull/418) Implement filter applied bar and "Clear All" button.
 
 ## 0.4.0 (2024-05-20)
 

diff --git a/website/src/pages/ShowcaseCardPage.tsx b/website/src/pages/ShowcaseCardPage.tsx
@@ -16,6 +16,7 @@ import {
   Option,
   Spinner,
   Badge,
+  Body1,
 } from "@fluentui/react-components";
 import ShowcaseCards from "./ShowcaseCards";
 import useBaseUrl from "@docusaurus/useBaseUrl";
@@ -24,6 +25,7 @@ import { useColorMode } from "@docusaurus/theme-common";
 import { useHistory } from "@docusaurus/router";
 import { toggleListItem } from "@site/src/utils/jsUtils";
 import { prepareUserState } from "./index";
+import { Dismiss20Filled } from "@fluentui/react-icons";
 
 const TagQueryStringKey2 = "tags";
 
@@ -116,29 +118,31 @@ function filterUsers(
 function FilterAppliedBar({
   clearAll,
   selectedTags,
+  readSearchTags,
+  replaceSearchTags,
 }: {
   clearAll;
   selectedTags: TagType[];
+  readSearchTags: (search: string) => TagType[];
+  replaceSearchTags: (search: string, newTags: TagType[]) => string;
 }) {
-  const { colorMode } = useColorMode();
-  return selectedTags.length > 0 ? (
-    <div
-      style={{
-        paddingTop: "32px",
-        display: "flex",
-        gap: "12px",
-        alignItems: "center",
-      }}
-    >
-      <div
-        style={{
-          fontSize: "14px",
-          fontWeight: "400",
-          lineHeight: "20px",
-        }}
-      >
+  const history = useHistory();
+  const toggleTag = (tag: TagType, location: Location) => {
+    const tags = readSearchTags(location.search);
+    const newTags = toggleListItem(tags, tag);
+    const newSearch = replaceSearchTags(location.search, newTags);
+    history.push({
+      ...location,
+      search: newSearch,
+      state: prepareUserState(),
+    });
+  }
+
+  return selectedTags && selectedTags.length > 0 ? (
+    <div className={styles.filterAppliedBar}>
+      <Body1>
         Filters applied:
-      </div>
+      </Body1>
       {selectedTags.map((tag, index) => {
         const tagObject = Tags[tag];
         const key = `showcase_checkbox_key_${tag}`;
@@ -150,21 +154,7 @@ function FilterAppliedBar({
             size="extra-large"
             color="brand"
             shape="rounded"
-            icon={
-              colorMode != "dark" ? (
-                <img
-                  src={useBaseUrl("/img/lightModePurpleClose.svg")}
-                  height={20}
-                  alt="Close"
-                />
-              ) : (
-                <img
-                  src={useBaseUrl("/img/darkModePurpleClose.svg")}
-                  height={20}
-                  alt="Close"
-                />
-              )
-            }
+            icon={<Dismiss20Filled />}
             iconPosition="after"
             className={styles.filterBadge}
             onClick={() => {
@@ -189,20 +179,31 @@ export default function ShowcaseCardPage({
   setSelectedTags,
   readSearchTags,
   replaceSearchTags,
+  setSelectedCheckbox,
 }: {
   setActiveTags: React.Dispatch<React.SetStateAction<TagType[]>>;
   selectedTags: TagType[];
   location;
   setSelectedTags: React.Dispatch<React.SetStateAction<TagType[]>>;
   readSearchTags: (search: string) => TagType[];
   replaceSearchTags: (search: string, newTags: TagType[]) => string;
+  setSelectedCheckbox: React.Dispatch<React.SetStateAction<TagType[]>>;
 }) {
   const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchName, setSearchName] = useState<string | null>(null);
   const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
+  const history = useHistory();
+  const searchParams = new URLSearchParams(location.search);
   const clearAll = () => {
     setSelectedTags([]);
+    setSelectedCheckbox([]);
+    searchParams.delete("tags");
+    history.push({
+      ...location,
+      search: searchParams.toString(),
+      state: prepareUserState(),
+    });
   };
 
   useEffect(() => {
@@ -284,7 +285,12 @@ export default function ShowcaseCardPage({
           </Combobox>
         </div>
       </div>
-      {/* <FilterAppliedBar clearAll={clearAll} selectedTags={selectedTags} /> */}
+      <FilterAppliedBar
+        clearAll={clearAll}
+        selectedTags={selectedTags}
+        readSearchTags={readSearchTags}
+        replaceSearchTags={replaceSearchTags}
+      />
       {loading ? (
         <Spinner labelPosition="below" label="Loading..." />
       ) : (

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -85,6 +85,7 @@ const App = () => {
           <ShowcaseCardPage
             setActiveTags={setActiveTags}
             selectedTags={selectedTags}
+            setSelectedCheckbox={setSelectedCheckbox}
             location={location}
             setSelectedTags={setSelectedTags}
             readSearchTags={readSearchTags}

diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
@@ -134,15 +134,32 @@
 }
 
 .filterBadge {
-  color: var(--ifm-color-purple);
+  color: var(--ifm-color-purple-light) !important;
+  cursor: pointer;
+  border-color: #d2ccf8 !important;
+  background: #f9f8fe !important;
+}
+
+.filterAppliedBar {
+  padding-top: 24px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.clearAll {
+  color: #6656d1;
+  cursor: pointer;
+}
+
+[data-theme="dark"] .clearAll {
+  color: #a79cf1;
   cursor: pointer;
-  border: 1px solid #d2ccf8;
-  background: #f9f8fe;
 }
 
 [data-theme="dark"] .filterBadge {
-  border: 1px solid #221d46;
-  background: #3f3682;
+  border-color: #221d46 !important;
+  background: #3f3682 !important;
 }
 
 @media screen and (max-width: 996px) {