split share sidebar in smaller single components

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 &amp;&amp; !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>