Centralizada logica para mostrar categorias o productos

resources/js/components/pedidos/Canasta.vue

@@ -1,6 +1,6 @@
 <script >
 import { defineComponent } from "vue";
-import { mapMutations, mapState } from "vuex";
+import { mapGetters, mapMutations, mapState } from "vuex";
 import CategoriasContainer from "./CategoriasContainer.vue";
 import ProductosContainer from "./ProductosContainer.vue";
 import Chismosa from "./Chismosa.vue";
@@ -9,7 +9,8 @@ import DevolucionesModal from "./DevolucionesModal.vue";
 export default defineComponent({
     components: { DevolucionesModal, CategoriasContainer, ProductosContainer, Chismosa },
     computed: {
-        ...mapState('ui', ["show_chismosa", "show_devoluciones", "tags_interactuada"])
+        ...mapState('ui', ["show_chismosa", "show_devoluciones", "tags_interactuada"]),
+        ...mapGetters('productos', ["mostrarProductos"]),
     },
     methods: {
         ...mapMutations("ui", ["toggleTags"]),
@@ -23,8 +24,8 @@ export default defineComponent({
 
 <template>
     <div class="columns ml-3 mr-3" v-else>
-        <categorias-container :class="show_chismosa ? 'hide-below-1024' : ''"/>
-        <productos-container :class="show_chismosa ? 'hide-below-1024' : ''"/>
+        <productos-container v-if="mostrarProductos" :class="show_chismosa ? 'hide-below-1024' : ''"/>
+        <categorias-container v-else :class="show_chismosa ? 'hide-below-1024' : ''"/>
         <devoluciones-modal v-show="show_devoluciones"/>
     </div>
 </template>

resources/js/components/pedidos/CategoriasContainer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="visible" class="column">
+    <div class="column">
         <div ref="categorias"
              class="columns is-multiline is-mobile"
             :class="{ 'align-last-left': isLastRowIncomplete }">
@@ -28,9 +28,6 @@ export default {
     computed: {
         ...mapState('productos', ["categorias", "filtro"]),
         ...mapState('ui', ["show_chismosa"]),
-        visible() {
-            return this.filtro === null;
-        }
     },
     methods: {
         ...mapActions('productos', ["seleccionarCategoria"]),

resources/js/components/pedidos/ProductosContainer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="visible" class="column">
+    <div class="column">
         <div ref="productos"
              class="columns is-multiline is-mobile"
              :class="{ 'align-last-left': isLastRowIncomplete }">
@@ -21,9 +21,6 @@ export default {
     computed: {
         ...mapState('productos', ["productos", "filtro"]),
         ...mapState('ui', ["show_chismosa"]),
-        visible() {
-            return this.filtro !== null;
-        },
         miga: function () {
             return {
                 nombre: this.filtro.valor,

resources/js/store/modules/productos/index.ts

@@ -49,9 +49,16 @@ const actions = {
     }
 };
 
+const getters = {
+    mostrarProductos() {
+        return state.filtro !== undefined;
+    }
+};
+
 export default {
     namespaced: true,
     state,
     mutations,
     actions,
+    getters,
 };