Added Category filter.

lowcoder-org · FalkWolsky · Dec 4, 2024 · Dec 4, 2024 · Dec 4, 2024 · Dec 4, 2024
commit 2bb87ac35855fedd782ea8b9e54c15d111345e20
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx
@@ -2,7 +2,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import { HomeBreadcrumbType, HomeLayout } from "./HomeLayout";
 import {useEffect, useState} from "react";
-import {ApplicationMeta, FolderMeta} from "../../constants/applicationConstants";
+import {ApplicationCategoriesEnum, ApplicationMeta, FolderMeta} from "../../constants/applicationConstants";
 import { buildFolderUrl } from "../../constants/routesURL";
 import { folderElementsSelector, foldersSelector } from "../../redux/selectors/folderSelector";
 import { Helmet } from "react-helmet";
@@ -46,6 +46,7 @@ export function FolderView() {
   const [typeFilter, setTypeFilter] = useState<number>(0);
   const [modify, setModify] = useState(true);
   const [searchValue, setSearchValue] = useState("");
+  const [categoryFilter, setCategoryFilter] = useState<ApplicationCategoriesEnum | "All">("All");
 
   const dispatch = useDispatch();
 
@@ -68,6 +69,7 @@ export function FolderView() {
             pageSize:pageSize,
             applicationType: ApplicationPaginationType[typeFilter],
             name: searchValues,
+            category: categoryFilter
           }).then(
               (data: any) => {
                 if (data.success) {
@@ -80,7 +82,7 @@ export function FolderView() {
         } catch (error) {
           console.error('Failed to fetch data:', error);
         }
-      }, [currentPage, pageSize, searchValues, typeFilter, modify]);
+      }, [currentPage, pageSize, searchValues, typeFilter, modify, categoryFilter]);
 
     useEffect( () => {
             if (searchValues !== "")
@@ -113,6 +115,7 @@ export function FolderView() {
           setTypeFilterPagination={setTypeFilter}
           setModify={setModify}
           modify={modify}
+          setCategoryFilterPagination={setCategoryFilter}
       />
     </>
   );

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
@@ -316,6 +316,7 @@ export interface HomeLayoutProps {
   searchValue?: string;
   setSearchValue?: any;
   setTypeFilterPagination?: any;
+  setCategoryFilterPagination?: any;
   setModify?: any;
   modify?: boolean;
 }
@@ -334,6 +335,7 @@ export function HomeLayout(props: HomeLayoutProps) {
     setSearchValue,
     total,
     setTypeFilterPagination,
+    setCategoryFilterPagination,
     setModify,
     modify
 
@@ -551,12 +553,17 @@ export function HomeLayout(props: HomeLayoutProps) {
                   getPopupContainer={(node: any) => node}
                   suffixIcon={<ArrowSolidIcon />} />
               )}
-              {mode === "view" &&
+              {(mode === "view" || mode === "folder") &&
                   <FilterDropdown
                       style={{ minWidth: "220px" }}
                       variant="borderless"
                       value={categoryFilter}
-                      onChange={(value: any) => setCategoryFilter(value as ApplicationCategoriesEnum)}
+                      onChange={(value: any) => {
+                        setCategoryFilter(value as ApplicationCategoriesEnum)
+                        setCategoryFilterPagination(value as ApplicationCategoriesEnum);
+                        }
+
+                      }
                       options={categoryOptions}
                     // getPopupContainer={(node) => node}
                       suffixIcon={<ArrowSolidIcon />}

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx
@@ -5,7 +5,7 @@ import { Helmet } from "react-helmet";
 import { trans } from "i18n";
 import {useState, useEffect } from "react";
 import {fetchFolderElements} from "@lowcoder-ee/util/pagination/axios";
-import {ApplicationMeta, FolderMeta} from "@lowcoder-ee/constants/applicationConstants";
+import {ApplicationCategoriesEnum, ApplicationMeta, FolderMeta} from "@lowcoder-ee/constants/applicationConstants";
 import {ApplicationPaginationType} from "@lowcoder-ee/util/pagination/type";
 
 interface ElementsState {
@@ -21,26 +21,29 @@ export function HomeView() {
     const [searchValues, setSearchValues] = useState("");
     const [typeFilter, setTypeFilter] = useState<number>(0);
     const [modify, setModify] = useState(true);
+    const [categoryFilter, setCategoryFilter] = useState<ApplicationCategoriesEnum | "All">("All");
+
       useEffect( () => {
-          try{
-              fetchFolderElements({
-                  pageNum:currentPage,
-                  pageSize:pageSize,
-                  applicationType: ApplicationPaginationType[typeFilter],
-                  name: searchValues,
-              }).then(
-                  (data: any) => {
-                      if (data.success) {
-                          setElements({elements: data.data || [], total: data.total || 1})
-                      }
-                      else
-                        console.error("ERROR: fetchFolderElements", data.error)
-                  }
-              );
-          } catch (error) {
-              console.error('Failed to fetch data:', error);
-          }
-          }, [currentPage, pageSize, searchValues, typeFilter, modify]
+        try{
+          fetchFolderElements({
+            pageNum:currentPage,
+            pageSize:pageSize,
+            applicationType: ApplicationPaginationType[typeFilter],
+            name: searchValues,
+            category: categoryFilter
+          }).then(
+            (data: any) => {
+              if (data.success) {
+                setElements({elements: data.data || [], total: data.total || 1})
+              }
+              else
+                console.error("ERROR: fetchFolderElements", data.error)
+            }
+          );
+        } catch (error) {
+            console.error('Failed to fetch data:', error);
+        }
+        }, [currentPage, pageSize, searchValues, typeFilter, modify, categoryFilter]
       );
 
     useEffect( () => {
@@ -79,6 +82,7 @@ export function HomeView() {
         setTypeFilterPagination={setTypeFilter}
         setModify={setModify}
         modify={modify}
+        setCategoryFilterPagination={setCategoryFilter}
       />
     </>
   );

diff --git a/client/packages/lowcoder/src/util/pagination/type.ts b/client/packages/lowcoder/src/util/pagination/type.ts
@@ -61,6 +61,7 @@ export interface fetchFolderRequestType {
     pageSize?: number;
     name?: string;
     applicationType?: string;
+    category?: string
 }
 
 export interface fetchDBRequestType {