viewer/GalleryNavigation: revert to static template component dispatching

We'll see for dynamic component loading later.

2 files changed, 10 insertions, 22 deletions

diff --git a/viewer/src/services/navigation.ts b/viewer/src/services/navigation.ts
index fa17990..aa7ef5e 100644
--- a/viewer/src/services/navigation.ts
+++ b/viewer/src/services/navigation.ts
@@ -40,8 +40,8 @@ export default class Navigation {
   }
 
   // Checks if the type of an item matches
-  public static checkType(item: Gallery.Item | null, type: Gallery.ItemType): boolean {
-    return item?.properties.type === type ?? false;
+  public static checkType(item: Gallery.Item | null, type: Gallery.ItemType | null): boolean {
+    return item?.properties.type === type;
   }
 
   public static getLastDirectory(itemPath: Gallery.Item[]): Gallery.Directory {
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index 2e40409..f36fc8a 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -20,12 +20,17 @@
 <template>
   <!-- TODO: eliminate intermediate div -->
   <div>
-    <component :is="dispatch().component" v-bind="dispatch().properties" />
+    <ld-error v-if="checkType(null)" icon="folder-open" :message="$t('gallery.unknown-resource')" />
+    <gallery-search v-else-if="checkType('directory') && query.length > 0" :path="path" />
+    <gallery-directory v-else-if="checkType('directory')" :directory="$galleryStore.currentItem" />
+    <ld-picture v-else-if="checkType('picture')" :picture="$galleryStore.currentItem" />
+    <ld-download v-else :item="$galleryStore.currentItem" />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+import Navigation from "@/services/navigation";
 import GalleryDirectory from "./GalleryDirectory.vue";
 import GallerySearch from "@/views/GallerySearch.vue";
 
@@ -48,25 +53,8 @@ export default class GalleryNavigation extends Vue {
     this.$galleryStore.setCurrentPath(this.path);
   }
 
-  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-download", properties: { item: this.$galleryStore.currentItem } };
-    }
+  checkType(type: Gallery.ItemType | null): boolean {
+    return Navigation.checkType(this.$galleryStore.currentItem, type);
   }
 }
 </script>