Cambios de nombres, y movida logica de chismosa a store de vuex

resources/js/components/comunes/NavBar.vue

@@ -12,7 +12,7 @@
             <chismosa-dropdown
                 v-if="pedidoDefinido"
                 class="hide-above-1023"
-                id="mobile">
+                ariaControls="mobile">
             </chismosa-dropdown>
             <a role="button" class="navbar-burger" :class="{'is-active':burgerActiva}" aria-label="menu"
                aria-expanded="false" data-target="nav-bar" @click="toggleBurger">
@@ -35,7 +35,7 @@
                 <chismosa-dropdown
                     v-if="pedidoDefinido"
                     class="hide-below-1024"
-                    id="wide">
+                    ariaControls="wide">
                 </chismosa-dropdown>
                 <div class="block navbar-item">
                     <a onclick="event.preventDefault(); document.getElementById('logout-form').submit();"

resources/js/components/pedidos/ChismosaDropdown.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="dropdown is-right navbar-item" :class="{'is-active':activa}">
+    <div class="dropdown is-right navbar-item" :class="{'is-active': show_chismosa}">
         <div class="dropdown-trigger">
-            <a class="text-a" aria-haspopup="true" :aria-controls="id" @click.capture="toggle">
+            <a class="text-a" aria-haspopup="true" :aria-controls="ariaControls" @click.capture="toggleChismosa">
             <span class="icon is-small mr-1">
                 <img src="/assets/chismosa.png">
             </span>
@@ -13,33 +13,23 @@
 
 <script>
 import Chismosa from './Chismosa.vue'
-import { mapState } from "vuex";
+import { mapMutations, mapState } from "vuex";
 export default {
     components: {
         Chismosa
     },
     props: {
-        id: {
+        ariaControls: {
             type: String,
             required: true
         }
     },
-    data() {
-        return {
-            activa: false,
-        }
-    },
     computed: {
         ...mapState('pedido',["total"]),
-    },
-    mounted() {
-        Event.$on('pedido-actualizado', this.actualizar);
+        ...mapState('ui',["show_chismosa"]),
     },
     methods: {
-        toggle() {
-            this.activa = !this.activa;
-            Event.$emit("toggle-chismosa", this.activa);
-        },
+        ...mapMutations('ui',["toggleChismosa"]),
     },
 }
 </script>

resources/js/components/pedidos/Productos.vue

@@ -4,32 +4,27 @@ import ProductosContainer from "./ProductosContainer.vue";
 import Chismosa from "./Chismosa.vue";
 import { defineComponent } from "vue";
 import SubpedidoSelect from "./SubpedidoSelect.vue";
-import { mapActions } from "vuex";
+import { mapActions, mapState } from "vuex";
 
 export default defineComponent({
     components: { SubpedidoSelect, CategoriasContainer, ProductosContainer, Chismosa },
-    data() {
-        return {
-            chismosaActiva: false,
-        }
+    computed: {
+        ...mapState('ui',["show_chismosa"])
     },
     methods: {
         ...mapActions('productos',["init"]),
     },
     async mounted() {
         await this.init();
-        Event.$on('toggle-chismosa', (activa) => {
-            this.chismosaActiva = activa;
-        });
     },
 })
 </script>
 
 <template>
     <div class="columns ml-3 mr-3" v-else>
-        <categorias-container :class="chismosaActiva ? 'hide-below-1024' : ''"></categorias-container>
-        <productos-container :class="chismosaActiva ? 'hide-below-1024' : ''"></productos-container>
-        <chismosa v-show="chismosaActiva"></chismosa>
+        <categorias-container :class="show_chismosa ? 'hide-below-1024' : ''"></categorias-container>
+        <productos-container :class="show_chismosa ? 'hide-below-1024' : ''"></productos-container>
+        <chismosa v-show="show_chismosa"></chismosa>
     </div>
 </template>
 

resources/js/store/index.js

@@ -5,6 +5,7 @@ import login from "./modules/login";
 import pedido from "./modules/pedido";
 import barrio from "./modules/barrio";
 import productos from "./modules/productos";
+import ui from "./modules/ui";
 
 Vue.use(Vuex);
 
@@ -15,5 +16,6 @@ export default new Vuex.Store({
         pedido,
         barrio,
         productos,
+        ui,
     },
 });

resources/js/store/modules/ui.js

@@ -0,0 +1,19 @@
+const state = {
+    show_chismosa: false,
+    show_devoluciones: false,
+};
+
+const mutations = {
+    toggleChismosa(state) {
+        state.show_chismosa = !state.show_chismosa;
+    },
+    toggleDevoluciones(state) {
+        state.show_devoluciones = !state.show_devoluciones;
+    },
+};
+
+export default {
+    namespaced: true,
+    state,
+    mutations,
+};