Agregada infoTags y sacados datos de canasta de la nav bar

resources/js/components/AppMain.vue

@@ -4,9 +4,10 @@ import { mapActions, mapState } from "vuex";
 import ComisionesBody from "./comisiones/Body.vue";
 import AdminBody from "./admin/Body.vue";
 import PedidosBody from "./pedidos/Body.vue";
+import InfoTags from "./comunes/InfoTags.vue";
 export default {
     name: 'Main',
-    components: { ComisionesBody, AdminBody, PedidosBody, NavBar },
+    components: { InfoTags, ComisionesBody, AdminBody, PedidosBody, NavBar },
     computed: {
         ...mapState("login", ["rol"]),
     },
@@ -25,6 +26,7 @@ export default {
         <pedidos-body v-if="rol === 'barrio'"></pedidos-body>
         <admin-body v-if="rol === 'admin_barrio'"></admin-body>
         <comisiones-body v-if="rol === 'comision'"></comisiones-body>
+        <info-tags></info-tags>
     </div>
 </template>
 

resources/js/components/comunes/InfoTags.vue

@@ -0,0 +1,90 @@
+<script>
+import { mapActions, mapState } from "vuex";
+
+export default {
+    name: "InfoTags",
+    computed: {
+        ...mapState("ui", ["canasta_actual"])
+    },
+    methods: {
+        ...mapActions("ui", ["getCanastaActual"]),
+    },
+    async mounted() {
+        await this.getCanastaActual();
+        this.fechaCanasta = new Date(this.canasta_actual.fecha)
+            .toLocaleDateString('es-UY');
+        this.nombreCanasta = this.canasta_actual.nombre;
+    },
+    data() {
+        return {
+            nombreCanasta: "",
+            fechaCanasta: "",
+            visible: true,
+        }
+    },
+}
+</script>
+
+<template>
+    <div>
+        <div v-if="!visible" class="info-tab" @click="visible = true">
+            <button class="button is-borderless" type="button">
+                <span class="icon">
+                    <i class="fas fa-info-circle"></i>
+                </span>
+            </button>
+        </div>
+        <div v-if="visible" class="box sticky-tags">
+            <div class="field is-grouped is-grouped-multiline">
+                <div class="control">
+                    <div class="tags has-addons">
+                        <span class="tag">Canasta</span>
+                        <span class="tag is-danger">{{ nombreCanasta }}</span>
+                    </div>
+                </div>
+                <div class="control">
+                    <div class="tags has-addons">
+                        <span class="tag">Actualizada</span>
+                        <span class="tag is-danger">{{ fechaCanasta }}</span>
+                    </div>
+                </div>
+                <button class="delete" type="button" @click="visible = false"></button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.sticky-tags {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    z-index: 50;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    max-width: 90vw;
+}
+
+.is-borderless {
+    border: 0;
+    background: none;
+    box-shadow: none;
+}
+
+.info-tab {
+    position: fixed;
+    right: -0.1rem;
+    bottom: 1rem;
+    z-index: 51;
+    transform: translateX(10%);
+    transition: transform 0.3s ease;
+}
+
+.info-tab button {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+    background-color: white;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 0.5rem 0.75rem;
+}
+</style>

resources/js/components/comunes/NavBar.vue

@@ -4,13 +4,8 @@
             <a class="navbar-item" href="https://mps.org.uy">
                 <img src="/assets/logoMPS.png" height="28">
             </a>
-            <div class="navbar-item hide-below-1024">
-                <p>
-                    {{ `Canasta actual: ${nombreCanasta} - Actualizada: ${fechaCanasta}`}}
-                </p>
-                <p class="ml-2" v-if="pedidoDefinido">
-                    {{ `- Núcleo: ${nombre} - Barrio: ${grupo_de_compra.nombre}` }}
-                </p>
+            <div class="navbar-item hide-below-1024" v-if="pedidoDefinido">
+                <p>{{ `Barrio: ${grupo_de_compra.nombre} - Núcleo: ${nombre}` }}</p>
             </div>
             <chismosa-dropdown
                 v-if="pedidoDefinido"
@@ -69,12 +64,10 @@ export default {
         ...mapGetters('pedido', ["pedidoDefinido"]),
         ...mapState('pedido', ["nombre"]),
         ...mapState('pedido', ["grupo_de_compra"]),
-        ...mapState('ui', ["canasta_actual"])
     },
     methods: {
         ...mapActions('productos', ["filtrarProductos"]),
         ...mapMutations('ui', ["addMiga", "popUltimaBusqueda"]),
-        ...mapActions('ui', ["getCanastaActual"]),
         toggleBurger() {
             this.burgerActiva = !this.burgerActiva
         },
@@ -86,12 +79,6 @@ export default {
             this.addMiga({ nombre: this.searchString });
         }
     },
-    async mounted() {
-        await this.getCanastaActual();
-        this.fechaCanasta = new Date(this.canasta_actual.fecha)
-            .toLocaleDateString('es-UY');
-        this.nombreCanasta = this.canasta_actual.nombre;
-    }
 };
 </script>