From adef70a14d9cbeaa205b72f34160fcd40bd58b94 Mon Sep 17 00:00:00 2001
From: alex <alex@alexloehr.net>
Date: Tue, 03 Jun 2025 08:49:54 +0000
Subject: [PATCH] adding page Users.vue
---
package-lock.json | 22 +++++++
vue/src/router.js | 21 +++++++
vue/src/App.vue | 1
vue/src/pages/UserDetail.vue | 43 ++++++++++++++
package.json | 1
vue/src/pages/Users.vue | 77 +++++++++++++++++++++++++
vue/src/main.js | 7 +
7 files changed, 170 insertions(+), 2 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 9c594d9..073cdb0 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index ac3f25e..eaf5fd1 100644
--- a/package.json
+++ b/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": {
diff --git a/vue/src/App.vue b/vue/src/App.vue
index 99b82c6..3b9016d 100644
--- a/vue/src/App.vue
+++ b/vue/src/App.vue
@@ -8,6 +8,7 @@
</header>
<main>
+ <RouterView />
</main>
</template>
diff --git a/vue/src/main.js b/vue/src/main.js
index 0ac3a5f..dd80fff 100644
--- a/vue/src/main.js
+++ b/vue/src/main.js
@@ -1,6 +1,9 @@
import './assets/main.css'
-import { createApp } from 'vue'
+import {createApp} from 'vue'
import App from './App.vue'
+import router from './router'
-createApp(App).mount('#app')
+createApp(App)
+ .use(router)
+ .mount('#app')
diff --git a/vue/src/pages/UserDetail.vue b/vue/src/pages/UserDetail.vue
new file mode 100644
index 0000000..065a591
--- /dev/null
+++ b/vue/src/pages/UserDetail.vue
@@ -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>
diff --git a/vue/src/pages/Users.vue b/vue/src/pages/Users.vue
new file mode 100644
index 0000000..4496c1d
--- /dev/null
+++ b/vue/src/pages/Users.vue
@@ -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>
diff --git a/vue/src/router.js b/vue/src/router.js
new file mode 100644
index 0000000..021e430
--- /dev/null
+++ b/vue/src/router.js
@@ -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
+
--
Gitblit v1.8.0