Merge pull request #28 from dderbentsov/UC-11

WIP Сделала разлиновку подложки календаря

src/assets/icons/lock.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8385 5.34315C15.028 5.71146 15.4802 5.85641 15.8486 5.6669C16.2169 5.47738 16.3618 5.02517 16.1723 4.65685L14.8385 5.34315ZM5 21H4.25C4.25 21.4142 4.58579 21.75 5 21.75V21ZM19 21V21.75C19.4142 21.75 19.75 21.4142 19.75 21H19ZM19 11H19.75C19.75 10.5858 19.4142 10.25 19 10.25V11ZM5 11V10.25C4.58579 10.25 4.25 10.5858 4.25 11H5ZM8.75 11V7H7.25V11H8.75ZM8.75 7C8.75 6.45335 8.92016 5.61668 9.40865 4.93823C9.8696 4.29802 10.6444 3.75 12 3.75V2.25C10.1556 2.25 8.9304 3.03532 8.19135 4.06177C7.47984 5.04998 7.25 6.21332 7.25 7H8.75ZM12 3.75C13.5991 3.75 14.4125 4.51517 14.8385 5.34315L16.1723 4.65685C15.5181 3.38547 14.2215 2.25 12 2.25V3.75ZM5 21.75H19V20.25H5V21.75ZM19.75 21V11H18.25V21H19.75ZM4.25 11V21H5.75V11H4.25ZM8 10.25H5V11.75H8V10.25ZM19 10.25H8V11.75H19V10.25Z" fill="#252850"/>
+</svg>

src/components/base/buttons/BaseDocOkButton.vue

@@ -0,0 +1,37 @@
+<template lang="pug">
+  button.icon-wrap.flex.items-center.justify-center.py-1.px-2(:class="{disable: isDisable}")
+    span(v-if="numberIsVisible") 3
+    .icon-doc-ok.text-xxl
+</template>
+
+<script>
+export default {
+  name: "DocOkButton",
+  data() {
+    return {
+      numberIsVisible: false,
+      isDisable: true,
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.disable
+  opacity: 0.5
+
+.icon-wrap
+  height: 32px
+  background-color: var(--btn-blue-color-1)
+  color: var(--btn-blue-color)
+  border-radius: 4px
+  &:hover
+    background-color: var(--btn-blue-color-2)
+  &:active
+    background-color: var(--font-dark-blue-color)
+    color: var(--default-white)
+
+.icon-doc-ok
+  width: 24px
+  height: 24px
+</style>

src/pages/calendar/TheCalendar.vue

@@ -1,21 +1,29 @@
 <template lang="pug">
-  calendar-header(
-    :currentDay="currentDate"
-    @previous-date="switchPreviousDate"
-    @next-date="switchNextDate"
-    @selectedLayout="changeCalendarLayout")
+  .calendar-container.ml-2
+    calendar-header(
+      :currentDay="currentDate"
+      @previous-date="switchPreviousDate"
+      @next-date="switchNextDate"
+      @selectedLayout="changeCalendarLayout")
+    calendar-column(:info="columnInfo") 
 </template>
 
 <script>
 import * as moment from "moment/moment";
 import CalendarHeader from "./components/CalendarHeader.vue";
+import CalendarColumn from "./components/CalendarColumn.vue";
+import teamMemberAvatar from "@/assets/images/team-member.svg";
 export default {
   name: "TheCalendar",
-  components: { CalendarHeader },
+  components: { CalendarHeader, CalendarColumn },
   data() {
     return {
       currentDate: moment(),
       calendarLayout: "",
+      columnInfo: {
+        name: "Захарова А.О.",
+        avatar: teamMemberAvatar,
+      },
     };
   },
   methods: {
@@ -31,3 +39,8 @@ export default {
   },
 };
 </script>
+
+<style lang="sass" scoped>
+.calendar-container
+  width: 100%
+</style>

src/pages/calendar/components/CalendarColumn.vue

@@ -0,0 +1,57 @@
+<template lang="pug">
+  .calendar-column-wrapper.flex.flex-col
+    .header.flex.items-center.justify-between.py-2.px-6
+      .flex.items-center
+        img.avatar-wrapper.mr-2(:src="info.avatar" alt="Team member")
+        span.member-name.font-medium.text-base.mr-6 {{ info.name }}
+        img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
+      base-doc-ok-button
+    .body.flex.flex-col
+      .line.flex.items-center(v-for="hour in 10" :key="hour")
+        .middle-line
+</template>
+
+<script>
+import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
+export default {
+  name: "CalendarColumn",
+  components: { BaseDocOkButton },
+  props: {
+    info: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-column-wrapper
+  width: 100%
+  background-color: var(--default-white)
+
+.header
+  height: 48px
+  border-bottom: 1px solid var(--border-light-grey-color)
+
+.avatar-wrapper
+  width: 32px
+  height: 32px
+
+.icon-wrapper
+  width: 24px
+  height: 24px
+
+.member-name
+  color: var(--font-dark-blue-color)
+
+.line
+  border-bottom: 1px solid var(--border-light-grey-color)
+  height: 62px
+
+.middle-line
+  border-top: 1px dashed var(--border-light-grey-color)
+  width: 100%
+</style>

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -134,10 +134,12 @@ export default {
   background-color: var(--default-white)
   box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
   border-radius: 4px
+
 .form-item
   border-radius: 4px
   width: fit-content
   background-color: var(--bg-ligth-blue-color)
+
 .item-input
   appearance: none
   border: none
@@ -149,10 +151,12 @@ export default {
     -webkit-appearance: none
   &::placeholder
     color: var(--font-black-color-1)
+
 .icon
   width: 24px
   height: 24px
   color: var(--font-dark-blue-color)
+
 .close-icon
   color: var(--font-dark-blue-color)
   &:hover

src/pages/calendar/components/CalendarHeader.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-header-wrapper.flex.items-center.justify-between.ml-2.py-3.pl-5.pr-6
+  .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-arrow-button.right-arrow.mr-6(@click="nextHandler")