<script setup>
|
|
import {onMounted, reactive, ref} from "vue"
|
import {useRoute} from "vue-router"
|
import Pagination from "../components/Pagination.vue"
|
import {getUsers, routerBase} from "@/lib/api"
|
import {useRouteQuery} from '@vueuse/router'
|
import {onKeyStroke} from "@vueuse/core"
|
|
const route = useRoute()
|
const userId = route.params.userId
|
const users = reactive({
|
total: 0,
|
offset: 0, // NO! USE offset BELOW!
|
limit: 10,
|
data: [],
|
})
|
const offset = useRouteQuery("offset", 0, {transform: Number})
|
const limit = 24
|
const error = ref(null)
|
|
onMounted(() => init(offset.value))
|
|
/////////////////////////////////////////////////////////////////////////
|
|
async function init (noffset = 0) {
|
const data = await getUsers(noffset, limit)
|
console.log(data)
|
Object.assign(users, data)
|
offset.value = noffset
|
}
|
|
function go (offset) {
|
console.log("go to offset", 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="`${routerBase}/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>
|
