Merge pull request #126 from dderbentsov/UC-42

WIP Сделала закрытие DescriptionCard на клик вне карточки

src/pages/calendar/components/CalendarColumn.vue

@@ -16,6 +16,7 @@
       calendar-event-card(
         v-for="event in dayEvents"
         :key="event.id"
+        :id="event.id"
         :ownerEvent="event"
         :event-types="eventTypes"
         :style="eventCardPosition(event.start, event.end)"

src/pages/calendar/components/CalendarEventCard.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
   .wrapper.cursor-pointer.my-1.relative(
-    @click="transmitEventData",
     :style="themeColors",
     :class="cardTheme"
   )
     .card.flex.px-2(
       :class="{'py-6px flex-col': longCard}",
-      :style="cardHeight"
+      :style="cardHeight",
+      @click="openDescriptionCard"
     )
       .header.flex.justify-between.items-center(:class="{'items-start': longCard}")
         .header-text
@@ -21,10 +21,15 @@
           ul
             li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }}
     calendar-event-description-card.right-0(
-        v-if="isActive"
+      v-if="isOpenDescriptionCard"
       :style="descriptionCardPosition"
       :owner-event="this.ownerEvent"
       :event-types="this.eventTypes"
+      :event-time="this.eventTime"
+      :event-member="eventMember"
+      :description="description"
+      @selected-event="transmitEventData"
+      @close-description-card="closeDescriptionCard"
     )
   </template>
 
@@ -47,6 +52,7 @@ export default {
       pixelsPerHour: 62,
       isActive: false,
       someDetailsShown: true,
+      isOpenDescriptionCard: false,
     };
   },
   computed: {
@@ -190,16 +196,32 @@ export default {
     composeFullName(object) {
       return `${object.last_name} ${object.first_name} ${object.patronymic}`;
     },
-    transmitEventData() {
+    setActiveTheme() {
-      this.changeTheme();
+      this.isActive = true;
-      this.$emit("selected-event", this.ownerEvent);
     },
-    changeTheme() {
+    setDefaultTheme() {
-      this.isActive = !this.isActive;
+      this.isActive = false;
     },
     changeDetailsShown() {
       this.someDetailsShown = false;
     },
+    transmitEventData() {
+      this.$emit("selected-event", this.ownerEvent);
+      this.hideDescriptionCard();
+    },
+    hideDescriptionCard() {
+      this.isOpenDescriptionCard = false;
+    },
+    openDescriptionCard() {
+      if (!this.isOpenDescriptionCard && !this.isActive) {
+        this.isOpenDescriptionCard = true;
+        this.setActiveTheme();
+      }
+    },
+    closeDescriptionCard() {
+      this.hideDescriptionCard();
+      this.setDefaultTheme();
+    },
   },
 };
 </script>
@@ -216,6 +238,8 @@ export default {
     background-color: var(--bg-color)
     border: 2px solid var(--border-color)
     border-left: 4px solid var(--bg-active)
+  .card:hover
+      background-color: var(--bg-hover)
   .header-text, .body
     color: var(--font-color)
   .details-count
@@ -240,19 +264,6 @@ export default {
 .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%

src/pages/calendar/components/CalendarEventDescriptionCard.vue

@@ -1,5 +1,23 @@
 <template lang="pug">
-  .wrapper.px-4.pt-14px.pb-4.font-medium
+  .wrapper.px-4.pt-14px.pb-4.font-medium.cursor-auto(
+    :style="typeColor",
+    v-click-outside="close"
+  )
+    .flex.justify-between.items-center.mb-2
+      .flex
+        span.inline-block.font-bold.text-base.mr-3.mt-2px {{ eventTime }}
+        .type.text-xxs.px-14px.py-1(v-if="isCertainType")
+          span.type-text {{ ownerEvent.kind }}
+      .right-side.flex.gap-x-4.text-sm
+        .icon-basket.flex.items-center.cursor-pointer
+        .icon-edit.flex.items-center.cursor-pointer(@click="transmitEventData")
+        .icon-cancel.text-xxs.flex.items-center.cursor-pointer(@click="close")
+    .body.mr-6
+      span.text-base  {{ eventMember }}
+      .flex.text-xxs.mt-4.justify-between
+        .column
+          ul
+            li(v-for="elem in description" :key="elem") {{ elem }}
 </template>
 
 <script>
@@ -13,15 +31,108 @@ export default {
         return [];
       },
     },
+    eventTime: {
+      type: String,
+      default: "",
+    },
+    eventMember: {
+      type: String,
+      default: "",
+    },
+    description: Array,
+  },
+  data() {
+    return {
+      isCertainType: true,
+    };
+  },
+  computed: {
+    typeColor() {
+      switch (this.ownerEvent.kind) {
+        case this.eventTypes[0].label:
+          return {
+            "--bg-color": "var(--bg-event-green-color-0)",
+            "--font-color": this.eventTypes[0].color,
+          };
+        case this.eventTypes[1].label:
+          return {
+            "--bg-color": "var(--bg-event-red-color-0)",
+            "--font-color": this.eventTypes[1].color,
+          };
+        case this.eventTypes[2].label:
+          return {
+            "--bg-color": "var(--bg-event-yellow-color-0)",
+            "--font-color": "var(--font-black-color)",
+          };
+        case this.eventTypes[3].label:
+          return {
+            "--bg-color": "var(--bg-event-blue-color-0)",
+            "--font-color": this.eventTypes[3].color,
+          };
+        default:
+          this.changeType();
+          return {};
+      }
+    },
+  },
+  methods: {
+    changeType() {
+      this.isCertainType = false;
+    },
+    transmitEventData() {
+      this.$emit("selected-event");
+    },
+    close() {
+      this.$emit("close-description-card");
+    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
 .wrapper
-  width: 426px
+  height: auto !important
   background-color: var(--default-white)
   border-radius: 4px
   color: var(--font-black-color)
   box-shadow: var(--default-shadow)
+
+.type
+  background-color: var(--bg-color)
+  border-radius: 4px
+
+.type-text
+  color: var(--font-color)
+
+.right-side
+  height: 16px
+  color: var(--btn-blue-color)
+
+.icon-basket
+  color: var(--border-red-color)
+
+.column
+  max-width: calc(462px/2 - 36px)
+
+ul
+  list-style-type: none
+  margin: 0
+  padding: 0
+
+li
+  margin-bottom: 8px
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+  &:last-child
+    margin: 0px
+
+li:before
+  content: ''
+  display: inline-block
+  height: 6px
+  width: 6px
+  border-radius: 50%
+  background-color: var(--font-black-color)
+  margin: 0 8px 1px 0
 </style>

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.fixed.right-0.bottom-3
+  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.fixed.right-0.bottom-4
     .flex.justify-between
       span.title.text-xl.font-bold {{!selectedEventData.id ? "Назначение события" : "Изменение события"}}
       .flex.pt-2

src/pages/clients/components/ClientsTableRow.vue

@@ -1,19 +1,70 @@
 <template lang="pug">
   .row-wrapper.flex.flex-col.w-full
-    .row-body.flex.w-full.cursor-pointer(:id="id" @click="(e) => openDetailInfo(e)")
+    .row-body.flex.w-full.cursor-pointer(
+      :id="id",
+      @click="(e) => openDetailInfo(e)"
+    )
       .check-box.flex.justify-center.items-center
-        clients-table-checkbox(:id="id" :check="check" :is-check="isCheck")
+        clients-table-checkbox(
-      table-cell-body-name(:value="dataClient" :avatar="dataClient.avatar" :avatar-color="dataClient.color" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'fullName').width")
+          :id="id",
-      table-cell-body-age(:value="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'age').width")
+          :check="check",
-      table-cell-body-priority(:value="dataClient.priority" :choose-priority="choosePriority" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'priority').width")
+          :is-check="isCheck"
-      table-cell-body-phone(:value="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'phone').width")
+        )
-      table-cell-body-email(:value="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'email').width")
+      table-cell-body-name(
-      table-cell-body-networks(:delete-network="deleteNetwork" :add-network="addNetwork" :networks="dataClient.contacts" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'networks').width")
+        :value="dataClient",
+        :avatar="dataClient.avatar",
+        :avatar-color="dataClient.color",
+        :is-open-change="isOpenChange",
+        :width="columnBody.find(el => el.name === 'fullName').width"
+      )
+      table-cell-body-age(
+        :value="dataClient",
+        :is-open-change="isOpenChange",
+        :width="columnBody.find(el => el.name === 'age').width"
+      )
+      table-cell-body-priority(
+        :value="dataClient.priority",
+        :choose-priority="choosePriority",
+        :is-open-change="isOpenChange",
+        :width="columnBody.find(el => el.name === 'priority').width"
+      )
+      table-cell-body-phone(
+        :value="dataClient",
+        :is-open-change="isOpenChange",
+        :width="columnBody.find(el => el.name === 'phone').width"
+      )
+      table-cell-body-email(
+        :value="dataClient",
+        :is-open-change="isOpenChange",
+        :width="columnBody.find(el => el.name === 'email').width"
+      )
+      table-cell-body-networks(
+        :delete-network="deleteNetwork",
+        :add-network="addNetwork",
+        :networks="dataClient.contacts",
+        :is-open-change="isOpenChange",
+        :width="columnBody.find(el => el.name === 'networks').width"
+      )
       .dots.flex.justify-center.items-center
-        base-button(v-if="isOpenChange" @click="closeChangeData" :confirm="true" :rounded="true" :outlined="true" :size="20")
+        base-button(
+          v-if="isOpenChange",
+          @click="closeChangeData",
+          confirm,
+          rounded,
+          outlined,
+          :size="20"
+        )
           .icon-ok.text-xsm(class="pt-[3px]")
-        .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(v-show="!isOpenChange" :tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
+        .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(
-          clients-action-popup(v-if="isOpenPopup" :open-change-data="openChangeData")
+          v-show="!isOpenChange",
+          :tabindex="1",
+          @click="(e) => openPopup(e)",
+          @blur="handleUnFocusPopup"
+        )
+          clients-action-popup(
+            v-if="isOpenPopup",
+            :open-change-data="openChangeData"
+          )
     client-detail-info-wrapper(
       v-if="isOpenDetailInfo"
       :data-address="dataAddress"
@@ -284,6 +335,7 @@ export default {
     },
     openPopup(e) {
       e.target.focus();
+      e.stopPropagation();
       this.isOpenPopup = !this.isOpenPopup;
     },
     openDetailInfo(e) {

tailwind.config.js

@@ -29,6 +29,7 @@ module.exports = {
         43: "43px",
       },
       spacing: {
+        "2px": "2px",
         "3px": "3px",
         "4_75px": "4.75px",
         "6px": "6px",