From 2bb87ac35855fedd782ea8b9e54c15d111345e20 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 4 Dec 2024 03:54:44 -0500 Subject: [PATCH 1/5] Added Category filter. --- .../src/pages/ApplicationV2/FolderView.tsx | 7 ++- .../src/pages/ApplicationV2/HomeLayout.tsx | 11 ++++- .../src/pages/ApplicationV2/HomeView.tsx | 44 ++++++++++--------- .../lowcoder/src/util/pagination/type.ts | 1 + 4 files changed, 39 insertions(+), 24 deletions(-) diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx index 1d606bf84..ca1ee7a12 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 }).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..6715120b5 100644 --- 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={} /> )} - {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={} diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx index 8ae72d322..e7997dc53 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,29 @@ export function HomeView() { const [searchValues, setSearchValues] = useState(""); const [typeFilter, setTypeFilter] = useState(0); const [modify, setModify] = 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 + }).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 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 { From 50e2198d4bb9b9d00395fd82b044267c0efc0daa Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 4 Dec 2024 06:44:35 -0500 Subject: [PATCH 2/5] Fixed Category filter. --- .../lowcoder/src/pages/ApplicationV2/HomeLayout.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx index 6715120b5..fa5dde213 100644 --- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx +++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx @@ -340,6 +340,8 @@ export function HomeLayout(props: HomeLayoutProps) { modify } = props; + + const handlePageChange = (page: number) => { setCurrentPage(page); }; @@ -431,15 +433,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 ? { @@ -471,7 +464,6 @@ export function HomeLayout(props: HomeLayoutProps) { } ); - const getFilterMenuItem = (type: HomeResTypeEnum) => { const Icon = HomeResInfo[type].icon; return { From a147cb802a07a572d03b9b1514d366fea54d303e Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 4 Dec 2024 09:54:01 -0500 Subject: [PATCH 3/5] Fixed an axios request parameter(category). --- client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx | 2 +- client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx index ca1ee7a12..695b932a9 100644 --- a/client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx +++ b/client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx @@ -69,7 +69,7 @@ export function FolderView() { pageSize:pageSize, applicationType: ApplicationPaginationType[typeFilter], name: searchValues, - category: categoryFilter + category: categoryFilter === "All" ? "" : categoryFilter }).then( (data: any) => { if (data.success) { diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx index e7997dc53..ec0b005be 100644 --- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx +++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx @@ -30,7 +30,7 @@ export function HomeView() { pageSize:pageSize, applicationType: ApplicationPaginationType[typeFilter], name: searchValues, - category: categoryFilter + category: categoryFilter === "All" ? "" : categoryFilter }).then( (data: any) => { if (data.success) { From a7ff39c046f23befa40f52e5c02c310c1e2ed9cb Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 4 Dec 2024 09:59:19 -0500 Subject: [PATCH 4/5] Does not display Folder type in folder. --- client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx index fa5dde213..48f1ec73a 100644 --- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx +++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx @@ -540,7 +540,7 @@ 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={} /> From 8354a3a6d437100f91a8c58b911afbda6f852d51 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 4 Dec 2024 12:49:00 -0500 Subject: [PATCH 5/5] Fixed an issue that update-on-action would not work when creating folder --- .../lowcoder/src/pages/ApplicationV2/HomeLayout.tsx | 10 +++++++--- .../lowcoder/src/pages/ApplicationV2/HomeView.tsx | 5 ++++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx index 48f1ec73a..6005ed071 100644 --- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx +++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx @@ -317,6 +317,8 @@ export interface HomeLayoutProps { setSearchValue?: any; setTypeFilterPagination?: any; setCategoryFilterPagination?: any; + setIsCreated?: any; + isCreated?: boolean; setModify?: any; modify?: boolean; } @@ -337,7 +339,9 @@ export function HomeLayout(props: HomeLayoutProps) { setTypeFilterPagination, setCategoryFilterPagination, setModify, - modify + modify, + setIsCreated, + isCreated } = props; @@ -579,7 +583,7 @@ export function HomeLayout(props: HomeLayoutProps) { style={{ width: "192px", height: "32px", margin: "0" }} /> {mode !== "trash" && mode !== "marketplace" && user.orgDev && ( - + )} @@ -666,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 ec0b005be..3a435a6b8 100644 --- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx +++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx @@ -21,6 +21,7 @@ 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( () => { @@ -43,7 +44,7 @@ export function HomeView() { } catch (error) { console.error('Failed to fetch data:', error); } - }, [currentPage, pageSize, searchValues, typeFilter, modify, categoryFilter] + }, [currentPage, pageSize, searchValues, typeFilter, modify, categoryFilter, isCreated] ); useEffect( () => { @@ -83,6 +84,8 @@ export function HomeView() { setModify={setModify} modify={modify} setCategoryFilterPagination={setCategoryFilter} + setIsCreated={setIsCreated} + isCreated={isCreated} /> );