ShowEasyFrontEnd/FrontEnd/components/exhibition/DateCard.vue

<template>
  <v-card outlined class="rounded-xl pl-3">
    <v-card-title> {{ $t("Date") }} </v-card-title>
    <v-card-subtitle>
      <v-dialog v-model="dialog" @click:outside="closeDialog" width="500">
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            class="tw-text-complementary-1 tw-border-solid tw-border-[1px] tw-bg-[#FFFFFF] tw-border-complementary-1 tw-shadow-none remove-upper rounded-lg mt-5"
            v-bind="attrs"
            v-on="on"
          >
            {{ $t("Select date") }}
          </v-btn>
        </template>

        <v-card class="rounded-xl pa-4" width="592" height="618">
          <v-card-title>
            <v-row no-gutters>
              <v-col cols="4" class="d-flex justify-start">
                <div class="ml-n3">{{ $t("Select Dates") }}</div>
              </v-col>
              <v-col
                cols="8"
                class="d-flex justify-end"
                @click="dialog = false"
              >
                X
              </v-col>
            </v-row>
          </v-card-title>
          <v-row class="mt-10">
            <v-col cols="4">
              <v-btn
                v-for="(btnText, idx) in btnList"
                :key="idx"
                width="100%"
                text
                class="remove-upper justify-start"
                :class="{ 'primary--text': idx == selectBtn }"
                @click="() => clickRange(idx)"
              >
                {{ $t(btnText) }}
              </v-btn>
            </v-col>
            <v-col cols="8">
              <!-- <v-date-picker v-model="dates" range full-width></v-date-picker> -->
              <v-date-picker
                :value="dates"
                @input="setDates"
                :locale="$i18n.locale"
                range
                full-width
              ></v-date-picker>
            </v-col>
          </v-row>

          <v-card-text class="d-flex justify-end align-end mt-8">
            <v-btn
              text
              class="remove-upper primary--text rouned-xl px-8"
              @click="setClear([])"
            >
              {{ $t("Clear") }}
            </v-btn>
            <v-btn
              text
              class="remove-upper primary rounded-xl px-8"
              @click="closeDialog"
            >
              {{ $t("Apply") }}
            </v-btn>
          </v-card-text>
        </v-card>
      </v-dialog>
    </v-card-subtitle>
    <v-card-text class="tw-text-complementary-1">
      {{ $t("Select") }}:
      {{
        datesComputed.length == 0
          ? $t("All Time")
          : datesComputed.length == 1
          ? datesComputed[0]
          : datesComputed[0] + " ~ " + datesComputed[1]
      }}
    </v-card-text>
  </v-card>
</template>

<script>
import { dateCardFormatDate } from "~/utils/assist";

export default {
  props: {
    modalChecked: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dates: [],
      btnList: [
        "Quick Ranges",
        "This month",
        "Next month",
        "This year",
        "Next year",
      ],
      selectBtn: null,
      dialog: false,
      clear: false,
    };
  },
  computed: {
    datesComputed() {
      return this.dates.sort();
    },
  },
  mounted() {
    if (this.modalChecked.length > 0) {
      this.dates = [...this.modalChecked];
    }
  },
  watch: {
    dates(newDates, oldDates) {
      if (this.dates.length == 2 || (this.clear && this.dates.length == 0)) {
        this.$emit("selectDates", this.dates);
      }
    },
    modalChecked: {
      handler: function () {
        this.$nextTick(() => {
          if (this.modalChecked.length > 0) {
            this.dates = [...this.modalChecked];
          }
        });
      },
    },
  },
  methods: {
    setDates(dates) {
      this.dates = dates;
      this.clear = false;
    },
    setClear(dates) {
      this.dates = dates;
      this.clear = true;
    },
    closeDialog() {
      this.dialog = !this.dialog;
      this.$emit("update", this.datesComputed);
    },
    clickRange(idx) {
      this.selectBtn = idx;
      if (idx == 0) {
      } else if (idx == 1) {
        var thisMonthFirstDay = dateCardFormatDate(
          new Date(new Date().getFullYear(), new Date().getMonth(), 1)
        );
        var thisMonthLastDay = dateCardFormatDate(
          new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
        );
        this.setDates([]);
        this.$nextTick(() => {
          this.setDates([thisMonthFirstDay, thisMonthLastDay]);
        });
      } else if (idx == 2) {
        var nextMonthFirstDay = dateCardFormatDate(
          new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1)
        );
        var nextMonthLastDay = dateCardFormatDate(
          new Date(new Date().getFullYear(), new Date().getMonth() + 2, 0)
        );
        this.setDates([]);
        this.$nextTick(() => {
          this.setDates([nextMonthFirstDay, nextMonthLastDay]);
        });
      } else if (idx == 3) {
        var thisYearFirstDay = new Date().getFullYear() + "-01-01";
        var thisYearLastDay = new Date().getFullYear() + "-12-31";
        this.setDates([]);
        this.$nextTick(() => {
          this.setDates([thisYearFirstDay, thisYearLastDay]);
        });
      } else if (idx == 4) {
        var nextYearFirstDay = new Date().getFullYear() + 1 + "-01-01";
        var nextYearLastDay = new Date().getFullYear() + 1 + "-12-31";
        this.setDates([]);
        this.$nextTick(() => {
          this.setDates([nextYearFirstDay, nextYearLastDay]);
        });
      }
    },
  },
};
</script>

<style></style>