pedi2/resources/js/components/ProductoModal.vue

<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 v-show="producto.nacional" class="image icono is-32x32" style="z-index:10">
                      <img src="/assets/uruguay.png">
                  </figure>
                  <figure v-show="producto.economia_solidaria" class="image icono is-32x32" style="z-index:10">
                      <img src="/assets/solidaria.png">
                  </figure>
                  <figure class="image is-4by3">
                      <img
                          v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.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-6"><span v-show="producto.apto_veganxs">Apto para veganxs. </span><span v-show="producto.apto_celiacxs">Apto para celíacxs.</span></p>
                  <p class="subtitle is-5"><span v-text="producto.descripcion"></span></p>
                  <div class="field has-addons is-centered is-thin-centered">
                      <p class="control">
                          <button class="button" @click="cant !== 0 ? cant-- : cant">
                      <span class="icon is-small">
                        <!-- Habría que ver de poner un ícono de - -->
                      </span>
                              <span>-</span>
                          </button>
                      </p>
                      <p class="control">
                          <input id="cantidad" class="input" type="number" v-model.number="cant" style="text-align: center">
                      </p>
                      <p class="control">
                          <button class="button" @click="cant++">
                      <span class="icon is-small">
                        <!-- Habría que ver de poner un ícono de + -->
                      </span>
                              <span>+</span>
                          </button>
                      </p>
                  </div>
              </div>
          </section>
          <footer class="modal-card-foot">
              <!-- Habría que ver si cambiar el botón cuando al cantidad es 0 -->
              <button class="button is-success" :disabled="cant <= 0" @click="agregarProducto">Aceptar</button>
              <button class="button" @click.capture="cerrar">Cancelar</button>
          </footer>
      </div>
      </div>
</template>

<script>
	export default {
		data() {
		    return {
		      producto: null,
		      visible: false,
		      cant: 0
		    }
		  },
		  computed: {
		    miga: function(){
		      return {
		        nombre: this.producto.nombre,
		        href: "#" + this.producto.nombre
		      }
		    }
		  },
		  methods: {
		    cerrar() {
		        this.cant = 0;
		        this.visible = false;
		        Event.$emit("migas-pop");
		    },
		    agregarProducto() {
		        if (this.cant < 0) alert("No se puede agregar cantidades negativas")
		        else if (!Number.isInteger(this.cant)) alert("Las cantidades deben ser números enteros")
		        else {
		            Event.$emit('sync-subpedido',this.cant, this.producto.id);
		            this.cerrar();
		        }
		    }
		  },
		  mounted() {
		    Event.$on('producto-seleccionado', (producto) =>  {
		      this.producto = producto;
		      this.visible = true;
		      Event.$emit("migas-agregar",this.miga);
		    });
		  }
	}
</script>

<style>
	figure.image.icono {
	    float: right;
	    margin: 4px;
	}

	.is-thin-centered {
	    width: 50%;
	    margin-left: auto;
	    margin-right: auto;
	}
</style>