Erstelle eine Pagination-Komponente für *Svelte*

ui/src/lib/TablePagination.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    let {promise_data, actual_records= $bindable()} = $props();
+    let records: Array<any[]> = $state([])
+    const page_count = $state(5)
+    let page_number = $state(0)
+    let max_page_number = $state(0)
+    const setPage = (new_page: number) => {
+        page_number = new_page
+        actual_records = records[page_number - 1]
+    }
+    const init = async () => {
+        let page_records: any[] = []
+        console.log(promise_data, actual_records)
+        for (let index in promise_data) {
+            page_records.push(promise_data[index])
+            if (page_records.length >= page_count) {
+                records.push(page_records.values().toArray())
+                page_records = []
+            }
+        }
+        if (page_records.length > 0) {
+            records.push(page_records.values().toArray())
+        }
+        max_page_number = records.length
+        setPage(1)
+    }
+    init()
+</script>
+<style>
+    div.table-pagination {
+        text-align: center;
+    }
+
+    div.table-pagination > button {
+        display: inline-block;
+        width: 2rem;
+    }
+
+    div.table-pagination > button[disabled] {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    div.table-pagination > span {
+        display: inline-block;
+        width: 5rem;
+        text-align: center;
+    }
+</style>
+
+<div class="table-pagination">
+    <button
+        type="button"
+        disabled={page_number === 1}
+        onclick={() => setPage(1)}>&ll;
+    </button>
+    <button
+        type="button"
+        disabled={page_number === 1}
+        onclick={() => setPage(page_number - 1)}>&lt;
+    </button>
+    <span>{page_number} von {max_page_number}</span>
+    <button
+        type="button"
+        disabled={page_number === max_page_number}
+        onclick={() => setPage(page_number + 1)}>&gt;
+    </button>
+    <button
+        type="button"
+        disabled={page_number === max_page_number}
+        onclick={() => setPage(max_page_number)}>&gg;
+    </button>
+</div>

ui/src/lib/Views.svelte

@@ -1,5 +1,6 @@
 <script>
     import {PeriodRecord} from './Models.svelte.js'
+    import TablePagination from "$lib/TablePagination.svelte";
 
     /**
      * @type {{ promise: Promise<object>; title: string;}}
@@ -7,6 +8,8 @@
     let {params} = $props();
     /** @type PeriodRecord[] **/
     let records = $state([])
+    /** @type PeriodRecord[] **/
+    let actual_records = $state([])
     let isLoading = $state(true)
     const init = async () => await params.promise.then(
         /**
@@ -49,7 +52,7 @@
                 </tr>
                 </thead>
                 <tbody>
-                {#each records as record}
+                {#each actual_records as record}
                     <tr>
                         <td>{record.period}</td>
                         <td>{record.workingDays}</td>
@@ -59,6 +62,13 @@
                     </tr>
                 {/each}
                 </tbody>
+                <tfoot>
+                    <tr>
+                        <td colspan="4">
+                            <TablePagination promise_data={records} bind:actual_records={actual_records}/>
+                        </td>
+                    </tr>
+                </tfoot>
             </table>
         {/if}
     </article>