path: root/iridescence/src/components/admin/ProductEditCard.vue

<template>
  <div id="productEditCard">
    <div class="card">
      <div class="card-header">
        <p class="card-header-title" v-if="currentProduct.id > 0">
          {{ currentProduct.id }}: {{ currentProduct.name }}
        </p>
      </div>
      <div class="card-content">
        <div class="field">
          <input
            class="input"
            type="text"
            placeholder="(product name)"
            v-model="newProduct.name"
          />
        </div>
        <div class="field">
          <input
            class="input"
            type="text"
            placeholder="(product category)"
            v-model="newProduct.category_path"
          />
        </div>
        <div class="field has-addons">
          <p class="control">
            <a class="button is-static">
              #
            </a>
          </p>
          <p class="control is-expanded">
            <input
              class="input"
              type="text"
              placeholder="inventory (quantity)"
              v-model="newProductQuantity"
            />
          </p>
          <div class="control">
            <a
              class="button is-info is-outlined"
              @click="incrementQuantity(-1)"
            >
              ▼
            </a>
          </div>
          <div class="control">
            <a class="button is-info is-outlined" @click="incrementQuantity(1)">
              ▲
            </a>
          </div>
        </div>
        <div class="field has-addons">
          <p class="control">
            <a class="button is-static">
              $
            </a>
          </p>
          <p class="control is-expanded">
            <input
              class="input"
              type="text"
              placeholder="price"
              v-model="newProductPrice"
            />
          </p>
        </div>
        <div class="field">
          <div class="file has-name is-boxed is-fullwidth">
            <label class="file-label">
              <input
                class="file-input"
                type="file"
                name="image"
                accept=".jpg,.jpeg,.JPG,.JPEG"
                @change="previewFiles"
              />
              <span class="file-cta">
                <span class="file-label has-text-centered">
                  ↑ Choose a picture…
                </span>
              </span>
              <span class="file-name">
                {{ newProduct.photo_set }}
              </span>
            </label>
          </div>
        </div>
        <div class="field">
          <textarea
            class="textarea"
            type="text"
            placeholder="(product description)"
            v-model="newProduct.description"
          >
          </textarea>
        </div>
        <div class="field">
          <label class="checkbox">
            <input type="checkbox" v-model="newProduct.featured" />
            Featured?
          </label>
        </div>
      </div>
      <transition
        enter-active-class="animate__animated animate__fadeIn"
        leave-active-class="animate__animated animate__fadeOut"
      >
        <div class="card-footer" v-if="isDifferent && isValid">
          <div class="card-footer-item">
            <button class="button is-primary is-fullwidth" @click="saveProduct">
              Save
            </button>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import Product from "../../models/product";

const dollarRe = /^\$?(\d+)\.(\d{2})/gm;

export default {
  name: "ProductEditCard",
  data: function() {
    return {
      newProduct: new Product(this.currentProduct)
    };
  },
  props: {
    currentProduct: {
      type: Product,
      required: true
    }
  },
  watch: {
    currentProduct() {
      // TODO: necessary?
      this.newProduct = new Product(this.currentProduct);
    }
  },
  computed: {
    isDifferent() {
      return this.newProduct.isDifferent(this.currentProduct);
    },
    isValid() {
      return this.newProduct.isValid();
    },
    newProductQuantity: {
      get: function() {
        return this.newProduct.quantity;
      },
      set: function(val) {
        if (!isNaN(val)) {
          this.newProduct.quantity = 1 * val;
        }
      }
    },
    newProductPrice: {
      get: function() {
        return (this.newProduct.cents / 100).toFixed(2);
      },
      set: function(val) {
        let groups = dollarRe.exec(val);
        if (groups && groups[1] && groups[2]) {
          this.newProduct.cents = 100 * groups[1] + 1 * groups[2];
        }
      }
    }
  },
  methods: {
    saveProduct() {
      if (this.newProduct.id == 0) {
        // new product
        this.$store.dispatch("createProduct", this.newProduct);
      } else {
        // update existing
        this.$store.dispatch("updateProduct", this.newProduct);
      }
    },
    incrementQuantity(amount) {
      if (this.newProduct.quantity + amount >= 0) {
        this.newProduct.quantity += amount;
      }
    },
    async previewFiles(event) {
      let file = event.target.files[0];
      if (!file) {
        return;
      }

      const fd = new FormData();
      fd.append(file.name, file);

      const response = await fetch("http://localhost:8000/photos", {
        method: "POST",
        body: fd
      });

      console.log(response);
    }
  }
};
</script>