frontend/src/views/AdminCreateItem.vue

<template>
  <main class="columns">
    <div class="column is-5">
      <h1 class="title" v-if="createType === 0">
        Uploading a hat
      </h1>
      <p v-if="createType === 0">Please contact Troplo if you do not have the required assets for uploading this item type.</p>
      Name:
      <b-input :value="'debug'"
               v-model="item.name"
               maxlength="30">
      </b-input>
      Description:
      <b-input v-model="item.description" maxlength="150" type="textarea">

      </b-input>
      Options:<br>
      <b-switch v-model="item.limited" v-if="$store.state.user.admin">
        Limited Edition
      </b-switch>
      <div v-if="item.limited && $store.state.user.admin">
        Quantity allowed (0 for unlimited):
        <b-numberinput v-model="item.quantity"></b-numberinput>
      </div>
      <br>
      <b-switch v-model="item.onSale">
        On sale
      </b-switch>
      <br>
      <div v-if="item.onSale">
        On sale price:
        <b-input v-model="item.onSalePrice" v-if="item.onSale"></b-input>
        <br>
      </div>
      <br>
      Price:
      <b-input v-model="item.price"></b-input>
      <br>
      <b-field class="file">
        <b-upload v-model="item.file" expanded v-if="createType === 0">
          <a class="button is-primary is-fullwidth">
            <b-icon icon="upload"></b-icon>
            <span>{{ item.file.name || "Upload .PNG of modified template"}}</span>
          </a>
        </b-upload>
      </b-field>
      <b-field class="file">
        <b-upload v-model="item.fileObj" expanded v-if="createType === 0">
          <a class="button is-primary is-fullwidth">
            <b-icon icon="upload"></b-icon>
            <span>{{ item.fileObj.name || "Upload .OBJ of modified template"}}</span>
          </a>
        </b-upload>
      </b-field>
      <div class="buttons">
        <b-button v-if="createType === 0" @click="submitItem" :loading="loading">Submit</b-button>
        <b-button v-if="createType === 1" @click="submitItem" :loading="loading">Submit</b-button>
        <b-button v-if="createType === 2" @click="submitItem" :loading="loading">Submit</b-button>
        <b-button v-if="createType === 3" @click="submitItem" :loading="loading">Submit</b-button>
        <b-button v-if="createType === 0" @click="previewItem" :loading="loadingPreview">Preview</b-button>
      </div>
    </div>
    <div class="column is-5">
      <h1 class="title">Preview Image</h1>
      <img :src="'https://cdn.kaverti.com/marketplace/preview/' + preview + '.png'" v-if="preview">
      <h1 class="subtitle" v-if="!preview">Press preview to preview the hat as if it were uploaded on the Marketplace.</h1>
      <h1 class="subtitle">Please validate to make sure all information is correct, your item will automatically be approved.</h1>
    </div>
  </main>
</template>
<script>

import AjaxErrorHandler from ".././assets/js/errorHandler";

export default {
  name: 'MarketplaceCreate',
  data() {
    return {
      createType: 0,
      stage: 1,
      loading: false,
      loadingPreview: false,
      preview: '',
      item: {
        file: '',
        fileObj: '',
        files: [],
        dropFiles: null,
        name: 'Item',
        limited: false,
        onSale: false,
        onSalePrice: 0,
        quantity: 0,
        price: 100,
        description: ''
      }
    }
  },
  methods: {
    previewItem() {
      this.loadingPreview = true
      const data = new FormData();

      data.append('image', this.item.file);
      data.append('fileObj', this.item.fileObj);
      this.axios.post(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + '/' + 'marketplace/preview/' + this.createType, data)
          .then((res) => {
            this.loadingPreview = false
            this.preview = res.data.image
          }).catch((e) => {
        this.loadingPreview = false
        AjaxErrorHandler(this.$store)(e)
      })
    },
    submitItem() {
      this.loading = true
      const data = new FormData();

      data.append('name', this.item.name);
      data.append('price', this.item.price);
      data.append('image', this.item.file);
      data.append('fileObj', this.item.fileObj);
      data.append('description', this.item.description);
      data.append('onSale', this.item.onSale);
      data.append('onSalePrice', this.item.onSalePrice);
      data.append('limited', this.item.limited);
      data.append('quantityAllowed', this.item.quantity);
      this.axios.post(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + '/' + 'marketplace/upload/' + this.createType, data)
          .then((res) => {
            this.loading = false
            this.axios.put(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + '/' + 'marketplace/rerender/' + res.data.id)
          }).catch((e) => {
        this.loading = false
        AjaxErrorHandler(this.$store)(e)
      })
    }
  }
}
</script>