From 5aa551b34d06ad185ab000d4d5314849e2248992 Mon Sep 17 00:00:00 2001
From: alex <alex@alexloehr.net>
Date: Tue, 03 Jun 2025 09:51:53 +0000
Subject: [PATCH] adding page UserDetail.vue
---
lib/db.js | 1
vue/src/App.vue | 9 +++
vue/src/pages/UserDetail.vue | 96 +++++++++++++++++++++++++++----
vue/src/pages/Users.vue | 21 +++++-
vue/src/assets/styles.styl | 14 ++++
5 files changed, 124 insertions(+), 17 deletions(-)
diff --git a/lib/db.js b/lib/db.js
index aeb5b6b..79b03ea 100644
--- a/lib/db.js
+++ b/lib/db.js
@@ -41,6 +41,7 @@
/////////////////////////////////////////////////////////////////////////
async function getUsers (offset = 0, limit = 10) {
+ limit = Number(limit) || 10
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/App.vue b/vue/src/App.vue
index c507719..a16fa2a 100644
--- a/vue/src/App.vue
+++ b/vue/src/App.vue
@@ -1,5 +1,9 @@
<script setup>
+
import Header from "./components/Header.vue"
+
+import "./assets/styles.styl"
+
</script>
<template>
@@ -48,4 +52,9 @@
padding .33em .66em
border 1px solid #ccc
+
+small
+ color #555
+ font-size .66em;
+
</style>
diff --git a/vue/src/assets/styles.styl b/vue/src/assets/styles.styl
new file mode 100644
index 0000000..617f974
--- /dev/null
+++ b/vue/src/assets/styles.styl
@@ -0,0 +1,14 @@
+.row
+ display flex;
+ gap 2em
+
+.user
+ padding 1em
+ border 1px solid #aaa
+ border-radius .33em
+ display grid;
+ grid-template-columns 10rem 20rem 10rem 20rem
+ gap .5em
+ &>span
+ font-variant all-small-caps
+ color #555
diff --git a/vue/src/pages/UserDetail.vue b/vue/src/pages/UserDetail.vue
index 065a591..a9e5a77 100644
--- a/vue/src/pages/UserDetail.vue
+++ b/vue/src/pages/UserDetail.vue
@@ -5,23 +5,22 @@
const route = useRoute()
const userId = route.params.userId
-const users = reactive({
-
-})
+const user = ref(null)
const error = ref(null)
onMounted(init)
/////////////////////////////////////////////////////////////////////////
-async function init() {
- const res = await fetch(`/user/${userId}`)
- console.log(res)
- if(res.status === 200) {
- users = res.data
+async function init () {
+ const res = await fetch(`/api/user/userid/${userId}?token=jiuGfr432898D90290kjfsldkfn3hh8F`)
+ const data = await res.json()
+ console.log(data)
+ if (res.status === 200) {
+ user.value = data
}
else {
-
+ error.value = `ERROR: ${res.status}`
}
}
@@ -30,10 +29,81 @@
<template>
<div>
- <h1>User Detail</h1>
- <p>{{userId}}</p>
- <p v-if="error">{{error}}</p>
- <pre>{{users}}</pre>
+ <h1>
+ User {{ userId }}
+ <small>{{ user?.firstname }} {{ user?.lastname }}</small>
+ </h1>
+ <p v-if="error">{{ error }}</p>
+<!-- <pre>{{ user }}</pre>-->
+
+ <div class="user" v-if="user">
+ <span>usr_id</span>
+ <div>{{ user.usr_id }}</div>
+
+ <span>login</span>
+ <div>{{ user.login }}</div>
+
+ <span>firstname</span>
+ <div>{{ user.firstname }}</div>
+
+ <span>lastname</span>
+ <div>{{ user.lastname }}</div>
+
+ <span>gender</span>
+ <div>{{ user.gender }}</div>
+
+ <span>email</span>
+ <div>{{ user.email }}</div>
+
+ <span>Markt</span>
+ <div>{{ user.Markt }}</div>
+
+ <span>Marktnummer</span>
+ <div>{{ user.Marktnummer }}</div>
+
+ <span>Personalnummer</span>
+ <div>{{ user.Personalnummer }}</div>
+
+ <span>department</span>
+ <div>{{ user.department }}</div>
+
+
+ </div>
+
+ <!-- <table v-if="user">-->
+ <!-- <tbody>-->
+ <!-- <tr>-->
+ <!-- <td>user_id</td>-->
+ <!-- <td>{{user.usr_id}}</td>-->
+ <!-- <td>login</td>-->
+ <!-- <td>{{user.login}}</td>-->
+ <!-- </tr>-->
+ <!-- <tr>-->
+ <!-- <td>firstname</td>-->
+ <!-- <td>{{user.firstname}}</td>-->
+ <!-- <td>lastname</td>-->
+ <!-- <td>{{user.lastname}}</td>-->
+ <!-- </tr>-->
+ <!-- <tr>-->
+ <!-- <td>usr_id</td>-->
+ <!-- <td>{{user.usr_id}}</td>-->
+ <!-- </tr>-->
+ <!-- <tr>-->
+ <!-- <td>usr_id</td>-->
+ <!-- <td>{{user.usr_id}}</td>-->
+ <!-- </tr>-->
+ <!-- <tr>-->
+ <!-- <td>usr_id</td>-->
+ <!-- <td>{{user.usr_id}}</td>-->
+ <!-- </tr>-->
+ <!-- <tr>-->
+ <!-- <td>usr_id</td>-->
+ <!-- <td>{{user.usr_id}}</td>-->
+ <!-- </tr>-->
+
+ <!-- </tbody>-->
+ <!-- </table>-->
+
</div>
</template>
diff --git a/vue/src/pages/Users.vue b/vue/src/pages/Users.vue
index 8d58545..0fae2d8 100644
--- a/vue/src/pages/Users.vue
+++ b/vue/src/pages/Users.vue
@@ -11,6 +11,7 @@
limit: 10,
data: [],
})
+const limit = 24
const error = ref(null)
onMounted(init)
@@ -18,7 +19,7 @@
/////////////////////////////////////////////////////////////////////////
async function init () {
- const res = await fetch(`/api/users?token=jiuGfr432898D90290kjfsldkfn3hh8F`)
+ const res = await fetch(`/api/users?limit=${limit}&token=jiuGfr432898D90290kjfsldkfn3hh8F`)
const data = await res.json()
console.log(data)
if (res.status === 200) {
@@ -35,11 +36,19 @@
<div>
- <h1>Users</h1>
+ <h1>
+ Users
+ <small>
+ {{users.offset}} - {{users.offset+users.limit}} von {{users.total}}
+ </small>
+ </h1>
<p>{{ userId }}</p>
<p v-if="error">{{ error }}</p>
- <div class="users">
+ <div class="user">
+
+
+
<table class="">
<thead>
<tr>
@@ -55,7 +64,11 @@
</thead>
<tbody>
<tr v-for="user in users.data">
- <td>{{user.usr_id}}</td>
+ <td>
+ <RouterLink :to="`/ui/user/${user.usr_id}`">
+ {{user.usr_id}}
+ </RouterLink>
+ </td>
<td>{{user.login}}</td>
<td>{{user.firstname}}</td>
<td>{{user.lastname}}</td>
--
Gitblit v1.8.0