From b3cc965de40e5d53c324647c0664a0f0944874a1 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 9 Jun 2023 14:34:48 +0300
Subject: [PATCH 1/2] =?UTF-8?q?WIP=20=D0=9F=D0=BE=D0=B4=D1=82=D1=8F=D0=BD?=
 =?UTF-8?q?=D1=83=D0=BB=D0=B0=20=D0=B4=D0=B0=D1=82=D1=8B=20=D0=B8=D0=B7=20?=
 =?UTF-8?q?=D0=BA=D0=B0=D0=BB=D0=B5=D0=BD=D0=B4=D0=B0=D1=80=D1=8F=20=D0=B2?=
 =?UTF-8?q?=20=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../newCalendar/components/CalendarColumn.vue | 45 --------------
 .../components/CalendarColumns.vue            | 58 +++++++++++++++++++
 .../newCalendar/components/CalendarHeader.vue | 28 ++++-----
 .../components/CalendarWrapper.vue            |  8 +--
 4 files changed, 72 insertions(+), 67 deletions(-)
 delete mode 100644 src/pages/newCalendar/components/CalendarColumn.vue
 create mode 100644 src/pages/newCalendar/components/CalendarColumns.vue

diff --git a/src/pages/newCalendar/components/CalendarColumn.vue b/src/pages/newCalendar/components/CalendarColumn.vue
deleted file mode 100644
index e43f3b8..0000000
--- a/src/pages/newCalendar/components/CalendarColumn.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template lang="pug">
-  .calendar-column-wrapper.flex.flex-col
-    .header.flex.flex-col.items-center.justify-center.top-0
-      span.font-bold.text-base.color-black 24 мая
-      span.text-smm.color-grey Понедельник
-</template>
-
-<script>
-import { mapState } from "vuex";
-export default {
-  name: "CalendarColumn",
-  props: {},
-  data() {
-    return {};
-  },
-  computed: {
-    ...mapState({
-      today: (state) => state.calendar.currentDate,
-    }),
-  },
-  methods: {},
-};
-</script>
-
-<style lang="sass" scoped>
-.calendar-column-wrapper
-  border-right: 1px solid var(--border-light-grey-color)
-  width: 380px
-
-.header
-  height: 60px
-  position: sticky
-  z-index: 5
-  background-color: var(--default-white)
-
-.body
-  position: relative
-  z-index: 3
-
-.color-black
-  color: var(--font-dark-blue-color)
-
-.color-grey
-  color: var(--font-grey-color)
-</style>
diff --git a/src/pages/newCalendar/components/CalendarColumns.vue b/src/pages/newCalendar/components/CalendarColumns.vue
new file mode 100644
index 0000000..69bee37
--- /dev/null
+++ b/src/pages/newCalendar/components/CalendarColumns.vue
@@ -0,0 +1,58 @@
+<template lang="pug">
+  .calendar-column-wrapper.flex.flex-col(v-for="date in dateRange", :key="date")
+    .header.flex.flex-col.items-center.justify-center.top-0
+      span.font-bold.text-base.color-black {{ date?.format("D MMMM")}}
+      span.text-smm.color-grey {{ transformDayName(date?.format("dddd"))}}
+    .body.h-full
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "CalendarColumn",
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState({
+      selectedDates: (state) => state.calendar.selectedDates,
+    }),
+    dateRange() {
+      let diff = this.selectedDates?.to.diff(this.selectedDates?.from, "days");
+      let range = [];
+      for (let i = 0; i <= diff; i++) {
+        range.push(this.selectedDates?.from.clone().add(i, "day"));
+      }
+      return range;
+    },
+  },
+  methods: {
+    transformDayName(name) {
+      return name[0]?.toUpperCase() + name?.slice(1);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-column-wrapper
+  border-right: 1px solid var(--border-light-grey-color)
+  width: 380px
+
+.header
+  height: 60px
+  position: sticky
+  z-index: 5
+  background-color: var(--default-white)
+
+.body
+  position: relative
+  z-index: 3
+
+.color-black
+  color: var(--font-dark-blue-color)
+
+.color-grey
+  color: var(--font-grey-color)
+</style>
diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue
index 27320d0..195507a 100644
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -98,9 +98,6 @@ export default {
     ...mapState({
       selectedDates: (state) => state.calendar.selectedDates,
     }),
-    ...mapActions({
-      changeSelectedDates: "changeSelectedDates",
-    }),
   },
   methods: {
     previousWeek() {
@@ -111,27 +108,22 @@ export default {
       this.date.from = this.date.from.clone().add(1, "week");
       this.date.to = this.date.to.clone().add(1, "week");
     },
+    ...mapActions({
+      changeSelectedDates: "changeSelectedDates",
+    }),
   },
-  /*watch: {
-    selectedDates: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        console.log("в сторе", val);
-      },
-    },
+  watch: {
     date: {
-      immediate: true,
       deep: true,
       handler(val) {
-        console.log("в компоненте", val);
+        if (
+          !this.date?.from.isSame(this.selectedDates?.from) &&
+          !this.date?.to.isSame(this.selectedDates?.to)
+        )
+          this.changeSelectedDates(val);
       },
     },
-    calendarVisibility(val) {
-      console.log(val, this.changeSelectedDates);
-      if (val === false) this.changeSelectedDates(this.date);
-    },
-  },*/
+  },
   mounted() {
     this.date = {
       from: this.selectedDates.from.clone(),
diff --git a/src/pages/newCalendar/components/CalendarWrapper.vue b/src/pages/newCalendar/components/CalendarWrapper.vue
index 8c12a73..6425d02 100644
--- a/src/pages/newCalendar/components/CalendarWrapper.vue
+++ b/src/pages/newCalendar/components/CalendarWrapper.vue
@@ -1,11 +1,11 @@
 <template lang="pug">
-  .schedule.flex-1.flex.flex-col(
+  .schedule.flex-1.flex.flex-col.relative(
     :style="{width: openSidebar ? 'calc(100vw - 320px)' : 'calc(100vw - 160px)'}"
   )
     calendar-header.w-full.mb-1
     .schedule-body.h-full.bg-white.w-full
       .column-wrapper.flex.ml-20(:style="{width: '3040px'}")
-        calendar-column
+        calendar-columns
       .flex.w-full.relative.margin
         .time-coil-wrapper.left-0.-mt-12
           calendar-clock-column(:time-coil="timeCoil")
@@ -17,7 +17,7 @@
 import CalendarHeader from "@/pages/newCalendar/components/CalendarHeader";
 import CalendarBackground from "@/pages/newCalendar/components/CalendarBackground.vue";
 import CalendarClockColumn from "@/pages/newCalendar/components/CalendarClockColumn.vue";
-import CalendarColumn from "@/pages/newCalendar/components/CalendarColumn.vue";
+import CalendarColumns from "@/pages/newCalendar/components/CalendarColumns.vue";
 import { mapState } from "vuex";
 export default {
   name: "CalendarWrapper",
@@ -25,7 +25,7 @@ export default {
     CalendarHeader,
     CalendarBackground,
     CalendarClockColumn,
-    CalendarColumn,
+    CalendarColumns,
   },
   props: {
     openSidebar: Boolean,

From 4837b9536b2777d473edeb8be7fc53beee639dcc Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 9 Jun 2023 17:59:45 +0300
Subject: [PATCH 2/2] =?UTF-8?q?WIP=20=20=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CalendarBackground.vue         |  2 +-
 ...CalendarColumns.vue => CalendarColumn.vue} | 32 ++++-----
 .../newCalendar/components/CalendarHeader.vue | 14 ++--
 .../components/CalendarWrapper.vue            | 72 ++++++++++++++++---
 src/pages/oldCalendar/TheCalendar.vue         |  2 +-
 .../CalendarEventDescriptionCard.vue          |  2 +-
 .../components/CalendarFormAddEvent.vue       |  2 +-
 src/store/modules/calendar.js                 |  4 +-
 8 files changed, 86 insertions(+), 44 deletions(-)
 rename src/pages/newCalendar/components/{CalendarColumns.vue => CalendarColumn.vue} (54%)

diff --git a/src/pages/newCalendar/components/CalendarBackground.vue b/src/pages/newCalendar/components/CalendarBackground.vue
index 0a89d16..0b729b4 100644
--- a/src/pages/newCalendar/components/CalendarBackground.vue
+++ b/src/pages/newCalendar/components/CalendarBackground.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .w-full.flex.flex-col
+  .flex.flex-col
     .line-wrapper
       .line.flex.items-center(
         v-for="hour in timeCount",
diff --git a/src/pages/newCalendar/components/CalendarColumns.vue b/src/pages/newCalendar/components/CalendarColumn.vue
similarity index 54%
rename from src/pages/newCalendar/components/CalendarColumns.vue
rename to src/pages/newCalendar/components/CalendarColumn.vue
index 69bee37..de3d2ff 100644
--- a/src/pages/newCalendar/components/CalendarColumns.vue
+++ b/src/pages/newCalendar/components/CalendarColumn.vue
@@ -1,31 +1,19 @@
 <template lang="pug">
-  .calendar-column-wrapper.flex.flex-col(v-for="date in dateRange", :key="date")
-    .header.flex.flex-col.items-center.justify-center.top-0
+  .calendar-column-wrapper.flex.flex-col
+    .header.flex.flex-col.items-center.justify-center.top-0.pt-3.pb-10px
       span.font-bold.text-base.color-black {{ date?.format("D MMMM")}}
       span.text-smm.color-grey {{ transformDayName(date?.format("dddd"))}}
     .body.h-full
+    .footer.flex.items-center.justify-center.bg-white.h-9(v-if="!expandedDisplayType")
+      span.text-smm.color-grey 0 записей
 </template>
 
 <script>
-import { mapState } from "vuex";
 export default {
   name: "CalendarColumn",
-  props: {},
-  data() {
-    return {};
-  },
-  computed: {
-    ...mapState({
-      selectedDates: (state) => state.calendar.selectedDates,
-    }),
-    dateRange() {
-      let diff = this.selectedDates?.to.diff(this.selectedDates?.from, "days");
-      let range = [];
-      for (let i = 0; i <= diff; i++) {
-        range.push(this.selectedDates?.from.clone().add(i, "day"));
-      }
-      return range;
-    },
+  props: {
+    date: Object,
+    expandedDisplayType: Boolean,
   },
   methods: {
     transformDayName(name) {
@@ -39,9 +27,10 @@ export default {
 .calendar-column-wrapper
   border-right: 1px solid var(--border-light-grey-color)
   width: 380px
+  &:last-child
+    border-right: none
 
 .header
-  height: 60px
   position: sticky
   z-index: 5
   background-color: var(--default-white)
@@ -55,4 +44,7 @@ export default {
 
 .color-grey
   color: var(--font-grey-color)
+
+.footer
+  border-top: 1px solid var(--border-light-grey-color)
 </style>
diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue
index 195507a..1f082ce 100644
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -53,7 +53,7 @@
       ) 
     .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52
       q-btn-toggle(
-        v-model="displayType",
+        v-model="value",
         :options="displayTypesList",
         no-caps,
         toggle-color="light-blue-4",
@@ -63,24 +63,24 @@
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
-//import * as moment from "moment/moment";
 import BaseCalendar from "@/components/base/BaseCalendar";
 import { mapState, mapActions } from "vuex";
+import { v_model } from "@/shared/mixins/v-model";
 export default {
   name: "CalendarHeader",
+  mixins: [v_model],
   components: { BaseInput, BaseCalendar },
   data() {
     return {
-      displayType: "collapsed",
       displayTypesList: [
-        {
-          label: "col",
-          value: "collapsed",
-        },
         {
           label: "exp",
           value: "expanded",
         },
+        {
+          label: "col",
+          value: "collapsed",
+        },
       ],
       date: {
         from: null,
diff --git a/src/pages/newCalendar/components/CalendarWrapper.vue b/src/pages/newCalendar/components/CalendarWrapper.vue
index 6425d02..c045171 100644
--- a/src/pages/newCalendar/components/CalendarWrapper.vue
+++ b/src/pages/newCalendar/components/CalendarWrapper.vue
@@ -2,22 +2,31 @@
   .schedule.flex-1.flex.flex-col.relative(
     :style="{width: openSidebar ? 'calc(100vw - 320px)' : 'calc(100vw - 160px)'}"
   )
-    calendar-header.w-full.mb-1
+    calendar-header.w-full.mb-1(v-model="displayType")
     .schedule-body.h-full.bg-white.w-full
-      .column-wrapper.flex.ml-20(:style="{width: '3040px'}")
-        calendar-columns
-      .flex.w-full.relative.margin
+      .column-wrapper.flex.ml-20(:style="expandedDisplayType ? columnWrapperWidth : {}")
+        calendar-column(
+          v-for="date in dateRange",
+          :key="date",
+          :date="date",
+          :style="columnSize",
+          :expanded-display-type="expandedDisplayType"
+        )
+      .flex.relative(
+        :style="expandedDisplayType ? backgroundWrapperWidth : {}",
+        :class="{'border-bottom': expandedDisplayType}"
+      )
         .time-coil-wrapper.left-0.-mt-12
           calendar-clock-column(:time-coil="timeCoil")
-        calendar-background
-    .w-full.h-3.bg-white.footer
+        calendar-background.flex-1
+    .w-full.h-3.bg-white.footer(v-if="expandedDisplayType")
 </template>
 
 <script>
 import CalendarHeader from "@/pages/newCalendar/components/CalendarHeader";
 import CalendarBackground from "@/pages/newCalendar/components/CalendarBackground.vue";
 import CalendarClockColumn from "@/pages/newCalendar/components/CalendarClockColumn.vue";
-import CalendarColumns from "@/pages/newCalendar/components/CalendarColumns.vue";
+import CalendarColumn from "@/pages/newCalendar/components/CalendarColumn.vue";
 import { mapState } from "vuex";
 export default {
   name: "CalendarWrapper",
@@ -25,18 +34,32 @@ export default {
     CalendarHeader,
     CalendarBackground,
     CalendarClockColumn,
-    CalendarColumns,
+    CalendarColumn,
   },
   props: {
     openSidebar: Boolean,
   },
   data() {
-    return {};
+    return {
+      displayType: "expanded",
+    };
   },
   computed: {
     ...mapState({
       workingHours: (state) => state.calendar.workingHours,
+      selectedDates: (state) => state.calendar.selectedDates,
     }),
+    expandedDisplayType() {
+      return this.displayType === "expanded";
+    },
+    dateRange() {
+      let diff = this.selectedDates?.to.diff(this.selectedDates?.from, "days");
+      let range = [];
+      for (let i = 0; i <= diff; i++) {
+        range.push(this.selectedDates?.from.clone().add(i, "day"));
+      }
+      return range;
+    },
     validateStartTime() {
       return this.verifyTime(this.workingHours.start);
     },
@@ -50,6 +73,25 @@ export default {
       }
       return time;
     },
+    columnSize() {
+      return this.expandedDisplayType
+        ? {
+            height: `${this.timeCoil.length * 76 + 60}px`,
+          }
+        : {
+            height: `${this.timeCoil.length * 76 + 96}px`,
+          };
+    },
+    columnWrapperWidth() {
+      return {
+        width: `${380 * this.dateRange.length}px`,
+      };
+    },
+    backgroundWrapperWidth() {
+      return {
+        width: `${380 * this.dateRange.length + 80}px`,
+      };
+    },
   },
   methods: {
     verifyTime(dayTime) {
@@ -63,7 +105,6 @@ export default {
 
 <style lang="sass" scoped>
 .schedule-body
-  width: 100%
   overflow-x: auto
   border-top-left-radius: 4px
   border-top-right-radius: 4px
@@ -80,6 +121,7 @@ export default {
   padding-top: 38px
 
 .column-wrapper
+  height: 60px
   position: relative
   background-color: var(--default-white)
 
@@ -87,6 +129,14 @@ export default {
   border-bottom-left-radius: 4px
   border-bottom-right-radius: 4px
 
-.margin
+.border-bottom
   border-bottom: 4px solid var(--bg-ligth-blue-color)
+
+.records-count
+  border-right: 1px solid var(--border-light-grey-color)
+  &:last-child
+    border-right: none
+
+.border-top
+  border-top: 1px solid var(--border-light-grey-color)
 </style>
diff --git a/src/pages/oldCalendar/TheCalendar.vue b/src/pages/oldCalendar/TheCalendar.vue
index caa3a1d..6a6fd5b 100644
--- a/src/pages/oldCalendar/TheCalendar.vue
+++ b/src/pages/oldCalendar/TheCalendar.vue
@@ -51,7 +51,7 @@ import CalendarSidebar from "./components/CalendarSidebar.vue";
 import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import CalendarDeleteModal from "./components/CalendarDeleteModal.vue";
-import { statusesConfig } from "@/pages/calendar/utils/statusesConfig";
+import { statusesConfig } from "@/pages/oldCalendar/utils/statusesConfig";
 
 export default {
   name: "TheCalendar",
diff --git a/src/pages/oldCalendar/components/CalendarEventDescriptionCard.vue b/src/pages/oldCalendar/components/CalendarEventDescriptionCard.vue
index f12f1b3..51ac05f 100644
--- a/src/pages/oldCalendar/components/CalendarEventDescriptionCard.vue
+++ b/src/pages/oldCalendar/components/CalendarEventDescriptionCard.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import { statusesConfig } from "@/pages/calendar/utils/statusesConfig";
+import { statusesConfig } from "@/pages/oldCalendar/utils/statusesConfig";
 
 export default {
   name: "CalendarEventDescriptionCard",
diff --git a/src/pages/oldCalendar/components/CalendarFormAddEvent.vue b/src/pages/oldCalendar/components/CalendarFormAddEvent.vue
index c0ee584..26a7e66 100644
--- a/src/pages/oldCalendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/oldCalendar/components/CalendarFormAddEvent.vue
@@ -82,7 +82,7 @@ import BaseSelect from "@/components/base/BaseSelect.vue";
 import * as moment from "moment/moment";
 import BaseModal from "@/components/base/BaseModal.vue";
 import { v_model } from "@/shared/mixins/v-model";
-import { statusesConfig } from "@/pages/calendar/utils/statusesConfig";
+import { statusesConfig } from "@/pages/oldCalendar/utils/statusesConfig";
 
 export default {
   name: "FormChangeEvent",
diff --git a/src/store/modules/calendar.js b/src/store/modules/calendar.js
index da648d4..373f41a 100644
--- a/src/store/modules/calendar.js
+++ b/src/store/modules/calendar.js
@@ -7,8 +7,8 @@ const state = () => ({
     end: "18:00",
   },
   selectedDates: {
-    from: moment(),
-    to: moment().clone().add(6, "day"),
+    from: moment().clone().startOf("week"),
+    to: moment().clone().endOf("week"),
   },
 });