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, 31 insertions, 3 deletions

diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index a61fe4a..fd117a6 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -19,17 +19,45 @@
 
 <template>
   <div class="flex-column sidebar">
-    <ld-tag-input />
+    <ld-tag-input v-model="$uiStore.searchFilters" :tags-index="$galleryStore.tagsIndex" />
+    <ld-command-search @clear="clear" @search="search" />
     <h1 class="title">{{$t('panelLeft.propositions')}}</h1>
-    <ld-proposition class="scrollbar no-scroll-x" />
+    <ld-proposition
+      v-model="$uiStore.searchFilters"
+      :tags-index="$galleryStore.tagsIndex"
+      :current-tags="currentTags()"
+      class="scrollbar no-scroll-x"
+    />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import { Dictionary } from "vue-router/types/router";
 
 @Component
-export default class PanelLeft extends Vue {}
+export default class PanelLeft extends Vue {
+  clear() {
+    this.$uiStore.searchFilters = [];
+    this.search();
+  }
+
+  search() {
+    this.$router.push({ query: this.serializeSearch() }).catch(err => {
+      if (err.name !== "NavigationDuplicated") throw err;
+    });
+  }
+
+  serializeSearch() {
+    let query: Dictionary<null> = {};
+    this.$uiStore.searchFilters.forEach(filter => (query[filter.display] = null));
+    return query;
+  }
+
+  currentTags() {
+    return this.$galleryStore.currentItem?.tags ?? [];
+  }
+}
 </script>
 
 <style lang="scss">