changes <button> pagination to <a>

SpareCores · Jun 17, 2024 · 3c892c9 · 3c892c9
1 parent 330db13
commit 3c892c9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/src/app/pages/server-prices/server-prices.component.html b/src/app/pages/server-prices/server-prices.component.html
@@ -409,13 +409,13 @@ <h1 class="text-white font-bold text-3xl">Cloud Compute Resources listing</h1>
                 <span class="text-white" > items per page</span>
               </div>
               <div class="flex justify-end gap-4">
-                <button
+                <a
+                  routerLink="/server_prices" [queryParams]="getQueryObjectForPage(this.page - 1)"
                   class="flex justify-center bg-transparent text-white py-2 px-4 w-10 rounded-lg font-bold hover:bg-emerald-400"
                   data-ph-capture-attribute-sc-event="server listing paginate"
-                  data-ph-capture-attribute-pagination-target="prev"
-                  (click)="prevPage()" >
+                  data-ph-capture-attribute-pagination-target="prev">
                   <lucide-icon name="chevron-left"></lucide-icon>
-                </button>
+                </a>
                 <ng-container *ngIf="page > 2">
                   <button
                     class="text-white py-2 px-4 rounded-lg font-bold hover:bg-emerald-400"
@@ -429,7 +429,7 @@ <h1 class="text-white font-bold text-3xl">Cloud Compute Resources listing</h1>
                     ...
                   </button>
                 </ng-container>
-                <button
+                <a
                   class="text-white py-2 px-4 rounded-lg font-bold hover:bg-emerald-400"
                   [ngClass]="{
                     'bg-emerald-400': item === this.page,
@@ -438,9 +438,9 @@ <h1 class="text-white font-bold text-3xl">Cloud Compute Resources listing</h1>
                   *ngFor="let item of possiblePages(); let i = index"
                   data-ph-capture-attribute-sc-event="server listing paginate"
                   [attr.data-ph-capture-attribute-pagination-target]="i"
-                  (click)="gotoPage(item)">
+                  routerLink="/server_prices" [queryParams]="getQueryObjectForPage(item)">
                   {{item}}
-                </button>
+                </a>
                 <ng-container *ngIf="totalPages > (page + 3)">
                   <button
                     class="text-white py-2 px-4 rounded-lg font-bold">
@@ -454,13 +454,13 @@ <h1 class="text-white font-bold text-3xl">Cloud Compute Resources listing</h1>
                     {{totalPages}}
                   </button>
                 </ng-container>
-                <button
+                <a
+                  routerLink="/server_prices" [queryParams]="getQueryObjectForPage(this.page + 1)"
                   class="flex justify-center bg-transparent text-white py-2 px-4 w-10 rounded-lg font-bold hover:bg-emerald-400"
                   data-ph-capture-attribute-sc-event="server listing paginate"
-                  data-ph-capture-attribute-pagination-target="next"
-                  (click)="nextPage()">
+                  data-ph-capture-attribute-pagination-target="next">
                   <lucide-icon name="chevron-right"></lucide-icon>
-                </button>
+                </a>
               </div>
             </div>
           </div>

diff --git a/src/app/pages/server-prices/server-prices.component.ts b/src/app/pages/server-prices/server-prices.component.ts
@@ -202,7 +202,13 @@ export class ServerPricesComponent implements OnInit {
       const query: any = params;
       const parameters = this.openApiJson.paths['/server_prices'].get.parameters || [];
       this.searchParameters = parameters.map((item: any) => {
-        const value = query[item.name]?.split(',') || item.schema.default || null;
+        let value = item.schema.default || null;
+
+        // if type is a string try split by ,
+        if(typeof query[item.name] === 'string' ) {
+          value = query[item.name].split(',');
+        }
+
         return {...item, modelValue: value};
       });
 
@@ -594,6 +600,13 @@ export class ServerPricesComponent implements OnInit {
     return Array.from({length: max - min + 1}, (_, i) => i + min);
   }
 
+  getQueryObjectForPage(pageTarget: number) {
+    let page = Math.max(pageTarget, 1);
+    const paramObject = this.getQueryObject();
+    paramObject.page = page;
+    return paramObject;
+  }
+
   openSearchPrompt() {
     this.modalSearch?.show();
   }