From b4d30066b955f2419d16a8c71029fc7dac767e4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <arbeit@torsten-hettstedt.de>
Date: Fri, 27 Jun 2025 12:20:21 +0200
Subject: [PATCH] =?UTF-8?q?Pagination=20bei=20der=20Tabelle=20der=20Eintr?=
 =?UTF-8?q?=C3=A4ge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/lib/Views.svelte                  |  2 +-
 ui/src/routes/working-hours/+page.svelte | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/ui/src/lib/Views.svelte b/ui/src/lib/Views.svelte
index f049c3b..d20a899 100644
--- a/ui/src/lib/Views.svelte
+++ b/ui/src/lib/Views.svelte
@@ -10,7 +10,7 @@
     let isLoading = $state(true)
     const init = async () => await promise.then(
         /**
-         * @param {Array<{ workingDays: Number; totalHours: any; overtime: string; period: string; }>} data
+         * @param {Array<{ workingDays: Number; totalHours: any; overtime: string; period: string; homeOfficeDays: Number; }>} data
          */
         data => {
             records = data.map(row => new PeriodRecord(row))
diff --git a/ui/src/routes/working-hours/+page.svelte b/ui/src/routes/working-hours/+page.svelte
index 979449f..ed059c0 100644
--- a/ui/src/routes/working-hours/+page.svelte
+++ b/ui/src/routes/working-hours/+page.svelte
@@ -2,10 +2,13 @@
     import documentIcon from "@iconify-icons/oi/document.js";
     import wrenchIcon from "@iconify-icons/oi/wrench.js";
     import IconifyIcon from "@iconify/svelte";
+    import TablePagination from "$lib/TablePagination.svelte";
     let { data } = $props();
     const TITLE = "Bearbeitung Einträge"
     /** @type {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }[]|null} **/
-    let records = $state([])
+    let records = $state(null)
+    /** @type {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }[]} **/
+    let actual_records = $state([])
     const init = async () => await data.promise.then(
         /**
          * @param {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }[]} data
@@ -58,7 +61,7 @@
                     </tr>
                     </thead>
                     <tbody>
-                    {#each records as record}
+                    {#each actual_records as record}
                         <tr style="{record.isHomeOffice ? 'background: aqua' : ''}">
                             <td>{record.workingDay}</td>
                             <td>{record.workingTime}</td>
@@ -71,6 +74,13 @@
                         </tr>
                     {/each}
                     </tbody>
+                    <tfoot>
+                    <tr>
+                        <td colspan="4">
+                            <TablePagination promise_data={records} bind:actual_records={actual_records}/>
+                        </td>
+                    </tr>
+                    </tfoot>
                 </table>
             {/if}
         </form>