aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components
diff options
context:
space:
mode:
authorZero~Informatique2020-09-10 19:58:41 +0200
committerG.Fouet2020-09-11 21:53:18 +0200
commitd72e317896bcc2a675d21cec6f286e0b2730d77c (patch)
tree070459a2b6f317ad58e605ef92d0a3c084616fba /viewer/src/components
parent90d5af5bb24e899f6c0c2dd92517980c5bb3b753 (diff)
downloadldgallery-d72e317896bcc2a675d21cec6f286e0b2730d77c.tar.gz
viewer: limit + show more tags
github: resolves #184
Diffstat (limited to 'viewer/src/components')
-rw-r--r--viewer/src/components/LdProposition.vue40
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 @@
47 47
48 <div class="disabled" :title="$t('tag-propositions.item-count')">{{ proposed.count }}</div> 48 <div class="disabled" :title="$t('tag-propositions.item-count')">{{ proposed.count }}</div>
49 </div> 49 </div>
50 <div v-if="showMore > 0" class="showmore" @click="limit += showMore">
51 {{ $t("tag-propositions.showmore", [showMore]) }}<fa-icon icon="angle-double-down" />
52 </div>
50 </div> 53 </div>
51</template> 54</template>
52 55
53<script lang="ts"> 56<script lang="ts">
54import { Component, Vue, Prop, PropSync } from "vue-property-decorator"; 57import { Component, Vue, Prop, PropSync, Watch } from "vue-property-decorator";
55import { Operation } from "@/@types/Operation"; 58import { Operation } from "@/@types/Operation";
56 59
57@Component 60@Component
@@ -62,12 +65,21 @@ export default class LdProposition extends Vue {
62 @Prop({ required: true }) readonly tagsIndex!: Tag.Index; 65 @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
63 @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[]; 66 @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
64 67
68 readonly INITIAL_TAG_DISPLAY_LIMIT = this.$galleryStore.config?.initialTagDisplayLimit ?? 10;
69
70 limit: number = this.INITIAL_TAG_DISPLAY_LIMIT;
71
72 @Watch("$route")
73 onRouteChange() {
74 this.limit = this.INITIAL_TAG_DISPLAY_LIMIT;
75 }
76
65 get Operation() { 77 get Operation() {
66 return Operation; 78 return Operation;
67 } 79 }
68 80
69 get proposedTags() { 81 get propositions(): Record<string, number> {
70 let propositions: Record<string, number> = {}; 82 const propositions: Record<string, number> = {};
71 if (this.model.length > 0) { 83 if (this.model.length > 0) {
72 // Tags count from current search 84 // Tags count from current search
73 this.extractDistinctItems(this.model) 85 this.extractDistinctItems(this.model)
@@ -83,12 +95,20 @@ export default class LdProposition extends Vue {
83 .filter(Boolean) 95 .filter(Boolean)
84 .forEach(tagindex => (propositions[tagindex.tag] = tagindex.items.length)); 96 .forEach(tagindex => (propositions[tagindex.tag] = tagindex.items.length));
85 } 97 }
98 return propositions;
99 }
86 100
87 return Object.entries(propositions) 101 get proposedTags() {
102 return Object.entries(this.propositions)
88 .sort((a, b) => b[1] - a[1]) 103 .sort((a, b) => b[1] - a[1])
104 .slice(0, this.limit)
89 .map(entry => ({ rawTag: entry[0], count: entry[1] })); 105 .map(entry => ({ rawTag: entry[0], count: entry[1] }));
90 } 106 }
91 107
108 get showMore(): number {
109 return Object.keys(this.propositions).length - Object.keys(this.proposedTags).length;
110 }
111
92 get title() { 112 get title() {
93 return this.category?.tag ?? this.$t("panelLeft.propositions.other"); 113 return this.category?.tag ?? this.$t("panelLeft.propositions.other");
94 } 114 }
@@ -138,5 +158,17 @@ export default class LdProposition extends Vue {
138 cursor: pointer; 158 cursor: pointer;
139 } 159 }
140 } 160 }
161 .showmore {
162 display: block;
163 text-align: right;
164 color: $palette-300;
165 cursor: pointer;
166 > svg {
167 margin-left: 10px;
168 }
169 &:hover {
170 color: $link-hover;
171 }
172 }
141} 173}
142</style> 174</style>