buscar productos funcionando

resources/js/app.js

@@ -24,21 +24,17 @@ files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(
 /**
  * Global data
  */
-Vue.prototype.$rootMiga = {
-                            nombre: "Categorías",
-                            href: "/productos"
-                          }
 Vue.prototype.$gdc = null
-Vue.prototype.$pedido = {
+Vue.prototype.$pedido = 
-                          id: null,
+  {id: null, nombre: null, grupo_de_compra_id: null, created_at: null, updated_at: null}
-                          nombre: null,
+Vue.prototype.$rootMiga = 
-                          grupo_de_compra_id: null,
+  {nombre: "Categorías", href: "/productos"}
-                          created_at: null,
+
-                          updated_at: null
+/**
-                        }
+ * Global methods
-Vue.prototype.$settearProducto = function(cantidad, id) {
+ */
-    Event.$emit("sync-subpedido", this.cant, this.producto.id);
+Vue.prototype.$settearProducto = 
-}
+  function(cantidad, id) { Event.$emit("sync-subpedido", this.cant, this.producto.id) }
 
 /**
  * Next, we will create a fresh Vue application instance and attach it to

resources/js/components/CategoriasContainer.vue

@@ -21,15 +21,14 @@
 		data() {
 		    return {
 		      categorias: null,
-		      visible: true,
+		      visible: true
-		      miga: this.$rootMiga
 		    }
 		  },
 		  mounted() {
 		    axios.get("/api/categorias").then(response => {
 		      this.categorias = response.data;
 		    });
-		    Event.$emit("migas-setear-como-inicio", this.miga);
+		    Event.$emit("migas-setear-como-inicio", this.$rootMiga);
 			Event.$on("categoria-seleccionada", (_) => this.visible = false)
 		  },
 		  methods: {

resources/js/components/NavBar.vue

@@ -22,12 +22,16 @@
 
       <div id="nav-bar" class="navbar-menu" :class="{'is-active':isActive}">
         <div class="navbar-end">
-            <div v-if="subpedido.id != null" class="control mt-auto mb-auto has-icons-left margin-in-burger">
+
+            <div v-if="subpedido.id != null" class="navbar-item field has-addons mt-2 mr-3">
+              <a class="button is-small" @click.capture="buscar">
+                <span class="icon">
+                  <i class="fas fa-search"></i>
+                </span>
+              </a>
               <input class="input is-small" type="text" placeholder="Harina" v-model="searchString"  @keyup.enter="buscar" >
-              <span class="icon is-small is-left">
-                <i class="fas fa-search"></i>
-              </span>
             </div>
+
             <a v-if="subpedido.id != null" class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
                 <span class="icon is-small mr-1" id="chismosa">
                   <img class="invert-in-burger" src="/assets/chismosa.png">
@@ -35,7 +39,7 @@
                 <span v-text="'$' + (subpedido == null ? 0 : subpedido.total)"></span>
             </a>
             <div class="block navbar-item">
-                <a class="button" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
+                <a id="cerrar-sesion" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                     Cerrar sesión
                 </a>
                 <slot name="logout-form"></slot>
@@ -69,6 +73,7 @@
             Event.$emit("toggle-chismosa")
           },
           buscar() {
+            if (this.isActive) this.toggleState()
             Event.$emit("migas-setear-como-inicio", this.$rootMiga)
             Event.$emit("categoria-seleccionada",'nombre',this.searchString)
           }
@@ -118,13 +123,18 @@
 p.navbar-item:empty {
   display: none;
 }
+
+#nav-bar {
+  z-index: 10;
+}
+
+#cerrar-sesion {
+  color: inherit;
+}
+
 @media (max-width: 1023px) {
   .invert-in-burger {
     filter: invert(.5);
   }
-  .margin-in-burger {
-    margin-left: .75rem;
-    margin-right: 1.5rem;
-  }
 }
 </style>

resources/js/components/NavMigas.vue

@@ -1,7 +1,12 @@
 <template>
-	<div class="notification">
+	<nav class="breadcrumb is-centered has-background-danger-light is-fixed-top" aria-label="breadcrumbs" v-show="visible">
-		{{message}}
+		<ul class="mt-4">
-	</div>
+			<li v-for="(miga, i) in migas" :key="i" :class="{'is-active': i == migaActiva}">
+				<a :href="miga.href" v-text="miga.nombre" 
+				   :class="{'has-text-danger': i != migaActiva}"></a>
+			</li>
+		</ul>
+	</nav>
 </template>
 
 <script>
@@ -14,7 +19,10 @@
 		  computed: {
 		    visible: function() {
 		      return this.migas.length > 0
-		    }
+		    },
+			migaActiva: function() { 
+				return this.migas.length-1 
+			}
 		  },
 		  mounted() {
 		    Event.$on('migas-setear-como-inicio', (miga) =>  {
@@ -35,16 +43,12 @@
 </script>
 
 <style>
-.breadcrumb a {
-	color: #cc0f35;
-}
-
 nav.breadcrumb.is-fixed-top {
-	left: 0;
 	position: fixed;
+	left: 0;
 	right: 0;
 	top: 3.25rem;
-	height: 3.25rem;
+	height: 2.75rem;
-	z-index: -10;
+	z-index: 5;
 }
 </style>

resources/js/components/ProductosContainer.vue

@@ -66,7 +66,7 @@ export default {
 	      Event.$emit("producto-seleccionado",producto);
 	    },
 		params: function(filtro,valor) {
-			let params = {paginar: this.paginar}
+			let params = { paginar: this.paginar }
 			params[filtro] = valor
 			return params
 		}

resources/views/layouts/app.blade.php

@@ -28,13 +28,7 @@
                 </form>
             </template>
         </nav-bar>
-        <nav-migas inline-template>
+        <nav-migas></nav-migas>
-            <nav class="breadcrumb is-centered has-background-danger-light is-fixed-top" aria-label="breadcrumbs" v-show="visible">
-              <ul>
-                <li v-for="(miga, i) in migas" v-bind:class="i==migas.length-1 ? 'is-active' : ''"><a :href="miga.href" v-text="miga.nombre"></a></li>
-              </ul>
-            </nav>
-        </nav-migas>
 
         <main id="main" class="py-4 has-top-padding">
             @yield('content')