WIP Адаптировала карточки под календарь

src/pages/newCalendar/components/CalendarRecordCard.vue

@@ -1,41 +1,78 @@
 <template lang="pug">
   .card-wrapper.w-full.flex.gap-y-2px.flex-col
     .header.w-full.flex.gap-x-2px.text-sm
-      .first-item.color-black.px-4.flex.items-center.justify-center.font-semibold {{ recordTime }}
-      .color-black.flex.items-center.px-4.flex-1.font-semibold Харитонова О. В.
-      .info-block
-      .last-item.info-block(@click="outputRef")
+      .first-item.color-black.justify-center.gap-x-2(:class="timeClass")
+        span.font-semibold.color-black(v-if="expandedType || expandedTime") {{ recordTime }}
+        q-icon(
+          name="arrow_back_ios_new",
+          size="10px",
+          v-if="expandedTime",
+          @click="changeTimeDisplay(false)"
+        )
+        q-icon.cursor-pointer(
+          v-if="!expandedType && !expandedTime",
+          name="app:time",
+          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)}}
+      .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
-      .flex.gap-x-2.items-center
+        .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 && Object.keys(bodyClass)?.length") {{`${4} услуги`}}
+      span.text-xxs.self-end(v-if="servicesCount && bodyClass?.['flex-col']") {{`${4} услуги`}}
 </template>
 
 <script>
 import * as moment from "moment/moment";
+import {
+  recordingStatuses,
+  medicalСardStatuses,
+} from "@/pages/newCalendar/utils/calendarConfig.js";
+import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 export default {
   name: "CalendarRecordCard",
   props: {
-    columnRef: Node,
+    expandedType: Boolean,
+    record: Object,
   },
   data() {
     return {
       pixelsPerHalfHour: 33,
-      start: "2023-06-24T13:00:00Z",
-      end: "2023-06-24T14:30:00Z",
       servicesCount: 4,
+      trimPatientName: trimName,
+      expandedTime: false,
     };
   },
   computed: {
+    collapsedDisplayCondition() {
+      return !this.bodyClass?.["flex-col"] && !this.expandedType;
+    },
+    recordingStatus() {
+      return recordingStatuses.find(
+        (elem) => elem.value === this.record?.status
+      );
+    },
+    medicalСardStatus() {
+      return medicalСardStatuses.find(
+        (elem) => elem.value === this.record?.medicalCard?.status
+      );
+    },
     startTime() {
-      return moment.parseZone(this.start);
+      return moment.parseZone(this.record?.start);
     },
     endTime() {
-      return moment.parseZone(this.end);
+      return moment.parseZone(this.record?.end);
     },
     recordTime() {
       return (
@@ -65,8 +102,25 @@ export default {
         };
       return {};
     },
+    timeClass() {
+      if (this.expandedType)
+        return {
+          expanded: true,
+        };
+      if (this.expandedTime)
+        return {
+          "expanded-time": true,
+        };
+      return {
+        collapsed: true,
+      };
+    },
+  },
+  methods: {
+    changeTimeDisplay(value) {
+      this.expandedTime = value;
+    },
   },
-  methods: {},
 };
 </script>
 
@@ -75,15 +129,24 @@ export default {
   height: 30px
   & > div
     background-color: var(--bg-light-grey)
+    display: flex
+    align-items: center
 .first-item
   border-top-left-radius: 4px
   border-bottom-left-radius: 4px
+.expanded
   width: 130px
+.collapsed
+  width: 30px
+.expanded-time
+  width: 138px
 .last-item
   border-top-right-radius: 4px
   border-bottom-right-radius: 4px
 .background-grey
   background-color: var(--bg-light-grey)
+.background-dark-grey
+  background-color: var(--border-light-grey-color)
 .color-black
   color: var(--font-dark-blue-color)
 .color-grey