Detalles de producto

public/js/app.js

@@ -62,6 +62,9 @@ Vue.component('nav-migas', {
     Event.$on('migas-reset', () =>  {
       this.migas = [];
     });
+    Event.$on('migas-pop', () =>  {
+      this.migas.pop();
+    });
   }
 });
 

public/js/productos.js

@@ -44,7 +44,7 @@ Vue.component('productos-container', {
     <div v-show="visible" class="container">
       <div class="columns is-multiline is-mobile">
         <div v-for="producto in productos" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
-          <div class="card" style="height:100%">
+          <div @click.capture="seleccionarProducto(producto)" class="card" style="height:100%">
             <div class="card-image">
               <figure class="image is-4by3">
                 <img v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'">
@@ -100,5 +100,72 @@ Vue.component('productos-container', {
       this.visible = true;
       Event.$emit("migas-agregar",this.miga);
     });
+  },
+  methods: {
+    seleccionarProducto(producto) {
+      Event.$emit("producto-seleccionado",producto);
+    }
+  }
+});
+
+Vue.component('producto-container', {
+  template: `
+    <div v-bind:class="visible ? 'is-active modal' : 'modal'">
+      <div class="modal-background"></div>
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title" v-text="producto.nombre"></p>
+          <button class="delete" aria-label="close" @click.capture="cerrar"></button>
+        </header>
+        <section class="modal-card-body">
+          <div class="card-image">
+              <figure class="image is-4by3">
+                <img v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'">
+              </figure>
+              <figure v-show="producto.nacional" class="image icono is-32x32">
+                    <img src="/assets/uruguay.png">
+              </figure>
+              <figure v-show="producto.economia_solidaria" class="image icono is-32x32">
+                <img src="/assets/solidaria.png">
+              </figure>
+            </div>
+            <div class="media-content">
+              <p class="title is-4" v-text="producto.proveedor"></p>
+              <p class="subtitle is-4">$<span v-text="producto.precio"></span></p>
+              <p class="subtitle is-5"><span v-text="producto.descripcion"></span></p>
+            </div>
+        </section>
+        <footer class="modal-card-foot">
+          <button class="button is-success">Agregar a la chismosa</button>
+          <button class="button" @click.capture="cerrar">Cancelar</button>
+        </footer>
+      </div>
+    </div>`,
+  data() {
+    return {
+      producto: null,
+      visible: false
+    }
+  },
+  computed: {
+    miga: function(){
+      return {
+        nombre: this.producto.nombre,
+        href: "#" + this.producto.nombre
+      }
+    }
+  },
+  methods: {
+    cerrar() {
+      this.visible = false;
+      Event.$emit("migas-pop");
+    }
+  },
+  mounted() {
+    Event.$on('producto-seleccionado', (producto) =>  {
+      this.producto = producto;
+      this.visible = true;
+      Event.$emit("migas-agregar",this.miga);
+    });
   }
 });

resources/views/productos.blade.php

@@ -7,6 +7,7 @@
 @section('content')
 <categorias-container></categorias-container>
 <productos-container></productos-container>
+<producto-container></producto-container>
 @endsection
 
 @section('scripts')