WIP Сделала колонки

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",

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")
+  .calendar-column-wrapper.flex.flex-col
-    .header.flex.flex-col.items-center.justify-center.top-0
+    .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: {},
+  props: {
-  data() {
+    date: Object,
-    return {};
+    expandedDisplayType: Boolean,
-  },
-  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) {
@@ -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>

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,

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'}")
+      .column-wrapper.flex.ml-20(:style="expandedDisplayType ? columnWrapperWidth : {}")
-        calendar-columns
+        calendar-column(
-      .flex.w-full.relative.margin
+          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
+        calendar-background.flex-1
-    .w-full.h-3.bg-white.footer
+    .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>

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",

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",

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",

src/store/modules/calendar.js

@@ -7,8 +7,8 @@ const state = () => ({
     end: "18:00",
   },
   selectedDates: {
-    from: moment(),
+    from: moment().clone().startOf("week"),
-    to: moment().clone().add(6, "day"),
+    to: moment().clone().endOf("week"),
   },
 });