Info tags cerradas en pedido select si no fueron interactuadas

resources/js/components/comunes/InfoTags.vue

@@ -27,7 +27,7 @@ export default {
 
 <template>
     <div>
-        <div v-if="!show_tags" class="info-tab" @click="toggleTags">
+        <div v-if="!show_tags" class="info-tab" @click="toggleTags(true)">
             <button class="button is-borderless" type="button">
                 <span class="icon">
                     <i class="fas fa-info-circle"></i>
@@ -48,7 +48,7 @@ export default {
                         <span class="tag is-danger">{{ fechaCanasta }}</span>
                     </div>
                 </div>
-                <button class="delete" type="button" @click="toggleTags"></button>
+                <button class="delete" type="button" @click="toggleTags(true)"></button>
             </div>
         </div>
     </div>

resources/js/components/pedidos/Canasta.vue

@@ -1,6 +1,6 @@
 <script >
 import { defineComponent } from "vue";
-import { mapState } from "vuex";
+import { mapMutations, mapState } from "vuex";
 import CategoriasContainer from "./CategoriasContainer.vue";
 import ProductosContainer from "./ProductosContainer.vue";
 import Chismosa from "./Chismosa.vue";
@@ -9,7 +9,14 @@ import DevolucionesModal from "./DevolucionesModal.vue";
 export default defineComponent({
     components: { DevolucionesModal, CategoriasContainer, ProductosContainer, Chismosa },
     computed: {
-        ...mapState('ui', ["show_chismosa", "show_devoluciones"])
+        ...mapState('ui', ["show_chismosa", "show_devoluciones", "tags_interactuada"])
+    },
+    methods: {
+        ...mapMutations("ui", ["toggleTags"]),
+    },
+    mounted() {
+        if (!this.tags_interactuada)
+            this.toggleTags(false);
     }
 })
 </script>

resources/js/components/pedidos/PedidoSelect.vue

@@ -5,9 +5,9 @@
                 Pedidos MPS
             </h1>
             <p class="subtitle">
-                Bienvenidx a la aplicación de pedidos del <strong>Mercado Popular de Subsistencia</strong>
+                Bienvenidx a la aplicación de pedidos del
+                <strong>Mercado Popular de Subsistencia</strong>
             </p>
-
             <div>
                 <label class="label">Escribí el nombre de tu familia o grupo de convivencia</label>
                 <div class="columns">
@@ -16,7 +16,9 @@
                             <div class="control">
                                 <input class="input" @input="onType" v-model="searchString"/>
                             </div>
-                            <p class="help">Debe ser claro para que tus compas del barrio te identifiquen.</p>
+                            <p class="help">
+                                Debe ser clarx para que tus compas del barrio te identifiquen.
+                            </p>
                         </div>
                     </div>
                     <div class="column is-one-third buttons">
@@ -58,11 +60,11 @@ import axios from "axios";
 export default {
     name: 'PedidoSelect',
     async mounted() {
+        this.toggleTags(false);
         await this.getGrupoDeCompra();
         const sesion = await axios.get("/pedido/sesion");
-        if (sesion.data.id) {
+        if (sesion.data.id)
             await this.elegirPedido({ pedido_id: sesion.data.id });
-        }
     },
     data() {
         return {
@@ -72,13 +74,14 @@ export default {
     },
     computed: {
         ...mapState('pedido', ["grupo_de_compra"]),
-        deshabilitado: function () {
+        deshabilitado() {
             return !this.searchString?.trim()
                 || this.pedidos.some(p => p.nombre.toLowerCase() === this.searchString.toLowerCase())
         }
     },
     methods: {
         ...mapActions('pedido', ["getGrupoDeCompra", "crearPedido", "elegirPedido"]),
+        ...mapMutations("ui", ["toggleTags"]),
         async getPedidos(nombre) {
             const response = await axios.get('/api/subpedidos/',{
                 params: {
@@ -89,17 +92,19 @@ export default {
             this.pedidos = response.data;
         },
         onType() {
-            if (!this.searchString) {
-                this.setPedidos([]);
-                return;
-            }
-            this.getPedidos(this.searchString);
+            if (!this.searchString)
+                this.pedidos = [];
+            else
+                this.getPedidos(this.searchString);
         },
         async submit(pedido) {
             if (pedido)
                 await this.elegirPedido({ pedido_id: pedido.id });
             else
-                await this.crearPedido({ nombre: this.searchString, grupo_de_compra_id: this.grupo_de_compra.id });
+                await this.crearPedido({
+                    nombre: this.searchString,
+                    grupo_de_compra_id: this.grupo_de_compra.id
+                });
         },
     }
 }

resources/js/store/modules/ui.js

@@ -2,6 +2,7 @@ const state = {
     show_chismosa: false,
     show_devoluciones: false,
     show_tags: true,
+    tags_interactuada: false,
     migas: [{ nombre: 'Pedidos', action: 'pedido/resetear' }],
     canasta_actual: null,
 };
@@ -16,7 +17,9 @@ const mutations = {
     toggleDevoluciones(state) {
         state.show_devoluciones = !state.show_devoluciones;
     },
-    toggleTags(state) {
+    toggleTags(state, manual) {
+        if (manual)
+            state.tags_interactuada = true;
         state.show_tags = !state.show_tags;
     },
     addMiga(state, miga) {