@@ -30,7 +33,9 @@
autofocus
placeholder="Search: e.g. dragon"
@input="inputHandler"
- @keypress.enter.prevent="addTagDirectly"
+ @keypress.enter.prevent="
+ addSearchTagDirectly($event.target.value)
+ "
/>
+
-
+
@@ -86,12 +93,12 @@
-
+
@@ -162,7 +179,15 @@ export default {
data() {
return {
- search: { query: '', data: undefined },
+ search: {
+ query: '',
+
+ // Act as a buffer
+ tags: [],
+
+ // Searched data
+ data: [],
+ },
isBanModeEnabled: false,
@@ -175,6 +200,10 @@ export default {
...mapGetters('booru', ['getTags']),
},
+ mounted() {
+ this.search.tags = this.getTags
+ },
+
methods: {
...mapActions('navigation', ['searchNavigationManager']),
...mapActions('booru', ['tagsManager', 'fetchTags']),
@@ -193,29 +222,28 @@ export default {
event.target.value = input
- await this.fetchTagsFromApi(input)
+ await this.fetchSearchDataFromApi(input)
},
- async addTagDirectly(event) {
- await this.tagsManager({
- operation: 'merge',
- value: [event.target.value],
- })
+ addSearchTagDirectly(tag) {
+ const prefix = this.isBanModeEnabled ? '-' : ''
+
+ this.mergeSearchTags([prefix + tag])
},
- fetchTagsFromApi: debounce(async function (tag) {
- if (tag.length <= 1) {
+ fetchSearchDataFromApi: debounce(async function (tags) {
+ if (tags.length <= 1) {
await this.tagsManager({
operation: 'reset',
})
return
}
- this.search.data = await this.fetchTags(tag)
+ this.search.data = await this.fetchTags(tags)
}, 350),
- async resetTags() {
- await this.tagsManager({ operation: 'reset' })
+ resetTags() {
+ this.search.tags = []
},
toggleBanMode() {
@@ -233,19 +261,18 @@ export default {
// #endregion
// #region Search results
- async removeTag(tag) {
- await this.tagsManager({
- operation: 'remove',
- value: [tag],
- })
+ removeTag(tagToRemove) {
+ this.search.tags = this.search.tags.filter((tag) => tag !== tagToRemove)
},
- async addTag(tag) {
- const prefix = this.isBanModeEnabled ? '-' : ''
+ mergeSearchTags(tags) {
+ this.search.tags = [...new Set([...this.search.tags, ...tags])]
+ },
+ async addTagsToBooruState() {
await this.tagsManager({
- operation: 'merge',
- value: [prefix + tag],
+ operation: 'set',
+ value: this.search.tags,
})
},
// #endregion