tabbit

Thu Jan 05 2017
Copied to clipboard! Copy reply
<template>
  <main>

    <div class="ui massive red message" v-if='editMode && !found && !isFetching'>
      <i class="warning circle icon"></i>
      This promoset no longer exists.
    </div>
  
    <!-- if not editing, or editing but found -->
    <form class="ui form" @submit.prevent="handleSubmit" v-if='(editMode && found) || !editMode'>
      <h2 class="ui header">Create a Promoset</h2>
      <div class="ui large header"></div> 
    
      <div class="required field">
        <div class="ui fluid labeled input">
          <div class="ui label">
            Promoset Name
          </div>
          <input type="text" placeholder="q3_189"  v-model='promoset'>
        </div>
      </div>          
      <table class="ui grey table">
        <thead>
          <tr>
            <th>Product</th>
            <th>CD</th>
            <th>Download</th>
          </tr>
        </thead>
        <tbody>
          <!--  Course Products -->
          <tr v-for="(course, level) in promodata.course">
            <td class="warning">{{ level.toUpperCase() }}</td>
            <td v-for="(product, key) in course.products">
              <div class="fields" style="margin-bottom: 0">
                <div class=" field">
                  <div class="ui transparent left icon input">
                    <i class="dollar icon"></i>
                    <input type="text"
                    placeholder="price"
                    name="price"
                    :data-level="level"
                    :data-delivery="key"
                    v-model="product.price"
                    @keyup="handleKeyPress">
                  </div>
                </div>
                <div class="field">
                  <div class="ui transparent left icon input">
                    <i class="code icon"></i>
                    <input type="text"
                    placeholder="code"
                    name="code"
                    :data-level="level"
                    :data-delivery="key"
                    v-model="product.code"
                    @keyup="handleKeyPress">
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <!-- <tr>
            <td colspan="5">
              <h4 style="letter-spacing: 2px">Online Products</h4>
            </td>
          </tr> -->
          <!--  Online Products -->
          <tr v-for="(product, month) in promodata.online">
            <td class="warning">{{ month }}</td>
            <td>
              <div class="field">
                <div class="ui transparent left icon input">
                  <i class="dollar icon"></i>
                  <input type="text"
                  placeholder="price"
                  :data-months="month"                  
                  name="price">
                </div>
              </div>
            </td>
            <td>
              <div class=" field">
                <div class="ui transparent left icon input">
                  <i class="code icon"></i>
                  <input type="text"
                  placeholder="code"
                  :data-months="month"
                  name="code"
                  v-model="product.code"
                  @keyup="handleOnlineCodeInput">
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>      
      <div class="ui grid">
        <div class="thirteen wide column">
          <div
          class="ui message"
          :class="{'negative' : !formResult.result, 'positive' : formResult.result}"
          v-if="formResult.result !== null">
            <div class="header">
              <i class="warning circle icon"></i>
              {{ formResult.message || "An error occurred" }}
            </div>
            </div>
        </div>
        <div class="three wide column">
          <!-- <input type="submit" class="ui right fluid big teal button" /> -->
          <button class="ui fluid big teal button" :class="{'loading': isSubmitting}">Submit</button>
        </div>
      </div>      
    </form>
    
  </main>
</template>


<script>
  export default {
    name: 'CreatePromoset',
    data() {
      return {
        isSubmitting: false,
        isFetching: false,
        editMode: false,
        autofillCompleted: false,
        canSubmit: false,
        found: null,
        formResult: {
          result: null,
          message: null
        },
        promoset: '',
        promosets: [],
        promodata: {
          course: {
            s5: {
              name: 'S5',
              products: {
                cd: { price: null, code: null },
                dl: { price: null, code: null },
              }
            },
            s3: {
              name: 'S3',
              products: {
                cd: { price: null, code: null },
                dl: { price: null, code: null },
              }
            },
            s2: {
              name: 'S2',
              products: {
                cd: { price: null, code: null },
                dl: { price: null, code: null },
              }
            },
            l1: {
              name: 'L1',
              products: {
                cd: { price: null, code: null },
                dl: { price: null, code: null },
              }
            }
          },
          online: {
            '1M': { price: null, code: null },
            '3M': { price: null, code: null },
            '6M': { price: null, code: null },
            '9M': { price: null, code: null },
            '12M': { price: null, code: null },
            '24M': { price: null, code: null },
            '36M': { price: null, code: null },
          }
        }
      }
    },


    created() {
      
      console.log('fetching ', this.$route.params.id)

      /*
       * If we are editing (create/flip/id/some-date in the url)
       * fetch all the info to polulate the state with
       */
      
      if (this.$route.params.id) {
        this.editMode = true
        this.isFetching = true
      }
    },

    mounted() {
      const self = this
      
      if (this.editMode) {
        $.getJSON(`${window.server}/promosets/`, r => {
          r = Object.keys(r)
          if (r.includes(this.$route.params.id)) {
            this.promoset = this.$route.params.id
            this.found = true

            this.promodata.course.s5.cd.price =
            this.promodata.course.s5.cd.code =
            this.promodata.course.s5.dl.price =
            this.promodata.course.s5.dl.code =

            this.promodata.course.s3.cd.price =
            this.promodata.course.s3.cd.code =
            this.promodata.course.s3.dl.price =
            this.promodata.course.s3.dl.code =
            
            this.promodata.course.s2.cd.price =
            this.promodata.course.s2.cd.code =
            this.promodata.course.s2.dl.price =
            this.promodata.course.s2.dl.code =

            this.promodata.course.l1.cd.price =
            this.promodata.course.l1.cd.code =
            this.promodata.course.l1.dl.price =
            this.promodata.course.l1.dl.code =            

            this.promodata.online['1M'].price =
            this.promodata.online['1M'].code =

            this.promodata.online['3M'].price =
            this.promodata.online['3M'].code =

            this.promodata.online['6M'].price =
            this.promodata.online['6M'].code =

            this.promodata.online['9M'].price =
            this.promodata.online['9M'].code =

            this.promodata.online['12M'].price =
            this.promodata.online['12M'].code =

            this.promodata.online['24M'].price =
            this.promodata.online['24M'].code =

            this.promodata.online['36M'].price =
            this.promodata.online['36M'].code =
          } 
          this.isFetching = false
        })
      }

      

      $(this.$el).find('form[name=create-promoset]').form({
        fields: { 'promoset-name': 'empty' }
      })
    },


    methods: {

      /*
       * When a CD price and Code is typed,
       * prefill the download fields, as they
       * are usually the same
       */
      
      handleKeyPress(e) {        
        const
         $e = $(e.target)
         , level = $e.data('level')
         , delivery = $e.data('delivery')
         , input = $e.attr('name')        
         ;

        if (delivery == 'cd') {        
          this.promodata.course[level].products.dl[input] = $e.val()
        }
      },


      /*
       * When an online promocode is typed, prefill
       * all the other ones if they are blank.
       */
      
      handleOnlineCodeInput(e) {
        if (this.autofillCompleted) return

        const $e = $(e.target)
        const months = $e.data('months')
        const regex = /(_\d+)m/i
        var value = $e.val()

        for (let o in this.promodata.online) {
          if (value.match(regex)) {
            value = value.replace(regex, '_' + o)
            this.autofillCompleted = true
          }
          this.promodata.online[o].code = value
        }
      },

      
      /*
       * Submit form
       *
       */
      
      handleSubmit(e) {      
        e.preventDefault()
        console.log('submitting')
        if (this.isSubmitting) return
        console.log('2 submitting')
        this.isSubmitting = true
        
        const name = ($('input[name=promoset-name]').val() || '').trim()
        
        if (!name) {
          return this.isSubmitting = false        
        }

        /* Check if a set with this name already exists */        
        $.getJSON(`${window.server}/promosets`, r => {
          if (Object.keys(r).includes(name)) {
            this.formResult = {
              result: false,
              message: "A promoset with this name already exists."
            }
            this.isSubmitting = false
          }
        })
        
        const self = this
        const promoset = {}
        const promoObj = {}
          promoObj.BOX_S5 = {
            price: this.promodata.course.s5.products.cd.price,
            code: this.promodata.course.s5.products.cd.code
          }
          promoObj.DOWNLOAD_S5 = {
            price: this.promodata.course.s5.products.dl.price,
            code: this.promodata.course.s5.products.dl.code
          }
          promoObj.BOX_S3 = {
            price: this.promodata.course.s3.products.cd.price,
            code: this.promodata.course.s3.products.cd.code
          }
          promoObj.DOWNLOAD_S3 = {
            price: this.promodata.course.s3.products.dl.price,
            code: this.promodata.course.s3.products.dl.code
          }
          promoObj.BOX_S2 = {
            price: this.promodata.course.s3.products.cd.price,
            code: this.promodata.course.s3.products.cd.code
          }
          promoObj.DOWNLOAD_S2 = {
            price: this.promodata.course.s2.products.dl.price,
            code: this.promodata.course.s2.products.dl.code
          }
          promoObj.BOX_L1 = {
            price: this.promodata.course.l1.products.cd.price,
            code: this.promodata.course.l1.products.cd.code
          }
          promoObj.DOWNLOAD_L1 = {
            price: this.promodata.course.l1.products.dl.price,
            code: this.promodata.course.l1.products.dl.code
          }      
          promoObj.TOSUB_01 = {
            price: this.promodata.online['1M'].price,
            code: this.promodata.online['1M'].code
          }
          promoObj.TOSUB_03 = {
            price: this.promodata.online['3M'].price,
            code: this.promodata.online['3M'].code
          }
          promoObj.TOSUB_06 = {
            price: this.promodata.online['6M'].price,
            code: this.promodata.online['6M'].code
          }
          promoObj.TOSUB_09 = {
            price: this.promodata.online['9M'].price,
            code: this.promodata.online['9M'].code
          }
          promoObj.TOSUB_12 = {
            price: this.promodata.online['12M'].price,
            code: this.promodata.online['12M'].code
          }
          promoObj.TOSUB_24 = {
            price: this.promodata.online['24M'].price,
            code: this.promodata.online['24M'].code
          }
          promoObj.TOSUB_36 = {
            price: this.promodata.online['36M'].price,
            code: this.promodata.online['36M'].code
          }

        promoset[name] = promoObj
        
        const request = new XMLHttpRequest()
        request.open('POST', `${window.server}/promoset`)
        request.send(JSON.stringify(promoset))
        request.onload = function() {
          const result = JSON.parse(request.responseText)

          self.formResult = {
            result: result.result,
            message: result.payload
          }
          self.isSubmitting = false
        }
        
        
        
        

        
      }
    
    }
  }
</script>