Use nextcloud-vue-collections library

Signed-off-by: Julius Härtl <jus@bitgrid.net>

9 files changed, 13 insertions, 613 deletions

diff --git a/apps/files_sharing/src/additionalScripts.js b/apps/files_sharing/src/additionalScripts.js
index 081519cc648..94c0f232ce3 100644
--- a/apps/files_sharing/src/additionalScripts.js
+++ b/apps/files_sharing/src/additionalScripts.js
@@ -1,4 +1,4 @@
-__webpack_public_path__ = OC.linkTo('files_sharing', 'js/');
+__webpack_public_path__ = OC.linkTo('files_sharing', 'js/dist/');
 __webpack_nonce__ = btoa(OC.requestToken);
 
 import './share'
diff --git a/apps/files_sharing/src/collaborationresources.js b/apps/files_sharing/src/collaborationresources.js
index 0b42b66e0ae..ce53d0cd936 100644
--- a/apps/files_sharing/src/collaborationresources.js
+++ b/apps/files_sharing/src/collaborationresources.js
@@ -25,7 +25,10 @@ import Vuex from 'vuex';
 import { PopoverMenu } from 'nextcloud-vue';
 import ClickOutside from 'vue-click-outside';
 import { VTooltip } from 'v-tooltip';
-import { CollectionStore as Store } from './collectionstore';
+import { CollectionStoreModule } from 'nextcloud-vue-collections';
+
+const Store = () => new Vuex.Store(CollectionStoreModule);
+
 
 Vue.prototype.t = t;
 
diff --git a/apps/files_sharing/src/collectionservice.js b/apps/files_sharing/src/collectionservice.js
deleted file mode 100644
index d494280ffbb..00000000000
--- a/apps/files_sharing/src/collectionservice.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/*
- * @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/>.
- *
- */
-
-
-import axios from 'nextcloud-axios';
-
-class CollectionService {
-	constructor() {
-		this.http = axios;
-		this.baseUrl = OC.linkToOCS('collaboration/resources', 2);
-	}
-
-	listCollection(collectionId) {
-		return this.http.get(`${this.baseUrl}collections/${collectionId}`);
-	}
-
-	renameCollection(collectionId, collectionName) {
-		const resourceBase = OC.linkToOCS('collaboration/resources/collections', 2);
-		return this.http.put(`${resourceBase}${collectionId}?format=json`, {
-			collectionName
-		}).then(result => {
-			return result.data.ocs.data;
-		});
-	}
-
-	getCollectionsByResource(resourceType, resourceId) {
-		const resourceBase = OC.linkToOCS(`collaboration/resources/${resourceType}`, 2);
-		return this.http.get(`${resourceBase}${resourceId}?format=json`)
-			.then(result => {
-				return result.data.ocs.data;
-			})
-			.catch(error => {
-				console.error(error);
-				return Promise.reject(error);
-			});
-	}
-
-	createCollection(resourceType, resourceId, name) {
-		const resourceBase = OC.linkToOCS(`collaboration/resources/${resourceType}`, 2);
-		return this.http.post(`${resourceBase}${resourceId}?format=json`, {
-			name: name
-		})
-			.then((response) => {
-				return response.data.ocs.data;
-			})
-			.catch(error => {
-				console.error(error);
-				return Promise.reject(error);
-			});
-	}
-
-	addResource(collectionId, resourceType, resourceId) {
-		resourceId = '' + resourceId;
-		const resourceBase = OC.linkToOCS('collaboration/resources/collections', 2);
-		return this.http.post(`${resourceBase}${collectionId}?format=json`, {
-			resourceType,
-			resourceId
-		}).then((response) => {
-			return response.data.ocs.data;
-		});
-	}
-
-	removeResource(collectionId, resourceType, resourceId) {
-		return this.http.delete(`${this.baseUrl}/collections/${collectionId}`, { params: { resourceType, resourceId } } )
-			.then((response) => {
-				return response.data.ocs.data;
-			});
-	}
-
-	search(query) {
-		const searchBase = OC.linkToOCS('collaboration/resources/collections/search', 2);
-		return this.http.get(`${searchBase}%25${query}%25?format=json`)
-			.then((response) => {
-				return response.data.ocs.data;
-			});
-	}
-
-}
-
-const service = new CollectionService();
-
-export default service;
diff --git a/apps/files_sharing/src/collectionstore.js b/apps/files_sharing/src/collectionstore.js
deleted file mode 100644
index 7931ef4de61..00000000000
--- a/apps/files_sharing/src/collectionstore.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/*
- * @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/>.
- *
- */
-
-import Vuex from 'vuex';
-import Vue from 'vue';
-import service from './collectionservice';
-
-const CollectionStoreModule = {
-	state: {
-		collections: []
-	},
-	mutations: {
-		addCollections (state, collections) {
-			state.collections = collections;
-		},
-		addCollection (state, collection) {
-			state.collections.push(collection);
-		},
-		removeCollection (state, collectionId) {
-			state.collections = state.collections.filter(item => item.id !== collectionId);
-		},
-		updateCollection(state, collection) {
-			let index = state.collections.findIndex((_item) => _item.id === collection.id);
-			if (index !== -1) {
-				Vue.set(state.collections, index, collection);
-			} else {
-				state.collections.push(collection);
-			}
-		}
-	},
-	getters: {
-		collectionsByResource(state) {
-			return (resourceType, resourceId) => {
-				return state.collections.filter((collection) => {
-					return typeof collection.resources.find((resource) => resource && resource.id === ''+resourceId && resource.type === resourceType) !== 'undefined';
-				});
-			};
-		},
-		getSearchResults(state) {
-			return (term) => {
-				return state.collections.filter((collection) => collection.name.contains(term));
-			};
-		}
-	},
-	actions: {
-		fetchCollectionsByResource(context, {resourceType, resourceId}) {
-			return service.getCollectionsByResource(resourceType, resourceId).then((collections) => {
-				context.commit('addCollections', collections);
-				return collections;
-			});
-		},
-		createCollection(context, {baseResourceType, baseResourceId, resourceType, resourceId, name}) {
-			return service.createCollection(baseResourceType, baseResourceId, name).then((collection) => {
-				context.commit('addCollection', collection);
-				context.dispatch('addResourceToCollection', {
-					collectionId: collection.id,
-					resourceType, resourceId
-				});
-			});
-		},
-		renameCollection(context, {collectionId, name}) {
-			return service.renameCollection(collectionId, name).then((collection) => {
-				context.commit('updateCollection', collection);
-				return collection;
-			});
-		},
-		addResourceToCollection(context, {collectionId, resourceType, resourceId}) {
-			return service.addResource(collectionId, resourceType, resourceId).then((collection) => {
-				context.commit('updateCollection', collection);
-				return collection;
-			});
-		},
-		removeResource(context, {collectionId, resourceType, resourceId}) {
-			return service.removeResource(collectionId, resourceType, resourceId).then((collection) => {
-				if (collection.resources.length > 0) {
-					context.commit('updateCollection', collection);
-				} else {
-					context.commit('removeCollection', collectionId);
-				}
-			});
-		},
-		search(context, query) {
-			return service.search(query);
-		}
-	}
-};
-
-const CollectionStore = () => new Vuex.Store(CollectionStoreModule);
-
-export { CollectionStoreModule, CollectionStore };
diff --git a/apps/files_sharing/src/components/CollectionList.vue b/apps/files_sharing/src/components/CollectionList.vue
deleted file mode 100644
index afadafec87f..00000000000
--- a/apps/files_sharing/src/components/CollectionList.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<!--
-  - @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>
-	<ul id="shareWithList" class="shareWithList" v-if="collections">
-		<li @click="showSelect">
-			<div class="avatar"><span class="icon-category-integration icon-white"></span></div>
-			<multiselect v-model="value" :options="options" :placeholder="placeholder" tag-placeholder="Create a new collection" ref="select" @select="select" @search-change="search" label="title" track-by="title" :reset-after="true" :limit="5">
-				<template slot="singleLabel" slot-scope="props">
-					<span class="option__desc">
-						<span class="option__title">{{ props.option.title }}</span>
-					</span>
-				</template>
-				<template slot="option" slot-scope="props">
-					<span class="option__wrapper">
-						<span v-if="props.option.class" :class="props.option.class" class="avatar"></span>
-						<avatar v-else :displayName="props.option.title" :allowPlaceholder="true"></avatar>
-						<span class="option__title">{{ props.option.title }}</span>
-					</span>
-				</template>
-			</multiselect>
-		</li>
-		<collection-list-item v-for="collection in collections" :collection="collection" :key="collection.id" />
-	</ul>
-</template>
-
-<style lang="scss" scoped>
-	.multiselect {
-		width: 100%;
-		margin-left: 3px;
-	}
-	span.avatar {
-		padding: 16px;
-		display: block;
-		background-repeat: no-repeat;
-		background-position: center;
-		opacity: 0.7;
-		&:hover {
-			opacity: 1;
-		}
-	}
-
-	/** TODO provide white icon in core */
-	.icon-category-integration.icon-white {
-		filter: invert(100%);
-		padding: 16px;
-		display: block;
-		background-repeat: no-repeat;
-		background-position: center;
-	}
-
-	.option__wrapper {
-		display: flex;
-		.avatar {
-			display: block;
-			background-color: var(--color-background-darker) !important;
-		}
-		.option__title {
-			padding: 4px;
-		}
-	}
-
-</style>
-<style lang="scss">
-	/** TODO check why this doesn't work when scoped */
-	.shareWithList .multiselect:not(.multiselect--active ) .multiselect__tags {
-		border: none !important;
-		input::placeholder {
-			color: var(--color-main-text);
-		}
-	}
-</style>
-
-<script>
-	import { Multiselect, Avatar } from 'nextcloud-vue';
-	import CollectionListItem from '../components/CollectionListItem';
-
-	const METHOD_CREATE_COLLECTION = 0;
-	const METHOD_ADD_TO_COLLECTION = 1;
-	export default {
-		name: 'CollectionList',
-		components: {
-			CollectionListItem,
-			Avatar,
-			Multiselect: Multiselect,
-		},
-		props: {
-			'type': {
-				type: String,
-				default: ''
-			}
-		},
-		data() {
-			return {
-				selectIsOpen: false,
-				generatingCodes: false,
-				codes: undefined,
-				value: null,
-				model: {},
-				searchCollections: []
-			};
-		},
-		mounted() {
-			this.$store.dispatch('fetchCollectionsByResource', {
-				resourceType: this.type,
-				resourceId: this.$root.model.id
-			})
-		},
-		computed: {
-			collections() {
-				return this.$store.getters.collectionsByResource(this.type, this.$root.model.id)
-			},
-			placeholder() {
-				return t('files_sharing', 'Add to a collection');
-			},
-			options() {
-				let options = [];
-				let types = window.OCP.Collaboration.getTypes().sort();
-				for(let type in types) {
-					options.push({
-						method: METHOD_CREATE_COLLECTION,
-						type: types[type],
-						title: window.OCP.Collaboration.getLabel(types[type]),
-						class: window.OCP.Collaboration.getIcon(types[type]),
-						action: () => window.OCP.Collaboration.trigger(types[type])
-					})
-				}
-				for(let index in this.searchCollections) {
-					if (this.collections.findIndex((collection) => collection.id === this.searchCollections[index].id) === -1) {
-						options.push({
-							method: METHOD_ADD_TO_COLLECTION,
-							title: this.searchCollections[index].name,
-							collectionId: this.searchCollections[index].id
-						})
-					}
-				}
-				return options;
-			}
-		},
-		methods: {
-			select(selectedOption, id) {
-				if (selectedOption.method === METHOD_CREATE_COLLECTION) {
-					selectedOption.action().then((id) => {
-						this.$store.dispatch('createCollection', {
-							baseResourceType: this.type,
-							baseResourceId: this.$root.model.id,
-							resourceType: selectedOption.type,
-							resourceId: id,
-							name: this.$root.model.name,
-						})
-					}).catch((e) => {
-						console.error('No resource selected', e);
-					});
-				}
-
-				if (selectedOption.method === METHOD_ADD_TO_COLLECTION) {
-					this.$store.dispatch('addResourceToCollection', {
-						collectionId: selectedOption.collectionId, resourceType: this.type, resourceId: this.$root.model.id
-					})
-				}
-			},
-			search(query) {
-				this.$store.dispatch('search', query).then((collections) => {
-					this.searchCollections = collections
-				})
-			},
-			showSelect() {
-				this.selectIsOpen = true
-				this.$refs.select.$el.focus()
-			},
-			hideSelect() {
-				this.selectIsOpen = false
-			},
-			isVueComponent(object) {
-				return object._isVue
-			}
-		}
-	}
-</script>
diff --git a/apps/files_sharing/src/components/CollectionListItem.vue b/apps/files_sharing/src/components/CollectionListItem.vue
deleted file mode 100644
index e6b307bfd84..00000000000
--- a/apps/files_sharing/src/components/CollectionListItem.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<!--
-  - @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>
-	<li class="collection-list" v-click-outside="hideDetails">
-		<avatar :displayName="collection.name" :allowPlaceholder="true"></avatar>
-		<span class="username" title="" @click="showDetails" v-if="this.newName === ''">{{ collection.name }}</span>
-		<form v-else @submit.prevent="renameCollection">
-			<input type="text" v-model="newName" autocomplete="off" autocapitalize="off">
-			<input type="submit" value="" class="icon-confirm">
-		</form>
-		<transition name="fade">
-			<div class="linked-icons" v-if="!detailsOpen">
-					<a v-for="resource in collection.resources" :href="resource.link" v-tooltip="resource.name" :key="resource.id"><span :class="getIcon(resource)"></span></a>
-			</div>
-		</transition>
-
-		<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>
-		<transition name="fade">
-			<ul class="resource-list-details" v-if="detailsOpen">
-				<li v-for="resource in collection.resources">
-					<a :href="resource.link"><span :class="getIcon(resource)"></span><span class="resource-name">{{ resource.name || '' }}</span></a>
-					<span class="icon-close" @click="removeResource(collection, resource)"></span>
-				</li>
-			</ul>
-		</transition>
-	</li>
-</template>
-
-<script>
-	import { Avatar } from 'nextcloud-vue';
-
-	export default {
-		name: 'CollectionListItem',
-		components: {
-			Avatar
-		},
-		props: {
-			collection: {
-				type: Object
-			}
-		},
-		data() {
-			return {
-				isOpen: false,
-				detailsOpen: false,
-				newName: '',
-			}
-		},
-		computed: {
-			menu() {
-				return [
-					{
-						action: () => {
-							this.detailsOpen = true
-							this.isOpen = false
-						},
-						icon: 'icon-info',
-						text: t('files_sharing', 'Details'),
-					},
-					{
-						action: () => this.openRename(),
-						icon: 'icon-rename',
-						text: t('files_sharing', 'Rename collection'),
-					}
-				]
-			},
-			getIcon() {
-				return (resource) => [resource.iconClass]
-			}
-		},
-		methods: {
-			open() {
-				this.isOpen = true
-			},
-			close() {
-				this.isOpen = false
-			},
-			toggle() {
-				this.isOpen = !this.isOpen
-			},
-			showDetails() {
-				this.detailsOpen = true
-			},
-			hideDetails() {
-				this.detailsOpen = false
-			},
-			removeResource(collection, resource) {
-				this.$store.dispatch('removeResource', {
-					collectionId: collection.id, resourceType: resource.type, resourceId: resource.id
-				})
-			},
-			openRename() {
-				this.newName = this.collection.name;
-			},
-			renameCollection() {
-				this.$store.dispatch('renameCollection', {
-					collectionId: this.collection.id,
-					name: this.newName
-				}).then((collection) => {
-					this.newName = '';
-				});
-			}
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.fade-enter-active, .fade-leave-active {
-		transition: opacity .3s ease;
-	}
-	.fade-enter, .fade-leave-to
-		/* .fade-leave-active below version 2.1.8 */ {
-		opacity: 0;
-	}
-	.linked-icons {
-		display: flex;
-		span {
-			padding: 16px;
-			display: block;
-			background-repeat: no-repeat;
-			background-position: center;
-			opacity: 0.7;
-			&:hover {
-				opacity: 1;
-			}
-		}
-	}
-	.collection-list {
-		flex-wrap: wrap;
-		height: auto;
-
-		form, .username {
-			flex-basis: 10%;
-			flex-grow: 1;
-			display: flex;
-		}
-		.resource-list-details {
-			flex-basis: 100%;
-			width: 100%;
-			li {
-				display: flex;
-				margin-left: 44px;
-				border-radius: 3px;
-
-				&:hover {
-					background-color: var(--color-background-dark);
-				}
-				a {
-					flex-grow: 1;
-					padding: 3px;
-					max-width: calc(100% - 30px);
-					display: flex;
-				}
-			}
-			span {
-				display: inline-block;
-				vertical-align: top;
-				margin-right: 10px;
-			}
-			span.resource-name {
-				text-overflow: ellipsis;
-				overflow: hidden;
-				position: relative;
-				vertical-align: top;
-				white-space: nowrap;
-				flex-grow: 1;
-			}
-		}
-	}
-</style>
diff --git a/apps/files_sharing/src/files_sharing.js b/apps/files_sharing/src/files_sharing.js
index 631dc3a832a..0bf695a72c9 100644
--- a/apps/files_sharing/src/files_sharing.js
+++ b/apps/files_sharing/src/files_sharing.js
@@ -1,5 +1,5 @@
 __webpack_nonce__ = btoa(OC.requestToken);
-__webpack_public_path__ = OC.linkTo('files_sharing', 'js/');
+__webpack_public_path__ = OC.linkTo('files_sharing', 'js/dist/');
 
 import '../js/app';
 import '../js/sharedfilelist';
diff --git a/apps/files_sharing/src/views/CollaborationView.vue b/apps/files_sharing/src/views/CollaborationView.vue
index e90f7c9d74f..1c1cdd7c3e7 100644
--- a/apps/files_sharing/src/views/CollaborationView.vue
+++ b/apps/files_sharing/src/views/CollaborationView.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-	import CollectionList from './../components/CollectionList'
+	import { CollectionList } from 'nextcloud-vue-collections'
 
 	export default {
 		name: 'CollaborationView',
diff --git a/apps/files_sharing/webpack.js b/apps/files_sharing/webpack.js
index aedc73706dd..3dd6d833f2d 100644
--- a/apps/files_sharing/webpack.js
+++ b/apps/files_sharing/webpack.js
@@ -5,7 +5,7 @@ module.exports = {
 	entry: {
 		'additionalScripts': path.join(__dirname, 'src', 'additionalScripts.js'),
 		'files_sharing': path.join(__dirname, 'src', 'files_sharing.js'),
-},
+	},
 	output: {
 		path: path.resolve(__dirname, './js/dist/'),
 		publicPath: '/js/',
@@ -49,6 +49,9 @@ module.exports = {
 		alias: {
 			vue$: 'vue/dist/vue.runtime.esm.js',
 		},
-		extensions: ['*', '.js', '.vue', '.json']
-	}
+		extensions: ['*', '.js', '.vue', '.json'],
+		modules: [
+			path.join(__dirname, '../../node_modules')
+		]
+	},
 };