viewer: limit + show more tags

github: resolves #184

4 files changed, 40 insertions, 5 deletions

diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts
index 1342ff9..56feff0 100644
--- a/viewer/src/@types/gallery.d.ts
+++ b/viewer/src/@types/gallery.d.ts
@@ -20,6 +20,7 @@
 declare namespace Gallery {
   interface Config {
     galleryRoot: string;
+    initialTagDisplayLimit: number;
   }
 
   interface GalleryProperties {
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>
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json
index 0bbc2cc..b36ac57 100644
--- a/viewer/src/locales/en.json
+++ b/viewer/src/locales/en.json
@@ -16,5 +16,6 @@
   "command.parent": "Go to parent directory",
   "directory.no-results": "Empty directory",
   "panelLeft.propositions.other": "other filters",
-  "panelLeft.information.title": "Information"
+  "panelLeft.information.title": "Information",
+  "tag-propositions.showmore": "show more ({0})"
 }
diff --git a/viewer/src/plugins/fontawesome-icons.ts b/viewer/src/plugins/fontawesome-icons.ts
index 9dca208..8d136a6 100644
--- a/viewer/src/plugins/fontawesome-icons.ts
+++ b/viewer/src/plugins/fontawesome-icons.ts
@@ -38,4 +38,5 @@ export {
   faFileDownload,
   faCaretUp,
   faCaretDown,
+  faAngleDoubleDown,
 } from "@fortawesome/free-solid-svg-icons";