Add autocompletion to the ownership transfer UI
Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
This commit is contained in:
parent
162b47075a
commit
146732f7f9
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -42,7 +42,20 @@
|
|||
<div class="step-header">
|
||||
{{ t('files', 'Target user') }}
|
||||
</div>
|
||||
<input id="files-transfer-user" v-model="uid" type="text">
|
||||
<Multiselect
|
||||
v-model="selectedUser"
|
||||
:options="formatedUserSuggestions"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:placeholder="t('core', 'Target user …')"
|
||||
:preselect-first="true"
|
||||
:preserve-search="true"
|
||||
:loading="loadingUsers"
|
||||
track-by="user"
|
||||
label="displayName"
|
||||
:clear-on-select="false"
|
||||
:user-select="true"
|
||||
@search-change="findUserDebounced" />
|
||||
</li>
|
||||
<li>
|
||||
<input type="submit"
|
||||
|
@ -58,8 +71,11 @@
|
|||
|
||||
<script>
|
||||
import axios from '@nextcloud/axios'
|
||||
import debounce from 'debounce'
|
||||
import { generateOcsUrl } from '@nextcloud/router'
|
||||
import { getFilePickerBuilder } from '@nextcloud/dialogs'
|
||||
import { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
|
||||
import Vue from 'vue'
|
||||
|
||||
import logger from '../logger'
|
||||
|
||||
|
@ -72,19 +88,37 @@ const picker = getFilePickerBuilder(t('files', 'Select directory to transfer'))
|
|||
|
||||
export default {
|
||||
name: 'TransferOwnershipDialogue',
|
||||
components: {
|
||||
Multiselect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
directory: undefined,
|
||||
directoryPickerError: undefined,
|
||||
submitError: undefined,
|
||||
uid: ''
|
||||
loadingUsers: false,
|
||||
selectedUser: null,
|
||||
userSuggestions: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canSubmit() {
|
||||
return !!this.directory && !!this.uid
|
||||
return !!this.directory && !!this.selectedUser
|
||||
},
|
||||
formatedUserSuggestions() {
|
||||
return Object.keys(this.userSuggestions).map((uid) => {
|
||||
const user = this.userSuggestions[uid]
|
||||
return {
|
||||
user: user.uid,
|
||||
displayName: user.displayName,
|
||||
icon: 'icon-user'
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.findUserDebounced = debounce(this.findUser, 300)
|
||||
},
|
||||
methods: {
|
||||
start() {
|
||||
this.directoryPickerError = undefined
|
||||
|
@ -105,6 +139,41 @@ export default {
|
|||
this.directoryPickerError = error.message || t('files', 'Unknown error')
|
||||
})
|
||||
},
|
||||
async findUser(query) {
|
||||
this.query = query.trim()
|
||||
|
||||
if (query.length < 3) {
|
||||
return
|
||||
}
|
||||
|
||||
this.loadingUsers = true
|
||||
try {
|
||||
const response = await axios.get(generateOcsUrl('apps/files_sharing/api/v1') + 'sharees', {
|
||||
params: {
|
||||
format: 'json',
|
||||
itemType: 'file',
|
||||
search: query,
|
||||
perPage: 20,
|
||||
lookup: false
|
||||
}
|
||||
})
|
||||
|
||||
if (response.data.ocs.meta.statuscode !== 100) {
|
||||
logger.error('Error fetching suggestions', { response })
|
||||
}
|
||||
|
||||
response.data.ocs.data.users.forEach(user => {
|
||||
Vue.set(this.userSuggestions, user.value.shareWith, {
|
||||
uid: user.value.shareWith,
|
||||
displayName: user.label
|
||||
})
|
||||
})
|
||||
} catch (error) {
|
||||
logger.error('could not fetch users', { error })
|
||||
} finally {
|
||||
this.loadingUsers = false
|
||||
}
|
||||
},
|
||||
submit() {
|
||||
if (!this.canSubmit) {
|
||||
logger.warn('ignoring form submit')
|
||||
|
@ -113,7 +182,7 @@ export default {
|
|||
this.submitError = undefined
|
||||
const data = {
|
||||
path: this.directory,
|
||||
recipient: this.uid
|
||||
recipient: this.selectedUser.user
|
||||
}
|
||||
logger.debug('submit transfer ownership form', data)
|
||||
|
||||
|
@ -125,7 +194,7 @@ export default {
|
|||
logger.info('Transfer ownership request sent', { data })
|
||||
|
||||
this.directory = undefined
|
||||
this.recipient = undefined
|
||||
this.selectedUser = null
|
||||
OCP.Toast.success(t('files', 'Ownership transfer request sent'))
|
||||
})
|
||||
.catch(error => {
|
||||
|
|
Loading…
Reference in New Issue