Merge pull request #122 from dderbentsov/UC-42

WIP Добавила DescriptionCard

src/assets/sass/variables.sass

@@ -25,9 +25,19 @@
   --font-obligatory-color: #ff0000
   --bg-event-box-color: rgba(37, 40, 80, 0.1)
   --bg-event-green-color: #24d07d
+  --bg-event-green-color-0: #cdf0e5
+  --bg-event-green-color-1: #92e8be
   --bg-event-red-color: #e93131
+  --bg-event-red-color-0: #f8c1c1
+  --bg-event-red-color-1: #f49898
   --bg-event-yellow-color: #e5e931
+  --bg-event-yellow-color-0: #f8f9c2
+  --bg-event-yellow-color-1: #f2f498
   --bg-event-blue-color: #3ba3ee
+  --bg-event-blue-color-0: #c5e4fa
+  --bg-event-blue-color-1: #93cdf6
+  --bg-event-default-hover-color: #d9e1f9
+  --border-event-default-color: #b3c3f3
   --light-grey-bg-color: #f8f9fa
   --btn-green-color: rgba(60, 217, 75, 1)
   --btn-light-green-color: rgba(60, 217, 75, 0.2)

src/pages/calendar/TheCalendar.vue

@@ -4,7 +4,7 @@
       @width="changeWidth"
       :team-data="employeesData"
       :open-form-create="openFormCreateEvent"
-      :event-type="eventType"
+      :event-types="eventTypes"
     )
     calendar-schedule(
       :owners-data="employeesData"
@@ -15,6 +15,7 @@
       :sidebar-width="sidebarWidth"
       :close-form-create-event="closeFormCreateEvent"
       :is-open-form="isOpenForm"
+      :event-types="eventTypes"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
@@ -55,7 +56,7 @@ export default {
       employeesData: [],
       isOpenForm: false,
       membersData: [],
-      eventType: [
+      eventTypes: [
         { id: 1, label: "Встреча", color: "var(--bg-event-green-color)" },
         { id: 2, label: "Планерка", color: "var(--bg-event-red-color)" },
         { id: 3, label: "Интервью", color: "var(--bg-event-yellow-color)" },

src/pages/calendar/components/CalendarColumn.vue

@@ -17,6 +17,7 @@
         v-for="event in dayEvents"
         :key="event.id"
         :ownerEvent="event"
+        :event-types="eventTypes"
         :style="eventCardPosition(event.start, event.end)"
         @selected-event="transmitEventData"
       )
@@ -38,6 +39,7 @@ export default {
     dayEvents: Array,
     dayEndTime: Number,
     dayStartTime: Number,
+    eventTypes: Array,
   },
   data() {
     return {

src/pages/calendar/components/CalendarEventCard.vue

@@ -1,20 +1,52 @@
 <template lang="pug">
-  .wrapper.flex.px-2.my-1.items-start.cursor-pointer(:style="cardHeight", @click="transmitEventData")
+  .wrapper.cursor-pointer.my-1.relative(
-    .header.flex.justify-between.items-center
+    @click="transmitEventData",
-      .header-text
+    :style="themeColors",
-        span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
+    :class="cardTheme"
-        span.inline-block.align-middle.font-medium.text-base {{ eventMember }}
+  )
+    .card.flex.px-2(
+      :class="{'py-6px flex-col': longCard}",
+      :style="cardHeight"
+    )
+      .header.flex.justify-between.items-center(:class="{'items-start': longCard}")
+        .header-text
+          span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
+          span.inline-block.align-middle.font-medium.text-base {{ eventMember }}
+        .details-count.flex.justify-center.items-center.text-xxs.font-medium(v-if="someDetailsShown") {{ `+${detailsCount}` }}
+      .body.flex.text-xxs.font-medium(v-if="longCard")
+        .col.mr-22px
+          ul
+            li.mt-2(v-for="elem in descriptionColumns.leftColumn" :key="elem") {{ elem }}
+        .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: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
   },
   data() {
     return {
       pixelsPerHour: 62,
+      isActive: false,
+      someDetailsShown: true,
     };
   },
   computed: {
@@ -53,6 +85,103 @@ export default {
         height: `${this.calculateCardHeight - 8}px`,
       };
     },
+    cardTheme() {
+      return {
+        "active-theme": this.isActive,
+        "default-theme": !this.isActive,
+        "long-card": this.longCard,
+      };
+    },
+    themeColors() {
+      switch (this.ownerEvent.kind) {
+        case this.eventTypes[0].label:
+          return {
+            "--bg-color": "var(--bg-event-green-color-0)",
+            "--bg-active": this.eventTypes[0].color,
+            "--bg-hover": "var(--bg-event-green-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
+            "--count-color": this.eventTypes[0].color,
+          };
+        case this.eventTypes[1].label:
+          return {
+            "--bg-color": "var(--bg-event-red-color-0)",
+            "--bg-active": this.eventTypes[1].color,
+            "--bg-hover": "var(--bg-event-red-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
+            "--count-color": this.eventTypes[1].color,
+          };
+        case this.eventTypes[2].label:
+          return {
+            "--bg-color": "var(--bg-event-yellow-color-0)",
+            "--bg-active": this.eventTypes[2].color,
+            "--bg-hover": "var(--bg-event-yellow-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--font-black-color)",
+            "--count-color": "var(--font-black-color)",
+          };
+        case this.eventTypes[3].label:
+          return {
+            "--bg-color": "var(--bg-event-blue-color-0)",
+            "--bg-active": this.eventTypes[3].color,
+            "--bg-hover": "var(--bg-event-blue-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
+            "--count-color": this.eventTypes[3].color,
+          };
+        default:
+          return {
+            "--bg-color": "var(--default-white)",
+            "--bg-active": "var(--btn-blue-color)",
+            "--bg-hover": "var(--bg-event-default-hover-color)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
+            "--border-color": "#b3c3f3",
+            "--border-active-color": "var(--btn-blue-color)",
+            "--count-color": "var(--btn-blue-color)",
+          };
+      }
+    },
+    description() {
+      return this.ownerEvent.description
+        ? this.ownerEvent.description.split(", ")
+        : [];
+    },
+    descriptionColumns() {
+      let leftCol = [],
+        rightCol = [],
+        heightParts = parseInt((this.calculateCardHeight - 8) / 23);
+      if (this.ownerEvent.description && heightParts > 1) {
+        let n = heightParts;
+        for (let i = 0; i < n * 2 - 2; i++) {
+          if (!this.description[i]) break;
+          i % 2 === 0
+            ? leftCol.push(this.description[i])
+            : rightCol.push(this.description[i]);
+        }
+      }
+      return {
+        leftColumn: leftCol,
+        rightColumn: rightCol,
+      };
+    },
+    longCard() {
+      return parseInt((this.calculateCardHeight - 8) / 23) > 1 ? true : false;
+    },
+    detailsCount() {
+      let columnsLength =
+          this.descriptionColumns.leftColumn.length +
+          this.descriptionColumns.rightColumn.length,
+        remainingDetails = this.description.length - columnsLength;
+      if (!remainingDetails) this.changeDetailsShown();
+      return remainingDetails;
+    },
+    descriptionCardPosition() {
+      return {
+        top: `calc(${this.cardHeight.height} + 8px)`,
+      };
+    },
   },
   methods: {
     trimTime(time) {
@@ -62,22 +191,96 @@ export default {
       return `${object.last_name} ${object.first_name} ${object.patronymic}`;
     },
     transmitEventData() {
+      this.changeTheme();
       this.$emit("selected-event", this.ownerEvent);
     },
+    changeTheme() {
+      this.isActive = !this.isActive;
+    },
+    changeDetailsShown() {
+      this.someDetailsShown = false;
+    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
 .wrapper
-  width: calc(100% - 8px)
-  height: 23px
-  border-radius: 4px
-  background-color: var(--bg-event-yellow-color)
-  color: var(--font-black-color)
   position: absolute
   z-index: 3
+  width: calc(100% - 8px)
+  height: 23px
+
+.default-theme
+  .card
+    background-color: var(--bg-color)
+    border: 2px solid var(--border-color)
+    border-left: 4px solid var(--bg-active)
+  .header-text, .body
+    color: var(--font-color)
+  .details-count
+    background-color: var(--bg-active)
+    color: var(--font-active-color)
+  li:before
+    background-color: var(--font-color)
+
+.active-theme
+  .card
+    background-color: var(--bg-active)
+    border: 2px solid var(--border-active-color)
+    border-left: 4px solid var(--bg-active)
+  .header-text, .body
+    color: var(--font-active-color)
+  .details-count
+    background-color: var(--default-white)
+    color: var(--count-color)
+  li:before
+    background-color: var(--font-active-color)
+
+.card
+  border-radius: 4px
+  min-height: 23px
+  &:hover
+    background-color: var(--bg-hover)
+    border: 2px solid var(--border-color)
+    border-left: 4px solid var(--bg-active)
+  &:hover .header-text
+    color: var(--font-color)
+  &:hover .details-count
+    background-color: var(--bg-active)
+    color: var(--font-active-color)
+  &:hover .body
+    color: var(--font-color)
+  &:hover li:before
+    background-color: var(--font-color)
 
 .header
   width: 100%
+
+.details-count
+  width: 24px
+  height: 16px
+  border-radius: 16px
+
+.col
+  max-width: calc(462px/2 - 22px)
+
+ul
+  list-style-type: none
+  margin: 0
+  padding: 0
+
+li
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+li:before
+  content: ''
+  display: inline-block
+  height: 8px
+  width: 8px
+  border-radius: 50%
+  background-color : var(--font-black-color)
+  margin-right: 4px
 </style>

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>

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -114,6 +114,12 @@ export default {
         return {};
       },
     },
+    eventTypes: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
   },
   data() {
     return {

src/pages/calendar/components/CalendarSchedule.vue

@@ -20,6 +20,7 @@
           :day-start-time="validateStartTime"
           :day-end-time="validateEndTime"
           :style="columnSize"
+          :event-types="eventTypes"
           @selected-event="writeEventData"
         )
       .flex.w-full.relative
@@ -49,6 +50,7 @@
         :owners-data="ownersData"
         :members-data="membersData"
         :selected-event-data="selectedEvent"
+        :event-types="eventTypes"
         @clear-selected-event-data="clearSelectedEvent"
         @update-events="transmitUpdateEvents"
       )
@@ -104,6 +106,12 @@ export default {
     },
     closeFormCreateEvent: Function,
     isOpenForm: Boolean,
+    eventTypes: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
   },
   data() {
     return {
@@ -370,6 +378,7 @@ export default {
 
 <style lang="sass" scoped>
 .schedule
+  border-top-left-radius: 4px
   position: relative
   border-top-left-radius: 4px
   background-color: var(--default-white)

src/pages/calendar/components/CalendarSidebar.vue

@@ -19,7 +19,7 @@
           @click="openFormCreate",
           v-else
         ) Создать событие
-        calendar-sidebar-event(:is-open="isOpen", :event-type="eventType")
+        calendar-sidebar-event(:is-open="isOpen", :event-type="eventTypes")
         calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen")
       .button-wrapper.flex.justify-center.mb-23px
         base-button(
@@ -34,8 +34,8 @@
 
 <script>
 import BaseButton from "@/components/base/BaseButton";
-import CalendarSidebarEvent from "./cells/CalendarSidebarEvent.vue";
+import CalendarSidebarEvent from "./CalendarSidebarEvent.vue";
-import CalendarSidebarTeammate from "./cells/CalendarSidebarTeammate.vue";
+import CalendarSidebarTeammate from "./CalendarSidebarTeammate.vue";
 
 export default {
   name: "CalendarSidebar",
@@ -47,7 +47,7 @@ export default {
   props: {
     teamData: Array,
     openFormCreate: Function,
-    eventType: Array,
+    eventTypes: Array,
   },
   data() {
     return {

tailwind.config.js

@@ -37,6 +37,7 @@ module.exports = {
         "14px": "14px",
         "15px": "15px",
         "19px": "19px",
+        "22px": "22px",
         "23px": "23px",
         "29_25px": "29.25px",
         "45px": "45px",