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
-        .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} услуги`}}
+    .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
+      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