[vuestorefront#44] Use vuex ui-store instead of global events from ev…

…ent-bus in UI interactionse

src/components/core/Overlay.vue

@@ -4,29 +4,18 @@
 </template>
 
 <script>
-import EventBus from 'src/event-bus/event-bus'
+import { mapState } from 'vuex'
 
 export default {
   name: 'overlay',
-  data () {
-    return {
-      isVisible: false
-    }
-  },
-  created () {
-    const self = this
-    EventBus.$on('toggle-overlay', () => {
-      self.isVisible = !self.isVisible
-    })
-    EventBus.$on('hide-overlay', () => {
-      self.isVisible = false
-    })
-  },
+  computed: mapState({
+    isVisible: state => state.ui.overlay
+  }),
   methods: {
     onClick () {
-      EventBus.$emit('hide-overlay')
-      EventBus.$emit('hide-sidebar-menu')
-      EventBus.$emit('hide-microcart')
+      this.$store.commit('setOverlay', false)
+      this.$store.commit('setSidebar', false)
+      this.$store.commit('setMicrocart', false)
     }
   }
 }
@@ -42,4 +31,4 @@ export default {
     background: rgba(0,0,0,.4);
     z-index: 1;
 }
-</style>
+</style>

src/components/core/blocks/Header/HamburgerIcon.vue

@@ -1,11 +1,21 @@
 <template>
-  <div class="hamburger-icon">
+  <div class="hamburger-icon" @click="toggleSidebarMenu">
     Core Hamburger
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
-  name: 'hamburger-icon'
+  name: 'hamburger-icon',
+  computed: mapState({
+    isOpen: state => state.ui.sidebar
+  }),
+  methods: {
+    toggleSidebarMenu () {
+      this.$store.commit('setSidebar', !this.isOpen)
+    }
+  }
 }
-</script>
+</script>

src/components/core/blocks/Header/MicrocartIcon.vue

@@ -7,13 +7,23 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'microcart-icon',
   computed: {
     totalItems () {
       // return this.$store.getters.totals.quantity
       return 3
+    },
+    ...mapState({
+      isOpen: state => state.ui.microcart
+    })
+  },
+  methods: {
+    toggleMicrocart () {
+      this.$store.commit('setMicrocart', !this.isOpen)
     }
   }
 }
-</script>
+</script>

src/components/core/blocks/Microcart/Microcart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="microcart">
+  <div class="microcart" :class="{ active: isOpen }">
     Core Microcart
     <!-- Items in cart displayed as a list with quantitys for each item -->
     <ul>
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 
 export default {
   name: 'microcart',
@@ -22,6 +22,9 @@ export default {
     this.$store.dispatch('cart/load') // load cart from the indexedDb
   },
   methods: {
+    closeMicrocart () {
+      this.$store.commit('setMicrocart', false)
+    },
     ...mapActions({ 'removeFromCart': 'cart/removeItem' })
   },
   computed: {
@@ -31,12 +34,21 @@ export default {
     payment () {
       return this.$store.state.cart.payment
     },
+    subtotal () {
+      return this.$store.getters['cart/totals'].subtotal
+    },
+    total: function () {
+      return this.subtotal + this.shipping.cost + this.payment.cost
+    },
     // total () {
     //   return this.$store.getters['cart/totals']
     // },
     items () {
       return this.$store.state.cart.cartItems
-    }
+    },
+    ...mapState({
+      isOpen: state => state.ui.microcart
+    })
   }
 }
 </script>

src/components/core/blocks/SidebarMenu/SidebarMenu.vue

@@ -1,11 +1,40 @@
 <template>
-  <div class="sidebar-menu">
-    Core Sidebar Menu
+  <div class="sidebar-menu" :class="{ active: isOpen }">
+    <ul>
+      <li @click="closeMenu" v-for='category in categories'>
+        <router-link v-if='category.product_count >0 || category.children_data.length>0' :to="{ name: 'category', params: { id: category.id, slug: category.slug }}">{{ category.name }}</router-link>
+        <ul v-if="category.children_data">
+          <li @click="closeMenu" v-for='subcat in category.children_data'  style="display: none">
+            <router-link :to="{ name: 'category', params: { id: subcat.id, slug: subcat.slug }}">{{ subcat.name }}</router-link>
+        </li>
+      </ul>
+    </li>
+    </ul>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
-  name: 'sidebar-menu'
+  name: 'sidebar-menu',
+  computed: {
+    categories () {
+      return this.$store.state.category.list.filter((op) => {
+        return op.level === 2 // display only the root level (level =1 => Default Category)
+      })
+    },
+    ...mapState({
+      isOpen: state => state.ui.sidebar
+    })
+  },
+  created () {
+    this.$store.dispatch('category/list', {})
+  },
+  methods: {
+    closeMenu () {
+      this.$store.commit('setSidebar', false)
+    }
+  }
 }
-</script>
+</script>

src/store/index.js

@@ -47,6 +47,7 @@ import cart from './modules/cart'
 import user from './modules/user'
 import payment from './modules/payment'
 import shipping from './modules/shipping'
+import ui from './modules/ui-store'
 
 Vue.use(Vuex)
 
@@ -93,7 +94,8 @@ export default new Vuex.Store({
     cart,
     user,
     payment,
-    shipping
+    shipping,
+    ui
   },
   state,
   mutations,

src/store/modules/ui-store.js

@@ -0,0 +1,30 @@
+export default {
+  // TO-DO: Make ui-stores inheritance in themes from default ui-store like pages/components
+  state: {
+    sidebar: false,
+    microcart: false,
+    overlay: false
+  },
+  getters: {
+    ui (state) {
+      return {
+        sidebar: state.sidebar,
+        microcart: state.microcart,
+        overlay: state.overlay
+      }
+    }
+  },
+  mutations: {
+    setOverlay (state, action) {
+      state.overlay = action === true
+    },
+    setMicrocart (state, action) {
+      state.microcart = action === true
+      state.overlay = action === true
+    },
+    setSidebar (state, action) {
+      state.sidebar = action === true
+      state.overlay = action === true
+    }
+  }
+}

src/themes/default/components/core/blocks/Header/HamburgerIcon.vue

@@ -6,15 +6,8 @@
 
 <script>
 import { coreComponent } from 'lib/themes'
-import EventBus from 'src/event-bus/event-bus'
 
 export default {
-  methods: {
-    toggleSidebarMenu () {
-      EventBus.$emit('toggle-sidebar-menu')
-      EventBus.$emit('toggle-overlay')
-    }
-  },
   mixins: [coreComponent('core/blocks/Header/HamburgerIcon')]
 }
 </script>

src/themes/default/components/core/blocks/Header/MicrocartIcon.vue

@@ -6,20 +6,13 @@
 
 <script>
 import { coreComponent } from 'lib/themes'
-import EventBus from 'src/event-bus/event-bus'
 
 export default {
   data () {
     return {
       total: 3
     }
   },
-  methods: {
-    toggleMicrocart () {
-      EventBus.$emit('toggle-microcart')
-      EventBus.$emit('toggle-overlay')
-    }
-  },
   mixins: [coreComponent('core/blocks/Header/MicrocartIcon')]
 }
 </script>

src/themes/default/components/core/blocks/Microcart/Microcart.vue

@@ -55,38 +55,11 @@
 
 <script>
 import { coreComponent } from 'lib/themes'
-import EventBus from 'src/event-bus/event-bus'
 import Product from './Product'
 
 export default {
-  data () {
-    return {
-      isOpen: false
-    }
-  },
-  computed: {
-    subtotal () {
-      return this.$store.getters['cart/totals'].subtotal
-    },
-    total: function () {
-      return this.subtotal + this.shipping.cost + this.payment.cost
-    }
-  },
   created () {
-    const self = this
-    EventBus.$on('toggle-microcart', () => {
-      self.isOpen = !self.isOpen
-    })
-    EventBus.$on('hide-microcart', () => {
-      self.isOpen = false
-    })
-    console.log('CI  ' + self.cartItems)
-  },
-  methods: {
-    closeMicrocart () {
-      this.isOpen = false
-      EventBus.$emit('toggle-overlay')
-    }
+    console.log('CI  ' + this.cartItems)
   },
   components: {
     Product

src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue

@@ -41,37 +41,7 @@
 <script>
 import { coreComponent } from 'lib/themes'
 
-import EventBus from 'src/event-bus/event-bus'
-
 export default {
-  data () {
-    return {
-      isOpen: false
-    }
-  },
-  computed: {
-    categories () {
-      return this.$store.state.category.list.filter((op) => {
-        return op.level === 2 // display only the root level (level =1 => Default Category)
-      })
-    }
-  },
-  created () {
-    const self = this
-    EventBus.$on('toggle-sidebar-menu', () => {
-      self.isOpen = !self.isOpen
-    })
-    EventBus.$on('hide-sidebar-menu', () => {
-      self.isOpen = false
-    })
-    this.$store.dispatch('category/list', {})
-  },
-  methods: {
-    closeMenu () {
-      this.isOpen = false
-      EventBus.$emit('toggle-overlay')
-    }
-  },
   mixins: [coreComponent('core/blocks/SidebarMenu/SidebarMenu')]
 }
 </script>