feat(result table): make pagination more visible

samply · Jan 16, 2024 · a2239db · a2239db
1 parent 464780a
commit a2239db
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/packages/demo/src/AppCCP.svelte b/packages/demo/src/AppCCP.svelte
@@ -227,7 +227,7 @@ const barChartBackgroundColors: string[] = ["#4dc9f6","#3da4c7"];
         />
       </div>
       <div class="chart-wrapper result-table">
-        <lens-result-table pageSize="10" >
+        <lens-result-table pageSize="4" >
           <div slot="above-pagination" class="result-table-hint-text">
             * Umfasst Gewebe- und flüssige Proben. Die Anzahl der FFPE Proben (Schätzung) entspricht der Zahl der Diagnosen
           </div>

diff --git a/packages/demo/src/styles/default/result-table.css b/packages/demo/src/styles/default/result-table.css
@@ -54,10 +54,20 @@ lens-result-table {
   }
 
   lens-result-table::part(table-pagination-button) {
-    border: solid 1px var(--gray);
+    border: solid 1px var(--blue);
     background: var(--white);
     border-radius: var(--border-radius-small);
     padding: var(--gap-xxs) var(--gap-s);
+    cursor: pointer;
+  }
+
+
+  lens-result-table::part(pagination-button-disabled) {
+    border: solid 1px var(--light-gray);
+    background: var(--white);
+    border-radius: var(--border-radius-small);
+    padding: var(--gap-xxs) var(--gap-s);
+    cursor: auto;
   }
 
   lens-result-table::part(info-button) {

diff --git a/packages/lib/src/components/results/ResultTableComponent.wc.svelte b/packages/lib/src/components/results/ResultTableComponent.wc.svelte
@@ -212,16 +212,18 @@
 <slot name="above-pagination"/>
 <div part="table-pagination">
     <button
-        part="table-pagination-button pagination-pagination-previous"
+        part="table-pagination-button pagination-pagination-previous 
+                {activePage === 1 ? 'pagination-button-disabled' : ''}"
         disabled={activePage === 1}
         on:click={() => {
             activePage = activePage - 1;
         }}>&#8592;</button
     >
     <div part="table-pagination-pagenumber">{activePage}</div>
     <button
-    part="table-pagination-button pagination-pagination-next"
-    disabled={activePage === Math.ceil(tableRowData.length / pageSize)}
+    part="table-pagination-button pagination-pagination-next
+            {activePage === Math.ceil(tableRowData.length / pageSize) || pageItems.length === 0 ? 'pagination-button-disabled' : ''}"
+    disabled={activePage === Math.ceil(tableRowData.length / pageSize)|| pageItems.length === 0}
     on:click={() => {
         activePage = activePage + 1;
     }}>&#8594;</button