Skip to content

Commit

Permalink
enh: move duplicate code to mixin
Browse files Browse the repository at this point in the history 
Signed-off-by: Cleopatra Enjeck M <patrathewhiz@gmail.com>
  • Loading branch information
@enjeck
enjeck committed Jun 20, 2024
1 parent 17e615d commit 88139ce
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 217 deletions.
106 changes: 5 additions & 101 deletions src/shared/components/ncContextResource/ResourceSharees.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,10 @@
</template>

<script>
import { generateOcsUrl } from '@nextcloud/router'
import { getCurrentUser } from '@nextcloud/auth'
import axios from '@nextcloud/axios'
import debounce from 'debounce'
import { NcSelect } from '@nextcloud/vue'
import formatting from '../../../shared/mixins/formatting.js'
import searchUserGroup from '../../../shared/mixins/searchUserGroup.js'
import ShareTypes from '../../mixins/shareTypesMixin.js'
import { showError } from '@nextcloud/dialogs'
import '@nextcloud/dialogs/style.css'
export default {
Expand All @@ -35,7 +31,7 @@ export default {
NcSelect,
},
mixins: [ShareTypes, formatting],
mixins: [ShareTypes, formatting, searchUserGroup],
props: {
receivers: {
Expand All @@ -54,12 +50,7 @@ export default {
data() {
return {
query: '',
value: '',
loading: false,
minSearchStringLength: 1,
maxAutocompleteResults: 20,
suggestions: [],
preExistingSharees: [...this.receivers],
localSharees: this.receivers.map(userObject => userObject.user),
}
Expand All @@ -75,28 +66,6 @@ export default {
this.$emit('update', v)
},
},
isValidQuery() {
return this.query?.trim() && this.query.length >= this.minSearchStringLength
},
options() {
if (this.isValidQuery) {
return this.suggestions
}
return []
},
noResultText() {
if (this.loading) {
return t('tables', 'Searching …')
}
return t('tables', 'No elements found.')
},
userId() {
return getCurrentUser().uid
},
},
methods: {
Expand All @@ -108,76 +77,11 @@ export default {
}
},
getShareTypes() {
const types = []
if (this.selectUsers) {
types.push(this.SHARE_TYPES.SHARE_TYPE_USER)
}
if (this.selectGroups) {
types.push(this.SHARE_TYPES.SHARE_TYPE_GROUP)
}
return types
},
getShareTypeString() {
if (this.selectUsers && !this.selectGroups) {
return 'User'
} else if (!this.selectUsers && this.selectGroups) {
return 'Group'
} else {
return 'User or group'
}
},
getPlaceholder() {
return t('tables', '{shareTypeString}...', { shareTypeString: this.getShareTypeString() })
},
async asyncFind(query) {
this.query = query.trim()
if (this.isValidQuery) {
this.loading = true
await this.debounceGetSuggestions(query)
}
filterOutUnwantedItems(list) {
list = this.filterOutCurrentUser(list)
return this.filterOutSelectedUsers(list)
},
async getSuggestions(search) {
this.loading = true
const shareTypes = this.getShareTypes()
let shareTypeQueryString = ''
shareTypes.forEach(shareType => {
shareTypeQueryString += `&shareTypes[]=${shareType}`
})
const url = generateOcsUrl(`core/autocomplete/get?search=${search}${shareTypeQueryString}&limit=${this.maxAutocompleteResults}`)
try {
const res = await axios.get(url)
const rawSuggestions = res.data.ocs.data.map(autocompleteResult => {
return {
user: autocompleteResult.id,
displayName: autocompleteResult.label,
icon: autocompleteResult.icon,
isUser: autocompleteResult.source.startsWith('users'),
key: autocompleteResult.source + '-' + autocompleteResult.id,
}
})
this.suggestions = this.filterOutCurrentUser(rawSuggestions)
this.suggestions = this.filterOutSelectedUsers(this.suggestions)
this.loading = false
} catch (err) {
console.debug(err)
showError(t('tables', 'Failed to fetch {shareTypeString}', { shareTypeString: this.getShareTypeString().toLowerCase() }))
}
},
debounceGetSuggestions: debounce(function(...args) {
this.getSuggestions(...args)
}, 300),
filterOutCurrentUser(list) {
return list.filter((item) => !(item.isUser && item.user === getCurrentUser().uid))
},
filterOutSelectedUsers(list) {
return list.filter((item) => !(item.isUser && this.localSharees.includes(item.user)))
},
Expand Down
124 changes: 8 additions & 116 deletions src/shared/components/ncUserAndGroupPicker/NcUserAndGroupPicker.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
<template>
<div class="row space-B">
<NcSelect id="transfer-ownership-select" v-model="value" style="width: 100%;" :loading="loading" :options="options"
:placeholder="getPlaceholder()"
:searchable="true" :get-option-key="(option) => option.key"
label="displayName"
:aria-label-combobox="getPlaceholder()" :user-select="true"
@search="asyncFind" @input="addTransfer">
<NcSelect v-model="value" style="width: 100%;" :loading="loading" :options="options"
:placeholder="getPlaceholder()" :searchable="true" :get-option-key="(option) => option.key"
label="displayName" :aria-label-combobox="getPlaceholder()" :user-select="true" @search="asyncFind"
@input="addTransfer">
<template #noResult>
{{ noResultText }}
</template>
Expand All @@ -14,23 +12,19 @@
</template>

<script>
import { generateOcsUrl } from '@nextcloud/router'
import { getCurrentUser } from '@nextcloud/auth'
import axios from '@nextcloud/axios'
import debounce from 'debounce'
import { NcSelect } from '@nextcloud/vue'
import formatting from '../../../shared/mixins/formatting.js'
import ShareTypes from '../../mixins/shareTypesMixin.js'
import { showError } from '@nextcloud/dialogs'
import '@nextcloud/dialogs/style.css'
import searchUserGroup from '../../../shared/mixins/searchUserGroup.js'
export default {
components: {
NcSelect,
},
mixins: [ShareTypes, formatting],
mixins: [ShareTypes, formatting, searchUserGroup],
props: {
newOwnerUserId: {
Expand All @@ -49,12 +43,7 @@ export default {
data() {
return {
query: '',
value: '',
loading: false,
minSearchStringLength: 1,
maxAutocompleteResults: 20,
suggestions: [],
}
},
Expand All @@ -67,28 +56,6 @@ export default {
this.$emit('update:newOwnerUserId', v)
},
},
isValidQuery() {
return this.query?.trim() && this.query.length >= this.minSearchStringLength
},
options() {
if (this.isValidQuery) {
return this.suggestions
}
return []
},
noResultText() {
if (this.loading) {
return t('tables', 'Searching …')
}
return t('tables', 'No elements found.')
},
userId() {
return getCurrentUser().uid
},
},
methods: {
Expand All @@ -99,84 +66,9 @@ export default {
this.localValue = ''
}
},
getShareTypes() {
const types = []
if (this.selectUsers) {
types.push(this.SHARE_TYPES.SHARE_TYPE_USER)
}
if (this.selectGroups) {
types.push(this.SHARE_TYPES.SHARE_TYPE_GROUP)
}
return types
},
getShareTypeString() {
if (this.selectUsers && !this.selectGroups) {
return 'User'
} else if (!this.selectUsers && this.selectGroups) {
return 'Group'
} else {
return 'User or group'
}
filterOutUnwantedItems(list) {
return this.filterOutCurrentUser(list)
},
getPlaceholder() {
return t('tables', '{shareTypeString}...', { shareTypeString: this.getShareTypeString() })
},
async asyncFind(query) {
this.query = query.trim()
if (this.isValidQuery) {
this.loading = true
await this.debounceGetSuggestions(query)
}
},
async getSuggestions(search) {
this.loading = true
const shareTypes = this.getShareTypes()
let shareTypeQueryString = ''
shareTypes.forEach(shareType => {
shareTypeQueryString += `&shareTypes[]=${shareType}`
})
const url = generateOcsUrl(`core/autocomplete/get?search=${search}${shareTypeQueryString}&limit=${this.maxAutocompleteResults}`)
try {
const res = await axios.get(url)
const rawSuggestions = res.data.ocs.data.map(autocompleteResult => {
return {
user: autocompleteResult.id,
displayName: autocompleteResult.label,
icon: autocompleteResult.icon,
isUser: autocompleteResult.source.startsWith('users'),
key: autocompleteResult.source + '-' + autocompleteResult.id,
}
})
this.suggestions = this.filterOutCurrentUser(rawSuggestions)
this.loading = false
} catch (err) {
console.debug(err)
showError(t('tables', 'Failed to fetch {shareTypeString}', { shareTypeString: this.getShareTypeString().toLowerCase() }))
}
},
debounceGetSuggestions: debounce(function(...args) {
this.getSuggestions(...args)
}, 300),
filterOutCurrentUser(list) {
return list.filter((item) => !(item.isUser && item.user === getCurrentUser().uid))
},
},
}
</script>
<style lang="scss" scoped>
.multiselect {
width: 100% !important;
max-width: 100% !important;
}
</style>
Loading

0 comments on commit 88139ce

Please sign in to comment.