Feature: stelle die Pagination-Navigation schön dar

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;
+            position = position || 0
-            return this.indexOf(searchString, position) === position;
+            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
@@ -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}
@@ -26,7 +27,7 @@
             <h1>{TITLE}</h1>
         </header>
         <article>
-            <Formular bind:activeRecord={activeRecord}/>
+            <Formular bind:activeRecord={activeRecord} bind:currentPage/>
         </article>
     </section>
 {/if}

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
 
@@ -90,8 +91,8 @@
 <!--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.dailyEdit} on:keypress={() => {}} 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.weeklyEdit} on:keypress={() => {}} class:active={period_of_edit === WEEKLY_EDIT}>Wöchentlich</span>
     </nav>
     {#if period_of_edit === DAILY_EDIT}
         <EditByDay bind:activeRecordList bind:activeDate bind:makeTimekeepingList/>

ui/src/routes/WorkingHours/List.svelte

@@ -1,22 +1,26 @@
 <script>
-    import {WorkingHoursRepository} from "../../components/Repositories.svelte"
+    import { WorkingHoursRepository } from '../../components/Repositories.svelte'
-    import {TimekeepingDate} from "../../components/TimekeepingDate.svelte"
+    import { TimekeepingDate } from '../../components/TimekeepingDate.svelte'
-
+    import { paginate, PaginationNav } from 'svelte-paginate'
-    export let activeRecord = null
-    let isLoading = true
-    let records = []
     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}