<script setup>
|
|
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
|
const users = reactive({
|
total: 0,
|
offset: 0,
|
limit: 10,
|
data: [],
|
})
|
const limit = 24
|
const error = ref(null)
|
|
onMounted(init)
|
|
/////////////////////////////////////////////////////////////////////////
|
|
async function init (offset = 0) {
|
// 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)
|
Object.assign(users, data)
|
}
|
|
function go (offset) {
|
console.log("go", offset)
|
return init(offset)
|
}
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<h1>
|
ILIAS Users
|
<!-- <small>{{users.offset}} - {{users.offset+users.data.length}} von {{users.total}}</small>-->
|
</h1>
|
<p>{{ userId }}</p>
|
<p v-if="error">{{ error }}</p>
|
|
<div class="users">
|
|
<Pagination :offset="users.offset" :limit="users.limit" :total="users.total" @go="go" />
|
|
<table class="w100p">
|
<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>
|
<RouterLink :to="`/ui/user/${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>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
|
<!-- <pre>{{ users }}</pre>-->
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
</style>
|
