From 9e6f6dd8eb5a31846477f588fba5181e5b9bb067 Mon Sep 17 00:00:00 2001
From: Rynco Maekawa <lynzrand@outlook.com>
Date: Mon, 29 Nov 2021 09:34:38 +0800
Subject: [PATCH] fix: ensure we display enough test suites

---
 web/src/services/api_service.ts               |  9 ++++--
 .../admin/dashboard/dashboard.component.ts    |  3 +-
 .../dash-board/dash-board.component.html      |  7 +++++
 .../dash-board/dash-board.component.ts        | 31 ++++++++++++++++++-
 4 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/web/src/services/api_service.ts b/web/src/services/api_service.ts
index 43dc934f..02c4501c 100644
--- a/web/src/services/api_service.ts
+++ b/web/src/services/api_service.ts
@@ -294,9 +294,14 @@ export class ApiService {
   };
 
   dashboard = {
-    get: () => {
+    get: (limit: number = 10, startId?: string) => {
+      let params: any = { limit };
+      if (startId) {
+        params.startId = startId;
+      }
       return this.httpClient.get<DashboardItem[]>(
-        endpointBase + endpoints.dashboard.get
+        endpointBase + endpoints.dashboard.get,
+        { params }
       );
     },
   };
diff --git a/web/src/views/admin/dashboard/dashboard.component.ts b/web/src/views/admin/dashboard/dashboard.component.ts
index d7ab0ef7..76e26b9a 100644
--- a/web/src/views/admin/dashboard/dashboard.component.ts
+++ b/web/src/views/admin/dashboard/dashboard.component.ts
@@ -29,7 +29,8 @@ export class DashboardComponent implements OnInit {
   }
 
   fetchTestSuites() {
-    this.api.testSuite.query({ take: 20 }).subscribe({
+    // TODO: add LoadMore button. We just make this value large enough for now.
+    this.api.testSuite.query({ take: 100 }).subscribe({
       next: (v) => (this.suite = v),
     });
   }
diff --git a/web/src/views/default/dash-board/dash-board.component.html b/web/src/views/default/dash-board/dash-board.component.html
index 10f6c169..37ceb27a 100644
--- a/web/src/views/default/dash-board/dash-board.component.html
+++ b/web/src/views/default/dash-board/dash-board.component.html
@@ -41,6 +41,13 @@ <h1>作业</h1>
           [item]="i"
           (click)="gotoJudgeSuite(i.suite.id)"
         ></app-dashboard-item-component>
+        <button
+          class="btn info"
+          (click)="loadmore()"
+          *ngIf="!error && !isLoading && hasMore"
+        >
+          加载更多
+        </button>
       </ng-template>
     </div>
   </div>
diff --git a/web/src/views/default/dash-board/dash-board.component.ts b/web/src/views/default/dash-board/dash-board.component.ts
index d497fd08..33200a9c 100644
--- a/web/src/views/default/dash-board/dash-board.component.ts
+++ b/web/src/views/default/dash-board/dash-board.component.ts
@@ -19,6 +19,8 @@ import {
   NAVBAR_DEFAULT_STYLE,
 } from 'src/services/navbar_service';
 
+const DEFAULT_NUM_ITEMS = 20;
+
 @Component({
   selector: 'app-dash-board',
   templateUrl: './dash-board.component.html',
@@ -37,6 +39,8 @@ export class DashBoardComponent implements OnInit, OnDestroy {
   }
   loading = true;
   items: DashboardItem[] | undefined = undefined;
+  itemsCount: number = 0;
+  hasMore = true;
 
   announcements: Announcement[] | undefined = undefined;
 
@@ -64,14 +68,39 @@ export class DashBoardComponent implements OnInit, OnDestroy {
 
   intervalId: any;
 
+  loadmore(): void {
+    this.loading = true;
+    this.api.dashboard
+      .get(DEFAULT_NUM_ITEMS, this.items[this.items.length - 1].job.id)
+      .subscribe({
+        next: (items) => {
+          this.items.push(...items);
+          this.loading = false;
+          if (items.length < DEFAULT_NUM_ITEMS) this.hasMore = false;
+        },
+        error: (e) => {
+          if (e instanceof HttpErrorResponse) {
+            this.errorMessage = e.message;
+          } else {
+            this.errorMessage = JSON.stringify(e);
+          }
+          console.warn(e);
+          this.error = true;
+          this.loading = false;
+          this.hasMore = false;
+        },
+      });
+  }
+
   ngOnInit(): void {
     this.title.setTitle('Rurikawa', 'dashboard');
     this.error = false;
     this.errorMessage = undefined;
-    this.api.dashboard.get().subscribe({
+    this.api.dashboard.get(DEFAULT_NUM_ITEMS).subscribe({
       next: (items) => {
         this.items = items;
         this.loading = false;
+        if (items.length < DEFAULT_NUM_ITEMS) this.hasMore = false;
       },
       error: (e) => {
         if (e instanceof HttpErrorResponse) {