path: root/iridescence/src/components/ProductDetail.vue

<template>
  <div id="productDetail">
    <div class="modal is-active">
      <div class="modal-background"></div>
      <div class="modal-content">
        <div class="card">
          <div class="card-image">
            <figure class="image ">
              <a target="_blank" :href="fullsize">
                <img :src="base" :alt="name" title="Click for fullsize" />
              </a>
            </figure>
          </div>

          <div class="card-content">
            <div class="content">
              <p class="title">
                {{ name }}
              </p>
              <p class="subtitle">
                {{ dollars }}
              </p>
              <p class="subtitle">{{ stock }}</p>
            </div>

            <div class="content">
              {{ description }}
            </div>
          </div>
        </div>
      </div>
      <div class="modal-close is-large"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductDetail",
  props: {
    id: Number,
    name: String,
    quantity: Number,
    cents: Number,
    photo_base: String,
    photo_fullsize: String,
    description: String
  },
  computed: {
    stock() {
      if (this.quantity == 0) {
        return "Made to order";
      } else {
        return [this.quantity, "in stock"].join(" ");
      }
    },
    dollars() {
      return "$ " + (this.cents / 100).toFixed(2);
    },
    base() {
      return process.env.VUE_APP_IMAGE_ROOT + "/" + this.photo_base;
    },
    fullsize() {
      return process.env.VUE_APP_IMAGE_ROOT + "/" + this.photo_fullsize;
    }
  }
};
</script>