diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx index 1d606bf84..695b932a9 100644 --- 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(0); const [modify, setModify] = useState(true); const [searchValue, setSearchValue] = useState(""); + const [categoryFilter, setCategoryFilter] = useState("All"); const dispatch = useDispatch(); @@ -68,6 +69,7 @@ export function FolderView() { pageSize:pageSize, applicationType: ApplicationPaginationType[typeFilter], name: searchValues, + category: categoryFilter === "All" ? "" : 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 index 228fd0487..6005ed071 100644 --- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx +++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx @@ -316,6 +316,9 @@ export interface HomeLayoutProps { searchValue?: string; setSearchValue?: any; setTypeFilterPagination?: any; + setCategoryFilterPagination?: any; + setIsCreated?: any; + isCreated?: boolean; setModify?: any; modify?: boolean; } @@ -334,10 +337,15 @@ export function HomeLayout(props: HomeLayoutProps) { setSearchValue, total, setTypeFilterPagination, + setCategoryFilterPagination, setModify, - modify + modify, + setIsCreated, + isCreated } = props; + + const handlePageChange = (page: number) => { setCurrentPage(page); }; @@ -429,15 +437,6 @@ export function HomeLayout(props: HomeLayoutProps) { } return true; }) - .filter((e) => { - // If "All" is selected, do not filter out any elements based on category - if (categoryFilter === 'All' || !categoryFilter) { - return true; - } - // Otherwise, filter elements based on the selected category - return !e.folder && e.category === categoryFilter.toString(); - }) - .map((e) => e.folder ? { @@ -469,7 +468,6 @@ export function HomeLayout(props: HomeLayoutProps) { } ); - const getFilterMenuItem = (type: HomeResTypeEnum) => { const Icon = HomeResInfo[type].icon; return { @@ -546,17 +544,22 @@ export function HomeLayout(props: HomeLayoutProps) { getFilterMenuItem(HomeResTypeEnum.Application), getFilterMenuItem(HomeResTypeEnum.Module), ...(mode !== "marketplace" ? [getFilterMenuItem(HomeResTypeEnum.Navigation), getFilterMenuItem(HomeResTypeEnum.MobileTabLayout)] : []), - ...(mode !== "trash" && mode !== "marketplace" ? [getFilterMenuItem(HomeResTypeEnum.Folder)] : []), + ...(mode !== "trash" && mode !== "marketplace" && mode !== "folder" ? [getFilterMenuItem(HomeResTypeEnum.Folder)] : []), ]} getPopupContainer={(node: any) => node} suffixIcon={} /> )} - {mode === "view" && + {(mode === "view" || mode === "folder") && setCategoryFilter(value as ApplicationCategoriesEnum)} + onChange={(value: any) => { + setCategoryFilter(value as ApplicationCategoriesEnum) + setCategoryFilterPagination(value as ApplicationCategoriesEnum); + } + + } options={categoryOptions} // getPopupContainer={(node) => node} suffixIcon={} @@ -580,7 +583,7 @@ export function HomeLayout(props: HomeLayoutProps) { style={{ width: "192px", height: "32px", margin: "0" }} /> {mode !== "trash" && mode !== "marketplace" && user.orgDev && ( - + )} @@ -667,7 +670,7 @@ export function HomeLayout(props: HomeLayoutProps) { ? trans("home.projectEmptyCanAdd") : trans("home.projectEmpty")} - {mode !== "trash" && mode !== "marketplace" && user.orgDev && } + {mode !== "trash" && mode !== "marketplace" && user.orgDev && } )} diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx index 8ae72d322..3a435a6b8 100644 --- 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,30 @@ export function HomeView() { const [searchValues, setSearchValues] = useState(""); const [typeFilter, setTypeFilter] = useState(0); const [modify, setModify] = useState(true); + const [isCreated, setIsCreated] = useState(true); + const [categoryFilter, setCategoryFilter] = useState("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 === "All" ? "" : 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, isCreated] ); useEffect( () => { @@ -79,6 +83,9 @@ export function HomeView() { setTypeFilterPagination={setTypeFilter} setModify={setModify} modify={modify} + setCategoryFilterPagination={setCategoryFilter} + setIsCreated={setIsCreated} + isCreated={isCreated} /> ); diff --git a/client/packages/lowcoder/src/util/pagination/type.ts b/client/packages/lowcoder/src/util/pagination/type.ts index d7c1ae2e8..f16bfcb80 100644 --- 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 {