Fetch groups on the fly
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
parent
06d43bdd77
commit
2adcc75413
|
@ -22,61 +22,91 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Multiselect v-model="newValue"
|
<Multiselect :value="currentValue"
|
||||||
:class="{'icon-loading-small': groups.length === 0}"
|
:loading="status.isLoading && groups.length === 0"
|
||||||
:options="groups"
|
:options="groups"
|
||||||
:multiple="false"
|
:multiple="false"
|
||||||
label="displayname"
|
label="displayname"
|
||||||
track-by="id"
|
track-by="id"
|
||||||
@input="setValue" />
|
@search-change="searchAsync"
|
||||||
|
@input="(value) => $emit('input', value.id)" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
|
import { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
|
||||||
import valueMixin from '../../mixins/valueMixin'
|
|
||||||
import axios from '@nextcloud/axios'
|
import axios from '@nextcloud/axios'
|
||||||
|
|
||||||
|
const groups = []
|
||||||
|
const status = {
|
||||||
|
isLoading: false
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'RequestUserGroup',
|
name: 'RequestUserGroup',
|
||||||
components: {
|
components: {
|
||||||
Multiselect
|
Multiselect
|
||||||
},
|
},
|
||||||
mixins: [
|
props: {
|
||||||
valueMixin
|
value: {
|
||||||
],
|
type: String,
|
||||||
data() {
|
default: ''
|
||||||
return {
|
},
|
||||||
groups: []
|
check: {
|
||||||
|
type: Object,
|
||||||
|
default: () => { return {} }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeMount() {
|
data() {
|
||||||
axios.get(OC.linkToOCS('cloud', 2) + 'groups').then((response) => {
|
return {
|
||||||
this.groups = response.data.ocs.data.groups.reduce((obj, item) => {
|
groups: groups,
|
||||||
|
status: status
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
currentValue() {
|
||||||
|
return this.groups.find(group => group.id === this.value) || null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
if (this.groups.length === 0) {
|
||||||
|
await this.searchAsync('')
|
||||||
|
}
|
||||||
|
if (this.currentValue === null) {
|
||||||
|
await this.searchAsync(this.value)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
searchAsync(searchQuery) {
|
||||||
|
if (this.status.isLoading) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.status.isLoading = true
|
||||||
|
return axios.get(OC.linkToOCS('cloud', 2) + 'groups?limit=20&search=' + encodeURI(searchQuery)).then((response) => {
|
||||||
|
response.data.ocs.data.groups.reduce((obj, item) => {
|
||||||
obj.push({
|
obj.push({
|
||||||
id: item,
|
id: item,
|
||||||
displayname: item
|
displayname: item
|
||||||
})
|
})
|
||||||
return obj
|
return obj
|
||||||
}, [])
|
}, []).forEach((group) => this.addGroup(group))
|
||||||
this.updateInternalValue(this.value)
|
this.status.isLoading = false
|
||||||
}, (error) => {
|
}, (error) => {
|
||||||
console.error('Error while loading group list', error.response)
|
console.error('Error while loading group list', error.response)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
addGroup(group) {
|
||||||
updateInternalValue() {
|
const index = this.groups.findIndex((item) => item.id === group.id)
|
||||||
this.newValue = this.groups.find(group => group.id === this.value) || null
|
if (index === -1) {
|
||||||
},
|
this.groups.push(group)
|
||||||
setValue(value) {
|
|
||||||
if (value !== null) {
|
|
||||||
this.$emit('input', this.newValue.id)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.multiselect, input[type='text'] {
|
.multiselect {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue