From c2aeaf714eccd09ba48ef111f9a09cba04deafae Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 2 Nov 2022 12:11:12 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=B4=D1=82=D1=8F=D0=BD=D1=83?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D0=B5=20=D0=B8?=
 =?UTF-8?q?=D0=B7=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA=D0=B8=20?=
 =?UTF-8?q?=D0=B2=20=D1=80=D0=B0=D1=81=D0=BF=D0=B8=D1=81=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TheHeader.vue                  |  6 ++--
 src/pages/calendar/TheCalendar.vue            | 17 +++++-----
 .../components/CalendarBackground.vue         |  4 +--
 .../components/CalendarClockColumn.vue        |  2 +-
 .../calendar/components/CalendarColumn.vue    | 12 +++++--
 .../CalendarColumnHeaderCheckbox.vue          |  6 ++--
 .../calendar/components/CalendarEventCard.vue |  5 ++-
 .../components/CalendarFormAddEvent.vue       | 31 ++++++++++++-------
 .../components/CalendarLayoutSwitch.vue       |  4 +--
 .../calendar/components/CalendarSchedule.vue  | 27 ++++++++++++++--
 10 files changed, 75 insertions(+), 39 deletions(-)

diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 18d7072..965596c 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
   .header-wrapper.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
     .flex.items-center.box-border.cursor-pointer.mr-auto
-      img.logo-img.mr-29_25px(src="@/assets/images/logo.svg" alt="Logo")
+      img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
       header-inputs
     //- .charge-person-container
     //-   header-active-client-panel(:info="chargePersonInfo")
@@ -10,8 +10,8 @@
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0
         .icon-bell.text-xxl
       .flex.justify-centflexer.items-center
-        base-avatar(:size="32").mr-2
-          img(:src="avatarSrc")
+        base-avatar.mr-2(:size="32")
+          img(:src="avatarSrc", alt="Avatar")
         button.header-buttons
           .icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
 </template>
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 6b4456e..d116613 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,24 +1,22 @@
 <template lang="pug">
   .calendar-container.flex
-    calendar-sidebar(@width="changeWidth"
-    :team-data="employeesData"
-    :open-form-create="openFormCreateEvent")
+    calendar-sidebar(
+      @width="changeWidth"
+      :team-data="employeesData"
+      :open-form-create="openFormCreateEvent"
+    )
     calendar-schedule(
       :owners-data="employeesData"
       :current-date="currentDate"
       :time-information="timeInformation"
       :events-data="eventsData"
       :sidebar-width="sidebarWidth"
+      :close-form-create-event="closeFormCreateEvent"
+      :is-open-form="isOpenForm"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
     )
-    calendar-form-add-event(
-      v-if="isOpenForm"
-      :close-form="closeFormCreateEvent"
-      :owners-data="employeesData"
-      :members-data="membersData"
-    )
 </template>
 
 <script>
@@ -82,7 +80,6 @@ export default {
     changeWidth(value) {
       this.sidebarWidth = value;
     },
-
     openFormCreateEvent() {
       this.isOpenForm = true;
     },
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index b23d672..881aaea 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -1,13 +1,13 @@
 <template lang="pug">
   .flex.flex-col(
     :style="backgroundExtendedWidth"
-    )
+  )
     .flex.flex-col
       .line-wrapper
         .line.flex.items-center(
           v-for="hour in timeCoil"
           :key="hour"
-          )
+        )
           .middle-line
 </template>
 
diff --git a/src/pages/calendar/components/CalendarClockColumn.vue b/src/pages/calendar/components/CalendarClockColumn.vue
index f4b93f6..acd2f8a 100644
--- a/src/pages/calendar/components/CalendarClockColumn.vue
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -4,7 +4,7 @@
       v-for="hour in timeCoil"
       :key="hour"
       :class="currentHourStyle(hour)"
-      ) {{ hour }}
+    ) {{ hour }}
 </template>
 
 <script>
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index ea648d1..597bf1d 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -3,7 +3,11 @@
     .header.flex.items-center.justify-between.py-2.px-6.top-0
       .flex.items-center
         base-avatar.mr-2(:size="32", :color="ownerData.color")
-          img(:src="ownerData.avatar" alt="Team member" v-if="ownerData.avatar")
+          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")
@@ -14,7 +18,8 @@
         :key="event.id"
         :ownerEvent="event"
         :style="eventCardPosition(event.start, event.end)"
-        )
+        @selected-event="transmitEventData"
+      )
 </template>
 
 <script>
@@ -79,6 +84,9 @@ export default {
         top: `${position}px`,
       };
     },
+    transmitEventData(eventData) {
+      this.$emit("selected-event", eventData);
+    },
   },
 };
 </script>
diff --git a/src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue b/src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue
index a8c8092..ec3f0ea 100644
--- a/src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue
+++ b/src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue
@@ -1,8 +1,8 @@
 <template lang="pug">
   div.icon-wrap.flex.items-center.justify-center.cursor-pointer.py-1.px-2(
-      :class="{disable: !isChecked}"
-      @click="changeState"
-    )
+    :class="{disable: !isChecked}"
+    @click="changeState"
+  )
     .icon-doc-ok.text-xxl
 </template>
 
diff --git a/src/pages/calendar/components/CalendarEventCard.vue b/src/pages/calendar/components/CalendarEventCard.vue
index 0510b72..1054eec 100644
--- a/src/pages/calendar/components/CalendarEventCard.vue
+++ b/src/pages/calendar/components/CalendarEventCard.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper.flex.px-2.my-1.items-start.cursor-pointer(:style="cardHeight")
+  .wrapper.flex.px-2.my-1.items-start.cursor-pointer(:style="cardHeight", @click="transmitEventData")
     .header.flex.justify-between.items-center
       .header-text
         span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
@@ -61,6 +61,9 @@ export default {
     composeFullName(object) {
       return `${object.last_name} ${object.first_name} ${object.patronymic}`;
     },
+    transmitEventData() {
+      this.$emit("selected-event", this.ownerEvent);
+    },
   },
 };
 </script>
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index 5fc7836..64ca54d 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -21,15 +21,15 @@
         .flex.gap-x-2.items-center
           .time-input.flex.gap-x-2.px-4.py-2.items-center
             input.item-input.text-base.cursor-text(
-                v-model="start"
-                placeholder ="11:00"
-              )
+              v-model="start"
+              placeholder ="11:00"
+            )
           span —
           .time-input.flex.gap-x-2.px-4.py-2.items-center
             input.item-input.text-base.cursor-text(
-                v-model="end"
-                placeholder ="12:30"
-              )
+              v-model="end"
+              placeholder ="12:30"
+            )
       .flex.gap-x-4.items-center
         .icon-person.text-xl.icon
         base-select(
@@ -41,7 +41,7 @@
           @changeInput="addMember"
           placeholder="Выберите участника"
           separator
-          )
+        )
     .flex.flex-col.gap-y-2
       span.text-xs.opacity-40.font-bold.leading-3 Вид события
       base-select(
@@ -64,14 +64,21 @@
         :icon-left-size="10"
         id="addContact"
         @click="(e)=>addContact(e)")
-      .flex.gap-x-4.items-center(v-for="(contact, index) in listContacts" :key="index")
+      .flex.gap-x-4.items-center(
+        v-for="(contact, index) in listContacts"
+        :key="index"
+      )
         .icon-mail.text-xl.icon
         .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
-          input.item-input.cursor-text.text-base(v-model="contacts" type="text" placeholder="E-mail")
+          input.item-input.cursor-text.text-base(
+            v-model="contacts"
+            type="text"
+            placeholder="E-mail"
+          )
     base-button.styled-button.text-base.font-semibold(
-    :size="40"
-    :disabled="disabledButton"
-    @click="sendEventData"
+      :size="40"
+      :disabled="disabledButton"
+      @click="sendEventData"
     ) Создать событие
 </template>
 
diff --git a/src/pages/calendar/components/CalendarLayoutSwitch.vue b/src/pages/calendar/components/CalendarLayoutSwitch.vue
index e055bff..2ea652a 100644
--- a/src/pages/calendar/components/CalendarLayoutSwitch.vue
+++ b/src/pages/calendar/components/CalendarLayoutSwitch.vue
@@ -3,11 +3,11 @@
     button#day.py-2.px-3(
       :class="dayLayoutState"
       @click="changeSelectedLayout"
-      ) День
+    ) День
     button#week.py-2.px-3(
       :class="weekLayoutState"
       @click="changeSelectedLayout"
-      ) Неделя
+    ) Неделя
 </template>
 
 <script>
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index a496d22..ff8a98b 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -1,14 +1,14 @@
 <template lang="pug">
   .schedule.ml-2(
     :style="scheduleWidth"
-    )
+  )
     calendar-header(
       :current-date="currentDate"
       :is-current-date="isCurrentDate"
       @previous-date="previousDate"
       @next-date="nextDate"
       @selected-layout="selectedLayout"
-      )
+    )
     .schedule-body
       .column-wrapper.flex.ml-20(:style="columnWrapperWidth")
         calendar-column(
@@ -19,6 +19,7 @@
           :day-start-time="validateStartTime"
           :day-end-time="validateEndTime"
           :style="columnSize"
+          @selected-event="writeEventData"
         )
       .flex.w-full.relative
         .time-coil-wrapper.left-0.-mt-12.pt-9
@@ -40,7 +41,13 @@
           calendar-background(
             :time-coil="timeCoil"
             :owners-count="ownersCount"
-            )
+          )
+      calendar-form-add-event(
+        v-if="isOpenForm"
+        :close-form="closeFormCreateEvent"
+        :owners-data="ownersData"
+        :members-data="membersData"
+      )
 </template>
 
 <script>
@@ -49,6 +56,7 @@ import CalendarHeader from "./CalendarHeader.vue";
 import CalendarBackground from "./CalendarBackground.vue";
 import CalendarClockColumn from "./CalendarClockColumn.vue";
 import CalendarColumn from "./CalendarColumn.vue";
+import CalendarFormAddEvent from "./CalendarFormAddEvent.vue";
 export default {
   name: "CalendarSchedule",
   components: {
@@ -56,6 +64,7 @@ export default {
     CalendarBackground,
     CalendarClockColumn,
     CalendarColumn,
+    CalendarFormAddEvent,
   },
   props: {
     currentDate: {
@@ -83,6 +92,14 @@ export default {
         return [];
       },
     },
+    membersData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    closeFormCreateEvent: Function,
+    isOpenForm: Boolean,
   },
   data() {
     return {
@@ -94,6 +111,7 @@ export default {
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
       defaultColumnWidth: 470,
+      selectedEvent: {},
     };
   },
   computed: {
@@ -284,6 +302,9 @@ export default {
       });
       return filteredArray;
     },
+    writeEventData(eventData) {
+      this.selectedEvent = eventData;
+    },
   },
   watch: {
     currentTime() {