Show error messages if requests fail

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

Author: juliusknorr

src/collectionservice.js

@@ -48,13 +48,6 @@ class CollectionService {
 			.then(result => {
 				return result.data.ocs.data
 			})
-			.catch(error => {
-				if (error.response.status === 404) {
-					return []
-				}
-				console.error(error)
-				return Promise.reject(error)
-			})
 	}
 
 	createCollection(resourceType, resourceId, name) {
@@ -65,10 +58,6 @@ class CollectionService {
 			.then((response) => {
 				return response.data.ocs.data
 			})
-			.catch(error => {
-				console.error(error)
-				return Promise.reject(error)
-			})
 	}
 
 	addResource(collectionId, resourceType, resourceId) {

src/components/CollectionList.vue

@@ -44,6 +44,9 @@
 				</template>
 			</multiselect>
 		</li>
+		 <transition name="fade">
+		<li class="error" v-if="error">{{ error }}</li>
+		 </transition>
 		<collection-list-item v-for="collection in collections" :key="collection.id" :collection="collection" />
 	</ul>
 </template>
@@ -97,6 +100,13 @@
 		}
 	}
 
+	.fade-enter-active, .fade-leave-active {
+		transition: opacity .5s;
+	}
+	.fade-enter, .fade-leave-to {
+		opacity: 0;
+	}
+
 </style>
 <style lang="scss">
 	/** TODO check why this doesn't work when scoped */
@@ -132,7 +142,7 @@ const _debouncedSearch = debounce(
 			this.$store.dispatch('search', query).then((collections) => {
 				this.searchCollections = collections
 			}).catch(e => {
-				OC.Notification.showTemporary(e)
+				console.error('Failed to search for collections', e)
 			})
 		}
 	},
@@ -177,15 +187,16 @@ export default {
 			codes: undefined,
 			value: null,
 			model: {},
-			searchCollections: []
+			searchCollections: [],
+			error: null
 		}
 	},
 	computed: {
 		collections() {
 			return this.$store.getters.collectionsByResource(this.type, this.id)
 		},
 		placeholder() {
-			return t('files_sharing', 'Add to a collection')
+			return t('core', 'Add to a collection')
 		},
 		options() {
 			let options = []
@@ -233,6 +244,8 @@ export default {
 						resourceType: selectedOption.type,
 						resourceId: id,
 						name: this.name
+					}).catch((e) => {
+						this.setError(t('core', 'Failed to create collection'), e)
 					})
 				}).catch((e) => {
 					console.error('No resource selected', e)
@@ -242,6 +255,8 @@ export default {
 			if (selectedOption.method === METHOD_ADD_TO_COLLECTION) {
 				this.$store.dispatch('addResourceToCollection', {
 					collectionId: selectedOption.collectionId, resourceType: this.type, resourceId: this.id
+				}).catch((e) => {
+					this.setError(t('core', 'Failed to add resource to collection collection'), e)
 				})
 			}
 		},
@@ -257,6 +272,13 @@ export default {
 		},
 		isVueComponent(object) {
 			return object._isVue
+		},
+		setError(error, e) {
+			console.error(error, e)
+			this.error = error
+			setTimeout(() => {
+				this.error = null
+			}, 5000)
 		}
 	}
 }

src/components/CollectionListItem.vue

@@ -25,21 +25,22 @@
 		<avatar :display-name="collection.name" :allow-placeholder="true" class="collection-avatar" />
 		<span v-if="newName === null" class="collection-item-name" title=""
 			@click="showDetails">{{ collection.name }}</span>
-		<form v-else @submit.prevent="renameCollection">
+		<form v-else @submit.prevent="renameCollection" :class="{'shouldshake': error.rename }">
 			<input v-model="newName" type="text" autocomplete="off"
 				autocapitalize="off">
 			<input type="submit" value="" class="icon-confirm">
 		</form>
-		<transition name="fade">
-			<div v-if="!detailsOpen" class="linked-icons">
-				<a v-for="resource in limitedResources(collection)" :key="resource.type + '|' + resource.id" v-tooltip="resource.name"
-					:href="resource.link" :class="typeClass(resource)"><img :src="iconUrl(resource)"></a>
-			</div>
-		</transition>
+		<div v-if="!detailsOpen && newName === null" class="linked-icons">
+			<a v-for="resource in limitedResources(collection)" :key="resource.type + '|' + resource.id" v-tooltip="resource.name"
+				:href="resource.link" :class="typeClass(resource)"><img :src="iconUrl(resource)"></a>
+		</div>
 
-		<span class="sharingOptionsGroup">
+		<span class="sharingOptionsGroup" v-if="newName === null">
 			<action :actions="menu" />
 		</span>
+		<transition name="fade">
+			<div class="error" v-if="error.rename">{{ error.rename }}</div>
+		</transition>
 		<transition name="fade">
 			<ul v-if="detailsOpen" class="resource-list-details">
 				<li v-for="resource in collection.resources" :key="resource.type + '|' + resource.id" :class="typeClass(resource)">
@@ -52,6 +53,7 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import Action from 'nextcloud-vue/dist/Components/Action'
 import Avatar from 'nextcloud-vue/dist/Components/Avatar'
 import Tooltip from 'nextcloud-vue/dist/Directives/Tooltip'
@@ -73,7 +75,8 @@ export default {
 		return {
 			isOpen: false,
 			detailsOpen: false,
-			newName: null
+			newName: null,
+			error: {}
 		}
 	},
 	computed: {
@@ -86,12 +89,12 @@ export default {
 						this.isOpen = false
 					},
 					icon: 'icon-info',
-					text: !this.detailsOpen ? t('files_sharing', 'Show details') : t('files_sharing', 'Hide details')
+					text: !this.detailsOpen ? t('core', 'Show details') : t('core', 'Hide details')
 				},
 				{
 					action: () => this.openRename(),
 					icon: 'icon-rename',
-					text: t('files_sharing', 'Rename collection')
+					text: t('core', 'Rename collection')
 				}
 			]
 		},
@@ -141,11 +144,21 @@ export default {
 			this.newName = this.collection.name
 		},
 		renameCollection() {
+			if (this.newName === '') {
+				this.newName = null
+				return
+			}
 			this.$store.dispatch('renameCollection', {
 				collectionId: this.collection.id,
 				name: this.newName
 			}).then((collection) => {
 				this.newName = null
+			}).catch((e) => {
+				Vue.set(this.error, 'rename', t('core', 'Failed to rename collection'))
+				console.error(e)
+				setTimeout(() => {
+					Vue.set(this.error, 'rename', null)
+				}, 3000)
 			})
 		}
 	}
@@ -202,6 +215,10 @@ export default {
 			margin-top: 4px;
 			flex-grow: 1;
 		}
+		.error {
+			flex-basis: 100%;
+			width: 100%;
+		}
 		.resource-list-details {
 			flex-basis: 100%;
 			width: 100%;
@@ -247,4 +264,20 @@ export default {
 			}
 		}
 	}
+
+	.shouldshake {
+		animation: shake 0.6s 1 linear;
+	}
+	@keyframes shake {
+		0% { transform: translate(15px); }
+		20% { transform: translate(-15px); }
+		40% { transform: translate(7px); }
+		60% { transform: translate(-7px); }
+		80% { transform: translate(3px); }
+		100% { transform: translate(0px); }
+	}
+</style>
+
+<style>
+
 </style>