Implemented Pagination on some APIs.

.gitignore

@@ -18,3 +18,4 @@ application-dev-localhost.yaml
 server/api-service/lowcoder-server/src/main/resources/application-local-dev.yaml
 translations/locales/node_modules/
 .vscode/settings.json
+server/api-service/lowcoder-server/src/main/resources/application-local-dev-ee.yaml

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>
   );
-};
+};

client/packages/lowcoder/index.html

@@ -28,6 +28,8 @@
         display: flex;
         pointer-events: none;
         flex-direction: column;
+        top: 0;
+        z-index: 10000;
       }
       #loading svg {
         animation: breath 1s linear infinite;

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,

client/packages/lowcoder/src/api/datasourceApi.ts

@@ -8,6 +8,7 @@ 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 {fetchDBRequestType, GenericApiPaginationResponse} from "@lowcoder-ee/util/pagination/type";
 
 export interface PreparedStatementConfig {
   enableTurnOffPreparedStatement: boolean;
@@ -172,6 +173,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>> {

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,10 @@ 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)[]>> {
+    return Api.get(FolderApi.url + `/elements`, { ...request });
+  }
 }

client/packages/lowcoder/src/api/orgApi.ts

@@ -10,6 +10,13 @@ import {
   UpdateUserOrgRolePayload,
 } from "redux/reduxActions/orgActions";
 import { ApiResponse, GenericApiResponse } from "./apiResponses";
+import {
+  fetchGroupUserRequestType,
+  fetchOrgUserRequestType,
+  GenericApiPaginationResponse,
+  GroupUsersPaginationResponse,
+  orgGroupRequestType, OrgUsersPaginationResponse
+} from "@lowcoder-ee/util/pagination/type";
 
 export interface GroupUsersResponse extends ApiResponse {
   data: {
@@ -66,6 +73,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 +99,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,

client/packages/lowcoder/src/components/DraggableTree/DraggableItem.tsx

@@ -15,7 +15,7 @@ const Wrapper = styled.div<{
   $itemHeight?: number;
 }>`
   position: relative;
-  width: 100%;
+  width: auto;
   height: ${(props) => props.$itemHeight ?? 30}px;
   /* border: 1px solid #d7d9e0; */
   border-radius: 4px;

client/packages/lowcoder/src/components/DraggableTree/DroppableMenuItem.tsx

@@ -6,6 +6,7 @@ import { DraggableTreeContext } from "./DraggableTreeContext";
 import DroppablePlaceholder from "./DroppablePlaceHolder";
 import { DraggableTreeNode, DraggableTreeNodeItemRenderProps, IDragData, IDropData } from "./types";
 import { checkDroppableFlag } from "./util";
+import { Flex } from "antd";
 
 const DraggableMenuItemWrapper = styled.div`
   position: relative;
@@ -88,29 +89,34 @@ export default function DraggableMenuItem(props: IDraggableMenuItemProps) {
             disabled={isDragging || disabled}
           />
         )}
-        <DraggableItem
-          path={path}
-          id={id}
-          dropInAsSub={dropInAsSub && canDropIn !== false}
-          isOver={isOver}
-          ref={(node) => {
-            setDragNodeRef(node);
-            setDropNodeRef(node);
-          }}
-          {...dragListeners}
-        >
-          {renderContent?.({
-            node: item,
-            isOver,
-            path,
-            isOverlay,
-            hasChildren: items.length > 0,
-            dragging: !!(isDragging || parentDragging),
-            isFolded: isFold,
-            onDelete: () => onDelete?.(path),
-            onToggleFold: () => context.toggleFold(id),
-          }) || null}
-        </DraggableItem>
+        <Flex style={{paddingLeft: '15px'}} align="center">
+          <DraggableItem
+              path={path}
+              id={id}
+              dropInAsSub={dropInAsSub && canDropIn !== false}
+              isOver={isOver}
+              ref={(node) => {
+                setDragNodeRef(node);
+                setDropNodeRef(node);
+              }}
+              {...dragListeners}
+          >
+            <span style={{cursor: "default"}}>⣿</span>
+          </DraggableItem>
+          <div style={{ flex: 1 , maxWidth: "calc(100% - 12px)" }}>
+            {renderContent?.({
+              node: item,
+              isOver,
+              path,
+              isOverlay,
+              hasChildren: items.length > 0,
+              dragging: !!(isDragging || parentDragging),
+              isFolded: isFold,
+              onDelete: () => onDelete?.(path),
+              onToggleFold: () => context.toggleFold(id),
+            }) || null}
+          </div>
+        </Flex>
       </DraggableMenuItemWrapper>
       {items.length > 0 && !isFold && (
         <div className="sub-menu-list">

client/packages/lowcoder/src/comps/comps/rootComp.tsx

@@ -34,7 +34,7 @@ import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 import { useUserViewMode } from "util/hooks";
 import React from "react";
 import { isEqual } from "lodash";
-
+import {LoadingBarHideTrigger} from "@lowcoder-ee/util/hideLoading";
 const EditorView = lazy(
   () => import("pages/editor/editorView"),
 );
@@ -138,6 +138,7 @@ const RootView = React.memo((props: RootViewProps) => {
               <div key={key}>{comp.children.queries.children[key].getView()}</div>
             ))}
             <Suspense fallback={!readOnly || isUserViewMode ? SuspenseFallback : null}>
+              <LoadingBarHideTrigger />
               <EditorView uiComp={comp.children.ui} preloadComp={comp.children.preload} />
             </Suspense>
           </EditorContext.Provider>

client/packages/lowcoder/src/constants/reduxActionConstants.ts

@@ -9,7 +9,7 @@ export const ReduxActionTypes = {
   FETCH_RAW_CURRENT_USER_SUCCESS: "FETCH_RAW_CURRENT_USER_SUCCESS",
   FETCH_API_KEYS: "FETCH_API_KEYS",
   FETCH_API_KEYS_SUCCESS: "FETCH_API_KEYS_SUCCESS",
-
+  MOVE_TO_FOLDER2_SUCCESS: "MOVE_TO_FOLDER2_SUCCESS",
 
   /* plugin RELATED */
   FETCH_DATA_SOURCE_TYPES: "FETCH_DATA_SOURCE_TYPES",

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2785,6 +2785,7 @@ export const en = {
     "switch": "Switch Component: "
   },
   "module": {
+    "folderNotEmpty": "Folder is not empty",
     "emptyText": "No Data",
     "docLink": "Read More About Modules...",
     "documentationText" : "Modules are complete Applications, that can get included and repeated in other Applications and it functions just like a single component. As modules can get embedded, they need to be able to interact with your outside apps or websites. This four settings help to support communication with a Module.",

client/packages/lowcoder/src/index.ts

@@ -24,7 +24,7 @@ if (!window.ResizeObserver) {
   window.ResizeObserver = ResizeObserver;
 }
 
-function hideLoading() {
+export function hideLoading() {
   // hide loading
   const node = document.getElementById("loading");
   if (node) {
@@ -42,7 +42,7 @@ debug(`REACT_APP_LOG_LEVEL:, ${REACT_APP_LOG_LEVEL}`);
 
 try {
   bootstrap();
-  hideLoading();
+  // hideLoading();
 } catch (e) {
   log.error(e);
 }

client/packages/lowcoder/src/pages/ApplicationV2/BackButton.tsx

@@ -0,0 +1,4 @@
+export const BackButton = () =>{
+    return
+    <div>123</div>
+}