adding page Users.vue

alex

2025-06-03 adef70a14d9cbeaa205b72f34160fcd40bd58b94

adding page Users.vue

 package-lock.json

@@ -16,6 +16,7 @@
        "nodemon": "^3.1.10",
        "stylus": "^0.64.0",
        "vue": "^3.5.13",
        "vue-router": "^4.5.1",
        "yargs": "^15.4.1"
      },
      "devDependencies": {
@@ -1751,6 +1752,12 @@
        "@vue/compiler-dom": "3.5.16",
        "@vue/shared": "3.5.16"
      }
    },
    "node_modules/@vue/devtools-api": {
      "version": "6.6.4",
      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
      "license": "MIT"
    },
    "node_modules/@vue/devtools-core": {
      "version": "7.7.6",
@@ -4696,6 +4703,21 @@
        }
      }
    },
    "node_modules/vue-router": {
      "version": "4.5.1",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
      "license": "MIT",
      "dependencies": {
        "@vue/devtools-api": "^6.6.4"
      },
      "funding": {
        "url": "https://github.com/sponsors/posva"
      },
      "peerDependencies": {
        "vue": "^3.2.0"
      }
    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

 package.json

@@ -20,6 +20,7 @@
    "nodemon": "^3.1.10",
    "stylus": "^0.64.0",
    "vue": "^3.5.13",
    "vue-router": "^4.5.1",
    "yargs": "^15.4.1"
  },
  "devDependencies": {

 vue/src/App.vue

@@ -8,6 +8,7 @@
   </header>

   <main>
      <RouterView />
   </main>

</template>

 vue/src/main.js

@@ -2,5 +2,8 @@

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).mount('#app')
createApp(App)
   .use(router)
   .mount('#app')

 vue/src/pages/UserDetail.vue

New file
@@ -0,0 +1,43 @@
<script setup>

import {useRoute} from 'vue-router'
import {onMounted, reactive, ref} from "vue"

const route = useRoute()
const userId = route.params.userId
const users = reactive({

})
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
   }
   else {

   }
}

</script>

<template>

   <div>
      <h1>User Detail</h1>
      <p>{{userId}}</p>
      <p v-if="error">{{error}}</p>
      <pre>{{users}}</pre>
   </div>

</template>

<style scoped>

</style>

 vue/src/pages/Users.vue

New file
@@ -0,0 +1,77 @@
<script setup>

import {onMounted, reactive, ref} from "vue"
import {useRoute} from "vue-router"

const route = useRoute()
const userId = route.params.userId
const users = reactive({
   total: 0,
   offset: 0,
   limit: 10,
   data: [],
})
const error = ref(null)

onMounted(init)

/////////////////////////////////////////////////////////////////////////

async function init () {
   const res = await fetch(`/api/users?token=jiuGfr432898D90290kjfsldkfn3hh8F`)
   const data = await res.json()
   console.log(data)
   if (res.status === 200) {
      Object.assign(users,data)
   }
   else {
      error.value = `ERROR: ${res.status}`
   }
}

</script>

<template>

   <div>
      <h1>Users</h1>
      <p>{{ userId }}</p>
      <p v-if="error">{{ error }}</p>

      <div class="users">
         <table>
            <thead>
               <tr>
                  <th>usr_id</th>
                  <th>login</th>
                  <th>firstname</th>
                  <th>lastname</th>
                  <th>gender</th>
                  <th>email</th>
                  <th>institution</th>
                  <th>department</th>
               </tr>
            </thead>
            <tbody>
               <tr v-for="user in users.data">
                  <td>{{user.usr_id}}</td>
                  <td>{{user.login}}</td>
                  <td>{{user.firstname}}</td>
                  <td>{{user.lastname}}</td>
                  <td>{{user.gender}}</td>
                  <td>{{user.email}}</td>
                  <td>{{user.institution}}</td>
                  <td>{{user.department}}</td>
               </tr>
            </tbody>
         </table>
      </div>

      <pre>{{ users }}</pre>
   </div>

</template>

<style scoped>

</style>

 vue/src/router.js

New file
@@ -0,0 +1,21 @@
import { createWebHistory, createRouter } from 'vue-router'

// import HomeView from './HomeView.vue'
// import AboutView from './AboutView.vue'

import Users from './pages/Users.vue'
import UserDetail from './pages/UserDetail.vue'

const routes = [
   { path: '/', redirect: "/user" },
   { path: '/ui/user', component: Users },
   { path: '/ui/user/:userId', component: UserDetail },
]

const router = createRouter({
   history: createWebHistory(),
   routes,
})

export default router