Merge pull request #2350 from appwrite/feat-SER-347-Add-pagination-new-billing-ui

feat: pagination on billing ui table and refactoring it

Author: lohanidamodar

src/lib/constants.ts

@@ -1,6 +1,7 @@
 export const PAGE_LIMIT = 12; // default page limit
 export const SPREADSHEET_PAGE_LIMIT = 50; // default sheet page limit
 export const CARD_LIMIT = 6; // default card limit
+export const DEFAULT_BILLING_PROJECTS_LIMIT = 5; // default billing projects page limit
 export const INTERVAL = 5 * 60000; // default interval to check for feedback
 export const NEW_DEV_PRO_UPGRADE_COUPON = 'appw50';
 
@@ -24,6 +25,7 @@ export enum Dependencies {
     CREDIT = 'dependency:credit',
     INVOICES = 'dependency:invoices',
     ADDRESS = 'dependency:address',
+    BILLING_AGGREGATION = 'dependency:billing_aggregation',
     UPGRADE_PLAN = 'dependency:upgrade_plan',
     ORGANIZATIONS = 'dependency:organizations',
     PAYMENT_METHODS = 'dependency:paymentMethods',

src/lib/sdk/billing.ts

@@ -935,12 +935,24 @@ export class Billing {
         );
     }
 
-    async getAggregation(organizationId: string, aggregationId: string): Promise<AggregationTeam> {
+    async getAggregation(
+        organizationId: string,
+        aggregationId: string,
+        limit?: number,
+        offset?: number
+    ): Promise<AggregationTeam> {
         const path = `/organizations/${organizationId}/aggregations/${aggregationId}`;
-        const params = {
+        const params: {
+            organizationId: string;
+            aggregationId: string;
+            limit?: number;
+            offset?: number;
+        } = {
             organizationId,
             aggregationId
         };
+        if (typeof limit === 'number') params.limit = limit;
+        if (typeof offset === 'number') params.offset = offset;
         const uri = new URL(this.client.config.endpoint + path);
         return await this.client.call(
             'get',

src/routes/(console)/organization-[organization]/billing/+page.svelte

@@ -135,7 +135,9 @@
             availableCredit={data?.availableCredit}
             currentPlan={data?.currentPlan}
             nextPlan={data?.nextPlan}
-            currentAggregation={data?.billingAggregation} />
+            currentAggregation={data?.billingAggregation}
+            limit={data?.limit}
+            offset={data?.offset} />
     {:else}
         <PlanSummaryOld
             availableCredit={data?.availableCredit}

src/routes/(console)/organization-[organization]/billing/+page.ts

@@ -1,4 +1,4 @@
-import { BillingPlan, Dependencies } from '$lib/constants';
+import { BillingPlan, DEFAULT_BILLING_PROJECTS_LIMIT, Dependencies } from '$lib/constants';
 import type { Address } from '$lib/sdk/billing';
 import { type Organization } from '$lib/stores/organization';
 import { sdk } from '$lib/stores/sdk';
@@ -7,7 +7,9 @@ import type { PageLoad } from './$types';
 import { isCloud } from '$lib/system';
 import { base } from '$app/paths';
 
-export const load: PageLoad = async ({ parent, depends }) => {
+import { getLimit, getPage, pageToOffset } from '$lib/helpers/load';
+
+export const load: PageLoad = async ({ parent, depends, url, route }) => {
     const { organization, scopes, currentPlan, countryList, locale } = await parent();
 
     if (!scopes.includes('billing.read')) {
@@ -19,6 +21,8 @@ export const load: PageLoad = async ({ parent, depends }) => {
     depends(Dependencies.CREDIT);
     depends(Dependencies.INVOICES);
     depends(Dependencies.ADDRESS);
+    //aggregation reloads on page param changes
+    depends(Dependencies.BILLING_AGGREGATION);
 
     const billingAddressId = (organization as Organization)?.billingAddressId;
     const billingAddressPromise: Promise<Address> = billingAddressId
@@ -34,9 +38,14 @@ export const load: PageLoad = async ({ parent, depends }) => {
      */
     let billingAggregation = null;
     try {
+        const currentPage = getPage(url) || 1;
+        const limit = getLimit(url, route, DEFAULT_BILLING_PROJECTS_LIMIT);
+        const offset = pageToOffset(currentPage, limit);
         billingAggregation = await sdk.forConsole.billing.getAggregation(
             organization.$id,
-            (organization as Organization)?.billingAggregationId
+            (organization as Organization)?.billingAggregationId,
+            limit,
+            offset
         );
     } catch (e) {
         // ignore error
@@ -84,6 +93,11 @@ export const load: PageLoad = async ({ parent, depends }) => {
         areCreditsSupported,
         countryList,
         locale,
-        nextPlan: billingPlanDowngrade
+        nextPlan: billingPlanDowngrade,
+        limit: getLimit(url, route, DEFAULT_BILLING_PROJECTS_LIMIT),
+        offset: pageToOffset(
+            getPage(url) || 1,
+            getLimit(url, route, DEFAULT_BILLING_PROJECTS_LIMIT)
+        )
     };
 };