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,17 +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)
+                    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
             },
@@ -71,6 +76,20 @@
                     </tr>
                 {/each}
                 </tbody>
+                <tfoot>
+                <tr>
+                    <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>
+                </tfoot>
             </table>
         {/if}
     </div>