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.vue97
1 files changed, 0 insertions, 97 deletions
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
deleted file mode 100644
index ce83ba8..0000000
--- a/viewer/src/components/LdTagInput.vue
+++ /dev/null
@@ -1,97 +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="paneltag-input"
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 { Component, Vue, Prop, PropSync, Emit } from "vue-property-decorator";
44import { Operation } from "@/@types/Operation";
45import Navigation from "@/services/navigation";
46import IndexFactory from "@/services/indexfactory";
47
48@Component
49export default class LdTagInput extends Vue {
50 @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
51 @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
52
53 currentFilter: string = "";
54 filteredTags: Tag.Search[] = [];
55
56 displayOption(option: Tag.Search): string {
57 return `${option.display} (${option.items.length})`;
58 }
59
60 filterAlreadyPresent(newSearch: Tag.Search) {
61 return !this.model.find(
62 currentSearch =>
63 currentSearch.tag === newSearch.tag && (!currentSearch.parent || currentSearch.parent === newSearch.parent)
64 );
65 }
66
67 searchTags(filter: string) {
68 this.currentFilter = filter;
69 this.filteredTags = IndexFactory.searchTags(this.tagsIndex, filter, false)
70 .filter(this.filterAlreadyPresent)
71 .sort((a, b) => b.items.length - a.items.length);
72 }
73
74 clearCurrentFilter() {
75 // Necessary for @keydown.enter.native, nexttick is too short
76 setTimeout(() => {
77 this.currentFilter = "";
78 this.filteredTags = [];
79 });
80 }
81
82 onKeyEnter(e: KeyboardEvent) {
83 if (!this.currentFilter) this.onkeyenterEmpty(e);
84 }
85
86 @Emit()
87 onkeyenterEmpty(e: KeyboardEvent) {
88 return e;
89 }
90}
91</script>
92
93<style lang="scss">
94.paneltag-input .autocomplete .dropdown-content {
95 max-height: 300px;
96}
97</style>