web/app/components/datepicker/EventSummary.vue

<template>
  <div>
    <div class="field is-grouped mb-4 border-bottom">
      <div
        class="control pl-2"
        v-if="mode !== 'simple'"
      >
        <a
          class="mr-1"
          @click="previousYear()"
        >
          <SvgIcon v-bind="{ name: 'doubleleft.svg', type: 'gray', size: 18 }"></SvgIcon>
        </a>
        <a
          @click="previousMonth()"
          v-if="type === 'days'"
        >
          <SvgIcon v-bind="{ name: 'left1.svg', type: 'gray', size: 18 }"></SvgIcon>
        </a>
      </div>
      <div class="control is-expanded has-text-centered">
        <span
          class="fsb-16 hyperlink mr-3"
          @click="mode === 'simple' ? false : (type = 'PickMonth')"
          v-if="type === 'days'"
          >{{ `Tháng ${month}` }}</span
        >
        <span
          class="fsb-16 hyperlink"
          @click="mode === 'simple' ? false : (type = 'PickYear')"
          >{{ caption || year }}</span
        >
      </div>
      <div
        class="control pr-2"
        v-if="mode !== 'simple'"
      >
        <a
          class="mr-1"
          @click="nextMonth()"
          v-if="type === 'days'"
        >
          <SvgIcon v-bind="{ name: 'right.svg', type: 'gray', size: 18 }"></SvgIcon>
        </a>
        <a @click="nextYear()">
          <SvgIcon v-bind="{ name: 'doubleright.svg', type: 'gray', size: 18 }"></SvgIcon>
        </a>
      </div>
    </div>
    <div v-if="type === 'days'">
      <div class="columns is-mobile mx-0">
        <div
          class="column px-2 py-1 has-text-grey-dark"
          v-for="(m, h) in dateOfWeek"
          :key="h"
        >
          {{ m.text }}
        </div>
      </div>
      <div
        :class="`columns is-mobile mx-0 ${i === weeks.length - 1 ? 'mb-1' : ''}`"
        v-for="(v, i) in weeks"
        :key="i"
      >
        <div
          class="column px-3 fs-14"
          v-for="(m, h) in v.dates"
          :key="h"
          style="padding-top: 1px; padding-bottom: 1px"
        >
          <a v-if="m.event && m.currentMonth === m.mothCondition">
            <Tooltip v-bind="{ html: m.event.html, tooltip: m.event.tooltip }"></Tooltip>
          </a>
          <span
            class="has-background-findata has-text-white px-1 py-1"
            v-else-if="m.date === today"
            >{{ m.dayPrint }}</span
          >
          <span v-else>{{ m.dayPrint }}</span>
        </div>
      </div>
      <template v-if="mode !== 'simple'">
        <div class="border-bottom"></div>
        <div class="mt-2">
          <span class="ml-2 mr-2">Hôm nay: </span>
          <span
            class="has-text-primary hyperlink"
            @click="chooseToday()"
            >{{ $dayjs(today).format("DD/MM/YYYY") }}</span
          >
        </div>
      </template>
    </div>
    <div v-else-if="type === 'PickMonth'">
      <PickMonth @month="selectMonth"></PickMonth>
    </div>
    <div v-else-if="type === 'PickYear'">
      <PickYear
        v-bind="{ year: year, month: month, action: action }"
        @year="selectYear"
        @caption="changeCaption"
      ></PickYear>
    </div>
    <Modal
      @close="showmodal = undefined"
      v-bind="showmodal"
      v-if="showmodal"
    ></Modal>
  </div>
</template>
<script>
export default {
  components: {
    PickMonth: () => import("@/components/datepicker/PickMonth"),
    PickYear: () => import("@/components/datepicker/PickYear"),
  },
  props: ["date", "events", "mode", "vyear", "vmonth"],
  data() {
    return {
      dates: [],
      dateOfWeek: [
        { id: 0, text: "CN" },
        { id: 1, text: "T2" },
        { id: 2, text: "T3" },
        { id: 3, text: "T4" },
        { id: 4, text: "T5" },
        { id: 5, text: "T6" },
        { id: 6, text: "T7" },
      ],
      weeks: [],
      today: this.$dayjs().format("YYYY/MM/DD"),
      year: undefined,
      month: undefined,
      type: "days",
      caption: undefined,
      action: undefined,
      curdate: undefined,
      showmodal: undefined,
    };
  },
  created() {
    this.showDate();
  },
  watch: {
    date: function (newVal) {
      if (newVal) this.showDate();
    },
    events: function (newVal) {
      this.showDate();
    },
  },
  methods: {
    showDate() {
      this.curdate = this.date ? this.date.replaceAll("-", "/") : undefined;
      this.year = this.$dayjs(this.curdate || this.today).year();
      this.month = this.$dayjs(this.curdate || this.today).month() + 1;
      if (this.vyear) this.year = this.$copy(this.vyear);
      if (this.vmonth) this.month = this.$copy(this.vmonth);
      this.getDates();
    },
    chooseToday() {
      this.$emit("date", this.today.replaceAll("/", "-"));
      this.year = this.$dayjs(this.today).year();
      this.month = this.$dayjs(this.today).month() + 1;
      this.getDates();
    },
    changeCaption(v) {
      this.caption = v;
    },
    selectMonth(v) {
      this.month = v;
      this.getDates();
      this.type = "days";
    },
    selectYear(v) {
      this.year = v;
      this.getDates();
      this.type = "days";
    },
    getDates() {
      this.caption = undefined;
      this.dates = this.allDaysInMonth(this.year, this.month);
      this.dates.map((v) => {
        let event = this.events ? this.$find(this.events, { isodate: v.date }) : undefined;
        if (event) v.event = event;
      });
      this.weeks = this.$unique(this.dates, ["week"]).map((v) => {
        return { week: v.week };
      });
      this.weeks.map((v) => {
        v.dates = this.dates.filter((x) => x.week === v.week);
      });
    },
    nextMonth() {
      let month = this.month + 1;
      if (month > 12) {
        month = 1;
        this.year += 1;
      }
      this.month = month;
      this.getDates();
    },
    previousMonth() {
      let month = this.month - 1;
      if (month === 0) {
        month = 12;
        this.year -= 1;
      }
      this.month = month;
      this.getDates();
    },
    nextYear() {
      if (this.type === "PickYear") return (this.action = { name: "next", id: this.$id() });
      this.year += 1;
      this.getDates();
    },
    previousYear() {
      if (this.type === "PickYear") return (this.action = { name: "previous", id: this.$id() });
      this.year -= 1;
      this.getDates();
    },
    choose(m) {
      this.$emit("date", m.date.replaceAll("/", "-"));
    },
    createDate(v, x, y) {
      return (
        v + "/" + (x < 10 ? "0" + x.toString() : x.toString()) + "/" + (y < 10 ? "0" + y.toString() : y.toString())
      );
    },
    allDaysInMonth(year, month) {
      let days = Array.from({ length: this.$dayjs(this.createDate(year, month, 1)).daysInMonth() }, (_, i) => i + 1);
      let arr = [];
      days.map((v) => {
        for (let i = 0; i < 7; i++) {
          let thedate = this.$dayjs(this.createDate(year, month, v)).weekday(i);
          let date = this.$dayjs(new Date(thedate.$d)).format("YYYY/MM/DD");
          let dayPrint = this.$dayjs(new Date(thedate.$d)).format("DD");
          let mothCondition = this.$dayjs(date).month() + 1;
          let currentMonth = month;
          let found = arr.find((x) => x.date === date);
          if (!found) {
            let dayOfWeek = this.$dayjs(date).day();
            let week = this.$dayjs(date).week();
            let ele = {
              date: date,
              week: week,
              day: v,
              dayOfWeek: dayOfWeek,
              dayPrint: dayPrint,
              mothCondition: mothCondition,
              currentMonth: currentMonth,
            };
            arr.push(ele);
          }
        }
      });
      return arr;
    },
  },
};
</script>