From 577f49ab6e1fd9cd8007804a13dea1471ee2fb1f Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 3 Apr 2020 03:42:35 +0200
Subject: viewer: tag categories implementation

GitHub: Resolves #29
---
 viewer/src/components/LdProposition.vue | 47 ++++++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 15 deletions(-)

(limited to 'viewer/src/components/LdProposition.vue')

diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 3357777..1a1d387 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -19,8 +19,12 @@
 -->
 
 <template>
-  <div>
-    <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
+  <div class="proposition">
+    <h2
+      v-if="showTitle && proposedTags.length"
+      class="subtitle category"
+    >{{title || $t('panelLeft.propositions.other')}}</h2>
+    <div v-for="proposed in proposedTags" :key="proposed.rawTag">
       <a
         class="operation-btns link"
         :title="$t('tag-propositions.substraction')"
@@ -54,6 +58,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({ type: Array, required: true }) readonly currentTags!: string[];
   @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
   @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
@@ -69,13 +75,14 @@ export default class LdProposition extends Vue {
       this.extractDistinctItems(this.model)
         .flatMap(item => item.tags)
         .map(this.rightmost)
-        .filter(rawTag => !this.model.find(search => search.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 current directory
       this.currentTags
         .flatMap(tag => tag.split(":"))
         .map(tag => this.tagsIndex[tag])
+        .filter(Boolean)
         .forEach(tagindex => (propositions[tagindex.tag] = tagindex.items.length));
     }
 
@@ -105,19 +112,29 @@ export default class LdProposition extends Vue {
 @import "@/assets/scss/theme.scss";
 
 .proposition {
-  display: flex;
-  align-items: center;
-  padding-right: 7px;
-  .operation-tag {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    flex-grow: 1;
-    cursor: pointer;
+  .subtitle {
+    background-color: $proposed-category-bgcolor;
+    width: 100%;
+    padding: 0 0 6px 0;
+    margin: 0;
+    text-align: center;
+    font-variant: small-caps;
   }
-  .operation-btns {
-    padding: 2px 7px;
-    cursor: pointer;
+  > 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>
-- 
cgit v1.2.3


From 09ec37a772802980d68264f2fed040be36e14c82 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 3 Apr 2020 21:57:19 +0200
Subject: viewer: tag categories implementation

fixed disambiguation by categories following code review

GitHub: Resolves #29
---
 viewer/src/components/LdProposition.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

(limited to 'viewer/src/components/LdProposition.vue')

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>
-- 
cgit v1.2.3

