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">
          {{ 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="changePhotoSet"
              />
              <span class="file-cta">
                <span class="file-label has-text-centered">
                  ↑ Choose a picture…
                </span>
              </span>
              <span class="file-name">
                {{ filename }}
              </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="
            newProduct.isValidPost() || newProduct.isValidPatch(currentProduct)
          "
        >
          <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";
import ProductDiff from "@/models/product_diff";

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

export default {
  name: "ProductEditCard",
  data: function() {
    return {
      currentProduct: new Product(this.parentProduct),
      newProduct: new ProductDiff(this.currentProduct),
      filename: ""
    };
  },
  props: {
    parentProduct: {
      type: Product,
      required: true
    }
  },
  computed: {
    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) {
        const 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) {
        // update existing
        const updatedProduct = this.$store.dispatch(
          "updateProduct",
          this.newProduct
        );
        if (updatedProduct) {
          this.currentProduct = updatedProduct;
        }
      } else {
        // new product
        const newProduct = this.$store.dispatch(
          "createProduct",
          this.newProduct
        );
        if (newProduct) {
          this.currentProduct = newProduct;
        }
      }
    },
    incrementQuantity(amount) {
      if (this.newProduct.quantity + amount >= 0) {
        this.newProduct.quantity += amount;
      }
    },
    changePhotoSet(event) {
      const file = event.target.files[0];
      if (!file) {
        return;
      }

      this.$store.dispatch("createPhotoSet", file).then(r => {
        this.filename = file.name;
        this.newProduct.photo_set = r[0].id;
      });
    }
  }
};
</script>