From c564200d0c54f2f3337da59e74eee08d44fd6763 Mon Sep 17 00:00:00 2001
From: YuanhuanO <yuanhuandeng@brandeis.edu>
Date: Tue, 4 Jun 2024 18:27:27 -0400
Subject: [PATCH 1/3] Pagination display changes by ellipsis

---
 daisen/static/src/dashboard.ts | 60 ++++++++++++++++++++++------------
 1 file changed, 40 insertions(+), 20 deletions(-)

diff --git a/daisen/static/src/dashboard.ts b/daisen/static/src/dashboard.ts
index a588a32..eb36d0b 100644
--- a/daisen/static/src/dashboard.ts
+++ b/daisen/static/src/dashboard.ts
@@ -418,12 +418,6 @@ class Dashboard {
     // this._pageBtnContainer.appendChild(pageInfo);
 
     this._addPageButtons(ul);
-    this._updatePageInfo(pageInfo);
-  }
-
-  _updatePageInfo(pageInfo: HTMLDivElement) {
-    const numPages = Math.ceil(this._filteredNames.length / (this._numRow * this._numCol));
-    pageInfo.innerHTML = `Page ${this._currPage} of ${numPages - 1}`;
   }
 
   _addPageButtons(ul: HTMLUListElement) {
@@ -438,27 +432,53 @@ class Dashboard {
 
     this._addPrevPageButton(ul, this._currPage);
 
-    let offset = -2;
-    if (this._currPage <= 1) {
-      offset = -this._currPage;
-    }
-    if (this._currPage == numPages - 2) {
-      offset = -3;
+    this._addNumPageButton(ul, 0);
+
+    if (this._currPage > 2) {
+      this._addEllipsis(ul);
     }
-    if (this._currPage == numPages - 1) {
-      offset = -4;
+
+    for (let i = Math.max(1, this._currPage - 1); i <= Math.min(numPages - 2, this._currPage + 1); i++) {
+      this._addNumPageButton(ul, i);
     }
 
-    for (let i = 0; i < 5; i++) {
-      const pageNum = this._currPage + i + offset;
-      if (pageNum < 0 || pageNum >= numPages) {
-        continue;
-      }
+    if (this._currPage < numPages - 3) {
+      this._addEllipsis(ul);
+    }
 
-      this._addNumPageButton(ul, pageNum);
+    if (numPages > 1) {
+      this._addNumPageButton(ul, numPages - 1);
     }
 
     this._addNextPageButton(ul, this._currPage, numPages);
+    // let offset = -2;
+    // if (this._currPage <= 1) {
+    //   offset = -this._currPage;
+    // }
+    // if (this._currPage == numPages - 2) {
+    //   offset = -3;
+    // }
+    // if (this._currPage == numPages - 1) {
+    //   offset = -4;
+    // }
+
+    // for (let i = 0; i < 5; i++) {
+    //   const pageNum = this._currPage + i + offset;
+    //   if (pageNum < 0 || pageNum >= numPages) {
+    //     continue;
+    //   }
+
+    //   this._addNumPageButton(ul, pageNum);
+    // }
+
+    // this._addNextPageButton(ul, this._currPage, numPages);
+  }
+
+  _addEllipsis(ul: HTMLUListElement) {
+    const li = document.createElement("li");
+    li.classList.add("page-item", "disabled");
+    li.innerHTML = `<a class="page-link">...</a>`;
+    ul.appendChild(li);
   }
 
   _showNoComponentInfo() {

From c342a24e4e7c8d1a6aad6fe8a0fec31b4c0dac94 Mon Sep 17 00:00:00 2001
From: YuanhuanO <yuanhuandeng@brandeis.edu>
Date: Tue, 4 Jun 2024 18:28:42 -0400
Subject: [PATCH 2/3] pagination change

---
 daisen/static/src/dashboard.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/daisen/static/src/dashboard.ts b/daisen/static/src/dashboard.ts
index eb36d0b..3cdd793 100644
--- a/daisen/static/src/dashboard.ts
+++ b/daisen/static/src/dashboard.ts
@@ -568,7 +568,6 @@ class Dashboard {
     this._addPaginationControl();
     this._renderPage();
     const pageInfo = this._pageBtnContainer.querySelector('.page-info') as HTMLDivElement;
-    this._updatePageInfo(pageInfo);
   }
 
   _renderPage() {

From 69ca5de1ba9a2b61c91a6ce52db4e0c7871719c8 Mon Sep 17 00:00:00 2001
From: YuanhuanO <yuanhuandeng@brandeis.edu>
Date: Tue, 4 Jun 2024 21:21:32 -0400
Subject: [PATCH 3/3] page num + 1

---
 daisen/static/src/dashboard.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/daisen/static/src/dashboard.ts b/daisen/static/src/dashboard.ts
index 3cdd793..3c099ad 100644
--- a/daisen/static/src/dashboard.ts
+++ b/daisen/static/src/dashboard.ts
@@ -547,7 +547,7 @@ class Dashboard {
     }
     li.innerHTML = `
             <a class="page-link">
-                ${pageNum}
+                ${pageNum + 1}
             </a>
         `;