<script setup>
|
|
import {onMounted, reactive, ref} from "vue"
|
import {useRoute} from "vue-router"
|
import Pagination from "../components/Pagination.vue"
|
import {getUsers, routerBase, searchUsers} from "@/lib/api"
|
import {useRouteQuery} from '@vueuse/router'
|
import {onKeyStroke, useDebounceFn} 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 = 22
|
const error = ref(null)
|
|
onMounted(() => init(offset.value))
|
|
/////// SEARCH ////////////////////////////////////////////////////////////////
|
|
const search = useRouteQuery("search", "",)// {transform: s => s.trim()})
|
async function _doSearch (search) {
|
console.log("doSEarch", search)
|
return init(offset.value, search)
|
}
|
const doSearch = useDebounceFn(_doSearch, 500)
|
|
/////////////////////////////////////////////////////////////////////////
|
|
async function init (noffset = 0, search) {
|
console.log(">>> INIT", noffset, search)
|
const data = await getUsers(noffset, limit, search)
|
console.log(data)
|
Object.assign(users, data)
|
offset.value = noffset
|
}
|
|
function go (offset) {
|
console.log("go to offset", offset)
|
return init(offset, search.value)
|
}
|
|
|
|
</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">
|
|
<div class="users-header">
|
<div class="search">
|
Search
|
<input @keyup="doSearch(search)" v-model="search" type="text" size="30">
|
</div>
|
<Pagination :offset="users.offset" :limit="users.limit" :total="users.total" @go="go" />
|
</div>
|
|
<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 lang="stylus">
|
|
.users-header
|
display flex;
|
align-items center
|
justify-content space-around
|
margin-bottom 1em;
|
margin-top -.5em;
|
border 1px dotted #ccc
|
background-color #eee;
|
|
</style>
|
