Show navigation on empty folder too

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Signed-off-by: npmbuildbot[bot] <npmbuildbot[bot]@users.noreply.github.com>

4 files changed, 44 insertions, 157 deletions

diff --git a/src/views/Albums.vue b/src/views/Albums.vue
index fa5ad09f..3465cbec 100644
--- a/src/views/Albums.vue
+++ b/src/views/Albums.vue
@@ -28,23 +28,28 @@
 	<EmptyContent v-else-if="error">
 		{{ t('photos', 'An error occurred') }}
 	</EmptyContent>
-	<EmptyContent v-else-if="!loading && isEmpty" illustration-name="empty">
-		{{ t('photos', 'No photos in here') }}
-	</EmptyContent>
 
 	<!-- Folder content -->
-	<Grid v-else>
+	<Grid v-else-if="!loading">
 		<Navigation v-if="folder"
 			key="navigation"
 			v-bind="folder"
 			:root-title="rootTitle"
 			:show-actions="true" />
 
-		<Folder v-for="dir in folderList"
-			:key="dir.fileid"
-			v-bind="dir"
-			:show-shared="showShared" />
-		<File v-for="file in fileList" :key="file.fileid" v-bind="file" />
+		<!-- Empty folder, should only happen via direct link -->
+		<EmptyContent v-if="isEmpty" key="emptycontent" illustration-name="empty">
+			{{ t('photos', 'No photos in here') }}
+		</EmptyContent>
+
+		<!-- Folders and files list -->
+		<template v-else>
+			<Folder v-for="dir in folderList"
+				:key="dir.fileid"
+				v-bind="dir"
+				:show-shared="showShared" />
+			<File v-for="file in fileList" :key="file.fileid" v-bind="file" />
+		</template>
 	</Grid>
 </template>
 
@@ -53,7 +58,7 @@ import { mapGetters } from 'vuex'
 
 import getAlbumContent from '../services/AlbumContent'
 
-import EmptyContent from './EmptyContent'
+import EmptyContent from '../components/EmptyContent'
 import Folder from '../components/Folder'
 import File from '../components/File'
 import Grid from '../components/Grid'
diff --git a/src/views/EmptyContent.vue b/src/views/EmptyContent.vue
deleted file mode 100644
index c96c4aa2..00000000
--- a/src/views/EmptyContent.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<!--
- - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @author John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @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 v-if="isReady" class="emptycontent">
-		<div v-if="haveIllustration" class="illustration" v-html="illustration" />
-		<div v-else class="icon-error" />
-		<h2><slot /></h2>
-		<p v-show="$slots.desc">
-			<slot name="desc" />
-		</p>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'EmptyContent',
-	props: {
-		illustrationName: {
-			type: String,
-			default: '',
-		},
-	},
-	data() {
-		return {
-			illustration: '',
-		}
-	},
-	computed: {
-		/**
-		 * Does this component have an illustration
-		 *
-		 * @returns {boolean}
-		 */
-		haveIllustration() {
-			return this.illustrationName !== ''
-		},
-
-		/**
-		 * Is the illustration loaded
-		 *
-		 * @returns {boolean}
-		 */
-		isLoaded() {
-			if (!this.haveIllustration) {
-				return true
-			}
-			return this.illustration !== ''
-		},
-
-		/**
-		 * The component is ready if the illustration
-		 * is done loading or if there is none
-		 *
-		 * @returns {boolean}
-		 */
-		isReady() {
-			return !this.haveIllustration || (this.haveIllustration && this.isLoaded)
-		},
-	},
-
-	/**
-	 * Fetch the new illustration as soon as it changes
-	 */
-	watch: {
-		illustrationName() {
-			this.getIllustration()
-		},
-	},
-	beforeMount() {
-		this.getIllustration()
-	},
-
-	methods: {
-		/**
-		 * Fetch the illustration as webpack chunk
-		 */
-		async getIllustration() {
-			this.illustration = ''
-			if (this.illustrationName !== '') {
-				try {
-					const illustration = await import(`../assets/Illustrations/${this.illustrationName}.svg`)
-					this.illustration = illustration.default
-				} catch (error) {
-					console.error('Could not get the error illustration', error)
-				}
-			}
-		},
-	},
-
-}
-</script>
-
-<style lang="scss">
-.illustration {
-	min-width: 200px;
-	max-width: 15%;
-	width: 300px;
-	margin: auto;
-	margin-bottom: 20px;
-	position: relative;
-
-	svg {
-		width: 100%;
-		height: 100%;
-		max-height: 40vh;
-	}
-
-	// change colour of illustration
-	[fill*='6c63ff'] {
-		fill: var(--color-primary-element);
-	}
-}
-</style>
diff --git a/src/views/Tags.vue b/src/views/Tags.vue
index 2b05c7aa..b61223a1 100644
--- a/src/views/Tags.vue
+++ b/src/views/Tags.vue
@@ -25,20 +25,16 @@
 	<EmptyContent v-if="error">
 		{{ t('photos', 'An error occurred') }}
 	</EmptyContent>
-	<EmptyContent v-else-if="!loading && isEmpty" illustration-name="empty">
-		{{ t('photos', 'No tags yet') }}
-		<template #desc>
-			{{ t('photos', 'Photos with tags will show up here') }}
-		</template>
-	</EmptyContent>
 
 	<!-- Folder content -->
-	<Grid v-else>
+	<Grid v-else-if="!loading">
 		<Navigation
 			key="navigation"
 			:basename="path"
 			:filename="'/' + path"
 			:root-title="rootTitle" />
+
+		<!-- Tags list -->
 		<template v-if="isRoot">
 			<Tag v-for="id in tagsNames"
 				:key="id"
@@ -46,7 +42,16 @@
 				:fileid="id"
 				:basename="tags[id].displayName" />
 		</template>
+
+		<!-- Content list -->
 		<template v-else>
+			<EmptyContent v-if="isEmpty" key="emptycontent" illustration-name="empty">
+				{{ t('photos', 'No tags yet') }}
+				<template #desc>
+					{{ t('photos', 'Photos with tags will show up here') }}
+				</template>
+			</EmptyContent>
+
 			<File v-for="file in fileList" :key="file.fileid" v-bind="file" />
 		</template>
 	</Grid>
@@ -58,7 +63,7 @@ import { mapGetters } from 'vuex'
 import getSystemTags from '../services/SystemTags'
 import getTaggedImages from '../services/TaggedImages'
 
-import EmptyContent from './EmptyContent'
+import EmptyContent from '../components/EmptyContent'
 import Tag from '../components/Tag'
 import File from '../components/File'
 import Grid from '../components/Grid'
@@ -126,7 +131,10 @@ export default {
 		},
 
 		isEmpty() {
-			return Object.keys(this.tagsNames).length === 0
+			if (this.isRoot) {
+				return Object.keys(this.tagsNames).length === 0
+			}
+			return this.fileList.length === 0
 		},
 	},
 
@@ -180,11 +188,18 @@ export default {
 			const { request, cancel } = cancelableRequest(getSystemTags)
 			this.cancelRequest = cancel
 
-			const tags = await request()
-			this.$store.dispatch('updateTags', tags)
+			try {
+				// fetch content
+				const tags = await request()
+				this.$store.dispatch('updateTags', tags)
+			} catch (error) {
+				console.error(error)
+				this.error = true
+			} finally {
+				// done loading
+				this.$emit('update:loading', false)
+			}
 
-			// done loading
-			this.$emit('update:loading', false)
 		},
 
 		async fetchContent() {
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 6a91ad1d..df47f1ea 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -43,7 +43,7 @@ import { mapGetters } from 'vuex'
 
 import getPhotos from '../services/PhotoSearch'
 
-import EmptyContent from './EmptyContent'
+import EmptyContent from '../components/EmptyContent'
 import File from '../components/File'
 import Grid from '../components/Grid'