pedi2/public/js/productos.js

Vue.component('categorias-container', {
  template: `
    <div v-show="visible" class="container">
      <div class="columns is-multiline is-mobile">
        <div v-for="catego in categorias" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
          <div @click.capture="seleccionarCategoria(catego)" class="card" style="height:100%" >
            <div class="card-content">
              <div class="media">
                <div class="media-content" style="overflow:hidden">
                  <p class="title is-6" v-text="catego"></p>
                </div>
              </div>
            </div>
          </div><!-- END CARD -->
        </div><!-- END BLOCK COLUMN -->
      </div><!-- END COLUMNS -->
  </div><!-- END CONTAINER -->`,
  data() {
    return {
      categorias: null,
      visible: true,
      miga: {
        nombre: "Categorías",
        href: "/productos"
      }
    }
  },
  mounted() {
    axios.get("/api/categorias").then(response => {
      this.categorias = response.data;
    });
    Event.$emit("migas-setear-como-inicio",this.miga);
  },
  methods: {
    seleccionarCategoria(categoria) {
      this.visible = false;
      Event.$emit("categoria-seleccionada",categoria);
    }
  }
});

Vue.component('productos-container', {
  template: `
    <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 @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'">
              </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="card-content">
              <div class="media">
                <div class="media-content">
                  <p class="title is-6" v-text="producto.nombre"></p>
                  <p class="subtitle is-7" v-text="producto.proveedor"></p>
                  <p class="subtitle is-7">$<span v-text="producto.precio"></span></p>
                </div>
              </div>
            </div>
          </div><!-- END CARD -->
        </div><!-- END BLOCK COLUMN -->
      </div><!-- END COLUMNS -->
    </div><!-- END CONTAINER -->`,
  data() {
    return {
      productos: [],
      visible: false,
      categoria: null,
      paginar: 150
    }
  },
  computed: {
    miga: function(){
      return {
        nombre: this.categoria,
        href: "#" + this.categoria
      }
    }
  },
  mounted() {
    Event.$on('categoria-seleccionada', (categoria) =>  {
      this.categoria = categoria;

      axios.get("/api/productos", {
        params: {
          categoria: this.categoria,
          paginar: this.paginar
        }
      }).then(response => {
        this.productos = response.data.data;
      });
      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 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>`,
  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);
    });
  }
});