vewer: Tags indexing and search input

8 files changed, 120 insertions, 11 deletions

diff --git a/viewer/src/@types/tag/index.d.ts b/viewer/src/@types/tag/index.d.ts
new file mode 100644
index 0000000..6a027d4
--- /dev/null
+++ b/viewer/src/@types/tag/index.d.ts
@@ -0,0 +1,8 @@
+declare namespace Tag {
+    interface Node {
+        tag: string;
+        items: Gallery.Item[];
+        children: Index;
+    }
+    type Index = { [index: string]: Node };
+}
\ No newline at end of file
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
new file mode 100644
index 0000000..4edc1ce
--- /dev/null
+++ b/viewer/src/components/LdTagInput.vue
@@ -0,0 +1,40 @@
+<template>
+  <b-taginput
+    v-model="$uiStore.currentTags"
+    :placeholder="$t('tagInput.placeholder')"
+    autocomplete
+    :data="filteredTags"
+    field="tag"
+    type="is-black"
+    size="is-large"
+    class="panelTagInput"
+    @typing="getFilteredTags"
+  >
+    <template slot-scope="props">{{props.option.tag}} ({{props.option.items.length}})</template>
+    <template slot="empty">{{$t('tagInput.nomatch')}}</template>
+  </b-taginput>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+export default class LdTagInput extends Vue {
+  filteredTags: Tag.Node[] = [];
+
+  getFilteredTags(filter: string) {
+    const tags = this.$galleryStore.tags;
+    if (tags && filter)
+      this.filteredTags = Object.values(tags)
+        .filter(node => node.tag.includes(filter))
+        .sort((a, b) => b.items.length - a.items.length);
+    else this.filteredTags = [];
+  }
+}
+</script>
+
+<style lang="scss">
+.panelTagInput .autocomplete .dropdown-content {
+  max-height: 300px;
+}
+</style>
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json
index d966983..f24ac1f 100644
--- a/viewer/src/locales/en.json
+++ b/viewer/src/locales/en.json
@@ -1,3 +1,5 @@
 {
-  "message": "hello i18n !!"
+  "tagInput.placeholder": "Tags",
+  "panelLeft.title": "Filters",
+  "tagInput.nomatch": "No match"
 }
\ No newline at end of file
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts
index 4751561..c875837 100644
--- a/viewer/src/store/galleryStore.ts
+++ b/viewer/src/store/galleryStore.ts
@@ -7,16 +7,49 @@ const VuexModule = createModule({
 
 export default class GalleryStore extends VuexModule {
 
-    galleryItems: Gallery.Item | null = null;
+    galleryItemsRoot: Gallery.Item | null = null;
+    tags: Tag.Index = {};
 
-    @mutation setGalleryItems(galleryItems: Gallery.Item) {
-        this.galleryItems = galleryItems;
+    // ---
+
+    @mutation setGalleryItemsRoot(galleryItemsRoot: Gallery.Item) {
+        this.galleryItemsRoot = galleryItemsRoot;
+    }
+
+    @mutation private setTags(tags: Tag.Index) {
+        this.tags = tags;
     }
 
+    // ---
+
     @action async fetchGalleryItems(url: string) {
         fetch(url)
             .then(response => response.json())
-            .then(this.setGalleryItems);
+            .then(this.setGalleryItemsRoot)
+            .then(this.indexTags);
     }
 
+    @action async indexTags() {
+        let index = {};
+        if (this.galleryItemsRoot)
+            GalleryStore.pushTagsForItem(index, this.galleryItemsRoot);
+        console.log(index);
+        this.setTags(index);
+    }
+
+    private static pushTagsForItem(index: Tag.Index, item: Gallery.Item) {
+        console.log("IndexingTagsFor: ", item.path);
+        for (const tag of item.tags) {
+            const parts = tag.split('.');
+            let lastPart: string | null = null;
+            for (const part of parts) {
+                if (!index[part]) index[part] = { tag: part, items: [], children: {} };
+                index[part].items.push(item);
+                if (lastPart) index[lastPart].children[part] = index[part];
+                lastPart = part;
+            }
+        }
+        if (item.properties.type === "directory")
+            item.properties.items.forEach(item => this.pushTagsForItem(index, item));
+    }
 }
\ No newline at end of file
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts
index c4143a1..e04b507 100644
--- a/viewer/src/store/uiStore.ts
+++ b/viewer/src/store/uiStore.ts
@@ -2,12 +2,15 @@ import { createModule, mutation, action } from "vuex-class-component";
 
 const VuexModule = createModule({
     namespaced: "uiStore",
-    strict: true
+    strict: false
 })
 
 export default class UIStore extends VuexModule {
 
     fullscreen: boolean = false;
+    currentTags: Tag.Node[] = [];
+
+    // ---
 
     @mutation toggleFullscreen() {
         this.fullscreen = !this.fullscreen;
diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 954903a..2020280 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -13,7 +13,7 @@ import GalleryImage from "./GalleryImage.vue";
 @Component({
   components: { GalleryDirectory, GalleryImage },
 })
-export default class Root extends Vue {
+export default class Gallery extends Vue {
   @Prop(String) readonly pathMatch!: string;
 
   get isDirectory(): boolean {
@@ -25,8 +25,8 @@ export default class Root extends Vue {
   }
 
   get currentItem(): Gallery.Item | null {
-    const galleryItems = this.$galleryStore.galleryItems;
-    if (galleryItems) return this.searchCurrentItem(galleryItems, this.pathMatch);
+    const galleryItemsRoot = this.$galleryStore.galleryItemsRoot;
+    if (galleryItemsRoot) return this.searchCurrentItem(galleryItemsRoot, this.pathMatch);
     return null;
   }
 
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 9f3a17b..2afd4b9 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="{fullscreen: $uiStore.fullscreen}">
     <div class="layout layout-top">header</div>
-    <div class="layout layout-left">panel</div>
+    <panel-left class="layout layout-left" />
     <router-view class="layout layout-content" />
     <ld-button-fullscreen />
     <b-loading :active="isLoading" is-full-page />
@@ -10,8 +10,11 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import PanelLeft from "./PanelLeft.vue";
 
-@Component
+@Component({
+  components: { PanelLeft },
+})
 export default class MainLayout extends Vue {
   isLoading: boolean = false;
 
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
new file mode 100644
index 0000000..4b5bce0
--- /dev/null
+++ b/viewer/src/views/PanelLeft.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <b-field :label="$t('panelLeft.title')">
+      <ld-tag-input />
+    </b-field>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class PanelLeft extends Vue {}
+</script>
+
+<style lang="scss">
+.label {
+  color: white;
+}
+</style>