WIP Промежуточные изменения

2023-06-21 15:32:30 +03:00
parent 80af2fc66c
commit 1915538ca2
5 changed files with 186 additions and 71 deletions
--- a/src/components/base/Calendar/BaseCalendar.vue
+++ b/src/components/base/Calendar/BaseCalendar.vue
@@ -1,15 +1,14 @@
 <template lang="pug">
  .calendar-wrapper.bg-white
    component(
-      v-bind:is="currentForm",
+      v-bind:is="currentForm?.component",
      v-model:internal-date="internalDate",
-      v-model:external-date="externalDate",
+      v-model:external-date="value",
      :range="range",
      :start-year="startYear",
      :end-year="endYear",
      :range-count="rangeCount",
-      :next-form="nextForm",
-      :previous-form="previousForm",
+      :change-form="changeForm",
      :internal-month="internalMonth",
    )
    .footer.flex.justify-end.items-center.px-5.py-3
@@ -20,16 +19,16 @@
        label="Отменить",
        size="14px",
        padding="10px 12px",
-        @click="cancelChanges"
+        @click="currentForm?.cancelFunction"
      )
      q-btn(
        color="primary",
        flat,
        no-caps,
-        label="Сохранить",
+        :label="currentForm?.saveBtnLabel",
        size="14px",
        padding="10px 12px",
-        @click="saveChanges"
+        @click="currentForm?.saveFunction"
      )
 </template>

@@ -57,17 +56,36 @@ export default {
      type: Function,
      default: () => {},
    },
-    cancel: {
-      type: Function,
-      default: () => {},
-    },
+    // cancel: {
+    //   type: Function,
+    //   default: () => {},
+    // },
  },
  data() {
    return {
      internalDate: moment(),
-      externalDate: null,
-      currentFormIndex: 0,
-      forms: ["CalendarDates", "CalendarYears", "CalendarMonths"],
+      currentForm: null,
+      forms: [
+        {
+          component: "CalendarDates",
+          saveBtnLabel: "Сохранить",
+          cancelFunction: this.cancelExternalChanges,
+          saveFunction: this.saveExternalChanges,
+        },
+        {
+          component: "CalendarYears",
+          saveBtnLabel: "Применить",
+          cancelFunction: this.cancelInternalChanges,
+          saveFunction: this.applyInternalChanges,
+        },
+        {
+          component: "CalendarMonths",
+          saveBtnLabel: "Применить",
+          cancelFunction: this.cancelInternalChanges,
+          saveFunction: this.applyInternalChanges,
+        },
+      ],
+      previousValue: null,
    };
  },
  computed: {
@@ -79,9 +97,6 @@ export default {
        this.$emit("update:modelValue", value);
      },
    },
-    currentForm() {
-      return this.forms[this.currentFormIndex];
-    },
    internalMonth() {
      let formattedMonth = this.internalDate.format("MMMM");
      return `${
@@ -90,38 +105,58 @@ export default {
    },
  },
  methods: {
-    nextForm() {
-      this.currentFormIndex += 1;
+    changeForm(form) {
+      this.currentForm = this.forms.find((elem) => elem.component === form);
    },
-    previousForm() {
-      this.currentFormIndex -= 1;
-    },
-    cancelChanges() {
-      this.cancel();
-    },
-    saveChanges() {
-      this.value = this.externalDate?.from
+    cancelExternalChanges() {
+      this.value = this.range
        ? {
-            from: this.externalDate?.from?.clone(),
-            to: this.externalDate?.to?.clone(),
+            from: this.previousValue?.from?.clone(),
+            to: this.previousValue?.to?.clone(),
          }
-        : this.externalDate.clone();
+        : this.previousValue;
+    },
+    cancelInternalChanges() {
+      if (this.range) {
+        this.value = {
+          from: this.previousValue?.from?.clone(),
+          to: this.previousValue?.to?.clone(),
+        };
+        this.internalDate = this.previousValue?.from?.clone();
+      } else {
+        this.value = this.previousValue;
+        this.internalDate = this.previousValue;
+      }
+      this.changeForm("CalendarDates");
+    },
+    saveExternalChanges() {
      this.save();
    },
+    applyInternalChanges() {
+      switch (this.currentForm.component) {
+        case "CalendarYears":
+          this.changeForm("CalendarMonths");
+          break;
+        case "CalendarMonths":
+          this.changeForm("CalendarDates");
+          break;
+      }
+    },
  },
  mounted() {
    if (this.value) {
      if (this.range) {
        this.internalDate = this.value?.from?.clone();
-        this.externalDate = {
+        this.previousValue = {
          from: this.value?.from?.clone(),
          to: this.value?.to?.clone(),
        };
      } else {
        this.internalDate = this.value?.clone();
-        this.externalDate = this.value?.clone();
+        this.previousValue = this.value?.clone();
      }
    }
+    this.currentForm = this.forms[0];
  },
 };
 </script>
--- a/src/components/base/Calendar/CalendarDates.vue
+++ b/src/components/base/Calendar/CalendarDates.vue
@@ -8,7 +8,7 @@
        :label="internalMonth"
        no-caps,
        padding="10px 12px"
-        @click="nextForm"
+        @click="switchForm"
      )
      .arrows.flex.items-center.justify-center.gap-x-6
        q-btn(
@@ -53,7 +53,7 @@ export default {
    range: Boolean,
    rangeCount: Number,
    internalMonth: String,
-    nextForm: {
+    changeForm: {
      type: Function,
      default: () => {},
    },
@@ -97,6 +97,9 @@ export default {
    },
  },
  methods: {
+    switchForm() {
+      this.changeForm("CalendarYears");
+    },
    previousMonth() {
      this.internalValue = this.internalValue.clone().subtract(1, "month");
    },
--- a/src/components/base/Calendar/CalendarMonths.vue
+++ b/src/components/base/Calendar/CalendarMonths.vue
@@ -1,17 +1,82 @@
 <template lang="pug">
-  
+  .w-full
+    .header.pl-3.pr-6.pt-14px.pb-10px.flex.items-center.justify-center
+      q-btn(
+        size="14px"
+        color="dark"
+        flat,
+        :label="internalMonth",
+        no-caps,
+        padding="10px 12px"
+      )
+    .body.py-5.px-6
+      .cell.flex.items-center.justify-center.cursor-pointer.rounded.text-sm(
+        v-for="month in internalMonthsList",
+        :key="month",
+        :id="month",
+        :class="calculateActiveCell(month)",
+        @click="selectMonth(month)",
+      ) {{ month[0].toUpperCase() + month.slice(1) }}
 </template>

 <script>
+import * as moment from "moment/moment";
 export default {
  name: "CalendarMonths",
-  props: {},
-  data() {
-    return {};
+  props: {
+    internalDate: Object,
+    internalMonth: String,
+  },
+  data() {
+    return {
+      internalMonthsList: null,
+    };
+  },
+  computed: {
+    internalValue: {
+      get() {
+        return this.internalDate;
+      },
+      set(value) {
+        this.$emit("update:internalDate", value);
+      },
+    },
+  },
+  methods: {
+    calculateActiveCell(month) {
+      return {
+        "active-cell": this.internalValue.format("MMMM") === month,
+      };
+    },
+    selectMonth(month) {
+      this.internalValue = this.internalValue.clone().month(month);
+    },
+  },
+  mounted() {
+    this.internalMonthsList = [...Array(12)].map((_, index) =>
+      moment().month(index).format("MMMM")
+    );
  },
-  computed: {},
-  methods: {},
 };
 </script>

-<style scoped lang="sass"></style>
+<style scoped lang="sass">
+.header
+  border-bottom: 1px solid var(--border-light-grey-color)
+.body
+  height: 298px
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  row-gap: 4px
+  column-gap: 4px
+.cell
+  background-color:  var(--bg-light-grey)
+  color: var(--font-dark-blue-color)
+  &:hover
+    background-color: var(--border-light-grey-color)
+.active-cell
+  background-color: var(--btn-blue-color)
+  color: var(--default-white)
+  &:hover
+    background-color: var(--btn-blue-color)
+</style>
--- a/src/components/base/Calendar/CalendarYears.vue
+++ b/src/components/base/Calendar/CalendarYears.vue
@@ -14,7 +14,7 @@
        v-for="year in internalYearsList",
        :key="year",
        :id="year",
-        :class="activeCellClass(year), cellsClass",
+        :class="calculateActiveCell(year), cellsClass",
        @click="selectYear(year)",
      ) {{ year }}
 </template>
@@ -61,7 +61,7 @@ export default {
    },
  },
  methods: {
-    activeCellClass(year) {
+    calculateActiveCell(year) {
      return {
        "active-cell": parseInt(this.internalValue.format("YYYY"), 10) === year,
      };
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -31,7 +31,7 @@
      )
        .h-5.w-5.flex.items-center.justify-center
          q-icon.text.cursor-pointer(:name="calendarVisibility ? 'app:cancel' : 'app:calendar'",
-            :size="calendarVisibility ? '10px' : '16px'"
+            :size="calendarVisibility ? '10px' : '16px'",
          )
            q-menu(
              :style="{'margin-top': '4px !important'}"
@@ -42,11 +42,10 @@
              :offset="[122, 14]"
            )
              base-calendar(
-                v-model="date",
+                v-model="dates",
                range,
                :range-count="7",
-                :save="saveNewDate",
-                :cancel="cancelDateChanges",
+                :save="saveDatesChange",
              )
      q-btn(
        color="secondary",
@@ -88,7 +87,7 @@ export default {
          value: "collapsed",
        },
      ],
-      date: {
+      dates: {
        from: null,
        to: null,
      },
@@ -97,9 +96,9 @@ export default {
  },
  computed: {
    currentWeek() {
-      return `${this.date?.from?.format(
+      return `${this.dates?.from?.format(
        "D MMMM YYYY"
-      )} - ${this.date?.to?.format("D MMMM YYYY")}`;
+      )} - ${this.dates?.to?.format("D MMMM YYYY")}`;
    },
    ...mapState({
      selectedDates: (state) => state.calendar.selectedDates,
@@ -107,41 +106,54 @@ export default {
  },
  methods: {
    previousWeek() {
-      this.date.from = this.date.from.clone().subtract(1, "week");
-      this.date.to = this.date.to.clone().subtract(1, "week");
+      this.dates.from = this.dates.from.clone().subtract(1, "week");
+      this.dates.to = this.dates.to.clone().subtract(1, "week");
+      this.changeSelectedDates(this.dates);
    },
    nextWeek() {
-      this.date.from = this.date.from.clone().add(1, "week");
-      this.date.to = this.date.to.clone().add(1, "week");
+      this.dates.from = this.dates.from.clone().add(1, "week");
+      this.dates.to = this.dates.to.clone().add(1, "week");
+      this.changeSelectedDates(this.dates);
    },
    ...mapActions({
      changeSelectedDates: "changeSelectedDates",
    }),
-    saveNewDate() {
+    saveDatesChange() {
      this.calendarVisibility = false;
-    },
-    cancelDateChanges() {
-      this.calendarVisibility = false;
-    },
-  },
-  watch: {
-    date: {
-      deep: true,
-      handler(val) {
      if (
-          !this.val?.from.isSame(this.selectedDates?.from) &&
-          !this.val?.to.isSame(this.selectedDates?.to)
+        !this.dates?.from.isSame(this.selectedDates?.from) &&
+        !this.dates?.to.isSame(this.selectedDates?.to)
      )
-          this.changeSelectedDates(val);
+        this.changeSelectedDates(this.dates);
    },
+    cancelDatesChange() {
+      this.calendarVisibility = false;
    },
-  },
-  mounted() {
-    this.date = {
+    initializeDates() {
+      this.dates = {
        from: this.selectedDates.from.clone(),
        to: this.selectedDates.to.clone(),
      };
    },
+  },
+  watch: {
+    // dates: {
+    //   deep: true,
+    //   handler(val) {
+    //     if (
+    //       !this.val?.from.isSame(this.selectedDates?.from) &&
+    //       !this.val?.to.isSame(this.selectedDates?.to)
+    //     )
+    //       this.changeSelectedDates(val);
+    //   },
+    // },
+    // calendarVisibility(val) {
+    //   if (val === false) this.initializeDates();
+    // }
+  },
+  mounted() {
+    this.initializeDates();
+  },
 };
 </script>