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

2022-11-11 16:40:07 +03:00
parent c873dbcb3a
commit a044b667b5
5 changed files with 211 additions and 38 deletions
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/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)"
--- a/src/pages/calendar/components/CalendarEventCard.vue
+++ b/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,29 @@ export default {
    composeFullName(object) {
      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;
    },
+    transmitEventData() {
+      this.$emit("selected-event", this.ownerEvent);
+      this.hideDescriptionCard();
+    },
+    hideDescriptionCard() {
+      this.isOpenDescriptionCard = false;
+    },
+    openDescriptionCard() {
+      if (!this.isOpenDescriptionCard && !this.isActive) {
+        this.isOpenDescriptionCard = true;
+        this.changeTheme();
+      }
+    },
+    closeDescriptionCard() {
+      this.hideDescriptionCard();
+      this.changeTheme();
+    },
  },
 };
 </script>
@@ -216,6 +235,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 +261,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%
--- a/src/pages/calendar/components/CalendarEventDescriptionCard.vue
+++ b/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>
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/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")
-      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")
-      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")
+        clients-table-checkbox(
+          :id="id",
+          :check="check",
+          :is-check="isCheck"
+        )
+      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"
+      )
+      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")
-          clients-action-popup(v-if="isOpenPopup" :open-change-data="openChangeData")
+        .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(
+          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) {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,6 +29,7 @@ module.exports = {
        43: "43px",
      },
      spacing: {
+        "2px": "2px",
        "3px": "3px",
        "4_75px": "4.75px",
        "6px": "6px",