1 files changed, 81 insertions, 33 deletions

diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 9a32e0a..fe3af07 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -2,6 +2,7 @@
 --             pictures into a searchable web gallery.
 --
 -- Copyright (C) 2019-2020  Guillaume FOUET
+--               2020       Pacien TRAN-GIRARD
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -18,46 +19,77 @@
 -->
 
 <template>
-  <div>
-    <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
-      <fa-icon icon="minus" @click="add(Operation.SUBSTRACTION, proposed.rawTag)" />
-      <span
+  <div class="proposition">
+    <h2 v-if="showCategory && proposedTags.length" class="subtitle category">{{title}}</h2>
+    <div v-for="proposed in proposedTags" :key="proposed.rawTag">
+      <a
+        class="operation-btns link"
+        :title="$t('tag-propositions.substraction')"
+        @click="add(Operation.SUBSTRACTION, proposed.rawTag)"
+      >
+        <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>
+
+      <a
+        class="operation-tag link"
+        :title="$t('tag-propositions.intersection')"
         @click="add(Operation.INTERSECTION, proposed.rawTag)"
-      >{{proposed.rawTag}}&nbsp;x{{proposed.count}}</span>
-      <fa-icon icon="plus" @click="add(Operation.ADDITION, proposed.rawTag)" />
+      >{{proposed.rawTag}}</a>
+
+      <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 { Operation } from "@/@types/tag/Operation";
+import { Component, Vue, Prop, PropSync } from "vue-property-decorator";
+import { Operation } from "@/@types/Operation";
 
 @Component
-export default class LdTagInput extends Vue {
+export default class LdProposition extends Vue {
+  @Prop() readonly category?: Tag.Node;
+  @Prop({ type: Boolean, required: true }) readonly showCategory!: boolean;
+  @Prop({ type: Array, required: true }) readonly currentTags!: string[];
+  @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
+  @PropSync("searchFilters", { type: Array, required: true }) 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.tagsIndex[rawTag] && !this.model.find(search => search.tag === rawTag))
         .forEach(rawTag => (propositions[rawTag] = (propositions[rawTag] ?? 0) + 1));
     } else {
-      // Tags count from the whole gallery
-      Object.entries(this.$galleryStore.tags)
-        .forEach(entry => (propositions[entry[0]] = entry[1].items.length));
+      // Tags count from the current directory
+      this.currentTags
+        .flatMap(tag => tag.split(":"))
+        .map(tag => this.tagsIndex[tag])
+        .filter(Boolean)
+        .forEach(tagindex => (propositions[tagindex.tag] = tagindex.items.length));
     }
-    
+
     return Object.entries(propositions)
-      .sort((a,b) => b[1] - a[1])
-      .map(entry => ({rawTag: entry[0], count: entry[1]}));
+      .sort((a, b) => b[1] - a[1])
+      .map(entry => ({ rawTag: entry[0], count: entry[1] }));
+  }
+
+  get title() {
+    return this.category?.tag ?? this.$t("panelLeft.propositions.other");
   }
 
   extractDistinctItems(currentTags: Tag.Search[]): Gallery.Item[] {
@@ -65,29 +97,45 @@ export default class LdTagInput extends Vue {
   }
 
   rightmost(tag: Gallery.RawTag): Gallery.RawTag {
-    const dot = tag.lastIndexOf(".");
+    const dot = tag.lastIndexOf(":");
     return dot <= 0 ? tag : tag.substr(dot + 1);
   }
 
   add(operation: Operation, rawTag: Gallery.RawTag) {
-    const node = this.$galleryStore.tags[rawTag];
-    const search: Tag.Search = { ...node, operation, display: `${operation}${node.tag}` };
-    this.$uiStore.currentTags.push(search);
-    this.$uiStore.mode = "search";
+    const node = this.tagsIndex[rawTag];
+    const display = this.category ? `${operation}${this.category.tag}:${node.tag}` : `${operation}${node.tag}`;
+    this.model.push({ ...node, parent: this.category, operation, display });
   }
 }
 </script>
 
 <style lang="scss">
+@import "~@/assets/scss/theme.scss";
+
 .proposition {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 10px;
-  color: lightcyan;
-  cursor: pointer;
-}
-.proposition span {
-  padding: 0 10px;
+  .subtitle {
+    background-color: $proposed-category-bgcolor;
+    width: 100%;
+    padding: 0 0 6px 0;
+    margin: 0;
+    text-align: center;
+    font-variant: small-caps;
+  }
+  > div {
+    display: flex;
+    align-items: center;
+    padding-right: 7px;
+    .operation-tag {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      flex-grow: 1;
+      cursor: pointer;
+    }
+    .operation-btns {
+      padding: 2px 7px;
+      cursor: pointer;
+    }
+  }
 }
 </style>