Merge pull request #79 from dderbentsov/UC-24

Добавила в хедер колонок чекбокс

server.js

@@ -458,9 +458,9 @@ export function clientsServer() {
         previous: null,
         results: [
           {
-            id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
+            id: "6fgg6bb6-1de6-422c-a401-1b35cd455303",
-            start: "2022-10-27T11:15:49Z",
+            start: "2022-10-28T11:15:49Z",
-            end: "2022-10-27T12:00:53Z",
+            end: "2022-10-28T12:00:53Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -502,8 +502,8 @@ export function clientsServer() {
           },
           {
             id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
-            start: "2022-10-27T13:00:49Z",
+            start: "2022-10-28T13:00:49Z",
-            end: "2022-10-27T13:30:53Z",
+            end: "2022-10-28T13:30:53Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -545,8 +545,8 @@ export function clientsServer() {
           },
           {
             id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-27T15:00:00Z",
+            start: "2022-10-28T15:00:00Z",
-            end: "2022-10-27T16:10:00Z",
+            end: "2022-10-28T16:10:00Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -588,8 +588,8 @@ export function clientsServer() {
           },
           {
             id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-25T17:10:00Z",
+            start: "2022-10-28T17:10:00Z",
-            end: "2022-10-25T18:00:00Z",
+            end: "2022-10-28T18:00:00Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -631,8 +631,8 @@ export function clientsServer() {
           },
           {
             id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-27T20:10:00Z",
+            start: "2022-10-28T20:10:00Z",
-            end: "2022-10-27T21:00:00Z",
+            end: "2022-10-28T21:00:00Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -672,6 +672,49 @@ export function clientsServer() {
               },
             ],
           },
+          {
+            id: "3faa5ff3-3de6-422c-a401-1b35cd455333",
+            start: "2022-10-28T12:30:00Z",
+            end: "2022-10-28T15:30:00Z",
+            kind: "call",
+            subkind: null,
+            description: "",
+            location: null,
+            members: [
+              {
+                id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
+                person: {
+                  id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
+                  last_name: "Елесеевская",
+                  first_name: "Татьяна",
+                  patronymic: "Ивановна",
+                },
+                role: null,
+              },
+            ],
+            employees: [
+              {
+                id: "f941a0c6-c734-4f79-92c2-d7a5674459e422",
+                employee: {
+                  id: "db831a15-e876-481f-a658-6325de7c311e",
+                  last_name: "Константинопольская",
+                  first_name: "Юлия",
+                  patronymic: "Викторовна",
+                },
+                role: null,
+              },
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db541a67-e836-481f-a653-6325de7c567e",
+                  last_name: "Захарова",
+                  first_name: "Ольга",
+                  patronymic: "Александровна",
+                },
+                role: "owner",
+              },
+            ],
+          },
         ],
       }));
       this.passthrough("http://45.84.227.122:8080/**");

src/components/HeaderAddClientButton.vue

@@ -1,28 +0,0 @@
-<template lang="pug">
-  button.add-client-button.flex.items-center.justify-center
-    .icon-wrapper.flex.items-center.justify-center.icon-plus.text-xsm
-    .icon-wrapper.flex.items-center.justify-center.icon-person.text-m
-</template>
-
-<script>
-export default {
-  name: "HeaderAddClientButton",
-};
-</script>
-
-<style lang="sass" scoped>
-.add-client-button
-  width: 80px
-  height: 40px
-  background-color: var(--btn-blue-color)
-  color: var(--default-white)
-  border-radius: 4px
-  &:hover
-    background-color: var(--btn-blue-color-4)
-  &:active
-    background-color: var(--font-dark-blue-color)
-
-.icon-wrapper
-  width: 24px
-  height: 24px
-</style>

src/components/TheHeader.vue

@@ -6,11 +6,11 @@
     //- .charge-person-container
     //-   header-active-client-panel(:info="chargePersonInfo")
     .flex.ml-auto
-      header-add-client-button.mr-9
+      base-button.mr-9(left-icon="icon-plus", :icon-left-size="10", :size="40", right-icon="icon-person", :icon-right-size="18")
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0
         .icon-bell.text-xxl
       .flex.justify-centflexer.items-center
-        BaseAvatar(:size="32").mr-2
+        base-avatar(:size="32").mr-2
           img(:src="avatarSrc")
         button.header-buttons
           .icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
@@ -20,11 +20,11 @@
 import img from "@/assets/images/avatar.svg";
 import chargePersonAvatar from "@/assets/images/charge-person-avatar.svg";
 import HeaderInputs from "./HeaderInputs.vue";
-import HeaderAddClientButton from "./HeaderAddClientButton.vue";
 import BaseAvatar from "@/components/base/BaseAvatar";
+import BaseButton from "@/components/base/BaseButton.vue";
 export default {
   name: "TheHeader",
-  components: { HeaderInputs, HeaderAddClientButton, BaseAvatar },
+  components: { HeaderInputs, BaseAvatar, BaseButton },
   data() {
     return {
       avatarSrc: img,
@@ -64,10 +64,6 @@ export default {
   height: 24px
   color: var(--font-dark-blue-color)
 
-.avatar-img
-  width: 32px
-  height: 32px
-
 .charge-person-container
   position: absolute
 </style>

src/components/base/buttons/BaseArrowButton.vue

@@ -1,20 +0,0 @@
-<template lang="pug">
-  button.arrow-button.flex.items-center.icon-down-arrow.text-base.px-2.pt-3px
-</template>
-
-<script>
-export default {
-  name: "ArrowButton",
-};
-</script>
-
-<style lang="sass" scoped>
-.arrow-button
-  width: 32px
-  height: 32px
-  background-color: var(--btn-blue-color-1)
-  color: var(--btn-blue-color)
-  border-radius: 50%
-  &:hover
-    background-color: var(--btn-blue-color-2)
-</style>

src/pages/calendar/TheCalendar.vue

@@ -25,8 +25,8 @@ export default {
       calendarLayout: "",
       currentDate: moment(),
       timeInformation: {
-        dayStartTime: "8:00",
+        dayStartTime: "0:00",
-        dayEndTime: "24:00",
+        dayEndTime: "20:00",
       },
       eventsData: [],
       teamData: [],

src/pages/calendar/components/CalendarBackground.vue

@@ -1,9 +1,8 @@
 <template lang="pug">
-  .calendar-background-wrapper.flex.flex-col(
+  .flex.flex-col(
-    ref="backgroundWrapper"
     :style="backgroundExtendedWidth"
     )
-    .body.flex.flex-col
+    .flex.flex-col
       .line-wrapper
         .line.flex.items-center(
           v-for="hour in timeCoil"
@@ -17,26 +16,16 @@ export default {
   name: "CalendarBackground",
   props: {
     timeCoil: Array,
-    filteredOwners: Array,
-    eventsData: Array,
-    currentDate: Object,
-    sidebarWidth: String,
-    dayStartTime: Number,
-    dayEndTime: Number,
     ownersCount: Number,
   },
   data() {
     return {
-      backgroundWidth: 0,
       columnWidth: 0,
       defaultColumnWidth: 470,
       pixelsPerHour: 62,
     };
   },
   computed: {
-    ownersArrayLength() {
-      return this.filteredOwners.length;
-    },
     backgroundExtendedWidth() {
       if (this.ownersCount > 3) {
         return {
@@ -47,56 +36,14 @@ export default {
         width: "100%",
       };
     },
-    backgroundHeight() {
-      return (this.timeCoil.length - 1) * this.pixelsPerHour + 48;
-    },
-    horizontalScrollPresence() {
-      return {
-        "scroll-x": this.ownersArrayLength > 3,
-      };
-    },
-  },
-  methods: {
-    calculateColumnPosition(elemIndex) {
-      let deductible = parseInt(this.sidebarWidth.slice(0, -2), 10) - 72;
-      if (this.ownersArrayLength < 4) {
-        this.columnWidth =
-          (this.backgroundWidth - deductible) / this.ownersArrayLength;
-        return {
-          width: `${this.columnWidth}px`,
-          height: `${this.backgroundHeight}px`,
-          left: `${elemIndex * this.columnWidth}px`,
-        };
-      }
-      return {
-        width: `${this.defaultColumnWidth}px`,
-        height: `${this.backgroundHeight}px`,
-        left: `${elemIndex * this.defaultColumnWidth}px`,
-      };
-    },
-    calculateBackgroundWidth() {
-      this.backgroundWidth = this.$refs.backgroundWrapper.scrollWidth;
-    },
-  },
-  mounted() {
-    this.calculateBackgroundWidth();
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.calendar-background-wrapper
-  position: relative
-
-.header-wrapper
-  position: relative
-
 .header
   height: 48px
 
-.body
-  position: relative
-
 .line
   border-bottom: 1px solid var(--border-light-grey-color)
   height: 62px

src/pages/calendar/components/CalendarColumn.vue

@@ -2,11 +2,13 @@
   .calendar-column-wrapper.flex.flex-col
     .header.flex.items-center.justify-between.py-2.px-6.top-0
       .flex.items-center
-        img.avatar-wrapper.mr-2(src="@/assets/images/team-member.svg" alt="Team member")
+        base-avatar.mr-2(:size="32")
+          img(:src="ownerData.avatar" alt="Team member" v-if="ownerData.avatar")
+          span(v-if="!ownerData.avatar") {{ defaultAvatar }}
         span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
-      base-doc-ok-button
+      column-header-checkbox
-    .body
+    .body.pl-1
       calendar-event-card(
         v-for="event in dayEvents"
         :key="event.id"
@@ -16,11 +18,16 @@
 </template>
 
 <script>
-import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
+import ColumnHeaderCheckbox from "./CalendarColumnHeaderCheckbox.vue";
+import BaseAvatar from "@/components/base/BaseAvatar";
 import CalendarEventCard from "./CalendarEventCard.vue";
 export default {
   name: "CalendarColumn",
-  components: { BaseDocOkButton, CalendarEventCard },
+  components: {
+    CalendarEventCard,
+    BaseAvatar,
+    ColumnHeaderCheckbox,
+  },
   props: {
     ownerData: Object,
     dayEvents: Array,
@@ -42,6 +49,9 @@ export default {
       }
       return null;
     },
+    defaultAvatar() {
+      return `${this.ownerData.last_name[0]}${this.ownerData.first_name[0]}`;
+    },
     pixelsPerMinute() {
       return this.pixelsPerHour / 60;
     },
@@ -76,8 +86,6 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
   border-right: 1px solid var(--border-light-grey-color)
-  &:nth-last-child(2) .header
-    border-right: none
   &:last-child
     border-right: none
 
@@ -90,9 +98,9 @@ export default {
   position: relative
   z-index: 3
 
-.avatar-wrapper
+.btn
-  width: 32px
+  opacity: 0.5
-  height: 32px
+  padding: 7px 13px !important
 
 .icon-wrapper
   width: 24px

src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue

@@ -1,25 +1,32 @@
 <template lang="pug">
-  button.icon-wrap.flex.items-center.justify-center.py-1.px-2(:class="{disable: isDisable}")
+  div.icon-wrap.flex.items-center.justify-center.cursor-pointer.py-1.px-2(
+      :class="{disable: !isChecked}"
+      @click="changeState"
+    )
     span(v-if="numberIsVisible") 3
     .icon-doc-ok.text-xxl
 </template>
 
 <script>
 export default {
-  name: "DocOkButton",
+  name: "CalendarColumnHeaderCheckbox",
   data() {
     return {
-      numberIsVisible: false,
+      isChecked: false,
-      isDisable: true,
     };
   },
+  methods: {
+    changeState() {
+      this.isChecked = !this.isChecked;
+      this.$emit("isChecked", this.isChecked);
+    },
+  },
 };
 </script>
 
 <style lang="sass" scoped>
 .disable
   opacity: 0.5
-
 .icon-wrap
   height: 32px
   background-color: var(--btn-blue-color-1)
@@ -30,7 +37,6 @@ export default {
   &:active
     background-color: var(--font-dark-blue-color)
     color: var(--default-white)
-
 .icon-doc-ok
   width: 24px
   height: 24px

src/pages/calendar/components/CalendarEventCard.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper.flex.px-2.my-1.cursor-pointer
+  .wrapper.flex.px-2.my-1.items-start.cursor-pointer(:style="cardHeight")
     .header.flex.justify-between.items-center
       .header-text
         span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
@@ -12,7 +12,15 @@ export default {
   props: {
     ownerEvent: Object,
   },
+  data() {
+    return {
+      pixelsPerHour: 62,
+    };
+  },
   computed: {
+    pixelsPerMinute() {
+      return this.pixelsPerHour / 60;
+    },
     eventTime() {
       return `${this.trimTime(this.ownerEvent.start)} - ${this.trimTime(
         this.ownerEvent.end
@@ -28,6 +36,24 @@ export default {
       }
       return this.composeFullName(membersArray[0].person);
     },
+    calculateCardHeight() {
+      let startTime = this.trimTime(this.ownerEvent.start)
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      console.log(startTime);
+      let endTime = this.trimTime(this.ownerEvent.end)
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      return (
+        (endTime[0] * 60 + endTime[1] - (startTime[0] * 60 + startTime[1])) *
+        this.pixelsPerMinute
+      );
+    },
+    cardHeight() {
+      return {
+        height: `${this.calculateCardHeight - 8}px`,
+      };
+    },
   },
   methods: {
     trimTime(time) {
@@ -42,7 +68,7 @@ export default {
 
 <style lang="sass" scoped>
 .wrapper
-  width: 100%
+  width: calc(100% - 8px)
   height: 23px
   border-radius: 4px
   background-color: var(--bg-event-yellow-color)

src/pages/calendar/components/CalendarHeader.vue

@@ -1,8 +1,10 @@
 <template lang="pug">
   .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
     .flex
-      base-arrow-button.left-arrow.mr-4(@click="previousHandler")
+      base-button.left-arrow.mr-4(left-icon="icon-down-arrow", rounded, secondary,
-      base-arrow-button.right-arrow.mr-6(@click="nextHandler")
+        :iconLeftSize="16", :size="32", @click="previousHandler")
+      base-button.right-arrow.mr-6(left-icon="icon-down-arrow", rounded, secondary,
+        :iconLeftSize="16", :size="32", @click="nextHandler")
       .text.flex.items-center
         span.font-medium.text-base {{ dateString }}
           span.today.font-bold.text-xxs(v-if="isCurrentDate")  Сегодня
@@ -10,11 +12,11 @@
 </template>
 
 <script>
-import BaseArrowButton from "@/components/base/buttons/BaseArrowButton.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
 import CalendarLayoutSwitch from "./CalendarLayoutSwitch.vue";
 export default {
   name: "CalendarHeader",
-  components: { BaseArrowButton, CalendarLayoutSwitch },
+  components: { CalendarLayoutSwitch, BaseButton },
   props: {
     currentDate: Object,
     isCurrentDate: Boolean,
@@ -54,9 +56,11 @@ export default {
   z-index: 10
 
 .left-arrow
+  padding: 3px 4px 0 4px !important
   transform: rotate(90deg)
 
 .right-arrow
+  padding: 3px 4px 0 4px !important
   transform: rotate(270deg)
 
 .text

src/pages/calendar/components/CalendarSchedule.vue

@@ -10,7 +10,7 @@
       @selected-layout="selectedLayout"
       )
     .schedule-body
-      .column-wrapper.flex.ml-20.relative(:style="columnWrapperWidth")
+      .column-wrapper.flex.ml-20(:style="columnWrapperWidth")
         calendar-column(
           v-for="(owner, index) in filteredOwners"
           :key="owner.id"
@@ -18,10 +18,10 @@
           :day-events="filterEventsByOwner(owner)"
           :day-start-time="validateStartTime"
           :day-end-time="validateEndTime"
-          :style="columnWidth"
+          :style="columnSize"
         )
       .flex.w-full.relative
-        .time-coil-wrapper.left-0.-mt-3
+        .time-coil-wrapper.left-0.-mt-12.pt-9
           calendar-clock-column(
             :timeCoil="timeCoil"
             :current-time="currentTime"
@@ -38,12 +38,7 @@
         )
         .flex(:class="calendarBackgroundWidth")
           calendar-background(
-            :current-date="currentDate"
             :time-coil="timeCoil"
-            :events-data="eventsData"
-            :sidebar-width="sidebarWidth"
-            :day-start-time="validateStartTime"
-            :day-end-time="validateEndTime"
             :owners-count="ownersCount"
             )
 </template>
@@ -125,7 +120,7 @@ export default {
     },
     circleIndicatorLocation() {
       return {
-        top: `${this.calculateIndicatorLocation() + 6}px`,
+        top: `${this.calculateIndicatorLocation() + 42}px`,
       };
     },
     pixelsPerMinute() {
@@ -187,7 +182,7 @@ export default {
         this.columnHeaderHeight
       );
     },
-    columnWidth() {
+    columnSize() {
       if (this.ownersCount > 3) {
         return {
           height: `${this.columnHeight}px`,
@@ -260,7 +255,7 @@ export default {
         if (this.convertTime(elem, 0, -3) === this.hours) {
           return this.hoursMinutes;
         }
-        return elem;
+        return elem.slice(0, -3) + ":00";
       });
     },
     verifyTime(dayTime) {
@@ -360,12 +355,14 @@ export default {
   z-index: 5
 
 .column-wrapper
+  position: relative
   height: 48px
   background-color: var(--default-white)
 
 .time-coil-wrapper
   position: sticky
   z-index: 5
+  background-color: var(--default-white)
 
 .schedule-body
   width: 100%