use api everywhere

alex

2025-06-04 e7a1743dc7a3660115aeb67714c37d2c2e7581e1

use api everywhere

 vue/src/components/Header.vue

@@ -1,6 +1,7 @@
<script setup>

import {apiTokenValid, deleteApiToken} from "../lib/api"
import {apiTokenValid, deleteApiToken, routerBase} from "../lib/api"

</script>

<template>
@@ -8,8 +9,8 @@
   <div class="header">
      <div>Globus-ILIAS-REST</div>
      <div>|</div>
      <RouterLink :to="`/ui/user`">Users</RouterLink>
      <RouterLink :to="`/ui/kurs`">Courses</RouterLink>
      <RouterLink :to="`${routerBase}/ui/user`">Users</RouterLink>
      <RouterLink :to="`${routerBase}/ui/kurs`">Courses</RouterLink>
      <div style="flex-grow: 1" />
      <div v-if="apiTokenValid">
         <button type="button" @click="deleteApiToken()">logout</button>

 vue/src/components/HelloWorld.vue

File was deleted

 vue/src/components/TheWelcome.vue

File was deleted

 vue/src/components/WelcomeItem.vue

File was deleted

 vue/src/lib/api.js

@@ -16,6 +16,7 @@

export const apiBase = import.meta.env.VITE_API_BASE
export const iliasBase = import.meta.env.VITE_ILIAS_BASE
export const routerBase = import.meta.env.VITE_ROUTER_BASE

/////// KURS ////////////////////////////////////////////////////////////////

@@ -34,3 +35,14 @@
   return await resKurs.json()
}

/////// USER ////////////////////////////////////////////////////////////////

export async function getUsers (offset, limit) {
   const res = await fetch(`${apiBase}/users?offset=${offset}&limit=${limit}&token=${apiToken.value}`)
   return res.json()
}

export async function getUser (userId) {
   const res = await fetch(`${apiBase}/user/userid/${userId}?token=${apiToken.value}`)
   return await res.json()
}

 vue/src/pages/UserDetail.vue

@@ -2,7 +2,7 @@

import {useRoute} from 'vue-router'
import {onMounted, reactive, ref} from "vue"
import {iliasBase} from "../lib/api"
import {getUser, iliasBase} from "../lib/api"
import LinkExtern from "../components/LinkExtern.vue"

const route = useRoute()
@@ -15,15 +15,9 @@
/////////////////////////////////////////////////////////////////////////

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

</script>
@@ -31,7 +25,7 @@
<template>

   <div>
      <h1>
      <h1>asdf
         User {{ userId }}
         <small class="ml-05">{{ user?.firstname }} {{ user?.lastname }}</small>
      </h1>

 vue/src/pages/Users.vue

@@ -3,6 +3,7 @@
import {onMounted, reactive, ref} from "vue"
import {useRoute} from "vue-router"
import Pagination from "../components/Pagination.vue"
import {getUsers} from "@/lib/api"

const route = useRoute()
const userId = route.params.userId
@@ -20,15 +21,11 @@
/////////////////////////////////////////////////////////////////////////

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

function go (offset) {
@@ -44,7 +41,7 @@

      <h1>
         ILIAS Users
<!--         <small>{{users.offset}} - {{users.offset+users.data.length}} von {{users.total}}</small>-->
         <!--         <small>{{users.offset}} - {{users.offset+users.data.length}} von {{users.total}}</small>-->
      </h1>
      <p>{{ userId }}</p>
      <p v-if="error">{{ error }}</p>
@@ -61,7 +58,7 @@
                  <th>firstname</th>
                  <th>lastname</th>
                  <th>gender</th>
<!--                  <th>email</th>-->
                  <!--                  <th>email</th>-->
                  <th>institution</th>
                  <th>department</th>
               </tr>
@@ -70,22 +67,22 @@
               <tr v-for="user in users.data">
                  <td>
                     <RouterLink :to="`/ui/user/${user.usr_id}`">
                        {{user.usr_id}}
                        {{ user.usr_id }}
                     </RouterLink>
                  </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>
                  <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>-->
      <!--      <pre>{{ users }}</pre>-->
   </div>

</template>

 vue/src/router.js

@@ -10,7 +10,7 @@


const routes = [
   { path: `/`, redirect: "/user" },
   { path: `/`, redirect: "/ui/user" },
   { path: `/ui/user`, component: Users },
   { path: `/ui/user/:userId`, component: UserDetail },
   { path: `/ui/kurs`, component: Kurse },