Working on VPaginator

src/components/VPaginator.vue

@@ -1,31 +1,88 @@
 <template>
 
-<nav aria-label="Page navigation">
+<nav aria-label="Page navigation" class="d-flex align-items-center justify-content-between">
     <ul class="pagination" >
-        <li class="page-item">
+        <li class="page-item" :class="{disabled: isFirstPage}">
-            <button class="page-link text-secondary">
+            <button class="page-link" @click="setPage(store.meta.first_page)">
-                <i class="bi bi-arrow-left" />
+                <i class="bi bi-caret-left" />
-                Zurück
+                Anfang
             </button>
         </li>
 
-        <li class="page-item">
+        <li v-for="page in displayedPages" class="page-item" :class="{active: page == store.page}">
-            <button class="page-link text-secondary">
+            <button class="page-link" @click="setPage(page)">
-                Weiter
+                {{ page }}
-                <i class="bi bi-arrow-right" />
+            </button>
+        </li>
+
+        <li class="page-item" :class="{disabled: isLastPage}" @click="setPage(store.meta.last_page)">
+            <button class="page-link">
+                Ende
+                <i class="bi bi-caret-right" />
             </button>
         </li>
     </ul>
+    <div>
+        Seite
+        <input type="text" class="form-control inline" :value="store.page" @input="setPage($event.target?.value)">
+        von {{ store.meta.last_page }}
+    </div>
+    
 </nav>
 
+{{displayedPages}}
+
+<br>
+
+{{store.page}}
+{{typeof store.page}}
+
 </template>
 
 <script setup lang="ts">
 
 import { useEmployees } from '@/stores/employees'
+import { computed } from 'vue'
+import _inRange from 'lodash/inRange'
 
 const store = useEmployees()
 
+const isFirstPage = computed(() => store.page <= store.meta.first_page)
+const isLastPage = computed(() => store.page >= store.meta.last_page)
+
+const displayedPages = computed(() => {
+    const radius = 1
+    const pages = []
+    const currentPage = store.page
+    const firstPage = currentPage - radius > store.meta.first_page ? currentPage - radius : store.meta.first_page
+    const lastPage = currentPage + radius < store.meta.last_page ? currentPage + radius : store.meta.last_page
+
+    for (let i = firstPage; i <= lastPage; i++) {
+        pages.push(i)
+    }
+
+    return pages
+})
+
+function incPage() {
+    if(store.page < store.meta.last_page) {
+        store.setPage(store.page + 1)
+    }
+}
+function decPage(){
+    if(store.page > store.meta.first_page) {
+        store.setPage( store.page - 1)
+    }
+}
+
+function setPage(page: number) {
+    if(_inRange(page, store.meta.first_page, store.meta.last_page+1)) {
+        store.setPage(page)
+    }
+}
+
+
+
 </script>
 
 <style scoped>

src/stores/employees.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { useUser } from '@/stores/user'
 import axios from '@/axios'
+import _cloneDeep from 'lodash/cloneDeep'
 
 const user = useUser()
 
@@ -22,7 +23,7 @@ export const useEmployees = defineStore('employees', {
 
             columns: Array<string>(),
 
-            limit: 10,
+            limit: 1,
             page: 1,
             sort_by: '',
             simple_search: ''
@@ -53,7 +54,7 @@ export const useEmployees = defineStore('employees', {
                 )).data
 
                 Object.assign(this.meta, data.meta)
-                this.rows = data.data.map(e => e)
+                this.rows = _cloneDeep(data.data)
 
                 this.columns = this.fetchColumns()
             }
@@ -69,8 +70,21 @@ export const useEmployees = defineStore('employees', {
             return []
         },
 
-        watch(){
+        setLimit(limit : number) {
-
+            this.limit = limit
+            this.fetchFromApi()
+        },
+        setSortBy(sortBy : string) {
+            this.sort_by = sortBy
+            this.fetchFromApi()
+        },
+        setSimpleSearch(simpleSearch : string) {
+            this.simple_search = simpleSearch
+            this.fetchFromApi()
+        },
+        setPage(page : number) {
+            this.page = page
+            this.fetchFromApi()
         }
     }
 })