From d70351c84732844b76b7f1992b60114619eb6381 Mon Sep 17 00:00:00 2001
From: alex <alex@alexloehr.net>
Date: Tue, 03 Jun 2025 10:55:14 +0000
Subject: [PATCH] adding Pagination.vue

---
 lib/db.js                         |    1 
 vue/src/components/Pagination.vue |   88 ++++++++++++++++++++++++++++++++++++++++++++
 vue/src/components/Header.vue     |    2 
 vue/src/pages/Users.vue           |   14 +++++--
 4 files changed, 100 insertions(+), 5 deletions(-)

diff --git a/lib/db.js b/lib/db.js
index 79b03ea..662c712 100644
--- a/lib/db.js
+++ b/lib/db.js
@@ -42,6 +42,7 @@
 
 async function getUsers (offset = 0, limit = 10) {
    limit = Number(limit) || 10
+   offset = Number(offset) || 0
    const sel = `usr_id, login, firstname, lastname, gender, email, institution, street, city, zipcode, country, department, active`
    // TODO user defined fields
    // TODO check args for SQL Injection
diff --git a/vue/src/components/Header.vue b/vue/src/components/Header.vue
index 5c54041..c01da11 100644
--- a/vue/src/components/Header.vue
+++ b/vue/src/components/Header.vue
@@ -7,7 +7,7 @@
    <div class="header">
       <div>Globus-ILIAS-REST</div>
       <div>|</div>
-      <RouterLink :to="`/ui/users`">Users</RouterLink>
+      <RouterLink :to="`/ui/user`">Users</RouterLink>
       <RouterLink :to="`/ui/course`">Courses</RouterLink>
    </div>
 
diff --git a/vue/src/components/Pagination.vue b/vue/src/components/Pagination.vue
new file mode 100644
index 0000000..c473ae2
--- /dev/null
+++ b/vue/src/components/Pagination.vue
@@ -0,0 +1,88 @@
+<script setup>
+
+const props = defineProps({
+   total: Number,
+   offset: Number,
+   limit: Number,
+})
+
+const emit = defineEmits(["go"])
+
+function goStart () {
+   const {offset, limit, total} = props
+   console.log("goStart", {offset, limit, total})
+   emit("go", 0)
+}
+
+function goEnd () {
+   const {offset, limit, total} = props
+   console.log("goEnd ", {offset, limit, total})
+   emit("go", Math.floor(total / limit) * limit)
+}
+
+function goPrev () {
+   const {offset, limit, total} = props
+   console.log("goPrev", {offset, limit, total})
+   emit("go", Math.max(0, offset - limit))
+}
+
+function goNext () {
+   const {offset, limit, total} = props
+   console.log("goNext", {offset, limit, total})
+   console.log(total%limit)
+   const maxNext = Math.floor(total/limit)*limit
+   const nextNext = offset+limit
+   let noffset = Math.min(maxNext, nextNext)
+   // console.log({maxNext,nextNext,noffset})
+   emit("go", noffset)
+}
+
+
+</script>
+
+<template>
+
+   <div class="pagination">
+      <input type="button" @click="goStart()" class="start" value="«" >
+      <input type="button" @click="goPrev()" class="prev" value="‹" >
+      <span class="current">
+         {{ offset }} - {{ offset + limit }}
+          / {{ total }}
+      </span>
+      <input type="button" @click="goNext()" class="next" value="›" >
+      <input type="button" @click="goEnd()" class="end" value="»" >
+   </div>
+
+</template>
+
+<style scoped lang="stylus">
+
+.pagination
+   font-size 1.33rem
+   display flex;
+   gap 1em
+   align-items center;
+   justify-content center;
+   margin -1em 0 1em 0;
+
+   & > div
+      cursor: pointer
+      color #6464b5
+      font-weight bold;
+
+      &:hover
+         color orange
+
+.start, .end, .prev, .next
+   font-size 130%
+   //width 1em
+.current
+   width 10em;
+   text-align center;
+
+input
+   //all: unset
+   border none
+   width 1em
+
+</style>
diff --git a/vue/src/pages/Users.vue b/vue/src/pages/Users.vue
index bab2301..8e3b0e6 100644
--- a/vue/src/pages/Users.vue
+++ b/vue/src/pages/Users.vue
@@ -2,6 +2,7 @@
 
 import {onMounted, reactive, ref} from "vue"
 import {useRoute} from "vue-router"
+import Pagination from "../components/Pagination.vue"
 
 const route = useRoute()
 const userId = route.params.userId
@@ -18,8 +19,8 @@
 
 /////////////////////////////////////////////////////////////////////////
 
-async function init () {
-   const res = await fetch(`/api/users?limit=${limit}&token=jiuGfr432898D90290kjfsldkfn3hh8F`)
+async function init (offset = 0) {
+   const res = await fetch(`/api/users?offset=${offset}&limit=${limit}&token=jiuGfr432898D90290kjfsldkfn3hh8F`)
    const data = await res.json()
    console.log(data)
    if (res.status === 200) {
@@ -28,6 +29,11 @@
    else {
       error.value = `ERROR: ${res.status}`
    }
+}
+
+function go (offset) {
+   console.log("go", offset)
+   return init(offset)
 }
 
 </script>
@@ -39,7 +45,7 @@
       <h1>
          Users
          <small>
-            {{users.offset}} - {{users.offset+users.limit}} von {{users.total}}
+            {{users.offset}} - {{users.offset+users.data.length}} von {{users.total}}
          </small>
       </h1>
       <p>{{ userId }}</p>
@@ -47,7 +53,7 @@
 
       <div class="users">
 
-
+         <Pagination :offset="users.offset" :limit="users.limit" :total="users.total" @go="go" />
 
          <table class="w100p">
             <thead>

--
Gitblit v1.8.0