1 files changed, 157 insertions, 0 deletions
diff --git a/src/components/ShareItem.vue b/src/components/ShareItem.vue
new file mode 100644
index 000000000..195f129be
--- /dev/null
+++ b/src/components/ShareItem.vue
@@ -0,0 +1,157 @@
+<template>
+	<NcModal @close="$emit('close')">
+		<div id="share-item">
+			<form name="feedform">
+				<fieldset>
+					<input v-model="userName"
+						type="text"
+						:placeholder="t('news', 'User Name')"
+						name="user"
+						pattern="[^\s]+"
+						required
+						autofocus
+						@keyup="debounceSearchUsers()">
+
+					<div class="user-bubble-container">
+						<NcLoadingIcon v-if="searching" />
+						<NcUserBubble v-for="user in users"
+							v-else-if="!searching"
+							:key="user.shareName"
+							:size="30"
+							:display-name="user.displayName"
+							:primary="selected.map((val) => { return val.shareName }).includes(user.shareName)"
+							:user="user.shareName"
+							@click="clickUser(user)" />
+					</div>
+
+					<NcButton :wide="true"
+						type="primary"
+						:disabled="selected.length === 0"
+						@click="share()">
+						<template v-if="selected.length === 0">
+							{{ t("news", "Share") }}
+						</template>
+						<template v-else-if="selected.length === 1">
+							{{ t("news", "Share with") + ' ' + selected[0].displayName }}
+						</template>
+						<template v-else-if="selected.length > 1">
+							{{ t("news", "Share with {num} users", { num: selected.length }) }}
+						</template>
+					</NcButton>
+				</fieldset>
+			</form>
+		</div>
+	</NcModal>
+</template>
+
+<script lang="ts">
+
+import Vue from 'vue'
+import _ from 'lodash'
+
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+
+import { ShareService } from '../dataservices/share.service'
+
+type ShareUser = {
+  shareName: string;
+  displayName: string;
+}
+
+export default Vue.extend({
+	components: {
+		NcModal,
+		NcButton,
+		NcUserBubble,
+		NcLoadingIcon,
+	},
+	props: {
+		itemId: {
+			type: Number,
+			required: true,
+		},
+	},
+	data: () => {
+		return {
+			userName: '',
+			users: [],
+			selected: [],
+			searching: false,
+		} as {
+      userName: string;
+      users: ShareUser[];
+      selected: ShareUser[];
+      searching: boolean;
+      debounceSearchUsers?: () => void;
+    }
+	},
+	created() {
+		this.debounceSearchUsers = _.debounce(this.searchUsers, 800)
+	},
+	methods: {
+		/**
+		 * Adds or removes user to selected list
+		 *
+		 * @param user {ShareUser} user that was clicked
+		 */
+		clickUser(user: ShareUser) {
+			const selectedUsers = this.selected.map((val: ShareUser) => { return val.shareName })
+			if (selectedUsers.includes(user.shareName)) {
+				this.selected.splice(selectedUsers.indexOf(user.shareName), 1)
+			} else {
+				this.selected.push(user)
+			}
+		},
+
+		/**
+		 * Searches for Users based on user input to display for sharing
+		 */
+		async searchUsers() {
+			this.users = []
+			this.searching = true
+			const response = await ShareService.fetchUsers(this.userName)
+			this.searching = false
+
+			for (const user of response.data.ocs.data.users) {
+				this.users.push({ displayName: user.label, shareName: user.value.shareWith })
+			}
+		},
+
+		/**
+		 * Shares an item with another use in the same nextcloud instance
+		 */
+		async share() {
+			await ShareService.share(this.itemId, this.selected.map((val: ShareUser) => { return val.shareName }))
+
+			this.$emit('close')
+		},
+	},
+})
+
+</script>
+
+<style>
+#share-item .user-bubble__content * {
+  cursor: pointer;
+}
+
+#share-item fieldset {
+  padding: 16px;
+}
+
+#share-item input {
+  width: 90%;
+}
+
+#share-item .user-bubble-container {
+  margin: 10px;
+}
+
+#share-item .user-bubble__wrapper {
+  margin: 5px 10px;
+}
+
+</style>