From da7b522974d04f67af8bbf143f576d66cb8b9bfc Mon Sep 17 00:00:00 2001
From: alex <alex@alexloehr.net>
Date: Fri, 06 Jun 2025 09:22:51 +0000
Subject: [PATCH] adding keystrokes to Pagination.vue
---
vue/src/components/Pagination.vue | 61 ++++++++++++++++++------------
vue/src/lib/itemOffset.js | 25 ++++++++++++
vue/src/router.js | 14 +++---
vue/src/pages/Users.vue | 2 +
4 files changed, 71 insertions(+), 31 deletions(-)
diff --git a/vue/src/components/Pagination.vue b/vue/src/components/Pagination.vue
index 0460a09..f00836b 100644
--- a/vue/src/components/Pagination.vue
+++ b/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;
diff --git a/vue/src/lib/itemOffset.js b/vue/src/lib/itemOffset.js
new file mode 100644
index 0000000..732a183
--- /dev/null
+++ b/vue/src/lib/itemOffset.js
@@ -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
+}
diff --git a/vue/src/pages/Users.vue b/vue/src/pages/Users.vue
index 0fa615f..80b010e 100644
--- a/vue/src/pages/Users.vue
+++ b/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>
diff --git a/vue/src/router.js b/vue/src/router.js
index 4fa22dd..745d776 100644
--- a/vue/src/router.js
+++ b/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)
--
Gitblit v1.8.0