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

src/pages/newCalendar/TheCalendar.vue

@@ -5,6 +5,8 @@
     calendar-wrapper.ml-2(:open-sidebar="isOpen")
     base-modal(v-model="isShowForm", title="Создание записи", modal-padding)
       record-creation-form(v-model="isShowForm", :close-form="closeForm")
+    base-modal(v-model="previewVisibility", :hideHeader="true", :modalPadding="true")
+      calendar-record-preview(v-model:preview-visibility="previewVisibility")
 </template>
 
 <script>
@@ -14,7 +16,8 @@ import CalendarWrapper from "@/pages/newCalendar/components/CalendarWrapper";
 import RecordCreationForm from "@/pages/newCalendar/components/RecordCreationForm";
 import * as moment from "moment/moment";
 import BaseModal from "@/components/base/BaseModal.vue";
-
+import CalendarRecordPreview from "./components/CalendarRecordPreview.vue";
+import { mapActions, mapState } from "vuex";
 export default {
   name: "TheCalendar",
   components: {
@@ -23,14 +26,21 @@ export default {
     CalendarWrapper,
     RecordCreationForm,
     BaseModal,
+    CalendarRecordPreview,
   },
   data() {
     return {
       isOpen: false,
       currentDate: moment(),
       isShowForm: false,
+      previewVisibility: false,
     };
   },
+  computed: {
+    ...mapState({
+      selectedRecordId: (state) => state.calendar.selectedRecordId,
+    }),
+  },
   methods: {
     openSidebar() {
       this.isOpen = !this.isOpen;
@@ -41,6 +51,17 @@ export default {
     closeForm() {
       this.isShowForm = false;
     },
+    ...mapActions({
+      changeSelectedRecordId: "changeSelectedRecordId",
+    }),
+  },
+  watch: {
+    selectedRecordId(value) {
+      if (value) this.previewVisibility = !!value;
+    },
+    previewVisibility(value) {
+      if (!value) this.changeSelectedRecordId(null);
+    },
   },
 };
 </script>

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>

src/pages/newCalendar/utils/calendarConfig.js

@@ -298,6 +298,7 @@ export const recordList = [
       last_name: "Харитонова",
       first_name: "Ольга",
       patronymic: "Васильевна",
+      birth_date: "1990-03-12",
       contacts: [
         {
           value: "+7 (910) 424–13–13",
@@ -313,6 +314,28 @@ export const recordList = [
     medicalCard: {
       status: "partially_filled",
     },
+    services: [
+      {
+        title: "Чистка зубов",
+        cost: 500,
+      },
+      {
+        title: "Осмотр",
+        cost: 0,
+      },
+      {
+        title: "Лечение среднего кариеса",
+        cost: 2000,
+      },
+      {
+        title: "Изготовление коронки",
+        cost: 2700,
+      },
+      {
+        title: "Снятие слепков",
+        cost: 400,
+      },
+    ],
   },
   {
     id: "ba931000-7140-4977-bd09-1ac212b8b8e5",
@@ -329,6 +352,7 @@ export const recordList = [
       last_name: "Гаранова",
       first_name: "Наталья",
       patronymic: "Романовна",
+      birth_date: "1990-04-12",
       contacts: [
         {
           value: "+7 (910) 424–13–13",
@@ -344,6 +368,28 @@ export const recordList = [
     medicalCard: {
       status: "not_filled",
     },
+    services: [
+      {
+        title: "Чистка зубов",
+        cost: 500,
+      },
+      {
+        title: "Осмотр",
+        cost: 0,
+      },
+      {
+        title: "Лечение среднего кариеса",
+        cost: 2000,
+      },
+      {
+        title: "Изготовление коронки",
+        cost: 2700,
+      },
+      {
+        title: "Снятие слепков",
+        cost: 400,
+      },
+    ],
   },
   {
     id: "4cd94bec-a0df-4a18-879d-f64cd6d7098e",
@@ -360,6 +406,7 @@ export const recordList = [
       last_name: "Харитонова",
       first_name: "Ольга",
       patronymic: "Васильевна",
+      birth_date: "1990-05-12",
       contacts: [
         {
           value: "+7 (910) 424–13–13",
@@ -371,5 +418,51 @@ export const recordList = [
     medicalCard: {
       status: "filled",
     },
+    services: [
+      {
+        title: "Чистка зубов",
+        cost: 500,
+      },
+      {
+        title: "Осмотр",
+        cost: 0,
+      },
+      {
+        title: "Лечение среднего кариеса",
+        cost: 2000,
+      },
+      {
+        title: "Изготовление коронки",
+        cost: 2700,
+      },
+      {
+        title: "Снятие слепков",
+        cost: 400,
+      },
+    ],
+  },
+];
+
+export const recordPreviewConfig = [
+  {
+    title: "Статус",
+    data: "statusLabel",
+    icon: "statusIcon",
+  },
+  {
+    title: "Дата",
+    data: "date",
+  },
+  {
+    title: "Время",
+    data: "time",
+  },
+  {
+    title: "Медкарта",
+    data: null,
+  },
+  {
+    title: "Услуги",
+    data: null,
   },
 ];

src/store/modules/calendar.js

@@ -10,6 +10,7 @@ const state = () => ({
     from: moment().clone().startOf("week"),
     to: moment().clone().endOf("week"),
   },
+  selectedRecordId: null,
 });
 
 const getters = {};
@@ -18,12 +19,18 @@ const actions = {
   changeSelectedDates({ commit }, dates) {
     commit("setSelectedDates", dates);
   },
+  changeSelectedRecordId({ commit }, id) {
+    commit("setSelectedRecordId", id);
+  },
 };
 
 const mutations = {
   setSelectedDates(state, data) {
     state.selectedDates = { ...data };
   },
+  setSelectedRecordId(state, id) {
+    state.selectedRecordId = id;
+  },
 };
 
 export default {