Add vue app for collaboration resources

Signed-off-by: Julius Härtl <[email protected]>

apps/files_sharing/js/sharetabview.js

@@ -78,6 +78,18 @@
 					self.trigger('sharesChanged', shareModel);
 				});
 
+				import('./../src/collaborationresources').then((Resources) => {
+					var vm = new Resources.Vue({
+						el: '#collaborationResources',
+						render: h => h(Resources.View),
+						data: {
+							model: this.model.toJSON()
+						},
+					});
+					this.model.on('change', () => { vm.data = this.model.toJSON() })
+
+				})
+
 			} else {
 				this.$el.empty();
 				// TODO: render placeholder text?

apps/files_sharing/src/collaborationresources.js

@@ -0,0 +1,36 @@
+/*
+ * @copyright Copyright (c) 2019 Julius Härtl <[email protected]>
+ *
+ * @author Julius Härtl <[email protected]>
+ *
+ * @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/>.
+ *
+ */
+
+import Vue from 'vue'
+import { PopoverMenu } from 'nextcloud-vue'
+import ClickOutside from 'vue-click-outside'
+import { VTooltip } from 'v-tooltip'
+
+Vue.prototype.t = t;
+
+Vue.component('PopoverMenu', PopoverMenu)
+Vue.directive('ClickOutside', ClickOutside)
+Vue.directive('Tooltip', VTooltip)
+
+import View from './views/CollaborationView'
+
+export { Vue, View }

apps/files_sharing/src/components/ResourceListItem.vue

@@ -0,0 +1,98 @@
+<!--
+  - @copyright Copyright (c) 2019 Julius Härtl <[email protected]>
+  -
+  - @author Julius Härtl <[email protected]>
+  -
+  - @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>
+	<li>
+		<avatar displayName="Design" :allowPlaceholder="true"></avatar>
+		<span class="username" title="">Design</span>
+		<div class="linked-icons">
+			<a href="" v-tooltip="'Design team calendar'"><span class="icon-calendar-dark"></span></a>
+			<a href="" v-tooltip="'Design projet overview'"><span class="nav-icon-files"></span></a>
+		</div>
+		<span class="sharingOptionsGroup">
+				<div class="share-menu" v-click-outside="close">
+					<a href="#" class="icon icon-more" @click="toggle"></a>
+					<span class="icon icon-loading-small hidden"></span>
+					<div class="popovermenu" :class="{open: isOpen}">
+						<popover-menu :menu="menu"></popover-menu>
+					</div>
+				</div>
+		</span>
+	</li>
+</template>
+
+<script>
+	import { Avatar } from 'nextcloud-vue';
+
+	export default {
+		name: 'ResourceListItem',
+		components: {
+			Avatar
+		},
+		data() {
+			return {
+				isOpen: false
+			}
+		},
+		computed: {
+			menu() {
+				return [
+					{
+						action: () => {  },
+						icon: 'icon-delete',
+						text: t('files_sharing', 'Remove collection'),
+					}
+				]
+			}
+		},
+		methods: {
+			open() {
+				this.isOpen = true
+			},
+			close() {
+				this.isOpen = false
+			},
+			toggle() {
+				this.isOpen = !this.isOpen
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.linked-icons {
+		display: flex;
+	span {
+		padding: 16px;
+		display: block;
+		background-repeat: no-repeat;
+		background-position: center;
+		opacity: 0.7;
+	&:hover {
+		 opacity: 1;
+	 }
+	}
+	}
+	.icon-category-integration {
+		background-color: var(--color-background-dark) !important;
+	}
+</style>

apps/files_sharing/src/views/CollaborationView.vue

@@ -0,0 +1,70 @@
+<template>
+	<div>
+		<ul id="shareWithList" class="shareWithList">
+			<li @click="showSelect">
+				<div class="avatar icon-category-integration icon-white"></div>
+				<span class="username" title="" v-if="!selectIsOpen">{{ t('files_sharing', 'Add to a collection') }}</span>
+				<multiselect v-else v-model="value" :options="options" :placeholder="placeholder">
+					<template slot="singleLabel" slot-scope="props">
+						<span class="option__desc"><span class="option__title">{{ props.option }}</span></span>
+					</template>
+				</multiselect>
+			</li>
+			<resource-list-item></resource-list-item>
+			<resource-list-item></resource-list-item>
+			<resource-list-item></resource-list-item>
+		</ul>
+		<pre>Vue component file model: {{ this.$root.model.name }} </pre>
+
+	</div>
+</template>
+
+<style lang="scss" scoped>
+	.multiselect {
+		width: 100%;
+	}
+
+
+</style>
+
+<script>
+	import { Multiselect } from 'nextcloud-vue';
+	import ResourceListItem from '../components/ResourceListItem';
+
+	export default {
+		name: 'CollaborationView',
+		components: {
+			ResourceListItem,
+			Multiselect: Multiselect,
+		},
+		data() {
+			return {
+				selectIsOpen: false,
+				generatingCodes: false,
+				codes: undefined,
+				value: null,
+				model: {},
+				options: ['list', 'of', 'options']
+			};
+		},
+		mounted() {
+			console.log('mounted');
+			console.log(this.$root.model)
+		},
+		computed: {
+			placeholder() {
+				return t('core', 'Name, federated cloud ID or email address...');
+			}
+		},
+		created: function() {
+		},
+		methods: {
+			showSelect() {
+				this.selectIsOpen = true
+			},
+			isVueComponent(object) {
+				return object._isVue
+			}
+		}
+	}
+</script>