ChargEco/Strides-Admin/src/views/site/components/Reservations.vue

<template>
  <div class="reservation-container">
    <el-form-item
      label-width="155px"
      style="height: 40px; margin-right: 40px"
      label="Enable Reservation"
      :rules="[{ required: true,  trigger: 'blur'}]">
      <el-switch
        :value="enable"
        @change="enableChange" />
    </el-form-item>
    <el-form-item
      label-width="100px"
      :rules="[{ required: true,  trigger: 'blur'}]"
      label="Time Limit">
      <el-select
        :disabled="!enable"
        class="reservation-time-limit-select"
        :value="timeLimit"
        @change="limitTimeChange"
        placeholder="">
        <el-option 
          v-for="option in reservationTimeLimitOptions"
          :label="option.lable"
          :value="option.value"
          :key="option.lable"
        />
      </el-select>
      <span class="reservation-time-limit-unit">
        Minutes
      </span>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'Reservation',
  props: {
    enabled: {
      type: Boolean,
      default: true,
    },
    limit: Number
  },
  data() {
    return {
      enable: this.enabled,
      timeLimit: this.limit || 15,
      reservationTimeLimitOptions: [{
        value: 15,
        lable: "15"
      },{
        value: 30,
        lable: "30"
      },{
        value: 45,
        lable: "45"
      },{
        value: 60,
        lable: "60"
      }],
    }
  },
  watch: {
    enabled(n, o) {
      this.enable = n;
    },
    enable(n, o) {
      this.$emit('update:enabled', n)
      if (n && !this.limit) {
        this.$emit('update:limit', 15)
      }
    },
    limit(n, o) {
      this.timeLimit = n || 15;
    },
    timeLimit(n, o) {
      this.$emit('update:limit', n)
    }
  },
  mounted() {
    if (!this.limit) {
      this.$emit('update:limit', this.timeLimit);
    }
  },
  methods: {
    change() {
      this.$emit('change', {
        enable: this.enable,
        timeLimit: this.timeLimit
      })
    },
    limitTimeChange (limitTime) {
      this.timeLimit = limitTime;
      this.$emit('time-limit-change', limitTime)
      this.change();
    },
    enableChange (enable) {
      this.enable = enable;
      this.$emit('enable', enable);
      this.change();
    }
  },
}
</script>

<style scoped lang='scss'>

  .sparator {
    margin: 10px -40px;
    height: 2px;
    background-color: #F0F5FC;
  }

  .section-title {
    color: #333333;
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    font-family: sans-serif;
    text-transform: uppercase;
  }

  .reservation-container {
    display: flex;
    align-items: center;
  }

  .reservation-time-limit-select {
    width: 134px;
  }

  .reservation-time-limit-unit {
    font-family: sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    text-transform: capitalize;
    color: #434343;
    padding-left: 10px;
  }

  @media screen and (max-width: 851px) {
    .reservation-container {
      flex-wrap: wrap;
    }
  }

</style>