FileMaster

Edit File: EventCalendarForm.vue

<el-tab-pane name="2">
        <span slot="label" class="am-customize-step__item">
          <img :src="$root.getUrl+'public/img/am-customize-step-1.svg'">
          <p>Step 2</p>
        </span>
        <div
          class="am-event-calendar-page"
          :style="{fontFamily: customization.font}"
        >
          <info-event-calendar-form
            :form-name="$options.name"
            :editable="editable"
            :language-short-code="languageShortCode"
            :customization="customization"
            :customization-form="customization.useGlobalColors[$options.name] ? customization.globalColors : formTypeData.infoEventCalendarForm.globalSettings"
            :transferred-strings="formTypeData.selectEventCalendarForm.labels"
            :form-step-data="formTypeData.infoEventCalendarForm"
            :reset-data="resetData"
            @resetForm="resetForm"
            @saveEdit="saveFormEdit"
          ></info-event-calendar-form>
        </div>
      </el-tab-pane>

<el-tab-pane name="3">
        <span slot="label" class="am-customize-step__item">
          <img :src="$root.getUrl+'public/img/am-customize-step-1.svg'">
          <p>Step 3</p>
        </span>
        <div
          class="am-event-calendar-page"
          :style="{fontFamily: customization.font}"
        >
          <invite-event-calendar-form
            :form-name="$options.name"
            :editable="editable"
            :language-short-code="languageShortCode"
            :customization="customization"
            :customization-form="customization.useGlobalColors[$options.name] ? customization.globalColors : formTypeData.inviteEventCalendarForm.globalSettings"
            :form-step-data="formTypeData.inviteEventCalendarForm"
            :reset-data="resetData"
            @resetForm="resetForm"
            @saveEdit="saveFormEdit"
          ></invite-event-calendar-form>
        </div>
      </el-tab-pane>

<el-tab-pane name="4">
        <span slot="label" class="am-customize-step__item">
          <img :src="$root.getUrl+'public/img/am-customize-step-1.svg'">
          <p>Step 4</p>
        </span>
        <div
          class="am-event-calendar-page"
          :style="{fontFamily: customization.font}"
        >
          <div class="am-event-modal__inner">
            
            <confirm-booking-form
              :form-name="$options.name"
              :editable="editable"
              :language-short-code="languageShortCode"
              :customization="customization"
              :customize-display="'event'"
              :customization-form="customization.useGlobalColors[$options.name] ? customization.globalColors : formTypeData.confirmBookingForm.event.globalSettings"
              :form-step-data="formTypeData.confirmBookingForm.event"
              :reset-data="resetData"
              @resetForm="resetForm"
              @saveDraggableEdit="saveDraggableEdit"
              @saveEdit="saveFormEdit"
            ></confirm-booking-form>
            
          </div>
        </div>
      </el-tab-pane>

<el-tab-pane name="5">
        <span slot="label" class="am-customize-step__item">
          <img :src="$root.getUrl+'public/img/am-customize-step-1.svg'">
          <p>Step 5</p>
        </span>
        <div
          class="am-event-calendar-page"
          :style="{fontFamily: customization.font}"
        >
          <div class="am-event-modal__inner">
            
            <congratulations-form
              :form-name="$options.name"
              :editable="editable"
              :language-short-code="languageShortCode"
              :customization="customization"
              :customize-display="'event'"
              :customization-form="customization.useGlobalColors[$options.name] ? customization.globalColors : formTypeData.congratulationsForm.event.globalSettings"
              :form-step-data="formTypeData.congratulationsForm.event"
              :reset-data="resetData"
              @resetForm="resetForm"
              @saveEdit="saveFormEdit"
            ></congratulations-form>
            
          </div>
        </div>
      </el-tab-pane>

</el-tabs>
  </div>
</template>

export default {
  name: 'eventCalendarForm',

components: {
    selectEventCalendarForm,
    infoEventCalendarForm,
    inviteEventCalendarForm,
    confirmBookingForm,
    congratulationsForm
  },

mixins: [formsCustomizationMixin],

props: {
    languageShortCode: {
      type: String,
      default: ''
    },
    customizeDisplay: {
      type: String,
      default: ''
    },
    editable: {
      type: Boolean,
      default: true
    },
    customization: {
      type: Object,
      default: () => {
        return {}
      }
    },
    resetData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formTypeData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

data () {
    return {
      responsiveDisplay: 'am-desktop',
      activeEventStep: '1',
      stepNavigation: 'right'
    }
  },

updated () {
    this.handleResize()
  },

created () {
    window.addEventListener('resize', this.handleResize)
  },

mounted () {
    this.handleResize()
  },

computed: {
    oppositeBackgroundColor () {
      return this.oppositeColor(this.formTypeData.globalSettings.formBackgroundColor)
    }
  },

methods: {
    handleResize () {
      if (this.$refs.customizeContainer) {
        let amContainerWidth = this.$refs.customizeContainer.offsetWidth

if (amContainerWidth < 873) {
          this.stepNavigation = 'top'
        } else {
          this.stepNavigation = 'right'
        }

if (amContainerWidth < 768) {
          this.responsiveDisplay = 'am-mobile'
        } else {
          this.responsiveDisplay = 'am-desktop'
        }
      }
    },

resetForm (resetData) {
      let resetDataObj = resetData
      resetDataObj.formType = this.$options.name
      this.$emit('resetForm', resetDataObj)
    },

saveFormEdit (dataObj) {
      let formObj = {}
      formObj[this.$options.name] = JSON.parse(JSON.stringify(dataObj))
      this.$emit('saveEdit', formObj)
    },

saveDraggableEdit (dataObj) {
      let formObj = {}
      formObj[this.$options.name] = JSON.parse(JSON.stringify(dataObj))
      this.$emit('saveDraggableEdit', formObj)
    }
  }
}
</script>

Back