From 370e3db3455f548699ff5e046e0f8dcc304991ac Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 14 Feb 2020 09:19:53 +0100
Subject: 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)
---
 viewer/src/components/LdBreadcrumb.vue    | 17 ++++---
 viewer/src/components/LdCommand.vue       | 16 +++----
 viewer/src/components/LdCommandSearch.vue | 55 +++++++++++++++++++++++
 viewer/src/components/LdGallery.vue       | 47 +++++++++++++++++++
 viewer/src/components/LdModeRadio.vue     | 41 -----------------
 viewer/src/components/LdPicture.vue       |  2 +-
 viewer/src/components/LdProposition.vue   | 35 ++++++++-------
 viewer/src/components/LdTagInput.vue      | 75 ++++---------------------------
 viewer/src/components/LdThumbnail.vue     |  4 +-
 9 files changed, 149 insertions(+), 143 deletions(-)
 create mode 100644 viewer/src/components/LdCommandSearch.vue
 create mode 100644 viewer/src/components/LdGallery.vue
 delete mode 100644 viewer/src/components/LdModeRadio.vue

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 7f7ef7d..643bfb6 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -29,24 +29,29 @@
   >
     <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div>
     <ul class="ld-breadcrumb">
-      <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
+      <li v-for="(item,idx) in currentItemPath" :key="item.path">
         <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" />
         <router-link :to="item.path" class="link">
           <fa-icon :icon="getIcon(item)" size="lg" />
           {{item.title}}
         </router-link>
       </li>
+      <li v-if="searchMode">
+        <fa-icon icon="search" size="lg" class="disabled" />
+      </li>
     </ul>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Ref, Watch } from "vue-property-decorator";
-import DragScrollClickFix from "@/dragscrollclickfix";
-import Tools from "@/tools";
+import { Component, Vue, Ref, Watch, Prop } from "vue-property-decorator";
+import DragScrollClickFix from "@/services/dragscrollclickfix";
+import Navigation from "@/services/navigation";
 
 @Component
 export default class LdBreadcrumb extends Vue {
+  @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[];
+  @Prop(Boolean) readonly searchMode!: boolean;
   @Ref() readonly breadcrumb!: HTMLUListElement;
 
   readonly dragScrollClickFix = new DragScrollClickFix();
@@ -66,7 +71,7 @@ export default class LdBreadcrumb extends Vue {
     this.overflowMask = this.breadcrumb.scrollLeft > 1;
   }
 
-  @Watch("$galleryStore.currentItemPath")
+  @Watch("currentItemPath")
   changedCurrentItemPath() {
     this.$nextTick(() => {
       this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth;
@@ -75,7 +80,7 @@ export default class LdBreadcrumb extends Vue {
   }
 
   getIcon(item: Gallery.Item) {
-    return Tools.getIcon(item);
+    return Navigation.getIcon(item);
   }
 }
 </script>
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 7590ea7..468c241 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -23,14 +23,6 @@
     <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
       <fa-icon :icon="commandToggleSearchPanelIcon()" size="lg" />
     </a>
-    <router-link
-      to="/"
-      class="command-secondary"
-      :class="{'disabled': isRoot()}"
-      :title="$t('command.home')"
-    >
-      <fa-icon icon="home" size="lg" />
-    </router-link>
     <a class="link command-secondary" :title="$t('command.back')" @click="$router.go(-1)">
       <fa-icon icon="arrow-left" size="lg" />
     </a>
@@ -42,21 +34,23 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Prop } from "vue-property-decorator";
 import { RawLocation } from "vue-router";
 
 @Component
 export default class LdCommand extends Vue {
+  @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[];
+
   commandToggleSearchPanelIcon(): string {
     return this.$uiStore.fullWidth ? "search" : "angle-double-left";
   }
 
   isRoot(): boolean {
-    return this.$galleryStore.currentItemPath.length <= 1;
+    return this.currentItemPath.length <= 1;
   }
 
   parent(): RawLocation {
-    if (!this.isRoot()) return this.$galleryStore.currentItemPath[this.$galleryStore.currentItemPath.length - 2];
+    if (!this.isRoot()) return this.currentItemPath[this.currentItemPath.length - 2];
     return "";
   }
 }
diff --git a/viewer/src/components/LdCommandSearch.vue b/viewer/src/components/LdCommandSearch.vue
new file mode 100644
index 0000000..bd18060
--- /dev/null
+++ b/viewer/src/components/LdCommandSearch.vue
@@ -0,0 +1,55 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div class="flex">
+    <b-button @click="clear">
+      <fa-icon icon="eraser" />
+      <span>{{$t('command.search.clear')}}</span>
+    </b-button>
+    <b-button expanded :loading="loading" @click="search">
+      <fa-icon icon="search" />
+      <span>{{$t('command.search.search')}}</span>
+    </b-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Emit } from "vue-property-decorator";
+
+@Component
+export default class LdCommandSearch extends Vue {
+  loading: boolean = false;
+
+  @Emit()
+  clear(e: HTMLButtonElement) {
+    return e;
+  }
+
+  @Emit()
+  search(e: HTMLButtonElement) {
+    this.loading = true;
+    this.$nextTick(() => (this.loading = false));
+    return e;
+  }
+}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/viewer/src/components/LdGallery.vue b/viewer/src/components/LdGallery.vue
new file mode 100644
index 0000000..169bc54
--- /dev/null
+++ b/viewer/src/components/LdGallery.vue
@@ -0,0 +1,47 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div class="thumbnail-tiles">
+    <div v-for="item in items" :key="item.path">
+      <router-link :to="item.path">
+        <ld-thumbnail :item="item" />
+      </router-link>
+    </div>
+    <div v-if="hasNoResults()">{{noresult}}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Model } from "vue-property-decorator";
+import DragScrollClickFix from "@/services/dragscrollclickfix";
+
+@Component
+export default class LdPicture extends Vue {
+  @Prop({ type: Array, required: true }) readonly items!: Gallery.Item[];
+  @Prop(String) readonly noresult?: string;
+
+  hasNoResults(): boolean {
+    return Boolean(this.noresult) && this.items.length === 0;
+  }
+}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/viewer/src/components/LdModeRadio.vue b/viewer/src/components/LdModeRadio.vue
deleted file mode 100644
index c1d5702..0000000
--- a/viewer/src/components/LdModeRadio.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<!-- ldgallery - A static generator which turns a collection of tagged
---             pictures into a searchable web gallery.
---
--- Copyright (C) 2019-2020  Guillaume FOUET
---
--- This program is free software: you can redistribute it and/or modify
--- it under the terms of the GNU Affero General Public License as
--- published by the Free Software Foundation, either version 3 of the
--- License, or (at your option) any later version.
---
--- This program is distributed in the hope that it will be useful,
--- but WITHOUT ANY WARRANTY; without even the implied warranty of
--- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
--- GNU Affero General Public License for more details.
---
--- You should have received a copy of the GNU Affero General Public License
--- along with this program.  If not, see <https://www.gnu.org/licenses/>.
--->
-
-<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/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index a5faeb3..1cfcc8b 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -39,7 +39,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import DragScrollClickFix from "@/dragscrollclickfix";
+import DragScrollClickFix from "@/services/dragscrollclickfix";
 
 @Component
 export default class LdPicture extends Vue {
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 395611f..7f6521f 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -25,13 +25,17 @@
         class="operation-btns link"
         :title="$t('tag-propositions.substraction')"
         @click="add(Operation.SUBSTRACTION, proposed.rawTag)"
-      ><fa-icon icon="minus" alt="[-]" /></a>
+      >
+        <fa-icon icon="minus" alt="[-]" />
+      </a>
 
       <a
         class="operation-btns link"
         :title="$t('tag-propositions.addition')"
         @click="add(Operation.ADDITION, proposed.rawTag)"
-      ><fa-icon icon="plus" alt="[+]" /></a>
+      >
+        <fa-icon icon="plus" alt="[+]" />
+      </a>
 
       <a
         class="operation-tag link"
@@ -39,39 +43,39 @@
         @click="add(Operation.INTERSECTION, proposed.rawTag)"
       >{{proposed.rawTag}}</a>
 
-      <div
-        class="disabled"
-        :title="$t('tag-propositions.item-count')"
-      >{{proposed.count}}</div>
+      <div class="disabled" :title="$t('tag-propositions.item-count')">{{proposed.count}}</div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Model, Prop } from "vue-property-decorator";
 import { Operation } from "@/@types/Operation";
 
 @Component
 export default class LdProposition extends Vue {
+  @Prop({ type: Array, required: true }) readonly currentTags!: string[];
+  @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
+  @Model() model!: Tag.Search[];
+
   get Operation() {
     return Operation;
   }
 
   get proposedTags() {
-    const currentTags = this.$uiStore.currentTags;
     let propositions: { [index: string]: number } = {};
-    if (currentTags.length > 0) {
+    if (this.model.length > 0) {
       // Tags count from current search
-      this.extractDistinctItems(currentTags)
+      this.extractDistinctItems(this.model)
         .flatMap(item => item.tags)
         .map(this.rightmost)
-        .filter(rawTag => !currentTags.find(currentTag => currentTag.tag === rawTag))
+        .filter(rawTag => !this.model.find(search => search.tag === rawTag))
         .forEach(rawTag => (propositions[rawTag] = (propositions[rawTag] ?? 0) + 1));
     } else {
       // Tags count from the current directory
-      this.$galleryStore.currentItem?.tags
+      this.currentTags
         .flatMap(tag => tag.split("."))
-        .map(tag => this.$galleryStore.tags[tag]) // FIXME: Folders with the same name are merged in the index
+        .map(tag => this.tagsIndex[tag])
         .forEach(tagindex => (propositions[tagindex.tag] = tagindex.items.length));
     }
 
@@ -90,10 +94,9 @@ export default class LdProposition extends Vue {
   }
 
   add(operation: Operation, rawTag: Gallery.RawTag) {
-    const node = this.$galleryStore.tags[rawTag];
+    const node = this.tagsIndex[rawTag];
     const search: Tag.Search = { ...node, operation, display: `${operation}${node.tag}` };
-    this.$uiStore.currentTags.push(search);
-    setTimeout(() => this.$uiStore.setModeSearch()); // Give time for the UI to display the Tag change
+    this.model.push(search);
   }
 }
 </script>
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index eff02e6..982abe4 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -19,7 +19,7 @@
 
 <template>
   <b-taginput
-    v-model="$uiStore.currentTags"
+    v-model="model"
     :placeholder="$t('tagInput.placeholder')"
     autocomplete
     ellipsis
@@ -30,8 +30,6 @@
     size="is-medium"
     class="paneltag-input"
     @typing="searchTags"
-    @add="onAdd"
-    @remove="onRemove"
   >
     <template slot-scope="props">{{displayOption(props.option)}}</template>
     <template slot="empty">{{$t('tagInput.nomatch')}}</template>
@@ -39,80 +37,25 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Model, Prop } from "vue-property-decorator";
 import { Operation } from "@/@types/Operation";
-import Tools from "@/tools";
+import Navigation from "@/services/navigation";
+import IndexFactory from "../services/indexfactory";
 
 @Component
 export default class LdTagInput extends Vue {
-  filteredTags: Tag.Search[] = [];
-
-  onAdd(e: any) {
-    this.$uiStore.mode = "search";
-  }
+  @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
+  @Model() model!: Tag.Search[];
 
-  onRemove() {
-    if (this.$uiStore.currentTags.length === 0) this.$uiStore.mode = "navigation";
-  }
+  filteredTags: Tag.Search[] = [];
 
   displayOption(option: Tag.Search): string {
     return `${option.display} (${option.items.length})`;
   }
 
-  extractOperation(filter: string): Operation {
-    const first = filter.slice(0, 1);
-    switch (first) {
-      case Operation.ADDITION:
-      case Operation.SUBSTRACTION:
-        return first;
-      default:
-        return Operation.INTERSECTION;
-    }
-  }
-
   searchTags(filter: string) {
-    const tags = this.$galleryStore.tags;
-    let search: Tag.Search[] = [];
-    if (tags && filter) {
-      const operation = this.extractOperation(filter);
-      if (operation !== Operation.INTERSECTION) filter = filter.slice(1);
-      if (filter.includes(":")) {
-        const filterParts = filter.split(":");
-        search = this.searchTagsFromFilterWithCategory(tags, operation, filterParts[0], filterParts[1]);
-      } else {
-        search = this.searchTagsFromFilter(tags, operation, filter);
-      }
-    }
-    this.filteredTags = this.cleanupAndSort(search);
-  }
-
-  searchTagsFromFilterWithCategory(
-    tags: Tag.Index,
-    operation: Operation,
-    category: string,
-    disambiguation: string
-  ): Tag.Search[] {
-    disambiguation = Tools.normalize(disambiguation);
-    return Object.values(tags)
-      .filter(node => node.tag.includes(category))
-      .flatMap(node =>
-        Object.values(node.children)
-          .filter(child => child.tagfiltered.includes(disambiguation))
-          .map(child => ({ ...child, parent: node, operation, display: `${operation}${node.tag}:${child.tag}` }))
-      );
-  }
-
-  searchTagsFromFilter(tags: Tag.Index, operation: Operation, filter: string): Tag.Search[] {
-    filter = Tools.normalize(filter);
-    return Object.values(tags)
-      .filter(node => node.tagfiltered.includes(filter))
-      .map(node => ({ ...node, operation, display: `${operation}${node.tag}` }));
-  }
-
-  cleanupAndSort(search: Tag.Search[]): Tag.Search[] {
-    const currentTags = this.$uiStore.currentTags;
-    return search
-      .filter(node => !currentTags.find(currentTag => currentTag.tag === node.tag))
+    this.filteredTags = IndexFactory.searchTags(this.tagsIndex, filter)
+      .filter(newSearch => !this.model.find(currentSearch => currentSearch.tag === newSearch.tag))
       .sort((a, b) => b.items.length - a.items.length);
   }
 }
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index 13468e1..3ef7fa8 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -36,7 +36,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import Tools from "@/tools";
+import Navigation from "@/services/navigation";
 
 @Component
 export default class LdThumbnail extends Vue {
@@ -54,7 +54,7 @@ export default class LdThumbnail extends Vue {
   }
 
   getIcon() {
-    return Tools.getIcon(this.item);
+    return Navigation.getIcon(this.item);
   }
 }
 </script>
-- 
cgit v1.2.3