Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/ts.corals.io/frontend/components/CoralsForm/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div class="row">
    <div class="col-md-3">
      <corals-select :form="form" field="period" :options="periodOptions"
                     @input="datePeriod"/>
    </div>
    <div class="col-md-3">
      <corals-datepicker :form="form" @input="changePeriodToCustom" field="from_date"
                         :max="this.form.to_date"
                         label="From Date"/>
    </div>
    <div class="col-md-3">
      <corals-datepicker :form="form" @input="changePeriodToCustom" field="to_date"
                         :min="this.form.from_date"
                         label="End Date"/>
    </div>
    <slot name="custom-actions">
      <div class="col-md-2" style="margin-top: 35px">
        <a class="btn btn-success btn-sm" @click.prevent="filter">
          <fa icon="search"/>
        </a>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  name: "CoralsReportsDateForm",
  props: {
    form: {
      required: true
    },
    rowClass: {
      required: false,
      type: String
    }
  },
  data() {
    return {
      periodOptions: {
        currentWeek: 'Current Week',
        currentMonth: 'Current Month',
        previousMonth: 'Previous Month',
        currentYear: 'Current Year',
        previousYear: 'Previous Year',
        custom: 'Custom'
      },
    }
  },
  mounted() {
    let queryPeriod = this.$route.query.period;

    if (queryPeriod && Object.keys(this.periodOptions).includes(queryPeriod)) {
      this.form.period = queryPeriod;
    }
    this.datePeriod();
  },
  methods: {
    checkDatePattern(date) {
      if (date && date.match(/^\d{4}-\d{2}-\d{2}$/)) {
        return date;
      }

      return null;
    },
    datePeriod() {
      let today = new Date();

      today = new Date(today.getFullYear(), today.getMonth(), 3);

      switch (this.form.period) {
        case 'previousWeek':
          this.form.from_date = this.getFormattedDate('week', true, true)
          this.form.to_date = this.getFormattedDate('week', false, true)
          break;
        case 'currentWeek':
          this.form.from_date = this.getFormattedDate('week')
          this.form.to_date = this.getFormattedDate('week', false)
          break;
        case 'previousMonth':
          this.form.from_date = this.getFormattedDate('month', true, true)
          this.form.to_date = this.getFormattedDate('month', false, true)
          break;
        case 'currentYear':
          this.form.from_date = this.getFormattedDate('year')
          this.form.to_date = this.getFormattedDate('year', false)
          break;
        case 'previousYear':
          this.form.from_date = this.getFormattedDate('year', true, true)
          this.form.to_date = this.getFormattedDate('year', false, true)
          break;
        case 'custom':
          this.form.from_date = this.checkDatePattern(this.$route.query.from_date)
          this.form.to_date = this.checkDatePattern(this.$route.query.to_date)
          break;
        case 'currentMonth':
        default:
          this.form.from_date = this.getFormattedDate('month')
          this.form.to_date = this.getFormattedDate('month', false)
      }

      if (this.form.period !== 'custom') {
        let urlParams = {};

        urlParams = Object.assign(JSON.parse(JSON.stringify(this.$route.query)), {
          period: this.form.period,
        });

        delete urlParams.from_date;
        delete urlParams.to_date;

        this.$router.push({
          query: urlParams
        });

        this.filter();
      } else {
        this.changePeriodToCustom();
      }
    },
    changePeriodToCustom() {
      this.form.period = 'custom';

      let urlParams = {};

      urlParams = Object.assign(JSON.parse(JSON.stringify(this.$route.query)), {
        period: this.form.period,
        from_date: this.form.from_date,
        to_date: this.form.to_date,
      });

      this.$router.push({
        query: urlParams
      });

      if (urlParams.from_date && urlParams.to_date) {
        this.filter();
      }
    },
    getFormattedDate(type, start = true, previous = false) {
      let date = this.$moment();
      if (previous) {
        date = date.subtract(1, type);
      }

      if (start) {
        date = date.startOf(type)
      } else {
        date = date.endOf(type)
      }

      return date.format('YYYY-MM-DD');
    },
    filter() {
      this.$emit('filter');
    },
  }
}
</script>