WIP Начала модалку предпросмотра

src/pages/newCalendar/components/CalendarColumn.vue

@@ -9,7 +9,8 @@
         :key="record?.id",
         :record="record",
         :expanded-type="expandedDisplayType",
-        :style="eventCardPosition(record.start, record.end)"
+        :style="eventCardPosition(record.start, record.end)",
+        @click="changeSelectedRecordId(record?.id)",
       )
     .footer.flex.items-center.justify-center.bg-white.h-9(v-if="!expandedDisplayType")
       span.text-smm.color-grey 0 записей
@@ -20,6 +21,7 @@ import * as moment from "moment/moment";
 import { recordList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import CalendarRecordCard from "@/pages/newCalendar/components/CalendarRecordCard.vue";
 import { verifyTime } from "@/pages/newCalendar/utils/calendarFunctions.js";
+import { mapActions } from "vuex";
 export default {
   name: "CalendarColumn",
   components: { CalendarRecordCard },
@@ -47,6 +49,9 @@ export default {
     },
   },
   methods: {
+    ...mapActions({
+      changeSelectedRecordId: "changeSelectedRecordId",
+    }),
     transformDayName(name) {
       return name[0]?.toUpperCase() + name?.slice(1);
     },

src/pages/newCalendar/components/CalendarRecordCard.vue

@@ -37,7 +37,7 @@
           .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} услуги`}}
+      span.text-xxs.self-end(v-if="record?.services.length && bodyClass?.['flex-col']") {{`${record?.services.length} услуг`}}
 </template>
 
 <script>
@@ -57,7 +57,6 @@ export default {
   data() {
     return {
       pixelsPerHalfHour: 38,
-      servicesCount: 4,
       trimPatientName: trimName,
       expandedTime: false,
     };

src/pages/newCalendar/components/CalendarRecordPreview.vue

@@ -0,0 +1,92 @@
+<template lang="pug">
+  .preview-wrapper.bg-white
+    .header.flex.gap-x-24.mb-6
+      .title.font-bold.text-xl.color-dark-blue Запись на {{ date }}, {{ time }}
+      .icons.flex.items-center.gap-x-3.-mt-5.-mr-4.p-1
+        q-icon(name="app:dots", size="20px", color="dark")
+        q-icon(name="app:cancel", size="20px", color="dark", @click="hidePreview")
+    .body.gap-y-4
+      .flex.items-center.gap-x-3(v-for="field in previewConfig", :key="field?.title")
+        .field.flex.items-center.justify-start.font-semibold {{ field?.title }}
+        .info.flex-1.rounded.h-full.py-2.px-4.flex.items-center.gap-x-1
+          img.h-5.w-5(:src="field?.icon ? this[field?.icon] : ''", v-if="field?.icon")
+          span {{ field?.data ? this[field?.data] : "" }}
+</template>
+
+<script>
+import * as moment from "moment/moment";
+import { mapState } from "vuex";
+import {
+  recordList,
+  recordPreviewConfig,
+  recordingStatuses,
+} from "@/pages/newCalendar/utils/calendarConfig.js";
+export default {
+  name: "CalendarRecordPreview",
+  props: {
+    previewVisibility: Boolean,
+  },
+  data() {
+    return {
+      previewConfig: recordPreviewConfig,
+    };
+  },
+  computed: {
+    internalPreview: {
+      get() {
+        return this.previewVisibility;
+      },
+      set(value) {
+        this.$emit("update:previewVisibility", value);
+      },
+    },
+    ...mapState({
+      selectedRecordId: (state) => state.calendar.selectedRecordId,
+    }),
+    record() {
+      return recordList?.find((elem) => elem.id === this.selectedRecordId);
+    },
+    start() {
+      return moment.parseZone(this.record?.start);
+    },
+    end() {
+      return moment.parseZone(this.record?.end);
+    },
+    date() {
+      return this.start?.format("D MMMM YYYY");
+    },
+    time() {
+      return this.start?.format("HH:mm") + " – " + this.end?.format("HH:mm");
+    },
+    statusLabel() {
+      return recordingStatuses.find(
+        (elem) => elem.value === this.record?.status
+      ).label;
+    },
+    statusIcon() {
+      return recordingStatuses.find(
+        (elem) => elem.value === this.record?.status
+      ).icon;
+    },
+  },
+  methods: {
+    hidePreview() {
+      this.internalPreview = false;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.color-dark-blue
+  color: var(--font-dark-blue-color)
+.body
+  display: grid
+  grid-template-rows: repeat(3, 28px) 56px 68px
+.field
+  width: 82px
+  color: var(--font-grey-color)
+.info
+  background-color: var(--bg-light-grey)
+  color: var(--font-dark-blue-color)
+</style>