Merge pull request #188 from gctools-outilsgc/list-imp

change icons for list paging,
gctools-outilsgc · Nov 27, 2023 · 0c9c1da · 0c9c1da
2 parents 978ab5e + d697183
commit 0c9c1da
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/src/app/features/home/home.component.html b/src/app/features/home/home.component.html
@@ -24,7 +24,7 @@
 
             <app-post [profile]="people[0]" [loading]="loadingPeople"></app-post>
 
-            <app-list [service]="eventService" [cardSize]="'large'" orientation="horizontal" [pageSize]="3" [paging]="false"></app-list>
+            <app-list [service]="eventService" [cardSize]="'large'" orientation="horizontal" [pageSize]="3" [paging]="true"></app-list>
 
             <app-news-list [model]="newsItems" 
                            [isLoading]="loadingNews">

diff --git a/src/app/shared/components/list/list.component.html b/src/app/shared/components/list/list.component.html
@@ -7,8 +7,8 @@
         <app-button [clickFunc]="previousPageCallback"
                     [disabled]="currentPage === 1"
                     matButtonType="mat-icon-button"
-                    theme="primary-1">
-            <i class="fa-solid {{orientation === Orientations.Vertical ? 'fa-arrow-up' : 'fa-arrow-left'}}"></i>
+                    theme="secondary-2">
+            <i class="fa-solid fa-xl {{orientation === Orientations.Vertical ? 'fa-caret-up' : 'fa-caret-left'}}"></i>
         </app-button>
     </div> 
 
@@ -20,10 +20,10 @@
 
     <div *ngIf="paging" class="gcc-list-next">
         <app-button [clickFunc]="nextPageCallback"
-                    [disabled]="loading"
+                    [disabled]="loading && currentPage === lastPage"
                     matButtonType="mat-icon-button"
-                    theme="primary-1">
-            <i class="fa-solid {{orientation === Orientations.Vertical ? 'fa-arrow-down' : 'fa-arrow-right'}}"></i>
+                    theme="secondary-2">
+            <i class="fa-solid fa-xl {{orientation === Orientations.Vertical ? 'fa-caret-down' : 'fa-caret-right'}}"></i>
         </app-button>
     </div>
-</div>
+</div>
diff --git a/src/app/shared/components/list/list.component.ts b/src/app/shared/components/list/list.component.ts
@@ -15,11 +15,12 @@ export class ListComponent implements OnInit {
   @Input() items: typeof this.service.dataType[] = [];
   @Input() cardSize: CardSize | string = CardSize.Small; // TODO: Card size on all card components. Make a base component or interface that gets implemented.
   @Input() orientation: Orientation | string = Orientation.Vertical;
-  @Input() pageSize: number = 3;
-  @Input() loadTime: number = 5000;
   @Input() columnGap: number = 10;
   @Input() rowGap: number = 40;
   @Input() paging: boolean = false;
+  @Input() pageSize: number = 3;
+  @Input() pagesToLoad: number = 3;
+  @Input() loadTime: number = 5000;
 
   currentPage: number = 1;
   lastPage: number = this.currentPage;
@@ -35,18 +36,19 @@ export class ListComponent implements OnInit {
 
   ngOnInit(): void { 
     if (this.items.length === 0) {
-      this.loadNext();
+      this.loadNext(this.pageSize * (this.paging ? this.pagesToLoad : 1));
     }
     else {
       this.lastPage = this.items.length / this.pageSize;
     }
   }
 
-  loadNext(): void {
+  loadNext(count: number = this.pageSize): void {
     this.loading = true;
 
-    this.service?.getMany(this.pageSize, this.loadTime).subscribe((items: typeof this.service.dataType[]) => {
+    this.service?.getMany(count, this.loadTime).subscribe((items: typeof this.service.dataType[]) => {
       this.items.push(...items);
+      this.lastPage = this.items.length / this.pageSize;
       this.loading = false;
     });
   }
@@ -55,7 +57,7 @@ export class ListComponent implements OnInit {
     this.lastPage = ++this.currentPage;
 
     if (this.pageSize * this.currentPage > this.items.length)
-      this.loadNext();
+      this.loadNext(this.pageSize * this.pagesToLoad);
   }
 
   previousPage(): void {