Show navigation on empty folder too (#29)

Show navigation on empty folder too

src/components/EmptyContent.vue

@@ -111,6 +111,12 @@ export default {
 </script>
 
 <style lang="scss">
+.emptycontent {
+	// span all the available columns
+	grid-column: 1/-1;
+	margin-top: 20vh;
+}
+
 .illustration {
 	min-width: 200px;
 	max-width: 15%;

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'

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() {

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'