aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--viewer/src/components/LdTagInput.vue27
-rw-r--r--viewer/src/views/PanelLeft.vue6
2 files changed, 26 insertions, 7 deletions
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index bdb07bc..b1b9e3e 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -30,7 +30,9 @@
30 size="is-medium" 30 size="is-medium"
31 class="paneltag-input" 31 class="paneltag-input"
32 @typing="searchTags" 32 @typing="searchTags"
33 @click.capture.native="onClick" 33 @add="clearCurrentFilter"
34 @remove="clearCurrentFilter"
35 @keydown.enter.native="onKeyEnter"
34 > 36 >
35 <template slot-scope="props">{{displayOption(props.option)}}</template> 37 <template slot-scope="props">{{displayOption(props.option)}}</template>
36 <template slot="empty">{{$t('tagInput.nomatch')}}</template> 38 <template slot="empty">{{$t('tagInput.nomatch')}}</template>
@@ -38,7 +40,7 @@
38</template> 40</template>
39 41
40<script lang="ts"> 42<script lang="ts">
41import { Component, Vue, Prop, PropSync } from "vue-property-decorator"; 43import { Component, Vue, Prop, PropSync, Emit } from "vue-property-decorator";
42import { Operation } from "@/@types/Operation"; 44import { Operation } from "@/@types/Operation";
43import Navigation from "@/services/navigation"; 45import Navigation from "@/services/navigation";
44import IndexFactory from "@/services/indexfactory"; 46import IndexFactory from "@/services/indexfactory";
@@ -48,6 +50,7 @@ export default class LdTagInput extends Vue {
48 @Prop({ required: true }) readonly tagsIndex!: Tag.Index; 50 @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
49 @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[]; 51 @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
50 52
53 currentFilter: string = "";
51 filteredTags: Tag.Search[] = []; 54 filteredTags: Tag.Search[] = [];
52 55
53 displayOption(option: Tag.Search): string { 56 displayOption(option: Tag.Search): string {
@@ -55,15 +58,27 @@ export default class LdTagInput extends Vue {
55 } 58 }
56 59
57 searchTags(filter: string) { 60 searchTags(filter: string) {
61 this.currentFilter = filter;
58 this.filteredTags = IndexFactory.searchTags(this.tagsIndex, filter, false) 62 this.filteredTags = IndexFactory.searchTags(this.tagsIndex, filter, false)
59 .filter(newSearch => !this.model.find(currentSearch => currentSearch.tag === newSearch.tag)) 63 .filter(newSearch => !this.model.find(currentSearch => currentSearch.tag === newSearch.tag))
60 .sort((a, b) => b.items.length - a.items.length); 64 .sort((a, b) => b.items.length - a.items.length);
61 } 65 }
62 66
63 // Prevents the keyboard from opening on mobile when removing a tag 67 clearCurrentFilter() {
64 onClick(e: MouseEvent) { 68 // Necessary for @keydown.enter.native, nexttick is too short
65 const target = e.target; 69 setTimeout(() => {
66 if (target instanceof HTMLAnchorElement) target.addEventListener("click", e => e.stopPropagation(), true); 70 this.currentFilter = "";
71 this.filteredTags = [];
72 });
73 }
74
75 onKeyEnter(e: KeyboardEvent) {
76 if (!this.currentFilter) this.onkeyenterEmpty(e);
77 }
78
79 @Emit()
80 onkeyenterEmpty(e: KeyboardEvent) {
81 return e;
67 } 82 }
68} 83}
69</script> 84</script>
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 9e9a600..1b3f90b 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -19,7 +19,11 @@
19 19
20<template> 20<template>
21 <div class="flex-column sidebar"> 21 <div class="flex-column sidebar">
22 <ld-tag-input :search-filters.sync="searchFilters" :tags-index="$galleryStore.tagsIndex" /> 22 <ld-tag-input
23 :search-filters.sync="searchFilters"
24 :tags-index="$galleryStore.tagsIndex"
25 @onkeyenter-empty="search"
26 />
23 <ld-command-search @clear="clear" @search="search" /> 27 <ld-command-search @clear="clear" @search="search" />
24 <h1 class="title">{{$t('panelLeft.propositions')}}</h1> 28 <h1 class="title">{{$t('panelLeft.propositions')}}</h1>
25 <ld-proposition 29 <ld-proposition