aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--example/config.json3
-rw-r--r--viewer/src/@types/gallery.d.ts1
-rw-r--r--viewer/src/components/LdProposition.vue40
-rw-r--r--viewer/src/locales/en.json3
-rw-r--r--viewer/src/plugins/fontawesome-icons.ts1
5 files changed, 42 insertions, 6 deletions
diff --git a/example/config.json b/example/config.json
index 6483257..cec359c 100644
--- a/example/config.json
+++ b/example/config.json
@@ -1,3 +1,4 @@
1{ 1{
2 "galleryRoot": "out/" 2 "galleryRoot": "out/",
3 "initialTagDisplayLimit": 10,
3} 4}
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 @@
20declare namespace Gallery { 20declare namespace Gallery {
21 interface Config { 21 interface Config {
22 galleryRoot: string; 22 galleryRoot: string;
23 initialTagDisplayLimit: number;
23 } 24 }
24 25
25 interface GalleryProperties { 26 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 @@
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>
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 @@
16 "command.parent": "Go to parent directory", 16 "command.parent": "Go to parent directory",
17 "directory.no-results": "Empty directory", 17 "directory.no-results": "Empty directory",
18 "panelLeft.propositions.other": "other filters", 18 "panelLeft.propositions.other": "other filters",
19 "panelLeft.information.title": "Information" 19 "panelLeft.information.title": "Information",
20 "tag-propositions.showmore": "show more ({0})"
20} 21}
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 {
38 faFileDownload, 38 faFileDownload,
39 faCaretUp, 39 faCaretUp,
40 faCaretDown, 40 faCaretDown,
41 faAngleDoubleDown,
41} from "@fortawesome/free-solid-svg-icons"; 42} from "@fortawesome/free-solid-svg-icons";