summaryrefslogblamecommitdiff
path: root/iridescence/src/components/admin/ProductEditCard.vue
blob: 2784fc943a92d04b32937ec91b25c1a9655845eb (plain) (tree)
1
2
3
4
5
6
7
8

                            




                                                                  
            




                                
                                        


                                     





                                        
                                         





                                                
              
                               



                                                



                               
                                                                                



                 





                                        
                                         







                                       
                           


















                                                           










                                                                   
                                               



                                            






                                        
            









                                                                                
              
                   
          



           

                                        




                          







                                                           

                       


          
                     



                    











                                                                           
             
                   
                                
              






                                                                         
        
      







                                         



















                                                                  



                   






                                                               




                                                   
      
                               




                                       

                                 
 



                                                                    
 
                            



         
<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 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.imgPath }}
              </span>
            </label>
          </div>
        </div>
        <div class="field">
          <label class="checkbox">
            <input type="checkbox" v-model="newProduct.featured" />
            Featured?
          </label>
        </div>
        <div class="field">
          <textarea
            class="textarea"
            type="text"
            placeholder="(product description)"
            v-model="newProduct.description"
          >
          </textarea>
        </div>
        <progress
          class="progress is-primary"
          v-bind:value="fileProgress"
          max="100"
          v-if="fileProgress < 100"
          >{{ fileProgress }}%</progress
        >
      </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>
const dollarRe = /^\$?(\d+)\.(\d{2})/gm;

export default {
  name: "ProductEditCard",
  data: function() {
    return {
      newProduct: {
        id: this.currentProduct.id,
        name: this.currentProduct.name,
        quantity: this.currentProduct.quantity,
        cents: this.currentProduct.cents,
        imgPath: this.currentProduct.imgPath,
        description: this.currentProduct.description,
        featured: this.currentProduct.featured,
        categories: this.currentProduct.categories.slice(0)
      },
      fileProgress: 100
    };
  },
  props: {
    currentProduct: {
      type: Object,
      required: true
    }
  },
  watch: {
    currentProduct() {
      this.newProduct.id = this.currentProduct.id;
      this.newProduct.name = this.currentProduct.name;
      this.newProduct.quantity = this.currentProduct.quantity;
      this.newProduct.cents = this.currentProduct.cents;
      this.newProduct.imgPath = this.currentProduct.imgPath;
      this.newProduct.description = this.currentProduct.description;
      this.newProduct.featured = this.currentProduct.featured;
      this.newProduct.categories = this.currentProduct.categories.slice(0);
    }
  },
  computed: {
    isDifferent() {
      // TODO: check categories!
      return (
        this.newProduct.id != this.currentProduct.id ||
        this.newProduct.name != this.currentProduct.name ||
        this.newProduct.quantity != this.currentProduct.quantity ||
        this.newProduct.cents != this.currentProduct.cents ||
        this.newProduct.imgPath != this.currentProduct.imgPath ||
        this.newProduct.description != this.currentProduct.description ||
        this.newProduct.featured != this.currentProduct.featured
      );
    },
    isValid() {
      return (
        this.newProductPrice > 0 &&
        this.newProduct.name != "" &&
        this.newProduct.imgPath != "" &&
        this.newProduct.description != ""
      );
    },
    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>