Implemented pagination in login.

Imiss-U1025 · Imiss-U1025 · commit cce98cd860a6 · 2024-12-02T16:19:54.000-05:00
diff --git a/client/packages/lowcoder/src/api/orgApi.ts b/client/packages/lowcoder/src/api/orgApi.ts
@@ -11,7 +11,9 @@ import {
 } from "redux/reduxActions/orgActions";
 import { ApiResponse, GenericApiResponse } from "./apiResponses";
 import {
+  ApiPaginationResponse,
   fetchGroupUserRequestType,
+  fetchOrgsByEmailRequestType,
   fetchOrgUserRequestType,
   GenericApiPaginationResponse,
   GroupUsersPaginationResponse,
@@ -166,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/pages/userAuth/formLoginSteps.tsx b/client/packages/lowcoder/src/pages/userAuth/formLoginSteps.tsx
@@ -29,6 +29,8 @@ import { useDispatch, useSelector } from "react-redux";
 import history from "util/history";
 import ApplicationApi from "@lowcoder-ee/api/applicationApi";
 import { getServerSettings } from "@lowcoder-ee/redux/selectors/applicationSelector";
+import {fetchOrgPaginationByEmail} from "@lowcoder-ee/util/pagination/axios";
+import PaginationComp from "@lowcoder-ee/util/pagination/Pagination";
 
 const StyledCard = styled.div<{$selected: boolean}>`
   display: flex;
@@ -91,6 +93,11 @@ type FormLoginProps = {
   organizationId?: string;
 }
 
+interface ElementsState {
+  elements: any;
+  total: number;
+}
+
 export default function FormLoginSteps(props: FormLoginProps) {
   const dispatch = useDispatch();
   const location = useLocation(); 
@@ -111,6 +118,21 @@ export default function FormLoginSteps(props: FormLoginProps) {
   const [skipWorkspaceStep, setSkipWorkspaceStep] = useState<boolean>(false);
   const [signupEnabled, setSignupEnabled] = useState<boolean>(true);
   const serverSettings = useSelector(getServerSettings);
+  const [elements, setElements] = useState<ElementsState>({ elements: [], total: 0 });
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(2);
+
+  useEffect(() => {
+    fetchOrgPaginationByEmail({
+      email: account,
+      pageNum: currentPage,
+      pageSize: pageSize
+    }).then( result => {
+      setElements({elements: result.data || [], total: result.total || 1})
+      setOrgList(result.data)
+    }
+    )
+  }, [pageSize, currentPage])
 
   useEffect(() => {
     const { LOWCODER_EMAIL_SIGNUP_ENABLED } = serverSettings;
@@ -233,6 +255,14 @@ export default function FormLoginSteps(props: FormLoginProps) {
               {org.orgName}
             </StyledCard>
           ))}
+          {orgList.length > 10 ?
+              <PaginationComp
+                  currentPage={currentPage}
+                  pageSize={pageSize}
+                  setPageSize={setPageSize}
+                  setCurrentPage={setCurrentPage}
+                  total={elements.total}
+              /> : <></>}
         </AccountLoginWrapper>
       </>
     )
diff --git a/client/packages/lowcoder/src/util/pagination/axios.ts b/client/packages/lowcoder/src/util/pagination/axios.ts
@@ -4,7 +4,7 @@ import {
     fetchAppRequestType, fetchDataSourcePaginationRequestType,
     fetchDBRequestType,
     fetchFolderRequestType,
-    fetchGroupUserRequestType,
+    fetchGroupUserRequestType, fetchOrgsByEmailRequestType,
     fetchOrgUserRequestType, fetchQueryLibraryPaginationRequestType,
     orgGroupRequestType
 } from "@lowcoder-ee/util/pagination/type";
@@ -147,4 +147,23 @@ export const fetchJsDSPaginationByApp = async (request: fetchDataSourcePaginatio
             error: error
         };
     }
+}
+
+
+
+export const fetchOrgPaginationByEmail = async (request: fetchOrgsByEmailRequestType)=> {
+    try {
+        const response = await OrgApi.fetchOrgsPaginationByEmail(request);
+        return {
+            success: true,
+            data: response.data.data,
+            total: response.data.total
+        }
+    } catch (error: any) {
+        console.error('Failed to fetch data:', error);
+        return {
+            success: false,
+            error: error
+        };
+    }
 }
diff --git a/client/packages/lowcoder/src/util/pagination/type.ts b/client/packages/lowcoder/src/util/pagination/type.ts
@@ -39,6 +39,15 @@ export interface OrgUsersPaginationResponse  {
     };
 }
 
+export type ApiPaginationResponse = {
+    total: number;
+    success: boolean;
+    code: number;
+    message: string;
+    data: any;
+};
+
+
 export interface fetchAppRequestType {
     pageNum?: number;
     pageSize?: number;
@@ -88,4 +97,10 @@ export interface fetchDataSourcePaginationRequestType {
     name?: string;
     pageNum?: number;
     pageSize?: number;
+}
+
+export interface fetchOrgsByEmailRequestType {
+    email: string;
+    pageNum?: number;
+    pageSize?: number;
 }
