viewer/GalleryNavigation: better error messages

Introducing a generic error page with some icon and a different error for unknown resources

GitHub: closes #190

5 files changed, 95 insertions, 14 deletions

diff --git a/viewer/src/components/LdError.vue b/viewer/src/components/LdError.vue
new file mode 100644
index 0000000..5e266ab
--- /dev/null
+++ b/viewer/src/components/LdError.vue
@@ -0,0 +1,64 @@
+<!--
+-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2020  Pacien TRAN-GIRARD
+--
+-- 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 <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div :class="$style.container">
+    <div :class="$style.content">
+      <fa-icon :class="$style.icon" :icon="icon" size="6x" />
+      <div :class="$style.message" v-html="message"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component export default class LdError extends Vue {
+  @Prop({ required: true }) readonly icon!: string;
+  @Prop({ required: true }) readonly message!: string;
+}
+</script>
+
+<style lang="scss" module>
+@import "~@/assets/scss/theme.scss";
+
+.container {
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  text-align: center;
+
+  & > *:not(last-child) {
+    margin-bottom: 0.15em;
+  }
+}
+
+.icon {
+  color: $disabled-color;
+}
+
+.message {
+  color: $text-light;
+}
+</style>
diff --git a/viewer/src/components/LdGallery.vue b/viewer/src/components/LdGallery.vue
index 29c18b9..e512758 100644
--- a/viewer/src/components/LdGallery.vue
+++ b/viewer/src/components/LdGallery.vue
@@ -18,11 +18,11 @@
 -->
 
 <template>
-  <div class="thumbnail-tiles">
+  <ld-error v-if="hasNoResults()" icon="search" :message="noresult" />
+  <div v-else class="thumbnail-tiles">
     <router-link v-for="item in items" :key="item.path" :to="item.path">
       <ld-thumbnail :item="item" />
     </router-link>
-    <div v-if="hasNoResults()" class="noresult">{{noresult}}</div>
   </div>
 </template>
 
@@ -47,11 +47,9 @@ export default class LdPicture extends Vue {
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-evenly;
+
   & > a {
     margin: 2px;
   }
-  & .noresult {
-    margin-top: 40px;
-  }
 }
 </style>
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json
index e6c1df2..c011552 100644
--- a/viewer/src/locales/en.json
+++ b/viewer/src/locales/en.json
@@ -7,7 +7,8 @@
   "tag-propositions.addition": "Include all items with this tag",
   "tag-propositions.intersection": "Search for this tag",
   "tag-propositions.item-count": "Item count",
-  "gallery.unknowntype": "Unknown item type",
+  "gallery.unknown-type": "Could not display item of unknown type",
+  "gallery.unknown-resource": "Resource not found",
   "command.search": "Open/close search panel",
   "command.search.clear": "Clear",
   "command.search.search": "Search",
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts
index 480e8e0..933bce6 100644
--- a/viewer/src/plugins/fontawesome.ts
+++ b/viewer/src/plugins/fontawesome.ts
@@ -23,6 +23,7 @@ import { library, config } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import {
   faFolder,
+  faFolderOpen,
   faEraser,
   faSearch,
   faPlus,
@@ -38,6 +39,7 @@ import {
 
 library.add(
   faFolder,
+  faFolderOpen,
   faEraser,
   faSearch,
   faPlus,
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index 7c6d11b..08c8218 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -18,18 +18,14 @@
 -->
 
 <template>
+  <!-- TODO: eliminate intermediate div -->
   <div>
-    <gallery-search v-if="query.length" :path="path" />
-    <gallery-directory v-else-if="checkType('directory')" :directory="$galleryStore.currentItem" />
-    <ld-picture v-else-if="checkType('picture')" :picture="$galleryStore.currentItem" />
-    <div v-else>{{$t("gallery.unknowntype")}}</div>
+    <component :is="dispatch().component" v-bind="dispatch().properties" />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop, Watch } from "vue-property-decorator";
-import { Operation } from "@/@types/Operation";
-import Navigation from "@/services/navigation";
 import GalleryDirectory from "./GalleryDirectory.vue";
 import GallerySearch from "@/views/GallerySearch.vue";
 
@@ -52,8 +48,28 @@ export default class GalleryNavigation extends Vue {
     this.$galleryStore.setCurrentPath(this.path);
   }
 
-  private checkType(type: Gallery.ItemType): boolean {
-    return Navigation.checkType(this.$galleryStore.currentItem, type);
+  dispatch(): { component: string, properties: {} } {
+    switch (this.$galleryStore.currentItem?.properties.type ?? null) {
+      case null:
+        return {
+          component: "ld-error",
+          properties: { icon: "folder-open", message: this.$t("gallery.unknown-resource") }
+        };
+
+      case "directory":
+        return this.query.length > 0
+          ? { component: "gallery-search", properties: { path: this.path } }
+          : { component: "gallery-directory", properties: { directory: this.$galleryStore.currentItem } };
+
+      case "picture":
+        return { component: "ld-picture", properties: { picture: this.$galleryStore.currentItem } };
+
+      default:
+        return {
+          component: "ld-error",
+          properties: { icon: "file", message: this.$t("gallery.unknown-type") }
+        };
+    }
   }
 }
 </script>