board sharing sidebar

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>

src/components/CollaborationView.vue

@@ -0,0 +1,57 @@
+<!--
+  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @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>
+		<collection-list v-if="boardId" :id="boardId" :name="boardTitle"
+			type="deck" />
+	</div>
+</template>
+
+<script>
+import { CollectionList } from 'nextcloud-vue-collections'
+import Vue from 'vue'
+import PopoverMenu from 'nextcloud-vue/dist/Components/PopoverMenu'
+
+Vue.component('popover-menu', PopoverMenu)
+
+export default {
+	name: 'CollaborationView',
+	components: {
+		CollectionList: CollectionList
+	},
+	computed: {
+		boardId() {
+			if (this.$root.model && this.$root.model.id) {
+				return '' + this.$root.model.id
+			}
+			return null
+		},
+		boardTitle() {
+			if (this.$root.model && this.$root.model.title) {
+				return '' + this.$root.model.title
+			}
+			return ''
+		}
+	}
+}
+</script>

src/components/board/SharingTabSidebard.vue

@@ -1,6 +1,7 @@
 <template>
 	<div>
-		<multiselect :options="sharees" label="label" @search-change="asyncFind">
+		<multiselect v-model="addAcl" :options="sharees" label="label"
+			@input="clickAddAcl" @search-change="asyncFind">
 			<template #option="scope">
 				{{ scope.option.label }}
 			</template>
@@ -21,20 +22,35 @@
 				<span class="has-tooltip username">
 					{{ acl.participant.displayname }}
 				</span>
+
+				<input :checked="acl.permissionEdit" type="checkbox" @click="clickEditAcl(acl)">
+				<label for="checkbox">{{ t('deck', 'Edit') }}</label>
+
+				<input :checked="acl.permissionShare" type="checkbox" @click="clickShareAcl(acl)">
+				<label for="checkbox">{{ t('deck', 'Share') }}</label>
+
+				<input :checked="acl.permissionManage" type="checkbox" @click="clickManageAcl(acl)">
+				<label for="checkbox">{{ t('deck', 'Manage') }}</label>
+
+				<button v-tooltip="t('deck', 'Delete')" class="icon-delete" @click="clickDeleteAcl(acl)" />
+
 			</li>
 		</ul>
+		<CollaborationView />
 	</div>
 </template>
 
 <script>
 import { Avatar, Multiselect } from 'nextcloud-vue'
+import CollaborationView from '../CollaborationView'
 import { mapGetters } from 'vuex'
 
 export default {
 	name: 'SharingTabSidebard',
 	components: {
 		Avatar,
-		Multiselect
+		Multiselect,
+		CollaborationView
 	},
 	props: {
 		board: {
@@ -44,7 +60,9 @@ export default {
 	},
 	data() {
 		return {
-			isLoading: false
+			isLoading: false,
+			addAcl: null,
+			addAclForAPI: null
 		}
 	},
 	computed: {
@@ -58,8 +76,35 @@ export default {
 			this.$store.dispatch('loadSharees').then(response => {
 				this.isLoading = false
 			})
+		},
+		clickAddAcl() {
+			this.addAclForAPI = {
+				type: 0,
+				participant: this.addAcl.value.shareWith,
+				permissionEdit: false,
+				permissionShare: false,
+				permissionManage: false
+			}
+			this.$store.dispatch('addAclToCurrentBoard', this.addAclForAPI)
+		},
+		clickEditAcl(acl) {
+			this.addAclForAPI = Object.assign({}, acl)
+			this.addAclForAPI.permissionEdit = !acl.permissionEdit
+			this.$store.dispatch('updateAclFromCurrentBoard', this.addAclForAPI)
+		},
+		clickShareAcl(acl) {
+			this.addAclForAPI = Object.assign({}, acl)
+			this.addAclForAPI.permissionShare = !acl.permissionShare
+			this.$store.dispatch('updateAclFromCurrentBoard', this.addAclForAPI)
+		},
+		clickManageAcl(acl) {
+			this.addAclForAPI = Object.assign({}, acl)
+			this.addAclForAPI.permissionManage = !acl.permissionManage
+			this.$store.dispatch('updateAclFromCurrentBoard', this.addAclForAPI)
+		},
+		clickDeleteAcl(acl) {
+			this.$store.dispatch('deleteAclFromCurrentBoard', acl)
 		}
 	}
-
 }
 </script>