WIP Подтянула контакты

src/pages/newCalendar/components/CalendarRecordCard.vue

@@ -15,22 +15,32 @@
           size="16px",
           @click="changeTimeDisplay(true)"
         )
-      .color-black.pl-4.flex-1.font-semibold {{trimPatientName(record?.member?.last_name, record?.member?.first_name, record?.member?.patronymic)}}
+      .color-black.pl-4.flex-1.font-semibold.py-6px.relative(
+        :class="{'pl-6px': expandedTime}"
+      )
+        .flex.items-center(
+          :class="{'collapsed-name': expandedTime}"
+        ) {{trimPatientName(record?.member?.last_name, record?.member?.first_name, record?.member?.patronymic)}}
+        .gradient.absolute.w-5.h-full.right-0(v-if="expandedTime")
       .info-block.justify-center
         img.w-5.h-5(:src="recordingStatus?.icon")
       .last-item.info-block.justify-center(v-if="expandedType")
         img.w-5.h-5(:src="medicalСardStatus?.icon")
-    .body.background-grey.flex.pl-4.pr-2.py-10px.color-grey.gap-x-12(:style="bodyHeight", :class="bodyClass")
-      .flex.gap-x-2.items-center
-        q-icon(name="app:phone", size="14px")
-        .text-xxs +7 (910) 424–13–13
+    .body.background-grey.flex.flex-col.justify-between.pl-4.pr-2.py-10px.color-grey(
+      :style="bodyHeight",
+      :class="{'py-6px': collapsedDisplayCondition}"
+    )
+      .flex.gap-x-14(:class="bodyClass")
+        .flex.gap-x-2.items-center(
+          v-for="contact in contacts",
+          :key="contact.value",
+        )
+          q-icon(:name="contact.icon", size="14px")
+          .text-xxs {{ contact.value }}
           .h-6.w-6.color-black.background-dark-grey.text-xxs.rounded.flex.items-center.justify-center(
             v-if="collapsedDisplayCondition"
           ) +1
-      .flex.gap-x-2.items-center(v-if="!collapsedDisplayCondition")
-        q-icon(name="app:mail", size="14px")
-        .text-xxs Haritonich@mail.ru
-      span.text-xxs.self-end(v-if="servicesCount && bodyClass?.['flex-col']") {{`${4} услуги`}}
+      span.text-xxs.self-end(v-if="servicesCount && bodyClass?.['flex-col']") {{`${servicesCount} услуги`}}
 </template>
 
 <script>
@@ -38,6 +48,7 @@ import * as moment from "moment/moment";
 import {
   recordingStatuses,
   medicalСardStatuses,
+  networks,
 } from "@/pages/newCalendar/utils/calendarConfig.js";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 export default {
@@ -55,6 +66,20 @@ export default {
     };
   },
   computed: {
+    contacts() {
+      let contactList = this.record?.member?.contacts
+        ?.filter((elem) => elem.kind === "PHONE" || elem.kind === "EMAIL")
+        ?.map((elem) => ({
+          kind: elem.kind,
+          icon: networks.find((item) => item.id === elem.kind)?.icon,
+          value: elem.value,
+        }));
+      if (this.collapsedDisplayCondition) {
+        contactList.length = 1;
+        return contactList;
+      }
+      return contactList;
+    },
     collapsedDisplayCondition() {
       return !this.bodyClass?.["flex-col"] && !this.expandedType;
     },
@@ -121,6 +146,11 @@ export default {
       this.expandedTime = value;
     },
   },
+  watch: {
+    expandedType(value) {
+      if (value) this.expandedTime = false;
+    },
+  },
 };
 </script>
 
@@ -138,6 +168,12 @@ export default {
   width: 130px
 .collapsed
   width: 30px
+.collapsed-name
+  width: 30px
+  overflow: hidden
+  white-space: nowrap
+.gradient
+  background: linear-gradient(270deg, #EFF1F4 0%, rgba(239, 241, 244, 0.00) 100%)
 .expanded-time
   width: 138px
 .last-item

src/pages/newCalendar/utils/calendarConfig.js

@@ -7,6 +7,41 @@ import filled from "@/assets/icons/medcard_filled.svg";
 import partially_filled from "@/assets/icons/medcard_partially_filled.svg";
 import not_filled from "@/assets/icons/medcard_not_filled.svg";
 
+export const networks = [
+  {
+    id: "VK",
+    icon: "app:icon-vk",
+  },
+  {
+    id: "TELEGRAM",
+    icon: "app:icon-tg",
+  },
+  {
+    id: "GMAIL",
+    icon: "app:icon-google",
+  },
+  {
+    id: "SLACK",
+    icon: "app:icon-slack",
+  },
+  {
+    id: "DISCORD",
+    icon: "app:icon-discord",
+  },
+  {
+    id: "VIBER",
+    icon: "wifi_calling_3",
+  },
+  {
+    id: "PHONE",
+    icon: "app:phone",
+  },
+  {
+    id: "EMAIL",
+    icon: "app:mail",
+  },
+];
+
 export const recordingStatuses = [
   {
     label: "Не принят",
@@ -263,6 +298,16 @@ export const recordList = [
       last_name: "Харитонова",
       first_name: "Ольга",
       patronymic: "Васильевна",
+      contacts: [
+        {
+          value: "+7 (910) 424–13–13",
+          kind: "PHONE",
+        },
+        {
+          value: "Haritonich@mail.ru",
+          kind: "EMAIL",
+        },
+      ],
     },
     status: "not_accepted",
     medicalCard: {
@@ -284,6 +329,16 @@ export const recordList = [
       last_name: "Гаранова",
       first_name: "Наталья",
       patronymic: "Романовна",
+      contacts: [
+        {
+          value: "+7 (910) 424–13–13",
+          kind: "PHONE",
+        },
+        {
+          value: "Haritonich@mail.ru",
+          kind: "EMAIL",
+        },
+      ],
     },
     status: "accepted",
     medicalCard: {
@@ -305,6 +360,12 @@ export const recordList = [
       last_name: "Харитонова",
       first_name: "Ольга",
       patronymic: "Васильевна",
+      contacts: [
+        {
+          value: "+7 (910) 424–13–13",
+          kind: "PHONE",
+        },
+      ],
     },
     status: "reception",
     medicalCard: {