diff options
author | dartcafe <github@dartcafe.de> | 2021-01-03 19:45:38 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2021-01-03 19:45:38 +0300 |
commit | 02f106efa20df4267f99d4d1a289749b5c3511fa (patch) | |
tree | e891398a710dbdde6aa76fd4f233688dc8af7685 /src/js/components/Base | |
parent | b75489ab5aee9944855229e9996484c416140d53 (diff) |
split share sidebar in smaller single components
Diffstat (limited to 'src/js/components/Base')
-rw-r--r-- | src/js/components/Base/PublicShareItem.vue | 85 | ||||
-rw-r--r-- | src/js/components/Base/UserSearch.vue | 123 |
2 files changed, 123 insertions, 85 deletions
diff --git a/src/js/components/Base/PublicShareItem.vue b/src/js/components/Base/PublicShareItem.vue deleted file mode 100644 index 0f1c045b..00000000 --- a/src/js/components/Base/PublicShareItem.vue +++ /dev/null @@ -1,85 +0,0 @@ -<!-- - - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de> - - - - @author René Gieling <github@dartcafe.de> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> - -<template> - <div class="share-item" :class="type"> - <Avatar class="share-item__avatar" icon-class="icon-public" :is-no-user="true" /> - <div class="share-item__name"> - {{ t('polls', 'Public link ({token})', {token: token }) }} - </div> - <slot /> - </div> -</template> - -<script> -import { Avatar } from '@nextcloud/vue' - -export default { - name: 'PublicShareItem', - - components: { - Avatar, - }, - - inheritAttrs: false, - - props: { - token: { - type: String, - default: '', - }, - type: { - type: String, - default: 'user', - }, - icon: { - type: Boolean, - default: false, - }, - }, -} - -</script> - -<style lang="scss" scoped> -.share-item { - display: flex; - flex: 1; - align-items: center; - max-width: 100%; -} - -.share-item__avatar { - margin: 2px 4px; -} - -.share-item__name { - flex: 1; - min-width: 50px; - color: var(--color-text-maxcontrast); - padding-left: 8px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -</style> diff --git a/src/js/components/Base/UserSearch.vue b/src/js/components/Base/UserSearch.vue new file mode 100644 index 00000000..f6492943 --- /dev/null +++ b/src/js/components/Base/UserSearch.vue @@ -0,0 +1,123 @@ +<!-- + - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de> + - + - @author René Gieling <github@dartcafe.de> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> + +<template> + <Multiselect id="ajax" + :options="users" + :multiple="false" + :user-select="true" + :tag-width="80" + :clear-on-select="false" + :preserve-search="true" + :options-limit="30" + :loading="isLoading" + :internal-search="false" + :searchable="true" + :preselect-first="true" + :placeholder="placeholder" + label="displayName" + track-by="userId" + @select="addShare" + @search-change="loadUsersAsync"> + <template slot="selection" slot-scope="{ values, isOpen }"> + <span v-if="values.length && !isOpen" class="multiselect__single"> + {{ values.length }} users selected + </span> + </template> + </Multiselect> +</template> + +<script> +import debounce from 'lodash/debounce' +import axios from '@nextcloud/axios' +import { showError } from '@nextcloud/dialogs' +import { generateUrl } from '@nextcloud/router' +import { Multiselect } from '@nextcloud/vue' + +export default { + name: 'UserSearch', + + components: { + Multiselect, + }, + + data() { + return { + searchToken: null, + users: [], + isLoading: false, + placeholder: t('polls', 'Enter a name to start the search'), + } + }, + + computed: { + }, + + methods: { + loadUsersAsync: debounce(function(query) { + if (!query) { + this.users = [] + return + } + this.isLoading = true + if (this.searchToken) { + this.searchToken.cancel() + } + this.searchToken = axios.CancelToken.source() + axios.get(generateUrl('apps/polls/search/users/' + query), { cancelToken: this.searchToken.token }) + .then((response) => { + this.users = response.data.siteusers + this.isLoading = false + }) + .catch((error) => { + if (axios.isCancel(error)) { + // request was cancelled + } else { + console.error(error.response) + this.isLoading = false + } + }) + }, 250), + + addShare(payload) { + this.$store + .dispatch('poll/shares/add', { + share: payload, + type: payload.type, + id: payload.id, + emailAddress: payload.emailAddress, + }) + .catch(error => { + console.error('Error while adding share - Error: ', error) + showError(t('polls', 'Error while adding share')) + }) + }, + }, +} +</script> + +<style lang="scss"> + .multiselect { + width: 100% !important; + max-width: 100% !important; + } +</style> |