From 072e99c6fb53b07e534b83d0fe2b9384e34ad9ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <privat@torsten-hettstedt.de>
Date: Mon, 27 Feb 2023 18:11:36 +0100
Subject: [PATCH] =?UTF-8?q?Feature:=20f=C3=BCge=20Pagination=20zum=20CSV-I?=
 =?UTF-8?q?mport=20hinzu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WorkingHours/Formular/ImportCsv.svelte    | 57 ++++++++++++-------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/ui/src/routes/WorkingHours/Formular/ImportCsv.svelte b/ui/src/routes/WorkingHours/Formular/ImportCsv.svelte
index 35ea0b8..e42ef58 100644
--- a/ui/src/routes/WorkingHours/Formular/ImportCsv.svelte
+++ b/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
             },
@@ -55,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>