adding Pagination.vue

alex

2025-06-03 d70351c84732844b76b7f1992b60114619eb6381

 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>