From e1aa8679165058efae7cc80e82d8978f4292ebf8 Mon Sep 17 00:00:00 2001
From: Alexander Drozdov <snosme@gmail.com>
Date: Wed, 12 Feb 2020 13:51:24 +0200
Subject: [PATCH] change interaction

---
 src/components/CheckedItem.vue          | 25 +++++++------------------
 src/components/filters/FiltersBlock.vue | 14 +++-----------
 2 files changed, 10 insertions(+), 29 deletions(-)

diff --git a/src/components/CheckedItem.vue b/src/components/CheckedItem.vue
index 35223061..b1528357 100644
--- a/src/components/CheckedItem.vue
+++ b/src/components/CheckedItem.vue
@@ -11,8 +11,7 @@
       <filters-block v-if="!item.stackSize"
         :filters="itemFilters"
         :stats="itemStats"
-        :item="item"
-        @refine-search="refineSearch" />
+        :item="item" />
       <trade-listing
         ref="tradeService"
         :filters="itemFilters"
@@ -73,20 +72,13 @@ export default {
         MainProcess.priceCheckVisible(false)
       }
     })
-  },
-  watch: {
-    itemFilters: {
-      deep: true,
-      immediate: true,
-      handler (filters) {
-        if (filters == null) return
 
-        // NOTE: children component receives props on nextTick
-        this.$nextTick(() => {
-          this.$refs.tradeService.execSearch()
-        })
-      }
-    }
+    this.$watch(vm => [vm.itemFilters, vm.itemStats], () => {
+      // NOTE: children component receives props on nextTick
+      this.$nextTick(() => {
+        this.$refs.tradeService.execSearch()
+      })
+    }, { deep: true })
   },
   data () {
     return {
@@ -104,9 +96,6 @@ export default {
     }
   },
   methods: {
-    refineSearch () {
-      this.$refs.tradeService.execSearch()
-    }
   }
 }
 </script>
diff --git a/src/components/filters/FiltersBlock.vue b/src/components/filters/FiltersBlock.vue
index d5c64954..9e6e3eb8 100644
--- a/src/components/filters/FiltersBlock.vue
+++ b/src/components/filters/FiltersBlock.vue
@@ -45,7 +45,7 @@
     <div v-if="showStatsBlock && stats.length" class="my-4">
       <filter-modifier v-for="filter of stats" :key="filter.id"
         :filter="filter"/>
-      <button @click="applyStats" class="btn w-40 mt-2">Search</button>
+      <button @click="toggleStatsBlock" class="btn w-40 mt-2">Collapse <i class="fas fa-chevron-up pl-1 text-xs text-gray-600"></i></button>
     </div>
   </div>
 </template>
@@ -74,7 +74,7 @@ export default {
   },
   data () {
     return {
-      showStatsBlock: false
+      showStatsBlock: true
     }
   },
   computed: {
@@ -84,15 +84,7 @@ export default {
   },
   methods: {
     toggleStatsBlock () {
-      if (!this.showStatsBlock) {
-        this.showStatsBlock = true
-      } else {
-        this.applyStats()
-      }
-    },
-    applyStats () {
-      this.showStatsBlock = false
-      this.$emit('refine-search')
+      this.showStatsBlock = !this.showStatsBlock
     }
   }
 }