Merge branch 'feature-ui/pagination-tabellen'

# Conflicts:
#	ui/src/routes/WorkingHours/Formular.svelte
#	ui/src/routes/WorkingHours/Formular/ImportCsv.svelte

ui/package.json

@@ -25,6 +25,7 @@
     "rollup-plugin-svelte": "^6.0.0",
     "rollup-plugin-terser": "^7.0.0",
     "sirv-cli": "^1.0.8",
-    "svelte": "^3.4.4"
+    "svelte": "^3.4.4",
+    "svelte-paginate": "^0.1.0"
   }
 }

ui/public/less/lesslib/basics.less

@@ -74,3 +74,28 @@ section article {
         }
     }
 }
+
+// Einstellungen für die Pagination-Navigation
+.pagination-nav {
+    display: flex;
+    justify-content: center;
+    padding-top: 1rem;
+    .option {
+        &.number, &.ellipsis {
+            line-height: 1.25rem;
+            span {
+                margin: .25rem .5rem;
+            }
+            &.active {
+                text-decoration: underline solid;
+            }
+        }
+        &.disabled {
+            svg {
+                path {
+                    fill: darken(@mainColorLight,40%,relativ);
+                }
+            }
+        }
+    }
+}

ui/src/routes/Views.svelte

@@ -1,16 +1,21 @@
 <script>
-    export let params = {};
+    import { paginate, PaginationNav } from 'svelte-paginate'
+
+    export let params = {}
     let records = []
     let isLoading = true
     console.log(params)
+    let currentPage = 1
+    let pageSize = 15
+    $: paginatedItems = paginate({ items: records, pageSize, currentPage })
     if (!String.prototype.startsWith) {
-        String.prototype.startsWith = function(searchString, position) {
-            position = position || 0;
-            return this.indexOf(searchString, position) === position;
-        };
+        String.prototype.startsWith = function (searchString, position) {
+            position = position || 0
+            return this.indexOf(searchString, position) === position
+        }
     }
-    $: isNegative = time => time.startsWith('-') ? 'absence-time' : '';
-    $: cutMinusChar = time => time.startsWith('-') ? time.substr(1) : time;
+    $: isNegative = time => time.startsWith('-') ? 'absence-time' : ''
+    $: cutMinusChar = time => time.startsWith('-') ? time.substr(1) : time
 
     const init = async () => await params.promise.then(data => {
         records = data
@@ -20,7 +25,7 @@
 </script>
 
 <svelte:head>
-	<title>{params.title}</title>
+    <title>{params.title}</title>
 </svelte:head>
 
 <section id="list-records">
@@ -33,10 +38,10 @@
         {:else}
             <table>
                 <colgroup>
-                    <col />
-                    <col />
-                    <col />
-                    <col />
+                    <col/>
+                    <col/>
+                    <col/>
+                    <col/>
                 </colgroup>
                 <thead>
                 <tr>
@@ -47,7 +52,7 @@
                 </tr>
                 </thead>
                 <tbody>
-                {#each records as record}
+                {#each paginatedItems as record}
                     <tr>
                         <td>{record.period}</td>
                         <td>{record.workingDays}</td>
@@ -56,6 +61,20 @@
                     </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}
     </article>

ui/src/routes/WorkingHours.svelte

@@ -5,6 +5,7 @@
 
     let TITLE = "Bearbeitung Einträge"
     let activeRecord = null;
+    let currentPage = 1
 </script>
 
 <svelte:head>
@@ -17,7 +18,7 @@
             <h1>{TITLE}</h1>
         </header>
         <article>
-            <List bind:activeRecord={activeRecord}/>
+            <List bind:activeRecord={activeRecord} bind:currentPage/>
         </article>
     </section>
 {:else}

ui/src/routes/WorkingHours/Formular.svelte

@@ -102,9 +102,9 @@
 <!--suppress HtmlUnknownTarget -->
 <form action="/working-hours" name="editRecord">
     <nav class="menu">
-        <span on:click={MenuController.dailyEdit} class:active={period_of_edit === DAILY_EDIT}>Täglich</span>
-        <span on:click={MenuController.weeklyEdit} class:active={period_of_edit === WEEKLY_EDIT}>Wöchentlich</span>
-        <span on:click={MenuController.csvImport} class:active={period_of_edit === CSV_IMPORT}>Import per CSV</span>
+        <span on:click={MenuController.dailyEdit} on:keypress={() => {}} class:active={period_of_edit === DAILY_EDIT}>Täglich</span>
+        <span on:click={MenuController.weeklyEdit} on:keypress={() => {}} class:active={period_of_edit === WEEKLY_EDIT}>Wöchentlich</span>
+        <span on:click={MenuController.csvImport} on:keypress={() => {}} class:active={period_of_edit === CSV_IMPORT}>Import per CSV</span>
     </nav>
     {#if period_of_edit === DAILY_EDIT}
         <EditByDay bind:activeRecordList bind:activeDate bind:makeTimekeepingList/>

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>

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}