From 907bf57460d61cd9d6d744452b816da12aa34994 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 25 Apr 2019 15:09:03 +0200
Subject: [PATCH] Add working example of vue-multiselect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/board/SharingTabSidebard.vue | 29 ++++++++++++++----
 src/store/main.js                           | 33 ++++++++++++---------
 2 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/src/components/board/SharingTabSidebard.vue b/src/components/board/SharingTabSidebard.vue
index a4e975f39..871a3bc4d 100644
--- a/src/components/board/SharingTabSidebard.vue
+++ b/src/components/board/SharingTabSidebard.vue
@@ -1,6 +1,10 @@
 <template>
 		<div>
-			<multiselect :options="board.sharees" />
+			<multiselect :options="sharees" @search-change="asyncFind" label="label">
+				<template #option="scope">
+					{{ scope.option.label }}
+				</template>
+			</multiselect>
 
 			<ul
 				id="shareWithList"
@@ -24,6 +28,7 @@
 
 <script>
 import { Avatar, Multiselect } from 'nextcloud-vue'
+import { mapGetters } from 'vuex'
 
 export default {
 	name: 'SharingTabSidebard',
@@ -31,20 +36,32 @@ export default {
 		Avatar,
 		Multiselect,
 	},
-	props: {
-	},
 	data() {
 		return {
+			isLoading: false
 		}
 	},
+	computed: {
+		...mapGetters({
+			sharees: 'sharees'
+		})
+	},
 	props: {
 		board: {
 			type: Object,
 			default: undefined
 		}
+	},
+	methods: {
+		asyncFind (query) {
+			this.isLoading = true
+			this.$store.dispatch('loadSharees').then(response => {
+				this.isLoading = false
+			})
+		},
 	}
-	
-	
-	
+
+
+
 }
 </script>
diff --git a/src/store/main.js b/src/store/main.js
index f83fc9cc2..0688aa2b1 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -51,12 +51,16 @@ export default new Vuex.Store({
 		sidebarShown: false,
 		currentBoard: null,
 		boards: [],
+		sharees: [],
 		boardFilter: BOARD_FILTERS.ALL
 	},
 	getters: {
 		boards: state => {
 			return state.boards
 		},
+		sharees: state => {
+			return state.sharees
+		},
 		noneArchivedBoards: state => {
 			return state.boards.filter(board => {
 				return board.archived === false && !board.deletedAt
@@ -212,14 +216,15 @@ export default new Vuex.Store({
 			const boards = await apiClient.loadBoards()
 			commit('setBoards', boards)
 		},
-		async loadSharees({ commit }) {
-			const params = {
-				format: 'json',
-				perPage: 4,
-				itemType: [0, 1]
-			}
-			const { data } = await axios.get(OC.linkToOCS('apps/files_sharing/api/v1') + 'sharees', { params })
-			commit('setSharees', data.users)
+		loadSharees({ commit }) {
+			const params = new URLSearchParams()
+			params.append('format', 'json')
+			params.append('perPage', 4)
+			params.append('itemType', 0)
+			params.append('itemType', 1)
+			axios.get(OC.linkToOCS('apps/files_sharing/api/v1') + 'sharees', { params }).then((response) => {
+				commit('setSharees', response.data.ocs.data.users)
+			})
 		},
 		setBoardFilter({ commmit }, filter) {
 			commmit('setBoardFilter', filter)
@@ -242,20 +247,20 @@ export default new Vuex.Store({
 			apiClient.deleteLabel(label)
 			.then((label) => {
 				commit('removeLabelFromCurrentBoard', label.id);
-			})	
-		}, 
+			})
+		},
 		updateLabelFromCurrentBoard({ commit }, newLabel) {
 			apiClient.updateLabel(newLabel)
 			.then((newLabel) => {
 				commit('updateLabelFromCurrentBoard', newLabel);
-			})	
-		}, 
+			})
+		},
 		addLabelToCurrentBoard({ commit }, newLabel) {
 			newLabel.boardId = this.state.currentBoard.id
 			apiClient.createLabel(newLabel)
 			.then((newLabel) => {
 				commit('addLabelToCurrentBoard', newLabel);
-			})	
+			})
 		}
 	}
-})
\ No newline at end of file
+})