adding Pagination.vue

alex

2025-06-03 d70351c84732844b76b7f1992b60114619eb6381

adding Pagination.vue

 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

 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>


 vue/src/components/Pagination.vue

New file
@@ -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>

 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>