aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/LdTagInput.vue
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/components/LdTagInput.vue')
-rw-r--r--viewer/src/components/LdTagInput.vue96
1 files changed, 0 insertions, 96 deletions
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
deleted file mode 100644
index 49ea3f4..0000000
--- a/viewer/src/components/LdTagInput.vue
+++ /dev/null
@@ -1,96 +0,0 @@
1<!-- ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2020 Guillaume FOUET
5--
6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18-->
19
20<template>
21 <b-taginput
22 v-model="model"
23 :placeholder="$t('tagInput.placeholder')"
24 autocomplete
25 ellipsis
26 attached
27 :data="filteredTags"
28 field="display"
29 type="is-black"
30 size="is-medium"
31 :class="$style.paneltagInput"
32 @typing="searchTags"
33 @add="clearCurrentFilter"
34 @remove="clearCurrentFilter"
35 @keydown.enter.native="onKeyEnter"
36 >
37 <template slot-scope="props">{{ displayOption(props.option) }}</template>
38 <template slot="empty">{{ $t("tagInput.nomatch") }}</template>
39 </b-taginput>
40</template>
41
42<script lang="ts">
43import { TagIndex, TagSearch } from "@/@types/tag";
44import IndexFactory from "@/services/indexfactory";
45import { Component, Emit, Prop, PropSync, Vue } from "vue-property-decorator";
46
47@Component
48export default class LdTagInput extends Vue {
49 @Prop({ required: true }) readonly tagsIndex!: TagIndex;
50 @PropSync("searchFilters", { type: Array, required: true }) model!: TagSearch[];
51
52 currentFilter: string = "";
53 filteredTags: TagSearch[] = [];
54
55 displayOption(option: TagSearch): string {
56 return `${option.display} (${option.items.length})`;
57 }
58
59 filterAlreadyPresent(newSearch: TagSearch) {
60 return !this.model.find(
61 currentSearch =>
62 currentSearch.tag === newSearch.tag && (!currentSearch.parent || currentSearch.parent === newSearch.parent)
63 );
64 }
65
66 searchTags(filter: string) {
67 this.currentFilter = filter;
68 this.filteredTags = IndexFactory.searchTags(this.tagsIndex, filter, false)
69 .filter(this.filterAlreadyPresent)
70 .sort((a, b) => b.items.length - a.items.length);
71 }
72
73 clearCurrentFilter() {
74 // Necessary for @keydown.enter.native, nexttick is too short
75 setTimeout(() => {
76 this.currentFilter = "";
77 this.filteredTags = [];
78 });
79 }
80
81 onKeyEnter(e: KeyboardEvent) {
82 if (!this.currentFilter) this.onkeyenterEmpty(e);
83 }
84
85 @Emit()
86 onkeyenterEmpty(e: KeyboardEvent) {
87 return e;
88 }
89}
90</script>
91
92<style lang="scss" module>
93.paneltagInput :global(.autocomplete) :global(.dropdown-content) {
94 max-height: 300px;
95}
96</style>