<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"
|
|
document.title = `Users | globus-ilias-rest`
|
|
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.value))
|
|
/////// SEARCH ////////////////////////////////////////////////////////////////
|
|
const search = useRouteQuery("search", "",)// {transform: s => s.trim()})
|
async function _doSearch (asearch) {
|
console.log("doSEarch", asearch)
|
// return init(0, asearch)
|
// TODO offset muss zurückgesetzt werden wenn die Suche neu ist
|
// search.value = asearch
|
return init(0, asearch)
|
// return init(offset.value, asearch)
|
}
|
const doSearch = useDebounceFn(_doSearch, 333)
|
|
function resetSearch () {
|
search.value = ''
|
init(0, "")
|
}
|
|
/////////////////////////////////////////////////////////////////////////
|
|
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">
|
<button type="button" @click="resetSearch">
|
<div style="transform:scale(1.4); font-weight: bold;">×</div>
|
</button>
|
</div>
|
<Pagination :offset="users.offset" :limit="users.limit" :total="users.total" :current="users.data.length" @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;
|
|
.search
|
display flex;
|
gap .33em
|
align-items center;
|
button
|
display flex;
|
//background-color blue
|
align-items stretch
|
display grid
|
grid-template-columns 1fr
|
padding 0
|
min-width 1.33em
|
cursor pointer;
|
|
</style>
|
