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">
|
<div class="step-header">
|
||||||
{{ t('files', 'Target user') }}
|
{{ t('files', 'Target user') }}
|
||||||
</div>
|
</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>
|
||||||
<li>
|
<li>
|
||||||
<input type="submit"
|
<input type="submit"
|
||||||
|
@ -58,8 +71,11 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import axios from '@nextcloud/axios'
|
import axios from '@nextcloud/axios'
|
||||||
|
import debounce from 'debounce'
|
||||||
import { generateOcsUrl } from '@nextcloud/router'
|
import { generateOcsUrl } from '@nextcloud/router'
|
||||||
import { getFilePickerBuilder } from '@nextcloud/dialogs'
|
import { getFilePickerBuilder } from '@nextcloud/dialogs'
|
||||||
|
import { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
|
||||||
|
import Vue from 'vue'
|
||||||
|
|
||||||
import logger from '../logger'
|
import logger from '../logger'
|
||||||
|
|
||||||
|
@ -72,18 +88,36 @@ const picker = getFilePickerBuilder(t('files', 'Select directory to transfer'))
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TransferOwnershipDialogue',
|
name: 'TransferOwnershipDialogue',
|
||||||
|
components: {
|
||||||
|
Multiselect
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
directory: undefined,
|
directory: undefined,
|
||||||
directoryPickerError: undefined,
|
directoryPickerError: undefined,
|
||||||
submitError: undefined,
|
submitError: undefined,
|
||||||
uid: ''
|
loadingUsers: false,
|
||||||
|
selectedUser: null,
|
||||||
|
userSuggestions: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
canSubmit() {
|
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: {
|
methods: {
|
||||||
start() {
|
start() {
|
||||||
|
@ -105,6 +139,41 @@ export default {
|
||||||
this.directoryPickerError = error.message || t('files', 'Unknown error')
|
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() {
|
submit() {
|
||||||
if (!this.canSubmit) {
|
if (!this.canSubmit) {
|
||||||
logger.warn('ignoring form submit')
|
logger.warn('ignoring form submit')
|
||||||
|
@ -113,7 +182,7 @@ export default {
|
||||||
this.submitError = undefined
|
this.submitError = undefined
|
||||||
const data = {
|
const data = {
|
||||||
path: this.directory,
|
path: this.directory,
|
||||||
recipient: this.uid
|
recipient: this.selectedUser.user
|
||||||
}
|
}
|
||||||
logger.debug('submit transfer ownership form', data)
|
logger.debug('submit transfer ownership form', data)
|
||||||
|
|
||||||
|
@ -125,7 +194,7 @@ export default {
|
||||||
logger.info('Transfer ownership request sent', { data })
|
logger.info('Transfer ownership request sent', { data })
|
||||||
|
|
||||||
this.directory = undefined
|
this.directory = undefined
|
||||||
this.recipient = undefined
|
this.selectedUser = null
|
||||||
OCP.Toast.success(t('files', 'Ownership transfer request sent'))
|
OCP.Toast.success(t('files', 'Ownership transfer request sent'))
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
|
|
Loading…
Reference in New Issue