viewer: tag categories implementation

fixed disambiguation by categories following code review

GitHub: Resolves #29

5 files changed, 22 insertions, 14 deletions

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index a8a42a1..9e61b8b 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -85,8 +85,8 @@ button svg + span {
   overflow: auto;
 }
 .scrollbar::-webkit-scrollbar {
-  width: $scrollbar_width;
-  height: $scrollbar_width;
+  width: $scrollbar-width;
+  height: $scrollbar-width;
 }
 .scrollbar::-webkit-scrollbar-corner {
   background-color: transparent;
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 35983a7..feb8543 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -63,7 +63,7 @@ $panel-left-txtcolor: $primary;
 $command-buttons-bgcolor: $palette-700;
 $content-bgcolor: $palette-900;
 $scrollbar-color: $palette-300;
-$scrollbar_width: 10px;
+$scrollbar-width: 10px;
 $loader-color: $palette-800;
 $input-tag-delete-background-color: $palette-700;
 $breadcrumb-margins: 12px;
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 1a1d387..c69a7c3 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -20,10 +20,7 @@
 
 <template>
   <div class="proposition">
-    <h2
-      v-if="showTitle && proposedTags.length"
-      class="subtitle category"
-    >{{title || $t('panelLeft.propositions.other')}}</h2>
+    <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"
@@ -58,8 +55,8 @@ import { Operation } from "@/@types/Operation";
 
 @Component
 export default class LdProposition extends Vue {
-  @Prop({ type: String, required: true }) readonly title!: string;
-  @Prop({ type: Boolean, required: true }) readonly showTitle!: boolean;
+  @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[];
@@ -91,6 +88,10 @@ export default class LdProposition extends Vue {
       .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[] {
     return [...new Set(currentTags.flatMap(tag => tag.items))];
   }
@@ -102,8 +103,8 @@ export default class LdProposition extends Vue {
 
   add(operation: Operation, rawTag: Gallery.RawTag) {
     const node = this.tagsIndex[rawTag];
-    const search: Tag.Search = { ...node, operation, display: `${operation}${node.tag}` };
-    this.model.push(search);
+    const display = this.category ? `${operation}${this.category.tag}:${node.tag}` : `${operation}${node.tag}`;
+    this.model.push({ ...node, parent: this.category, operation, display });
   }
 }
 </script>
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index bdb07bc..865db96 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -54,9 +54,16 @@ export default class LdTagInput extends Vue {
     return `${option.display} (${option.items.length})`;
   }
 
+  filterAlreadyPresent(newSearch: Tag.Search) {
+    return !this.model.find(
+      currentSearch =>
+        currentSearch.tag === newSearch.tag && (!currentSearch.parent || currentSearch.parent === newSearch.parent)
+    );
+  }
+
   searchTags(filter: string) {
     this.filteredTags = IndexFactory.searchTags(this.tagsIndex, filter, false)
-      .filter(newSearch => !this.model.find(currentSearch => currentSearch.tag === newSearch.tag))
+      .filter(this.filterAlreadyPresent)
       .sort((a, b) => b.items.length - a.items.length);
   }
 
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 824d1ae..3fc62be 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -26,8 +26,8 @@
       <ld-proposition
         v-for="(category) in $galleryStore.tagsCategories"
         :key="category.tag"
-        :title="category.tag"
-        :show-title="$galleryStore.tagsCategories.length > 1"
+        :category="$galleryStore.tagsIndex[category.tag]"
+        :show-category="$galleryStore.tagsCategories.length > 1"
         :search-filters.sync="searchFilters"
         :tags-index="category.index"
         :current-tags="currentTags()"