viewer: Implemented the search by tags. Pushed the special urls to ENV.

7 files changed, 57 insertions, 27 deletions

diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 2020280..38199b9 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,17 +1,20 @@
 <template>
   <div>
-    <gallery-directory v-if="isDirectory" :directory="currentItem" />
-    <gallery-image v-if="isImage" :image="currentItem" />
+    <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" />
+    <gallery-directory v-else-if="isDirectory" :directory="currentItem" />
+    <gallery-image v-else-if="isImage" :image="currentItem" />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import GallerySearch from "./GallerySearch.vue";
 import GalleryDirectory from "./GalleryDirectory.vue";
 import GalleryImage from "./GalleryImage.vue";
+import GalleryStore from "../store/galleryStore";
 
 @Component({
-  components: { GalleryDirectory, GalleryImage },
+  components: { GallerySearch, GalleryDirectory, GalleryImage },
 })
 export default class Gallery extends Vue {
   @Prop(String) readonly pathMatch!: string;
@@ -24,25 +27,23 @@ export default class Gallery extends Vue {
     return this.checkType("image");
   }
 
+  // Results of the search (by tags)
+  get currentSearch(): Gallery.Item[] {
+    const currentTags = this.$uiStore.currentTags;
+    let items = new Set<Gallery.Item>();
+    currentTags.flatMap(tag => tag.items).forEach(item => items.add(item));
+    return [...items];
+  }
+
+  // Item pointed by the URL (navigation)
   get currentItem(): Gallery.Item | null {
     const galleryItemsRoot = this.$galleryStore.galleryItemsRoot;
-    if (galleryItemsRoot) return this.searchCurrentItem(galleryItemsRoot, this.pathMatch);
+    if (galleryItemsRoot) return GalleryStore.searchCurrentItem(galleryItemsRoot, this.pathMatch);
     return null;
   }
 
   // ---
 
-  private searchCurrentItem(item: Gallery.Item, currentPath: string): Gallery.Item | null {
-    if (currentPath === item.path) return item;
-    if (item.properties.type === "directory" && currentPath.startsWith(item.path)) {
-      const itemFound = item.properties.items
-        .map(item => this.searchCurrentItem(item, currentPath))
-        .find(item => Boolean(item));
-      return itemFound || null;
-    }
-    return null;
-  }
-
   private checkType(type: string): boolean {
     return (this.currentItem && this.currentItem.properties.type === type) || false;
   }
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
index 1dda027..d464a07 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <strong>Directory: {{directory.path}}</strong>
-    <div class="flex-thumbnails">
+    <div class="flex">
       <div v-for="(item) in directory.properties.items" :key="item.path">
         <router-link :to="item.path">
           <gallery-thumbnail :item="item" />
@@ -24,7 +24,4 @@ export default class GalleryDirectory extends Vue {
 </script>
 
 <style lang="scss">
-.flex-thumbnails {
-  display: flex;
-}
 </style>
diff --git a/viewer/src/views/GalleryImage.vue b/viewer/src/views/GalleryImage.vue
index 07f8cc8..04d29d9 100644
--- a/viewer/src/views/GalleryImage.vue
+++ b/viewer/src/views/GalleryImage.vue
@@ -13,7 +13,7 @@ export default class GalleryImage extends Vue {
   @Prop({ required: true }) readonly image!: Gallery.Image;
 
   get imageSrc() {
-    return `/gallery${this.image.path}`;
+    return `${process.env.VUE_APP_DATA_URL}${this.image.path}`;
   }
 }
 </script>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
new file mode 100644
index 0000000..887c1a3
--- /dev/null
+++ b/viewer/src/views/GallerySearch.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="flex">
+    <div v-for="(item) in items" :key="item.path">
+      <router-link :to="item.path" @click.native="$uiStore.setModeNavigation()">
+        <gallery-thumbnail :item="item" />
+      </router-link>
+    </div>
+    <div v-if="items.length===0">{{$t('search.no-results')}}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import GalleryThumbnail from "./GalleryThumbnail.vue";
+
+@Component({
+  components: { GalleryThumbnail },
+})
+export default class GalleryImage extends Vue {
+  @Prop({ required: true }) readonly items!: Gallery.Item[];
+}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
index 8e3e826..fdfd9d3 100644
--- a/viewer/src/views/GalleryThumbnail.vue
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -1,5 +1,11 @@
 <template>
-  <img class="thumbnail" :src="imageSrc" :title="item.path" />
+  <div>
+    <img v-if="item.thumbnail" class="thumbnail" :src="imageSrc" :title="item.path" />
+    <div v-else class="flex-column flex-center">
+      <fa-icon icon="folder" class="fa-4x" />
+      {{item.path}}
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -10,7 +16,7 @@ export default class GalleryThumbnail extends Vue {
   @Prop({ required: true }) readonly item!: Gallery.Item;
 
   get imageSrc() {
-    return `/gallery${this.item.thumbnail.path}`;
+    return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
   }
 }
 </script>
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 2afd4b9..2a87ff1 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -25,7 +25,7 @@ export default class MainLayout extends Vue {
   fetchGalleryItems() {
     this.isLoading = true;
     this.$galleryStore
-      .fetchGalleryItems("/gallery/index.json")
+      .fetchGalleryItems(`${process.env.VUE_APP_DATA_URL}/index.json`)
       .finally(() => (this.isLoading = false))
       .catch(this.displayError);
   }
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 4b5bce0..c187ce6 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -1,8 +1,9 @@
 <template>
-  <div>
-    <b-field :label="$t('panelLeft.title')">
-      <ld-tag-input />
-    </b-field>
+  <div class="flex-column">
+    <h1>{{$t('panelLeft.mode')}}</h1>
+    <ld-mode-radio />
+    <h1>{{$t('panelLeft.filters')}}</h1>
+    <ld-tag-input />
   </div>
 </template>