Move to vuex

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

Author: juliusknorr

apps/files_sharing/js/sharetabview.js

@@ -82,6 +82,7 @@
 					var vm = new Resources.Vue({
 						el: '#collaborationResources',
 						render: h => h(Resources.View),
+						store: Resources.Store(),
 						data: {
 							model: this.model.toJSON()
 						},

apps/files_sharing/package.json

@@ -17,7 +17,8 @@
   "dependencies": {
     "nextcloud-axios": "^0.1.3",
     "nextcloud-vue": "^0.5.0",
-    "vue": "^2.5.17"
+    "vue": "^2.5.17",
+    "vuex": "^3.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.1.0",

apps/files_sharing/src/collaborationresources.js

@@ -21,16 +21,19 @@
  */
 
 import Vue from 'vue'
+import Vuex from 'vuex'
 import { PopoverMenu } from 'nextcloud-vue'
 import ClickOutside from 'vue-click-outside'
 import { VTooltip } from 'v-tooltip'
+import { Store } from './services/collections';
 
 Vue.prototype.t = t;
 
 Vue.component('PopoverMenu', PopoverMenu)
 Vue.directive('ClickOutside', ClickOutside)
 Vue.directive('Tooltip', VTooltip)
+Vue.use(Vuex);
 
 import View from './CollaborationView'
 
-export { Vue, View }
+export { Vue, View, Store }

apps/files_sharing/src/components/CollectionList.vue

@@ -93,7 +93,6 @@
 <script>
 	import { Multiselect, Avatar } from 'nextcloud-vue';
 	import CollectionListItem from '../components/CollectionListItem';
-	import axios from 'nextcloud-axios';
 
 	const METHOD_CREATE_COLLECTION = 0;
 	const METHOD_ADD_TO_COLLECTION = 1;
@@ -117,24 +116,19 @@
 				codes: undefined,
 				value: null,
 				model: {},
-				collections: null,
 				searchCollections: []
 			};
 		},
 		mounted() {
-			let resourceId = this.$root.model.id
-			/** TODO move to service */
-			const resourceBase = OC.linkToOCS(`collaboration/resources/${this.type}`);
-			axios.get(`${resourceBase}${resourceId}?format=json`, {
-				headers: {
-					'OCS-APIRequest': true,
-					'Content-Type': 'application/json; charset=UTF-8'
-				}
-			}).then((response) => {
-				this.collections = response.data.ocs.data
-			});
+			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');
 			},
@@ -151,44 +145,43 @@
 					})
 				}
 				for(let index in this.searchCollections) {
-					options.push({
-						method: METHOD_ADD_TO_COLLECTION,
-						title: this.searchCollections[index].name,
-						collectionId: this.searchCollections[index].id
-					})
+					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;
 			}
 		},
-		created: function() {
-		},
 		methods: {
 			select(selectedOption, id) {
 				if (selectedOption.method === METHOD_CREATE_COLLECTION) {
 					selectedOption.action().then((id) => {
-						console.log('Create a new collection with')
-						console.log('This file ', this.$root.model.id)
-						console.log('Selected resource ', selectedOption.type, id)
-						this.createCollection(this.$root.model.id, selectedOption.type, 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');
+						console.error('No resource selected', e);
 					});
 				}
 
 				if (selectedOption.method === METHOD_ADD_TO_COLLECTION) {
-					this.addResourceToCollection(selectedOption.collectionId, this.type, this.$root.model.id)
+					this.$store.dispatch('addResourceToCollection', {
+						collectionId: selectedOption.collectionId, resourceType: this.type, resourceId: this.$root.model.id
+					})
 				}
 			},
 			search(query) {
-				const searchBase = OC.linkToOCS(`collaboration/resources/collections/search`);
-				axios.get(`${searchBase}%25${query}%25?format=json`, {
-					headers: {
-						'OCS-APIRequest': true,
-						'Content-Type': 'application/json; charset=UTF-8'
-					}
-				}).then((response) => {
-					this.searchCollections = response.data.ocs.data
-				});
+				this.$store.dispatch('search', query).then((collections) => {
+					this.searchCollections = collections
+				})
 			},
 			showSelect() {
 				this.selectIsOpen = true
@@ -199,45 +192,6 @@
 			},
 			isVueComponent(object) {
 				return object._isVue
-			},
-			createCollection(resourceIdBase, resourceType, resourceId) {
-				/** TODO move to service */
-				const resourceBase = OC.linkToOCS(`collaboration/resources/files`, 2);
-				axios.post(`${resourceBase}${resourceIdBase}?format=json`, {
-					name: this.$root.model.name
-				}, {
-					headers: {
-						'OCS-APIRequest': true,
-						'Content-Type': 'application/json; charset=UTF-8'
-					}
-				}).then((response) => {
-					let newCollection = response.data.ocs.data
-					console.log('Add new collection', newCollection)
-					this.collections.push(newCollection)
-					this.addResourceToCollection(newCollection.id, resourceType.toString(), resourceId.toString())
-				});
-			},
-			addResourceToCollection(collectionId, resourceType, resourceId) {
-				resourceId = '' + resourceId;
-				/** TODO move to service */
-				const resourceBase = OC.linkToOCS(`collaboration/resources/collections`, 2);
-				return axios.post(`${resourceBase}${collectionId}?format=json`, {
-					resourceType,
-					resourceId
-				}, {
-					headers: {
-						'OCS-APIRequest': true,
-						'Content-Type': 'application/json; charset=UTF-8'
-					}
-				}).then((response) => {
-					console.log('Add new collection', response.data.ocs.data)
-					let collection = this.collections.find((_item) => _item.id === collectionId)
-					if (collection) {
-						this.collections.find((_item) => _item.id === collectionId).resources = response.data.ocs.data.resources
-					} else {
-						this.collections.push(response.data.ocs.data)
-					}
-				});
 			}
 		}
 	}

apps/files_sharing/src/components/CollectionListItem.vue

@@ -21,11 +21,11 @@
   -->
 
 <template>
-	<li class="collection-list">
+	<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="text" v-model="newName" autocomplete="off" autocapitalize="off">
 			<input type="submit" value="" class="icon-confirm">
 		</form>
 		<transition name="fade">
@@ -44,7 +44,7 @@
 				</div>
 		</span>
 		<transition name="fade">
-			<ul class="resource-list-details" v-if="detailsOpen" v-click-outside="hideDetails">
+			<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-delete" @click="removeResource(collection, resource)"></span>
@@ -88,13 +88,9 @@
 						text: t('files_sharing', 'Details'),
 					},
 					{
-						action: () => { this.openRename() },
+						action: () => this.openRename(),
 						icon: 'icon-rename',
 						text: t('files_sharing', 'Rename collection'),
-					},{
-						action: () => {  },
-						icon: 'icon-delete',
-						text: t('files_sharing', 'Remove collection'),
 					}
 				]
 			},
@@ -119,17 +115,18 @@
 				this.detailsOpen = false
 			},
 			removeResource(collection, resource) {
-				service.removeResource(collection.id, resource.type, resource.id).then((response) => {
-					this.collection.resources = this.collection.resources.filter(item => !(item.id === resource.id && item.type === resource.type))
+				this.$store.dispatch('removeResource', {
+					collectionId: collection.id, resourceType: resource.type, resourceId: resource.id
 				})
 			},
 			openRename() {
 				this.newName = this.collection.name;
 			},
 			renameCollection() {
-				service.renameCollection(this.collection.id, this.newName).then((response) => {
-					console.log('Renamed collection', response.data.ocs.data)
-					this.collection = response.data.ocs.data
+				this.$store.dispatch('renameCollection', {
+					collectionId: this.collection.id,
+					name: this.newName
+				}).then((collection) => {
 					this.newName = '';
 				});
 			}
@@ -160,13 +157,12 @@
 	}
 	.collection-list {
 		flex-wrap: wrap;
+		height: auto;
 
-		form {
-			display: flex;
-		}
-		.username {
+		form, .username {
 			flex-basis: 10%;
 			flex-grow: 1;
+			display: flex;
 		}
 		.resource-list-details {
 			flex-basis: 100%;