From 6532e8b1131e6f717dce2e91aaa3b917051b5f08 Mon Sep 17 00:00:00 2001
From: "rusov.d.s" <rusov.d.s@gmail.com>
Date: Wed, 2 May 2018 21:34:41 +0700
Subject: [PATCH] separate filter by tags and modal

---
 .../components/chains/common/FilterByTags.vue | 48 +++++---------
 .../chains/common/FilterByTagsModal.vue       | 48 +++++++-------
 .../src/components/chains/common/TagLabel.vue | 12 +---
 .../chains/feed/FeedFilterByTags.vue          | 15 ++---
 .../chains/profile/ProfileFilterByTags.vue    | 15 ++---
 client/src/containers/chains/Feed.vue         | 28 +++++++--
 client/src/containers/chains/Profile.vue      | 24 ++++++-
 client/src/store/index.js                     |  4 +-
 client/src/store/modules/filterByTags.js      | 63 +++++++++++++++++++
 package.json                                  |  2 +-
 10 files changed, 167 insertions(+), 92 deletions(-)
 create mode 100644 client/src/store/modules/filterByTags.js

diff --git a/client/src/components/chains/common/FilterByTags.vue b/client/src/components/chains/common/FilterByTags.vue
index 0db2a7a..f6aa1fb 100644
--- a/client/src/components/chains/common/FilterByTags.vue
+++ b/client/src/components/chains/common/FilterByTags.vue
@@ -11,8 +11,6 @@
       <tag-label 
         v-for="tag in tagsTop" :key="tag.text" 
         :tag="tag"
-        :include="include"
-        :exclude="exclude"
         @add="add"
         @remove="remove"
         ></tag-label>
@@ -27,37 +25,16 @@
       </a>
       <a href="#" class="link" @click.prevent="showAllTags" v-if="showAllTagsBtn">{{$t('profile.showAllTags')}}</a>
     </div>
-    <filter-by-tags-modal
-      v-if="modalShow"
-      :tags="tags"
-      :is-show.sync="modalShow"
-      :include="include"
-      :exclude="exclude"
-      :clear-filter-in-active="clearFilterInActive"
-      @add="add"
-      @remove="remove"
-      @clear="clear"
-    ></filter-by-tags-modal>
   </div>
 </template>
 
 <script>
 import TagLabel from './TagLabel.vue'
-import FilterByTagsModal from './FilterByTagsModal.vue'
 const TOP_LIMIT = 10
 export default {
   name: 'FilterByTags',
   components: {
-    TagLabel,
-    FilterByTagsModal
-  },
-  data() {
-    return {
-      fixed: false,
-      modalShow: false,
-      include: {},
-      exclude: {}
-    }
+    TagLabel
   },
   props: {
     tags: {
@@ -70,24 +47,18 @@ export default {
       this.$emit('change', { include: this.include, exclude: this.exclude })
     },
     clear() {
-      this.include = {}
-      this.exclude = {}
+      this.$store.commit('filterByTags/CLEAR_FILTERS')
       this.change()
     },
     showAllTags() {
-      this.modalShow = true
+      this.$store.commit('filterByTags/SET_MODAL_SHOW', true)
     },
     add(tag) {
-      if (!this.exclude[tag.text]) {
-        if (this.include[tag.text]) this.$delete(this.include, tag.text)
-        else this.$set(this.include, tag.text, true)
-      }
-      this.$delete(this.exclude, tag.text)
+      this.$store.commit('filterByTags/ADD_TAG', tag)
       this.change()
     },
     remove(tag) {
-      this.$set(this.exclude, tag.text, true)
-      this.$delete(this.include, tag.text)
+      this.$store.commit('filterByTags/REMOVE_TAG', tag)
       this.change()
     }
   },
@@ -102,6 +73,15 @@ export default {
     },
     tagsTop() {
       return this.tags.slice(0, TOP_LIMIT)
+    },
+    include() {
+      return this.$store.state.filterByTags.include
+    },
+    exclude() {
+      return this.$store.state.filterByTags.exclude
+    },
+    modalShow() {
+      return this.$store.state.filterByTags.modalShow
     }
   }
 }
diff --git a/client/src/components/chains/common/FilterByTagsModal.vue b/client/src/components/chains/common/FilterByTagsModal.vue
index c9f577b..fef2780 100644
--- a/client/src/components/chains/common/FilterByTagsModal.vue
+++ b/client/src/components/chains/common/FilterByTagsModal.vue
@@ -15,8 +15,6 @@
         <tag-label 
           v-for="tag in tags" :key="tag.text" 
           :tag="tag"
-          :include="include"
-          :exclude="exclude"
           @add="add"
           @remove="remove"
         ></tag-label>
@@ -37,22 +35,6 @@ export default {
     tags: {
       type: Array,
       required: true
-    },
-    isShow: {
-      type: Boolean,
-      required: true
-    },
-    include: {
-      type: Object,
-      required: true
-    },
-    exclude: {
-      type: Object,
-      required: true
-    },
-    clearFilterInActive: {
-      type: Boolean,
-      required: true
     }
   },
   mixins: [onClickOutside],
@@ -62,21 +44,43 @@ export default {
   beforeDestroy() {
     this.toggleBodyClass({ flag: false })
   },
+  computed:{
+    clearFilterInActive() {
+      const includes = Object.keys(this.include).length
+      const excludes = Object.keys(this.exclude).length
+      return !(includes || excludes)
+    },
+    include(){
+      return this.$store.state.filterByTags.include
+    },
+    exclude(){
+      return this.$store.state.filterByTags.exclude
+    },
+    isShow(){
+      return this.$store.state.filterByTags.modalShow
+    }
+  },
   methods: {
+    change() {
+      this.$emit('change', { include: this.include, exclude: this.exclude })
+    },
     toggleBodyClass({ flag }) {
       this.$helper.toggleBodyModalClass({flag})
     },
     hide() {
-      this.$emit('update:isShow', false)
+     this.$store.commit('filterByTags/SET_MODAL_SHOW', false)
     },
     add(tag) {
-      this.$emit('add', tag)
+      this.$store.commit('filterByTags/ADD_TAG', tag)
+      this.change()
     },
     remove(tag) {
-      this.$emit('remove', tag)
+      this.$store.commit('filterByTags/REMOVE_TAG', tag)
+      this.change()
     },
     clear() {
-      this.$emit('clear')
+      this.$store.commit('filterByTags/CLEAR_FILTERS')
+      this.change()
     }
   }
 }
diff --git a/client/src/components/chains/common/TagLabel.vue b/client/src/components/chains/common/TagLabel.vue
index 0e7ede9..7d7fe44 100644
--- a/client/src/components/chains/common/TagLabel.vue
+++ b/client/src/components/chains/common/TagLabel.vue
@@ -15,14 +15,6 @@ export default {
     tag: {
       type: Object,
       required: true
-    },
-    include: {
-      type: Object,
-      required: true
-    },
-    exclude: {
-      type: Object,
-      required: true
     }
   },
   methods: {
@@ -35,10 +27,10 @@ export default {
   },
   computed: {
     isInclude() {
-      return this.include[this.tag.text]
+      return this.$store.state.filterByTags.include[this.tag.text]
     },
     isExclude() {
-      return this.exclude[this.tag.text]
+      return this.$store.state.filterByTags.exclude[this.tag.text]
     }
   }
 }
diff --git a/client/src/components/chains/feed/FeedFilterByTags.vue b/client/src/components/chains/feed/FeedFilterByTags.vue
index 32975b4..b747ad2 100644
--- a/client/src/components/chains/feed/FeedFilterByTags.vue
+++ b/client/src/components/chains/feed/FeedFilterByTags.vue
@@ -18,12 +18,17 @@
 const TOP_LIMIT = 10
 import FilterByTags from '../../../components/chains/common/FilterByTags.vue'
 import EventBus from '../../../event-bus'
-const parser = require('@oneplace/blockchains-api/parser')
+
 export default {
   name: 'FeedFilterByTags',
   components: {
     FilterByTags
   },
+  props: {
+    tags: {
+      type: Array
+    }
+  },
   data() {
     return {
       fixed: false
@@ -47,14 +52,6 @@ export default {
     change({ include, exclude }) {
       EventBus.$emit('FEED:FILTER:CHANGE', { include, exclude })
     }
-  },
-  computed: {
-    tags() {
-      const posts = this.$store.state.feed.posts.collection
-      const tags = parser.getTagsFromPosts(posts)
-      tags.sort((a, b) => b.count - a.count)
-      return tags
-    }
   }
 }
 </script>
diff --git a/client/src/components/chains/profile/ProfileFilterByTags.vue b/client/src/components/chains/profile/ProfileFilterByTags.vue
index 71b9ea7..20272e2 100644
--- a/client/src/components/chains/profile/ProfileFilterByTags.vue
+++ b/client/src/components/chains/profile/ProfileFilterByTags.vue
@@ -9,9 +9,14 @@
 const TOP_LIMIT = 10
 import FilterByTags from '../../../components/chains/common/FilterByTags.vue'
 import EventBus from '../../../event-bus'
-const parser = require('@oneplace/blockchains-api/parser')
+
 export default {
   name: 'ProfileFilterByTags',
+  props: {
+    tags: {
+      type: Array
+    }
+  },
   components: {
     FilterByTags
   },
@@ -38,14 +43,6 @@ export default {
     change({ include, exclude }) {
       EventBus.$emit('PROFILE:FILTER:CHANGE', { include, exclude })
     }
-  },
-  computed: {
-    tags() {
-      const posts = this.$store.state.profile.posts.collection
-      const tags = parser.getTagsFromPosts(posts)
-      tags.sort((a, b) => b.count - a.count)
-      return tags
-    }
   }
 }
 </script>
diff --git a/client/src/containers/chains/Feed.vue b/client/src/containers/chains/Feed.vue
index 2823a2f..ae08c56 100644
--- a/client/src/containers/chains/Feed.vue
+++ b/client/src/containers/chains/Feed.vue
@@ -15,7 +15,8 @@
       <div class="feed__wrapper" v-show="firstFetched">
         <feed-posts></feed-posts>
         <aside class="feed__aside">
-          <feed-filter-by-tags></feed-filter-by-tags>
+          <feed-filter-by-tags :tags="tags"></feed-filter-by-tags>
+          <filter-by-tags-modal v-if="filterByTagsShow" :tags="tags" @change="change"></filter-by-tags-modal>
         </aside>
       </div>
     </section>
@@ -24,11 +25,15 @@
 <script>
 import FeedPosts from '../../components/chains/feed/FeedPosts.vue'
 import FeedFilterByTags from '../../components/chains/feed/FeedFilterByTags.vue'
+import FilterByTagsModal from '../../components/chains/common/FilterByTagsModal.vue'
+const parser = require('@oneplace/blockchains-api/parser')
+import EventBus from '../../event-bus'
 
 export default {
   name: 'Feed',
   asyncData({ store, route, router }) {
     if (!store.state.feed.posts.collection.length) {
+      store.commit('filterByTags/CLEAR_ALL_DATA')
       return store
         .dispatch('feed/fetchState', {
           chain: route.params.chain,
@@ -44,14 +49,29 @@ export default {
         })
     } else return Promise.resolve()
   },
-  computed:{
-    firstFetched(){
+  computed: {
+    filterByTagsShow() {
+      return this.$store.state.filterByTags.modalShow
+    },
+    firstFetched() {
       return this.$store.state.feed.posts.firstFetched
+    },
+    tags() {
+      const posts = this.$store.state.feed.posts.collection
+      const tags = parser.getTagsFromPosts(posts)
+      tags.sort((a, b) => b.count - a.count)
+      return tags
+    }
+  },
+  methods: {
+    change({ include, exclude }) {
+      EventBus.$emit('FEED:FILTER:CHANGE', { include, exclude })
     }
   },
   components: {
     FeedPosts,
-    FeedFilterByTags
+    FeedFilterByTags,
+    FilterByTagsModal
   },
   destroyed() {
     this.$store.commit('feed/CLEAR_ALL_DATA')
diff --git a/client/src/containers/chains/Profile.vue b/client/src/containers/chains/Profile.vue
index 58b6c8f..709d5c1 100644
--- a/client/src/containers/chains/Profile.vue
+++ b/client/src/containers/chains/Profile.vue
@@ -45,7 +45,8 @@
               {{$tc('profile.following', followCount.following_count)}}
             </div>
           </div>
-          <profile-filter-by-tags></profile-filter-by-tags>
+          <profile-filter-by-tags :tags="tags"></profile-filter-by-tags>
+          <filter-by-tags-modal v-if="filterByTagsShow" :tags="tags" @change="change"></filter-by-tags-modal>
         </div>
         <profile-blog :account="account" v-if="!accountProcessing"></profile-blog>
       </div>
@@ -57,6 +58,9 @@
 import ProfileBlog from '../../components/chains/profile/ProfileBlog.vue'
 import ProfileFollowBtn from '../../components/chains/profile/ProfileFollowBtn.vue'
 import ProfileFilterByTags from '../../components/chains/profile/ProfileFilterByTags.vue'
+const parser = require('@oneplace/blockchains-api/parser')
+import FilterByTagsModal from '../../components/chains/common/FilterByTagsModal.vue'
+import EventBus from '../../event-bus'
 
 import CONSTANTS from '@oneplace/constants'
 import { mixin as onClickOutside } from 'vue-on-click-outside'
@@ -66,7 +70,8 @@ export default {
   components: {
     ProfileBlog,
     ProfileFollowBtn,
-    ProfileFilterByTags
+    ProfileFilterByTags,
+    FilterByTagsModal
   },
   mixins: [onClickOutside],
   asyncData({ store, route, router }) {
@@ -74,6 +79,7 @@ export default {
     const chain = store.state.profile.chain
     if (username !== route.params.username || chain !== route.params.chain) {
       store.commit('profile/CLEAR_ALL_DATA')
+      store.commit('filterByTags/CLEAR_ALL_DATA')
       return store
         .dispatch('profile/fetchState', {
           chain: route.params.chain,
@@ -93,7 +99,21 @@ export default {
   metaInfo() {
     return this.$metaGenerator.profile(this.account, this.$route)
   },
+  methods: {
+    change({ include, exclude }) {
+      EventBus.$emit('PROFILE:FILTER:CHANGE', { include, exclude })
+    }
+  },
   computed: {
+    filterByTagsShow() {
+      return this.$store.state.filterByTags.modalShow
+    },
+    tags() {
+      const posts = this.$store.state.profile.posts.collection
+      const tags = parser.getTagsFromPosts(posts)
+      tags.sort((a, b) => b.count - a.count)
+      return tags
+    },
     showAllTagsModal() {
       return this.$store.state.profile.tags.showAllTags
     },
diff --git a/client/src/store/index.js b/client/src/store/index.js
index ac84760..da34f63 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -6,6 +6,7 @@ import profile from './modules/profile'
 import publish from './modules/publish'
 import feed from './modules/feed'
 import tag from './modules/tag'
+import filterByTags from './modules/filterByTags'
 import state from './state'
 
 Vue.use(Vuex)
@@ -18,7 +19,8 @@ export function createStore() {
       profile: profile(),
       tag: tag(),
       publish: publish(),
-      feed: feed()
+      feed: feed(),
+      filterByTags: filterByTags()
     },
     state: state(),
     actions: require('./actions').default,
diff --git a/client/src/store/modules/filterByTags.js b/client/src/store/modules/filterByTags.js
new file mode 100644
index 0000000..0898ade
--- /dev/null
+++ b/client/src/store/modules/filterByTags.js
@@ -0,0 +1,63 @@
+import Api from '../../plugins/api'
+import CONSTANTS from '@oneplace/constants'
+import moment from 'moment'
+import Vue from 'vue'
+
+const TYPES = {
+  CLEAR_ALL_DATA: 'CLEAR_ALL_DATA',
+  CLEAR_FILTERS: 'CLEAR_FILTERS',
+  SET_MODAL_SHOW: 'SET_MODAL_SHOW',
+  ADD_TAG: 'ADD_TAG',
+  REMOVE_TAG: 'REMOVE_TAG'
+}
+
+
+function createState() {
+  return {
+    modalShow: false,
+    include: {},
+    exclude: {}
+  }
+}
+export default () => {
+  const state = createState()
+
+  const mutations = {
+    [TYPES.CLEAR_ALL_DATA](state) {
+      Vue.set(state, 'modalShow', false)
+      Vue.set(state, 'include', {})
+      Vue.set(state, 'exclude', {})
+    },
+    [TYPES.CLEAR_FILTERS](state) {
+      Vue.set(state, 'include', {})
+      Vue.set(state, 'exclude', {})
+    },
+    [TYPES.SET_MODAL_SHOW](state, flag) {
+      state.modalShow = flag
+    },
+    [TYPES.ADD_TAG](state, tag) {
+      if (!state.exclude[tag.text]) {
+        if (state.include[tag.text]) Vue.delete(state.include, tag.text)
+        else Vue.set(state.include, tag.text, true)
+      }
+      Vue.delete(state.exclude, tag.text)
+    },
+    [TYPES.REMOVE_TAG](state, tag) {
+      Vue.set(state.exclude, tag.text, true)
+      Vue.delete(state.include, tag.text)
+    }
+  }
+
+  const actions = {
+    add({commit}, {chain, username}) {
+
+    }
+  }
+
+  return {
+    namespaced: true,
+    state,
+    actions,
+    mutations
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index b16adbc..e79784e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "oneplace",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "main": "server/server.js",
   "engines": {
     "node": ">=4"