tabbit

Sat Dec 17 2016
Copied to clipboard! Copy reply
<template>
  <main>
    <h2 class="ui  header">Create &amp; schedule a flip</h2>
    <form class="ui large form" @submit.prevent='handleSubmit'>
      
      <!--  BASIC INFO -->
      <div class="ui attached message">
        <h3 class="ui  header">Basic info</h3>
      </div>

      <div class="ui attached segment">        
        <div class="three fields">

          <!-- name -->
          <div class="required field">
            <label>Flip Name</label>
            <i>Just a name so you can edit this later if needed</i>
            <input type="text" name="name" placeholder="Cybermonday 2017">
          </div>
          
          <!-- promosoet -->
          <div class=" required field">
            <label>Sitewide promoset</label>
            <i>Will apply to catalog pages</i>
            <select class="ui search selection dropdown" name='promoset' data-dropdown-promos>
              <option value="">select a promo</option>          
            </select>
          </div>

          <!--  date -->
          <div class="required field">
            <label>Flip Date</label>         
            <i>Date &amp; time for this flip</i>
            <div class="ui calendar">
              <div class="ui left icon input">
                <i class="calendar icon"></i>
                <input type="text" name="date" placeholder="select date &amp; time">
              </div>
            </div>
          </div>

        </div>
      </div>    


      <!-- CONSTANT LANDING PAGES -->
      <div class="ui attached message">
        <h3 class="ui header">Landing Pages</h3>
      </div>
      
      <div class="ui attached  segment" :class="{'loading': !constants}">
        <p>
          Below are our <b>"constant"</b> landing pages.
          Specify which page they will "mirror" next   flip.
        </p>

        <div class="four fields" v-for='array in contsantsMultiArray'>          
          <div class="field" v-for='(page, index) in array'>
            <label>{{ page }}</label>          
            <select class="ui search selection dropdown" data-dropdown-pages :name=page>
              <option value="">select a page</option>          
            </select>
          </div>  
        </div>
      </div>


      
      <!-- ASSETS -->
      <div class="ui attached message">
        <h3 class="ui  header">Sitewide Images &amp; Criteo</h3>
      </div>

      <div class="ui attached  segment ">
        <p>Select assets to upload. You can select more than one.</p>
        <div class="field">
          <input type="file" multiple>
        </div>
      </div>


      
      <!-- <div class="ui  bottom attached tiny info  message" style="display:none">
        <i class="warning icon"></i><b>Typically used assets are</b>:
        <div>
            <div class="ui horizontal list">
              <div class="item">mdot-rto.jpg</div>
              <div class="item">us-buynow.jpg</div>
              <div class="item">us-freedemo.jpg</div>
              <div class="item">us-freedemo-mobile.jpg</div>
            </div>
            <div class="ui horizontal list">
              <div class="item">us-hslpbanner.jpg</div>
              <div class="item">es-buynow.jpg</div>
              <div class="item">es-homepage-bg.png</div>
              <div class="item">es-catalog.jpg</div>
            </div>        
          </div>
      </div> -->

      <!-- RTOs -->
      <div class="ui attached message">
        <h3>Desktop and Mobile RTO (catalog)</h3>
      </div>

      <div class="ui attached segment">
        
        <!-- mobile rto -->
        <div class="two fields" style="align-items: center">
          <!--  toggle on|off -->
          <div class="four wide field">
            <div class="ui toggle checkbox">
              <input type="checkbox" name="mobile-rto" class="hidden" @change='handleRtoToggle'>              
              <label>Show m. RTO?</label>
            </div>
          </div>
          
          <!-- url -->
          <div class="fourteen wide field" style="opacity: 0">  
            <input type="text" name="mobile-rto-url" placeholder="Mobile RTO url">
          </div>
        </div>

        <!-- desktop rto -->
        <div class="two fields" style="align-items: center">
          <!-- toggle on|off -->
          <div class="four wide field">
            <div class="ui toggle checkbox">
              <input type="checkbox" name="desktop-rto" class="hidden" @change='handleRtoToggle'>              
              <label>Show desktop RTO?</label>
            </div>
          </div>

          <!-- url -->
          <div class="fourteen wide field" style="opacity: 0">  
            <input type="text" name="desktop-rto-url" placeholder="Desktop RTO url">
          </div>
        </div> 

      </div>

      <div class="fields">
        <div class="sixteen wide field">
          <input type="submit" class="ui fluid primary big button" value="create &amp; schedule" /> 
        </div>
      </div>      
    </form>

    <!-- overwrite modal -->
    <div class="ui modal">
      <i class="close icon"></i>
      <div class="header">
        A flip on this date &amp; time already exists.
      </div>
      <div class="image content">
        <div class="image">
          An image can appear on left or an icon
        </div>
        <div class="description">
          A description can appear on the right
        </div>
      </div>
      <div class="actions">
        <div class="ui button" @click='closeModal'>Cancel</div>
        <div class="ui button">OK</div>
      </div>
    </div>

  </main>

</template>


<script>

  export default {
    name: 'CreateFlip',

    components: {  },

    data() {
      return {
        // Constant landing pages: sitewide, sale, etc
        constants: [],

        // Non constants - campaign based
        temppages: [],

        // Array of subarrays with 4 elements each. For UI purposes
        contsantsMultiArray: [],

        // Promocodes sets
        promosets: [],

        // Is the form being submitted?
        isSubmitting: false,

        // Should we show error modal?
        showModal: false
      }
    },



    updated() {
      $(this.$el).find('.dropdown').dropdown({        
        apiSettings: {
          url: `${window.server}/get-pages`,
          saveRemoteData: true,
          onResponse: function(pages) {
            var response = {
              success: true,
              results: []  
            }
              
            for (let page in pages) {
              if (!pages[page].metadata.constant) {
                response.results.push({name: page, value: page})
              }
            }
            return response
          }
        }
      })

      $(this.$el).find('.ui.calendar').calendar()
      $(this.$el).find('.ui.toggle.checkbox').checkbox()
      
      console.log(this.showModal)
      if (this.showModal) {
        console.log('ok show')
        $(this.$el).find('.ui.modal').modal('show')
          //.modal({ blurring: true})
          //.modal('setting', 'transition', 'scale')
      } else{
        $(this.$el).find('.ui.modal').modal('hide')
      }

    },


    /*
     * After we mount, fetch our pages and our promos.
     * We store them in the store data so we can generate
     * ui (ie, dynamic number of input field of constant pages)
     */
    
    mounted() {  
      this.$http.get(`${window.server}/get-pages`).then(res => {
        const pages = JSON.parse(res.body)

        // Constant pages
        this.constants = Object.keys(pages).filter(e => pages[e].metadata.constant)

        // Temp pages ( campaign based )
        this.constants = Object.keys(pages).filter(e => !pages[e].metadata.constant)

        // Create the multidimensional array for Vue's ui (rows of 4 dropdowns)
        var constantsCopy = this.constants.slice()        
        while (constantsCopy.length) {
          this.contsantsMultiArray.push(constantsCopy.splice(0,4))
        }             

      }, err => {
        // TODO an alert
      })  

      // Define required form fields - visual purposes only
      $('form').form({
        fields: {
         'name': 'empty',
         'promoset': 'empty',
         'date': 'empty'
        }
      })
    },


    methods: {

      closeModal() {
        console.log('closing')
        this.showModal = false
      },

      /*
       * When we toggle an RTO checkbox, we show/hide
       * the url input to its right
       */
      
      handleRtoToggle(e) {
        const isChecked = $(e.target).parent().hasClass('checked')
        $(e.target).parents('.wide.field').siblings('.wide.field').animate({
          opacity: isChecked
        })       
      },


      /*
       * Submit our form. No need to bind every single input to a state data.
       * So we use jquery to grab the values of the form.
       * 
       *  @param {bool} overwrite 
       *    If true, request url will have ?overwrite=true, causing
       *    the server to overwrite a campaign if it exists
       *
       */
      
      handleSubmit(overwrite = false) {
        const
          constants         = {}
          , name            = ($('input[name=name]').val() || '').trim()
          , promoset        = ($('select[name=promoset]').val() || '').trim()
          , date            = ($('input[name=date]').val() || '').trim()
          , assets          = [...document.querySelector('input[type=file]').files]
          , mRto            = $('input[name=mobile-rto]').parent().hasClass('checked')
          , mRtoUrl         = $('input[name=mobile-rto-url').val()
          , desktopRto      = $('input[name=desktop-rto]').parent().hasClass('checked')
          , desktopRtoUrl   = $('input[name=desktop-rto-url').val()
          ;

        // Create constant pages map. ie, {sale: 'blackridayaii'}
        $.each($('[data-dropdown-pages]'), (i, select) => {         
          if (select.value) {
            constants[select.getAttribute('name')] = select.value
          }
        })

        // Validate required fields
        if (!name || !promoset || !date) return

        // Pack above data to send to server
        const formdata = new FormData()
        formdata.append('name', name)
        formdata.append('promoset', promoset)
        formdata.append('date', date)
        formdata.append('constants', JSON.stringify(constants))
        formdata.append('mobile-rto', mRto)
        formdata.append('mobile-rto-url', mRtoUrl)
        formdata.append('desktop-rto', desktopRto)
        formdata.append('desktop-rto-url', desktopRtoUrl)
        assets.forEach(ass => formdata.append('assets[]', ass, ass.name))

        var requestUrl = window.server + '/create-flip/'
        requestUrl += overwrite ? '?overwrite=true' : ''

        const req = $.ajax({
          method: 'post',
          url: requestUrl,
          contentType: false,
          processData: false,
          data: formdata
        })

        req.done(r => {
          this.showModal = true
          var msg
          if (r.result == 0) {
            if (r.payload == 'exists') {
              msg = "A flip on this date and time exists. Overwrite?"
            } else {
              msg = "An error occurred. Try again or call a dev"
            }
          }
          
        })

      }
    }
   
  }



/*
 * Things i need to figure out:
 * Even though i fetch the pages when this component is mounted,
 * i still have to fetch them again (and format accordingly) for
 * semantic ui's dropdown API. There must be a way for semantic
 * ui's dropdown to use the data that we already fetched - but
 * it seems like it's either fetch via API or have it in the htm.
 */




</script>