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

16 files changed, 148 insertions, 51 deletions

diff --git a/viewer/.env b/viewer/.env
index f256c63..d06d633 100644
--- a/viewer/.env
+++ b/viewer/.env
@@ -1,2 +1,4 @@
 VUE_APP_I18N_LOCALE=en
 VUE_APP_I18N_FALLBACK_LOCALE=en
+VUE_APP_DATA_URL=/gallery
+VUE_APP_EXAMPLE_PROJECT=example
diff --git a/viewer/src/assets/scss/buefy.scss b/viewer/src/assets/scss/buefy.scss
index 5249899..b018fd3 100644
--- a/viewer/src/assets/scss/buefy.scss
+++ b/viewer/src/assets/scss/buefy.scss
@@ -5,28 +5,20 @@
 @import "buefy_variables";
 
 // 2. Setup your Custom Colors
-$linkedin: #0077b5;
-$linkedin-invert: findColorInvert($linkedin);
-$twitter: #55acee;
-$twitter-invert: findColorInvert($twitter);
-$github: #333;
-$github-invert: findColorInvert($github);
+// $linkedin: #0077b5;
+// $linkedin-invert: findColorInvert($linkedin);
 
 @import "~bulma/sass/utilities/derived-variables";
 
 // 3. Add new color variables to the color map.
 $addColors: (
-  "twitter": (
-    $twitter,
-    $twitter-invert
+  "green": (
+    $green,
+    $green-invert
   ),
-  "linkedin": (
-    $linkedin,
-    $linkedin-invert
-  ),
-  "github": (
-    $github,
-    $github-invert
+  "purple": (
+    $purple,
+    $purple-invert
   )
 );
 $colors: map-merge($colors, $addColors);
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 0bfeab9..5d12976 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -12,3 +12,14 @@
 .nowrap {
   white-space: nowrap;
 }
+
+.flex {
+  display: flex;
+}
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+.flex-center {
+  align-items: center;
+}
diff --git a/viewer/src/components/LdModeRadio.vue b/viewer/src/components/LdModeRadio.vue
new file mode 100644
index 0000000..614bf33
--- /dev/null
+++ b/viewer/src/components/LdModeRadio.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="flex">
+    <b-radio-button v-model="$uiStore.mode" native-value="navigation" type="is-green">
+      <fa-icon icon="folder" />
+      <span>{{$t('mode.navigation')}}</span>
+    </b-radio-button>
+    <b-radio-button v-model="$uiStore.mode" native-value="search" type="is-purple">
+      <fa-icon icon="search" />
+      <span>{{$t('mode.search')}}</span>
+    </b-radio-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+export default class LdModeRadio extends Vue {}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json
index f24ac1f..d885872 100644
--- a/viewer/src/locales/en.json
+++ b/viewer/src/locales/en.json
@@ -1,5 +1,9 @@
 {
   "tagInput.placeholder": "Tags",
-  "panelLeft.title": "Filters",
-  "tagInput.nomatch": "No match"
+  "panelLeft.filters": "Filters",
+  "tagInput.nomatch": "No match",
+  "panelLeft.mode": "Mode",
+  "mode.navigation": "Navigation",
+  "mode.search": "Search",
+  "search.no-results": "No results"
 }
\ No newline at end of file
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts
index 9bf4dba..3af77b6 100644
--- a/viewer/src/plugins/fontawesome.ts
+++ b/viewer/src/plugins/fontawesome.ts
@@ -1,9 +1,9 @@
 import Vue from "vue";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faExpandArrowsAlt } from "@fortawesome/free-solid-svg-icons";
+import { faExpandArrowsAlt, faFolder, faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-library.add(faExpandArrowsAlt);
+library.add(faExpandArrowsAlt, faFolder, faSearch);
 
 Vue.component("fa-icon", FontAwesomeIcon);
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts
index c875837..ca36a32 100644
--- a/viewer/src/store/galleryStore.ts
+++ b/viewer/src/store/galleryStore.ts
@@ -22,6 +22,7 @@ export default class GalleryStore extends VuexModule {
 
     // ---
 
+    // Fetches the gallery's JSON metadata
     @action async fetchGalleryItems(url: string) {
         fetch(url)
             .then(response => response.json())
@@ -29,14 +30,18 @@ export default class GalleryStore extends VuexModule {
             .then(this.indexTags);
     }
 
+    // Indexes the gallery
     @action async indexTags() {
         let index = {};
         if (this.galleryItemsRoot)
             GalleryStore.pushTagsForItem(index, this.galleryItemsRoot);
-        console.log(index);
+        console.log("Index: ", index);
         this.setTags(index);
     }
 
+    // ---
+
+    // Pushes all tags for a root item (and its children) to the index
     private static pushTagsForItem(index: Tag.Index, item: Gallery.Item) {
         console.log("IndexingTagsFor: ", item.path);
         for (const tag of item.tags) {
@@ -44,7 +49,7 @@ export default class GalleryStore extends VuexModule {
             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 (!index[part].items.includes(item)) index[part].items.push(item);
                 if (lastPart) index[lastPart].children[part] = index[part];
                 lastPart = part;
             }
@@ -52,4 +57,16 @@ export default class GalleryStore extends VuexModule {
         if (item.properties.type === "directory")
             item.properties.items.forEach(item => this.pushTagsForItem(index, item));
     }
+
+    // Searches for an item by path from a root item (navigation)
+    static searchCurrentItem(item: Gallery.Item, path: string): Gallery.Item | null {
+        if (path === item.path) return item;
+        if (item.properties.type === "directory" && path.startsWith(item.path)) {
+            const itemFound = item.properties.items
+                .map(item => this.searchCurrentItem(item, path))
+                .find(item => Boolean(item));
+            return itemFound || null;
+        }
+        return null;
+    }
 }
\ No newline at end of file
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts
index e04b507..4a6f487 100644
--- a/viewer/src/store/uiStore.ts
+++ b/viewer/src/store/uiStore.ts
@@ -8,11 +8,30 @@ const VuexModule = createModule({
 export default class UIStore extends VuexModule {
 
     fullscreen: boolean = false;
+    mode: "navigation" | "search" = "navigation";
     currentTags: Tag.Node[] = [];
 
     // ---
 
+    get isModeSearch() {
+        return this.mode === "search";
+    }
+
+    get isModeNavigation() {
+        return this.mode === "navigation";
+    }
+
+    // ---