adding page UserDetail.vue

alex

2025-06-03 5aa551b34d06ad185ab000d4d5314849e2248992

adding page UserDetail.vue

 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

 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>

 vue/src/assets/styles.styl

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

 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>

 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>