Feature: nutze für Tabellen eine Pagination

ui/src/routes/WorkingHours/Formular.svelte

@@ -82,6 +82,7 @@
     let nextDate = null
     let activeRecordList = []
     export let activeRecord = null
+    export let currentPage = 1
     let period_of_edit
     let makeTimekeepingList
 

ui/src/routes/WorkingHours/List.svelte

@@ -1,22 +1,26 @@
 <script>
-    import {WorkingHoursRepository} from "../../components/Repositories.svelte"
-    import {TimekeepingDate} from "../../components/TimekeepingDate.svelte"
-
-    export let activeRecord = null
-    let isLoading = true
-    let records = []
+    import { WorkingHoursRepository } from '../../components/Repositories.svelte'
+    import { TimekeepingDate } from '../../components/TimekeepingDate.svelte'
+    import { paginate, PaginationNav } from 'svelte-paginate'
     import IconifyIcon from '@iconify/svelte'
     import wrenchIcon from '@iconify-icons/oi/wrench'
     import documentIcon from '@iconify-icons/oi/document'
 
+    export let activeRecord = null
+    let isLoading = true
+    let records = []
+    export let currentPage = 1
+    let pageSize = 15
+    $: paginatedItems = paginate({ items: records, pageSize, currentPage })
+
     const Controller = {
         'listRecords': () => {
-            Controller.cancelActiveRecord();
+            Controller.cancelActiveRecord()
             WorkingHoursRepository.browse().then(data => {
                 Controller.cancelActiveRecord()
                 records = data
                 isLoading = false
-            });
+            })
         },
         'newRecord': async () => {
             const actDate = new TimekeepingDate()
@@ -27,11 +31,11 @@
                 Controller.listRecords()
                 return
             }
-            activeRecord = data;
+            activeRecord = data
         }),
         'cancelActiveRecord': () => {
-            activeRecord = null;
-        }
+            activeRecord = null
+        },
     }
     Controller.listRecords()
 </script>
@@ -61,7 +65,7 @@
         </tr>
         </thead>
         <tbody>
-        {#each records as record}
+        {#each paginatedItems as record}
             <tr>
                 <td>{record.workingDay}</td>
                 <td>{record.workingTime}</td>
@@ -73,5 +77,19 @@
             </tr>
         {/each}
         </tbody>
+        <tfoot>
+        <tr>
+            <td colspan="4">
+                <PaginationNav
+                    totalItems="{records.length}"
+                    pageSize="{pageSize}"
+                    currentPage="{currentPage}"
+                    limit="{1}"
+                    showStepOptions="{true}"
+                    on:setPage="{(e) => currentPage = e.detail.page}"
+                />
+            </td>
+        </tr>
+        </tfoot>
     </table>
 {/if}