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>