viewer: major code and search mode overhaul

Updated libraries to the lastest version
SCSS Formatter as suggested VSC extensions
Renamed toolbar-color by scrollbar-color
LD components use Props in favor of touching the stores directly (when possible)
Moved most common algorithms to a "services" folder
Complete search overhaul (lots of code change)

1 files changed, 26 insertions, 10 deletions

diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 97c5c66..eacbcdd 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -18,25 +18,41 @@
 -->
 
 <template>
-  <div class="thumbnail-tiles">
-    <div v-for="(item) in items" :key="item.path">
-      <router-link :to="item.path" @click.native="$uiStore.setModeNavigation()">
-        <ld-thumbnail :item="item" />
-      </router-link>
-    </div>
-    <div v-if="items.length===0">{{$t('search.no-results')}}</div>
-  </div>
+  <ld-gallery :items="items()" :noresult="$t('search.no-results')" />
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+import { Operation } from "@/@types/Operation";
+import IndexSearch from "@/services/indexsearch";
+import IndexFactory from "../services/indexfactory";
 
 @Component
 export default class GalleryPicture extends Vue {
-  @Prop({ required: true }) readonly items!: Gallery.Item[];
+  @Prop(String) readonly path!: string;
+  @Prop(Array) readonly query!: string[];
+
+  currentSearch: Tag.Search[] = [];
 
   mounted() {
     this.$uiStore.fullscreen = false;
+    this.$uiStore.searchMode = true;
+    this.restoreSearchFilters();
+  }
+
+  destroyed() {
+    this.$uiStore.searchMode = false;
+  }
+
+  items() {
+    return IndexSearch.search(this.currentSearch, this.path);
+  }
+
+  @Watch("query")
+  restoreSearchFilters() {
+    const tagsIndex = this.$galleryStore.tagsIndex;
+    this.currentSearch = this.query.flatMap(filter => IndexFactory.searchTags(tagsIndex, filter));
+    this.$uiStore.searchFilters = [...this.currentSearch];
   }
 }
 </script>