From cbc4ed5b513f869148801ff6ca299a048f1ff415 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 8 Jun 2023 17:02:26 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=B4=D0=B0=D1=82=D1=8B=20=D0=B2=20=D1=81=D1=82?=
 =?UTF-8?q?=D0=BE=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseCalendar.vue          | 14 +++---
 .../newCalendar/components/CalendarColumn.vue | 45 +++++++++++++++++
 .../newCalendar/components/CalendarHeader.vue | 39 +++++++++++++--
 .../components/CalendarWrapper.vue            | 50 +++++++++++--------
 src/store/modules/calendar.js                 | 17 ++++++-
 5 files changed, 133 insertions(+), 32 deletions(-)
 create mode 100644 src/pages/newCalendar/components/CalendarColumn.vue

diff --git a/src/components/base/BaseCalendar.vue b/src/components/base/BaseCalendar.vue
index 76926cc..13c1f18 100644
--- a/src/components/base/BaseCalendar.vue
+++ b/src/components/base/BaseCalendar.vue
@@ -191,19 +191,21 @@ export default {
   border-bottom: 1px solid var(--border-light-grey-color)
 .week-item
   color: var(--font-grey-color)
-.week-item:nth-last-child(-n+2)
-  color: var(--border-red-color)
+  &:nth-last-child(-n+2)
+    color: var(--border-red-color)
 .date-active
   color: var(--default-white),
   background-color: var(--btn-blue-color)
-.date-active:hover
-  opacity: 0.5
+  &:hover
+    opacity: 0.5
 .date-other
   color: var(--font-grey-color)
+  &:hover
+    background-color: var(--border-light-grey-color)
 .date-month
   color: var(--font-black-color)
-.date-other:hover, .date-month:hover
-  background-color: var(--border-light-grey-color)
+  &:hover
+    background-color: var(--border-light-grey-color)
 .date-today:hover, .date-range:hover
   background-color: var(--btn-blue-color-2)
 .date-today
diff --git a/src/pages/newCalendar/components/CalendarColumn.vue b/src/pages/newCalendar/components/CalendarColumn.vue
new file mode 100644
index 0000000..e43f3b8
--- /dev/null
+++ b/src/pages/newCalendar/components/CalendarColumn.vue
@@ -0,0 +1,45 @@
+<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/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue
index 9df7aee..27320d0 100644
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -63,8 +63,9 @@
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
-import * as moment from "moment/moment";
+//import * as moment from "moment/moment";
 import BaseCalendar from "@/components/base/BaseCalendar";
+import { mapState, mapActions } from "vuex";
 export default {
   name: "CalendarHeader",
   components: { BaseInput, BaseCalendar },
@@ -82,8 +83,8 @@ export default {
         },
       ],
       date: {
-        from: moment(),
-        to: moment().clone().add(6, "day"),
+        from: null,
+        to: null,
       },
       calendarVisibility: false,
     };
@@ -94,6 +95,12 @@ export default {
         "D MMMM YYYY"
       )} - ${this.date?.to?.format("D MMMM YYYY")}`;
     },
+    ...mapState({
+      selectedDates: (state) => state.calendar.selectedDates,
+    }),
+    ...mapActions({
+      changeSelectedDates: "changeSelectedDates",
+    }),
   },
   methods: {
     previousWeek() {
@@ -105,6 +112,32 @@ export default {
       this.date.to = this.date.to.clone().add(1, "week");
     },
   },
+  /*watch: {
+    selectedDates: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        console.log("в сторе", val);
+      },
+    },
+    date: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        console.log("в компоненте", val);
+      },
+    },
+    calendarVisibility(val) {
+      console.log(val, this.changeSelectedDates);
+      if (val === false) this.changeSelectedDates(this.date);
+    },
+  },*/
+  mounted() {
+    this.date = {
+      from: this.selectedDates.from.clone(),
+      to: this.selectedDates.to.clone(),
+    };
+  },
 };
 </script>
 
diff --git a/src/pages/newCalendar/components/CalendarWrapper.vue b/src/pages/newCalendar/components/CalendarWrapper.vue
index 38a5aec..8c12a73 100644
--- a/src/pages/newCalendar/components/CalendarWrapper.vue
+++ b/src/pages/newCalendar/components/CalendarWrapper.vue
@@ -1,32 +1,32 @@
 <template lang="pug">
-  .schedule.flex-1.flex.gap-y-1.flex-col(
+  .schedule.flex-1.flex.flex-col(
     :style="{width: openSidebar ? 'calc(100vw - 320px)' : 'calc(100vw - 160px)'}"
   )
-    calendar-header.w-full
-    .schedule-body.rounded.h-full.bg-white.w-full
-      .w-full(:style="{height: '60px'}")
-      .flex.w-full.relative
+    calendar-header.w-full.mb-1
+    .schedule-body.h-full.bg-white.w-full
+      .column-wrapper.flex.ml-20(:style="{width: '3040px'}")
+        calendar-column
+      .flex.w-full.relative.margin
         .time-coil-wrapper.left-0.-mt-12
           calendar-clock-column(:time-coil="timeCoil")
         calendar-background
-    // q-scroll-area.rounded(
-      :horizontal-thumb-style="thumbStyle",
-      :horizontal-bar-style="barStyle",
-      visible
-      style="height: 100%; max-width: 100%"
-    //)
-      .flex.bg-red-700.background(:style="{width: '3040px', height: '400px'}")
-      .bar-conteiner.w-full.rounded.bg-white.h-8.absolute.bottom-0
+    .w-full.h-3.bg-white.footer
 </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 CalendarColumn from "@/pages/newCalendar/components/CalendarColumn.vue";
 import { mapState } from "vuex";
 export default {
   name: "CalendarWrapper",
-  components: { CalendarHeader, CalendarBackground, CalendarClockColumn },
+  components: {
+    CalendarHeader,
+    CalendarBackground,
+    CalendarClockColumn,
+    CalendarColumn,
+  },
   props: {
     openSidebar: Boolean,
   },
@@ -64,14 +64,11 @@ export default {
 <style lang="sass" scoped>
 .schedule-body
   width: 100%
-  //overflow-y: auto
   overflow-x: auto
-  //&::-webkit-scrollbar-track:horizontal
-  //  margin: 0 24px 0 104px
-  //&::-webkit-scrollbar-track:vertical
-  //  margin: 48px 0 24px 0
-.q-scrollarea :deep(.q-scrollarea__bar), .q-scrollarea :deep(.q-scrollarea__thumb)
-  opacity: 1
+  border-top-left-radius: 4px
+  border-top-right-radius: 4px
+  &::-webkit-scrollbar-track:horizontal
+    margin: 0 24px 0 24px
 
 .background
   background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)
@@ -81,4 +78,15 @@ export default {
   z-index: 5
   background-color: var(--default-white)
   padding-top: 38px
+
+.column-wrapper
+  position: relative
+  background-color: var(--default-white)
+
+.footer
+  border-bottom-left-radius: 4px
+  border-bottom-right-radius: 4px
+
+.margin
+  border-bottom: 4px solid var(--bg-ligth-blue-color)
 </style>
diff --git a/src/store/modules/calendar.js b/src/store/modules/calendar.js
index 8b01bca..da648d4 100644
--- a/src/store/modules/calendar.js
+++ b/src/store/modules/calendar.js
@@ -1,17 +1,30 @@
 import * as moment from "moment/moment";
+moment.locale("ru");
 const state = () => ({
   currentDate: moment(),
   workingHours: {
     start: "8:00",
     end: "18:00",
   },
+  selectedDates: {
+    from: moment(),
+    to: moment().clone().add(6, "day"),
+  },
 });
 
 const getters = {};
 
-const actions = {};
+const actions = {
+  changeSelectedDates({ commit }, dates) {
+    commit("setSelectedDates", dates);
+  },
+};
 
-const mutations = {};
+const mutations = {
+  setSelectedDates(state, data) {
+    state.selectedDates = { ...data };
+  },
+};
 
 export default {
   state,