adding keystrokes to Pagination.vue

alex

2025-06-06 da7b522974d04f67af8bbf143f576d66cb8b9bfc

adding keystrokes to Pagination.vue

 vue/src/components/Pagination.vue

@@ -1,5 +1,8 @@
<script setup>

import * as itemOffset from '../lib/itemOffset.js'
import {onKeyStroke} from "@vueuse/core"

const props = defineProps({
   total: Number,
   offset: Number,
@@ -9,33 +12,42 @@
const emit = defineEmits(["go"])

function goStart () {
   const {offset, limit, total} = props
   console.log("goStart", {offset, limit, total})
   emit("go", 0)
   const offset2 = itemOffset.goStart(props.offset, props.limit, props.total)
   emit("go", offset2)
}

function goEnd () {
   const {offset, limit, total} = props
   console.log("goEnd ", {offset, limit, total})
   emit("go", Math.floor(total / limit) * limit)
   const offset2 = itemOffset.goEnd(props.offset, props.limit, props.total)
   emit("go", offset2)
}

function goPrev () {
   const {offset, limit, total} = props
   console.log("goPrev", {offset, limit, total})
   emit("go", Math.max(0, offset - limit))
function goPrev (multiplier = 1) {
   const offset2 = itemOffset.goPrev(props.offset, props.limit * multiplier, props.total)
   emit("go", offset2)
}

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)
function goNext (multiplier = 1) {
   const offset2 = itemOffset.goNext(props.offset, props.limit * multiplier, props.total)
   emit("go", offset2)
}

/////// KEYBOARD ////////////////////////////////////////////////////////////////

onKeyStroke(["ArrowLeft", "ArrowRight"], (e) => {
   let multiplier = 1
   switch (e.key) {
      case "ArrowLeft":
         console.log("go left")
         multiplier = e.shiftKey ? 10 : 1
         goPrev(multiplier)
         break
      case "ArrowRight":
         console.log("go right")
         multiplier = e.shiftKey ? 10 : 1
         goNext(multiplier)
         break
   }
})


</script>
@@ -43,14 +55,14 @@
<template>

   <div class="pagination">
      <input type="button" @click="goStart()" class="start" value="«" >
      <input type="button" @click="goPrev()" class="prev" value="‹" >
      <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="»" >
      <input type="button" @click="goNext()" class="next" value="›">
      <input type="button" @click="goEnd()" class="end" value="»">
   </div>

</template>
@@ -75,7 +87,8 @@

.start, .end, .prev, .next
   font-size 130%
   //width 1em

//width 1em
.current
   width 12em;
   text-align center;

 vue/src/lib/itemOffset.js

New file
@@ -0,0 +1,25 @@
export function goStart (offset, limit, total) {
   console.log(`goStart: offset=${offset} limit=${limit} total=${total}`)
   const offset2 = 0
   return offset2
}

export function goEnd (offset, limit, total) {
   console.log(`goEnd: offset=${offset} limit=${limit} total=${total}`)
   let offset2 = Math.floor(total / limit) * limit
   return offset2
}

export function goPrev (offset, limit, total) {
   console.log(`goPrev: offset=${offset} limit=${limit} total=${total}`)
   let offset2 = Math.max(0, offset - limit)
   return offset2
}

export function goNext (offset, limit, total) {
   console.log(`goNext: offset=${offset} limit=${limit} total=${total}`)
   const maxNext = Math.floor(total / limit) * limit
   const nextNext = offset + limit
   let offset2 = Math.min(maxNext, nextNext)
   return offset2
}

 vue/src/pages/Users.vue

@@ -5,6 +5,7 @@
import Pagination from "../components/Pagination.vue"
import {getUsers, routerBase} from "@/lib/api"
import {useRouteQuery} from '@vueuse/router'
import {onKeyStroke} from "@vueuse/core"

const route = useRoute()
const userId = route.params.userId
@@ -34,6 +35,7 @@
   return init(offset)
}


</script>

<template>

 vue/src/router.js

@@ -1,4 +1,4 @@
import { createWebHistory, createRouter } from 'vue-router'
import {createWebHistory, createRouter} from 'vue-router'

// import HomeView from './HomeView.vue'
// import AboutView from './AboutView.vue'
@@ -11,12 +11,12 @@


const routes = [
   { path: `${routerBase}/`, redirect: `${routerBase}/ui/user` },
   { path: `${routerBase}/ui/`, redirect: `${routerBase}/ui/user` },
   { path: `${routerBase}/ui/user`, component: Users },
   { path: `${routerBase}/ui/user/:userId`, component: UserDetail },
   { path: `${routerBase}/ui/kurs`, component: Kurse },
   { path: `${routerBase}/ui/kurs/:kursId`, component: KursDetail },
   {path: `${routerBase}/`, redirect: `${routerBase}/ui/user`},
   {path: `${routerBase}/ui/`, redirect: `${routerBase}/ui/user`},
   {path: `${routerBase}/ui/user`, component: Users},
   {path: `${routerBase}/ui/user/:userId`, component: UserDetail},
   {path: `${routerBase}/ui/kurs`, component: Kurse},
   {path: `${routerBase}/ui/kurs/:kursId`, component: KursDetail},
]
console.log(routes)