From a2d4f066740990e7dabd2103156c93fe5d4e0197 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 10 Nov 2022 18:59:50 +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=20DescriptionCard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../calendar/components/CalendarEventCard.vue | 21 ++++++++++++---
 .../CalendarEventDescriptionCard.vue          | 27 +++++++++++++++++++
 .../calendar/components/CalendarSidebar.vue   |  4 +--
 .../{cells => }/CalendarSidebarEvent.vue      |  0
 .../{cells => }/CalendarSidebarTeammate.vue   |  0
 5 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/calendar/components/CalendarEventDescriptionCard.vue
 rename src/pages/calendar/components/{cells => }/CalendarSidebarEvent.vue (100%)
 rename src/pages/calendar/components/{cells => }/CalendarSidebarTeammate.vue (100%)

diff --git a/src/pages/calendar/components/CalendarEventCard.vue b/src/pages/calendar/components/CalendarEventCard.vue
index 23a34fa..4cd708e 100644
--- a/src/pages/calendar/components/CalendarEventCard.vue
+++ b/src/pages/calendar/components/CalendarEventCard.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
-  .wrapper.cursor-pointer.my-1(
+  .wrapper.cursor-pointer.my-1.relative(
     @click="transmitEventData",
     :style="themeColors",
     :class="cardTheme"
   )
-    .card.flex.items-start.px-2(
+    .card.flex.px-2(
       :class="{'py-6px flex-col': longCard}",
       :style="cardHeight"
     )
@@ -20,11 +20,19 @@
         .col
           ul
             li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }}
+      calendar-event-description-card.right-0(
+        v-if="isActive"
+        :style="descriptionCardPosition"
+        :owner-event="this.ownerEvent"
+        :event-types="this.eventTypes"
+      )
   </template>
 
 <script>
+import CalendarEventDescriptionCard from "./CalendarEventDescriptionCard.vue";
 export default {
   name: "CalendarEventCard",
+  components: { CalendarEventDescriptionCard },
   props: {
     ownerEvent: Object,
     eventTypes: {
@@ -136,7 +144,9 @@ export default {
       }
     },
     description() {
-      return this.ownerEvent.description.split(", ");
+      return this.ownerEvent.description
+        ? this.ownerEvent.description.split(", ")
+        : [];
     },
     descriptionColumns() {
       let leftCol = [],
@@ -167,6 +177,11 @@ export default {
       if (!remainingDetails) this.changeDetailsShown();
       return remainingDetails;
     },
+    descriptionCardPosition() {
+      return {
+        top: `calc(${this.cardHeight.height} + 8px)`,
+      };
+    },
   },
   methods: {
     trimTime(time) {
diff --git a/src/pages/calendar/components/CalendarEventDescriptionCard.vue b/src/pages/calendar/components/CalendarEventDescriptionCard.vue
new file mode 100644
index 0000000..b134ca2
--- /dev/null
+++ b/src/pages/calendar/components/CalendarEventDescriptionCard.vue
@@ -0,0 +1,27 @@
+<template lang="pug">
+  .wrapper.px-4.pt-14px.pb-4.font-medium
+</template>
+
+<script>
+export default {
+  name: "CalendarEventDescriptionCard",
+  props: {
+    ownerEvent: Object,
+    eventTypes: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 426px
+  background-color: var(--default-white)
+  border-radius: 4px
+  color: var(--font-black-color)
+  box-shadow: var(--default-shadow)
+</style>
diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue
index 837c7a5..9dcf526 100644
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -34,8 +34,8 @@
 
 <script>
 import BaseButton from "@/components/base/BaseButton";
-import CalendarSidebarEvent from "./cells/CalendarSidebarEvent.vue";
-import CalendarSidebarTeammate from "./cells/CalendarSidebarTeammate.vue";
+import CalendarSidebarEvent from "./CalendarSidebarEvent.vue";
+import CalendarSidebarTeammate from "./CalendarSidebarTeammate.vue";
 
 export default {
   name: "CalendarSidebar",
diff --git a/src/pages/calendar/components/cells/CalendarSidebarEvent.vue b/src/pages/calendar/components/CalendarSidebarEvent.vue
similarity index 100%
rename from src/pages/calendar/components/cells/CalendarSidebarEvent.vue
rename to src/pages/calendar/components/CalendarSidebarEvent.vue
diff --git a/src/pages/calendar/components/cells/CalendarSidebarTeammate.vue b/src/pages/calendar/components/CalendarSidebarTeammate.vue
similarity index 100%
rename from src/pages/calendar/components/cells/CalendarSidebarTeammate.vue
rename to src/pages/calendar/components/CalendarSidebarTeammate.vue