Merge pull request #1351 from lowcoder-org/feature-pagination

Implemented pagination in some APIs.
lowcoder-org · Dec 4, 2024 · 6aced74 · 6aced74
2 parents 8af5754 + 0364857
commit 6aced74
Show file tree

Hide file tree

Showing 41 changed files with 1,409 additions and 322 deletions.
diff --git a/client/packages/lowcoder-design/src/components/Search.tsx b/client/packages/lowcoder-design/src/components/Search.tsx
@@ -62,24 +62,35 @@ interface ISearch {
   placeholder: string;
   value: string;
   onChange: (value: React.ChangeEvent<HTMLInputElement>) => void;
+  onEnterPress?: (value: string) => void; // Added for capturing Enter key press
   disabled?: boolean;
 }
 
 export const Search = (props: ISearch & InputProps) => {
-  const { value, onChange, style, disabled, placeholder, ...others } = props;
+  const { value, onChange, style, disabled, placeholder, onEnterPress, ...others } = props;
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     onChange && onChange(e);
   };
+
+  // Handling Enter key press
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && onEnterPress) {
+      onEnterPress(value);
+    }
+  };
+
   return (
-    <SearchDiv style={style}>
-      <SearchInput
-        disabled={disabled}
-        placeholder={placeholder}
-        onChange={handleChange}
-        value={value}
-        prefix={<SearchIcon />}
-        {...others}
-      />
-    </SearchDiv>
+      <SearchDiv style={style}>
+        <SearchInput
+            disabled={disabled}
+            placeholder={placeholder}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown} // Listening for key down events
+            value={value}
+            prefix={<SearchIcon />}
+            {...others}
+        />
+      </SearchDiv>
   );
-};
+};
diff --git a/client/packages/lowcoder/src/api/applicationApi.ts b/client/packages/lowcoder/src/api/applicationApi.ts
@@ -12,7 +12,7 @@ import {
   SetAppEditingStatePayload,
   UpdateAppPermissionPayload,
 } from "redux/reduxActions/applicationActions";
-import { ApiResponse, GenericApiResponse } from "./apiResponses";
+import {ApiResponse, GenericApiResponse} from "./apiResponses";
 import { JSONObject, JSONValue } from "util/jsonTypes";
 import {
   ApplicationDetail,
@@ -24,6 +24,7 @@ import {
 } from "constants/applicationConstants";
 import { CommonSettingResponseData } from "./commonSettingApi";
 import { ResourceType } from "@lowcoder-ee/constants/queryConstants";
+import {fetchAppRequestType, GenericApiPaginationResponse} from "@lowcoder-ee/util/pagination/type";
 
 export interface HomeOrgMeta {
   id: string;
@@ -108,6 +109,10 @@ class ApplicationApi extends Api {
     return Api.get(ApplicationApi.newURLPrefix + "/list", { ...request, withContainerSize: false });
   }
 
+  static fetchAllApplicationsPagination(request: fetchAppRequestType): AxiosPromise<GenericApiPaginationResponse<ApplicationMeta[]>> {
+    return Api.get(ApplicationApi.newURLPrefix + "/list", { ...request, withContainerSize: false, applicationStatus: "RECYCLED" });
+  }
+
   static fetchAllModules(request: HomeDataPayload): AxiosPromise<ApplicationMeta[]> {
     return Api.get(ApplicationApi.newURLPrefix + "/list", {
       applicationType: AppTypeEnum.Module,

diff --git a/client/packages/lowcoder/src/api/datasourceApi.ts b/client/packages/lowcoder/src/api/datasourceApi.ts
@@ -8,6 +8,11 @@ import { JSONArray } from "util/jsonTypes";
 import { AuthType, HttpOAuthGrantType } from "pages/datasource/form/httpDatasourceForm";
 import { Datasource } from "@lowcoder-ee/constants/datasourceConstants";
 import { DataSourcePluginMeta } from "lowcoder-sdk/dataSource";
+import {
+  fetchDataSourcePaginationRequestType,
+  fetchDBRequestType,
+  GenericApiPaginationResponse
+} from "@lowcoder-ee/util/pagination/type";
 
 export interface PreparedStatementConfig {
   enableTurnOffPreparedStatement: boolean;
@@ -164,6 +169,11 @@ export class DatasourceApi extends Api {
     return Api.get(DatasourceApi.url + `/jsDatasourcePlugins?appId=${appId}`);
   }
 
+  static fetchJsDatasourcePaginationByApp( request: fetchDataSourcePaginationRequestType ): AxiosPromise<GenericApiPaginationResponse<NodePluginDatasourceInfo[]>> {
+    const {appId, ...res} = request
+    return Api.get(DatasourceApi.url + `/jsDatasourcePlugins?appId=${appId}` ,{...res});
+  }
+
   static fetchDatasourceByApp(appId: string): AxiosPromise<GenericApiResponse<DatasourceInfo[]>> {
     return Api.get(DatasourceApi.url + `/listByApp?appId=${appId}`);
   }
@@ -172,6 +182,11 @@ export class DatasourceApi extends Api {
     return Api.get(DatasourceApi.url + `/listByOrg?orgId=${orgId}`);
   }
 
+  static fetchDatasourcePaginationByOrg(request: fetchDBRequestType): AxiosPromise<GenericApiPaginationResponse<DatasourceInfo[]>> {
+    const {orgId, ...res} = request;
+    return Api.get(DatasourceApi.url + `/listByOrg?orgId=${orgId}`, {...res});
+  }
+
   static createDatasource(
     datasourceConfig: Partial<Datasource>
   ): AxiosPromise<GenericApiResponse<Datasource>> {

diff --git a/client/packages/lowcoder/src/api/folderApi.ts b/client/packages/lowcoder/src/api/folderApi.ts
@@ -9,6 +9,10 @@ import {
   UpdateFolderPayload,
 } from "../redux/reduxActions/folderActions";
 import { ApplicationMeta, FolderMeta } from "../constants/applicationConstants";
+import {
+  fetchFolderRequestType,
+  GenericApiPaginationResponse
+} from "@lowcoder-ee/util/pagination/type";
 
 export class FolderApi extends Api {
   static url = "/folders";
@@ -40,4 +44,11 @@ export class FolderApi extends Api {
   ): AxiosPromise<GenericApiResponse<(ApplicationMeta | FolderMeta)[]>> {
     return Api.get(FolderApi.url + `/elements`, { id: request.folderId });
   }
+
+  static fetchFolderElementsPagination(
+      request: fetchFolderRequestType
+  ): AxiosPromise<GenericApiPaginationResponse<(ApplicationMeta | FolderMeta)[]>> {
+    const {id, ...res} = request
+    return request.id ? Api.get(FolderApi.url + `/elements`,{id: id, ...res}) : Api.get(FolderApi.url + `/elements`, { ...request });
+  }
 }
diff --git a/client/packages/lowcoder/src/api/orgApi.ts b/client/packages/lowcoder/src/api/orgApi.ts
@@ -10,6 +10,15 @@ import {
   UpdateUserOrgRolePayload,
 } from "redux/reduxActions/orgActions";
 import { ApiResponse, GenericApiResponse } from "./apiResponses";
+import {
+  ApiPaginationResponse,
+  fetchGroupUserRequestType,
+  fetchOrgsByEmailRequestType,
+  fetchOrgUserRequestType,
+  GenericApiPaginationResponse,
+  GroupUsersPaginationResponse,
+  orgGroupRequestType, OrgUsersPaginationResponse
+} from "@lowcoder-ee/util/pagination/type";
 
 export interface GroupUsersResponse extends ApiResponse {
   data: {
@@ -66,6 +75,10 @@ export class OrgApi extends Api {
     return Api.get(OrgApi.fetchGroupURL);
   }
 
+  static fetchGroupPagination(request: orgGroupRequestType): AxiosPromise<GenericApiPaginationResponse<OrgGroup[]>> {
+    return Api.get(OrgApi.fetchGroupURL, {...request});
+  }
+
   static deleteGroup(groupId: string): AxiosPromise<ApiResponse> {
     return Api.delete(OrgApi.deleteGroupURL(groupId));
   }
@@ -88,10 +101,20 @@ export class OrgApi extends Api {
     return Api.get(OrgApi.fetchOrgUsersURL(orgId));
   }
 
+  static fetchOrgUsersPagination(request:fetchOrgUserRequestType): AxiosPromise<OrgUsersPaginationResponse> {
+    const {orgId, ...res} = request;
+    return Api.get(OrgApi.fetchOrgUsersURL(orgId), {...res});
+  }
+
   static fetchGroupUsers(groupId: string): AxiosPromise<GroupUsersResponse> {
     return Api.get(OrgApi.fetchGroupUsersURL(groupId));
   }
 
+  static fetchGroupUsersPagination(request: fetchGroupUserRequestType): AxiosPromise<GroupUsersPaginationResponse> {
+    const {groupId, ...res} = request;
+    return Api.get(OrgApi.fetchGroupUsersURL(groupId), {...res});
+  }
+
   static deleteGroupUser(request: RemoveGroupUserPayload): AxiosPromise<ApiResponse> {
     return Api.delete(OrgApi.deleteGroupUserURL(request.groupId), {
       userId: request.userId,
@@ -145,6 +168,11 @@ export class OrgApi extends Api {
   static fetchOrgsByEmail(email: string): AxiosPromise<ApiResponse> {
     return Api.get(OrgApi.fetchOrgsByEmailURL(email));
   }
+
+  static fetchOrgsPaginationByEmail(request: fetchOrgsByEmailRequestType): AxiosPromise<ApiPaginationResponse> {
+    const { email, ...rest } = request;
+    return Api.get(OrgApi.fetchOrgsByEmailURL(email), {...rest});
+  }
 }
 
 export default OrgApi;
diff --git a/client/packages/lowcoder/src/api/queryLibraryApi.ts b/client/packages/lowcoder/src/api/queryLibraryApi.ts
@@ -2,6 +2,7 @@ import Api from "./api";
 import { AxiosPromise } from "axios";
 import { GenericApiResponse } from "./apiResponses";
 import { DatasourceType } from "@lowcoder-ee/constants/queryConstants";
+import {fetchQueryLibraryPaginationRequestType, GenericApiPaginationResponse} from "@lowcoder-ee/util/pagination/type";
 
 export interface LibraryQuery {
   id: string;
@@ -49,6 +50,10 @@ export class QueryLibraryApi extends Api {
     return Api.get(QueryLibraryApi.url + `/listByOrg`);
   }
 
+  static fetchQueryLibraryPaginationByOrg(request: fetchQueryLibraryPaginationRequestType): AxiosPromise<GenericApiPaginationResponse<Array<LibraryQuery>>> {
+    return Api.get(QueryLibraryApi.url + `/listByOrg`, {...request});
+  }
+
   static fetchQueryLibraryDropdown(): AxiosPromise<
     GenericApiResponse<Array<LibraryQueryDropdownInfo>>
   > {

diff --git a/client/packages/lowcoder/src/components/TypographyText.tsx b/client/packages/lowcoder/src/components/TypographyText.tsx
@@ -40,9 +40,9 @@ const StyledTypographyText = styled(AntdTypographyText)`
 `;
 
 export const TypographyText = (props: {
-  value: string;
-  editing: boolean;
-  onChange: (value: string) => void;
+  value?: string;
+  editing?: boolean;
+  onChange?: (value: string) => void;
 }) => (
   <StyledTypographyText
     title={props.value}

diff --git a/client/packages/lowcoder/src/comps/comps/queryLibrary/queryLibraryComp.tsx b/client/packages/lowcoder/src/comps/comps/queryLibrary/queryLibraryComp.tsx
@@ -47,9 +47,9 @@ const children = {
 const QueryLibraryCompBase = simpleMultiComp(children);
 
 export const QueryLibraryComp = class extends QueryLibraryCompBase {
-  propertyView(params: { onPublish: () => void; onHistoryShow: () => void }) {
+  propertyView(params: { onPublish: () => void; onHistoryShow: () => void; setModify: any; modify: boolean }) {
     return (
-      <PropertyView comp={this} onPublish={params.onPublish} onHistoryShow={params.onHistoryShow} />
+      <PropertyView comp={this} onPublish={params.onPublish} onHistoryShow={params.onHistoryShow} setModify={params.setModify} modify={params.modify} />
     );
   }
 
@@ -99,11 +99,13 @@ function getMetaData(
 }
 
 const PropertyView = (props: {
-  comp: QueryLibraryCompType;
-  onPublish: () => void;
-  onHistoryShow: () => void;
+    comp: QueryLibraryCompType,
+    onPublish: () => void,
+    onHistoryShow: () => void,
+    setModify?: any
+    modify?: boolean
 }) => {
-  const { comp, onPublish, onHistoryShow } = props;
+  const { comp, onPublish, onHistoryShow, setModify, modify } = props;
 
   const reduxDispatch = useDispatch();
 
@@ -157,12 +159,16 @@ const PropertyView = (props: {
                     CustomModal.confirm({
                       title: trans("queryLibrary.deleteQueryLabel"),
                       content: trans("queryLibrary.deleteQueryContent"),
-                      onConfirm: () =>
+                      onConfirm: () =>{
                         reduxDispatch(
                           deleteQueryLibrary({
                             queryLibraryId: comp.children.query.children.id.getView(),
                           })
-                        ),
+                        )
+                          setTimeout(() => {
+                              setModify(!modify);
+                          }, 500);
+                      },
                       confirmBtnType: "delete",
                       okText: trans("delete"),
                     })

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/BackButton.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/BackButton.tsx
@@ -0,0 +1,4 @@
+export const BackButton = () =>{
+    return
+    <div>123</div>
+}
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx
@@ -185,14 +185,14 @@ function NavLayoutPickModal(props: {
   );
 }
 
-export const CreateDropdown = (props: { defaultVisible?: boolean; mode: HomeLayoutMode }) => {
-  const { defaultVisible, mode } = props;
+export const CreateDropdown = (props: { defaultVisible?: boolean; mode: HomeLayoutMode; setModify: any; modify: boolean }) => {
+  const { defaultVisible, mode, setModify, modify} = props;
   const [createDropdownVisible, setCreateDropdownVisible] = useState(false);
   const [layoutPickerVisible, setLayoutPickerVisible] = useState(false);
 
   const user = useSelector(getUser);
 
-  const [handleCreate, isCreating] = useCreateHomeRes();
+  const [handleCreate, isCreating] = useCreateHomeRes(setModify, modify);
 
   const getCreateMenuItem = (type: HomeResTypeEnum, mode?: HomeLayoutMode): ItemType => {
     if (