Feature: füge Pagination zum CSV-Import hinzu

ui/src/routes/WorkingHours/Formular/ImportCsv.svelte

@@ -1,7 +1,12 @@
 <script>
     import Papa from '../../../papaparse.min'
+    import { paginate, PaginationNav } from 'svelte-paginate'
+
     export let activeRecordList = []
     let imported_data = []
+    export let currentPage = 1
+    let pageSize = 15
+    $: paginatedItems = paginate({ items: imported_data, pageSize, currentPage })
 
     let files = null
 
@@ -26,20 +31,17 @@
                     let work_from = new Date(item['Von'])
                     let work_to = new Date(item['Bis'])
                     let actual_day = work_from.toISOString().substring(0, 10)
-                    let actual_work_hours = (work_to - work_from)/(1000*60*60)
-                    if (cash_work_days[actual_day] === undefined) {
-                        cash_work_days[actual_day] = actual_work_hours
-                    } else {
-                        cash_work_days[actual_day] += actual_work_hours
-                    }
+                    let actual_work_hours = (work_to - work_from) / (1000 * 60 * 60)
+                    cash_work_days[actual_day] ??= 0
+                    cash_work_days[actual_day] += actual_work_hours
                 })
                 for (let day in cash_work_days) {
                     let hours = cash_work_days[day]
                     let hours_digits = Math.trunc(hours)
-                    let minutes_digits = Math.round((hours-hours_digits)*60)
-                    let working_time = String(hours_digits).padStart(2, '0') + ":"
+                    let minutes_digits = Math.round((hours - hours_digits) * 60)
+                    let working_time = String(hours_digits).padStart(2, '0') + ':'
                         + String(minutes_digits).padStart(2, '0') + ':00'
-                    activeRecordList.push({workingTime: working_time, workingDay: day})
+                    activeRecordList.push({ workingTime: working_time, workingDay: day })
                 }
                 imported_data = activeRecordList
             },
@@ -58,23 +60,37 @@
 </fieldset>
 <fieldset name="record-data-for-import">
     <div>
-    {#if imported_data.length < 1}
-        <p>Loading...</p>
-    {:else}
-        <table>
-            <tbody>
-            {#each imported_data as item}
+        {#if imported_data.length < 1}
+            <p>Loading...</p>
+        {:else}
+            <table>
+                <tbody>
+                {#each imported_data as item}
+                    <tr>
+                        <td>
+                            {item.workingDay}
+                        </td>
+                        <td>
+                            {item.workingTime}
+                        </td>
+                    </tr>
+                {/each}
+                </tbody>
+                <tfoot>
                 <tr>
-                    <td>
-                        {item.workingDay}
-                    </td>
-                    <td>
-                        {item.workingTime}
+                    <td colspan="4">
+                        <PaginationNav
+                            totalItems="{imported_data.length}"
+                            pageSize="{pageSize}"
+                            currentPage="{currentPage}"
+                            limit="{1}"
+                            showStepOptions="{true}"
+                            on:setPage="{(e) => currentPage = e.detail.page}"
+                        />
                     </td>
                 </tr>
-            {/each}
-            </tbody>
-        </table>
-    {/if}
+                </tfoot>
+            </table>
+        {/if}
     </div>
 </fieldset>