feat: improve negative tags functionality

Rule-34 · Sep 4, 2020 · 558099f · 558099f
1 parent fdeed26
commit 558099f
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 29 deletions.
diff --git a/components/pages/posts/navigation/search/SearchBar.vue b/components/pages/posts/navigation/search/SearchBar.vue
@@ -37,14 +37,14 @@
         />
       </button>
 
-      <!-- Filter content -->
+      <!-- Negative -->
       <button
         type="button"
         title="Filter out content"
-        @click="toggleBlacklistFilter()"
+        @click="toggleNegativeTags()"
       >
         <FilterIcon
-          :class="{ 'text-red-400': search.blacklistFilter.isActive }"
+          :class="{ 'text-red-400': isNegativeTagsActive }"
           class="w-6 h-6 transition-colors duration-300 icon"
         />
       </button>
@@ -53,8 +53,8 @@
 </template>
 
 <script>
-import { mapState, mapActions, mapMutations } from 'vuex'
-import { FilterIcon, SearchIcon, TrashIcon } from 'vue-feather-icons'
+import { mapGetters, mapActions } from 'vuex'
+import { TagIcon, SearchIcon, FilterIcon, TrashIcon } from 'vue-feather-icons'
 import debounce from 'lodash/debounce'
 
 export default {
@@ -69,7 +69,10 @@ export default {
   },
 
   computed: {
-    ...mapState('booru', ['search']),
+    ...mapGetters('navigation', [
+      'isNegativeTagsActive',
+    ]),
+    ...mapGetters('premium', ['isUserPremium']),
   },
 
   methods: {
@@ -78,10 +81,13 @@ export default {
       'searchedTagsManager',
       'fetchSearchTag',
     ]),
-    ...mapMutations('booru', ['setBlacklistFilterActive']),
+    ...mapActions('navigation', [
+      'negativeTagsManager',
+    ]),
 
     replaceInput(event) {
-      this.searchQuery = event.target.value.replace(/\s+/g, '_').toLowerCase()
+      this.searchQuery = event.target.value.replace(/\s+/g, '_')
+
       event.target.value = this.searchQuery
 
       this.getTags()
@@ -108,8 +114,10 @@ export default {
       this.addedTagsManager({ operation: 'reset' })
     },
 
-    toggleBlacklistFilter() {
-      this.setBlacklistFilterActive(!this.search.blacklistFilter.isActive)
+    toggleNegativeTags() {
+      this.negativeTagsManager({ operation: 'toggle' })
+    },
+
     },
   },
 }

diff --git a/components/pages/posts/navigation/search/SearchResults.vue b/components/pages/posts/navigation/search/SearchResults.vue
@@ -93,19 +93,12 @@ export default {
     },
 
     addToAddedTags(tag) {
-      if (this.search.blacklistFilter.isActive) {
-        this.addedTagsManager({
-          operation: 'add',
-          value: '-' + tag,
-        })
-      }
-      //
-      else {
-        this.addedTagsManager({
-          operation: 'add',
-          value: tag,
-        })
-      }
+      const prefix = this.isNegativeTagsActive ? '-' : ''
+
+      this.addedTagsManager({
+        operation: 'add',
+        value: prefix + tag,
+      })
     },
 
     fetchAddedTags() {

diff --git a/store/booru/index.js b/store/booru/index.js
@@ -27,8 +27,6 @@ export const state = () => ({
   search: {
     addedTags: [],
     searchedTags: [],
-
-    blacklistFilter: { isActive: false },
   },
 })
 
@@ -101,10 +99,6 @@ export const mutations = {
   setSearchedTags(state, value) {
     state.search.searchedTags = value
   },
-
-  setBlacklistFilterActive(state, value) {
-    state.search.blacklistFilter.isActive = value
-  },
 }
 
 export const actions = {

diff --git a/store/navigation/index.js b/store/navigation/index.js
@@ -5,6 +5,8 @@ export const state = () => ({
 
   search: {
     isActive: false,
+
+    negativeTags: { isActive: false },
   },
 })
 
@@ -17,6 +19,10 @@ export const getters = {
     return state.search.isActive
   },
 
+  isNegativeTagsActive(state) {
+    return state.search.negativeTags.isActive
+  },
+
 }
 
 export const mutations = {
@@ -27,6 +33,11 @@ export const mutations = {
   setSearchIsActive(state, value) {
     state.search.isActive = value
   },
+
+  setSearchNegativeTagsIsActive(state, value) {
+    state.search.negativeTags.isActive = value
+  },
+
 export const actions = {
   sideNavNavigationManager({ commit, getters }, { operation, value }) {
     switch (operation) {
@@ -58,4 +69,19 @@ export const actions = {
     }
   },
 
+  negativeTagsManager({ commit, getters }, { operation, value }) {
+    switch (operation) {
+      case 'toggle':
+        commit('setSearchNegativeTagsIsActive', !getters.isNegativeTagsActive)
+        break
+
+      case 'set':
+        commit('setSearchNegativeTagsIsActive', value)
+        break
+
+      default:
+        throw new Error('No operation specified')
+    }
+  },
+
 }