viewer: limit + show more tags

github: resolves #184

1 files changed, 36 insertions, 4 deletions

diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 97f47da..e19e01a 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -47,11 +47,14 @@
 
       <div class="disabled" :title="$t('tag-propositions.item-count')">{{ proposed.count }}</div>
     </div>
+    <div v-if="showMore > 0" class="showmore" @click="limit += showMore">
+      {{ $t("tag-propositions.showmore", [showMore]) }}<fa-icon icon="angle-double-down" />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, PropSync } from "vue-property-decorator";
+import { Component, Vue, Prop, PropSync, Watch } from "vue-property-decorator";
 import { Operation } from "@/@types/Operation";
 
 @Component
@@ -62,12 +65,21 @@ export default class LdProposition extends Vue {
   @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
   @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
 
+  readonly INITIAL_TAG_DISPLAY_LIMIT = this.$galleryStore.config?.initialTagDisplayLimit ?? 10;
+
+  limit: number = this.INITIAL_TAG_DISPLAY_LIMIT;
+
+  @Watch("$route")
+  onRouteChange() {
+    this.limit = this.INITIAL_TAG_DISPLAY_LIMIT;
+  }
+
   get Operation() {
     return Operation;
   }
 
-  get proposedTags() {
-    let propositions: Record<string, number> = {};
+  get propositions(): Record<string, number> {
+    const propositions: Record<string, number> = {};
     if (this.model.length > 0) {
       // Tags count from current search
       this.extractDistinctItems(this.model)
@@ -83,12 +95,20 @@ export default class LdProposition extends Vue {
         .filter(Boolean)
         .forEach(tagindex => (propositions[tagindex.tag] = tagindex.items.length));
     }
+    return propositions;
+  }
 
-    return Object.entries(propositions)
+  get proposedTags() {
+    return Object.entries(this.propositions)
       .sort((a, b) => b[1] - a[1])
+      .slice(0, this.limit)
       .map(entry => ({ rawTag: entry[0], count: entry[1] }));
   }
 
+  get showMore(): number {
+    return Object.keys(this.propositions).length - Object.keys(this.proposedTags).length;
+  }
+
   get title() {
     return this.category?.tag ?? this.$t("panelLeft.propositions.other");
   }
@@ -138,5 +158,17 @@ export default class LdProposition extends Vue {
       cursor: pointer;
     }
   }
+  .showmore {
+    display: block;
+    text-align: right;
+    color: $palette-300;
+    cursor: pointer;
+    > svg {
+      margin-left: 10px;
+    }
+    &:hover {
+      color: $link-hover;
+    }
+  }
 }
 </style>