[WIP] Добавил модальное окно выбора медкарт на форме создания записи

src/pages/newCalendar/components/HeaderRecordForm.vue

@@ -46,13 +46,20 @@
       .flex.gap-x-1 
         .name.flex.items-center.px-4.pt-2.pb-1.gap-x-2.rounded-md
           .photo.flex.h-10.w-10.items-center.justify-center
-            q-icon.icon(name="app:noname", size="24px")
+            img.w-10.h-10.rounded-full(v-if="patient", :src="patient.avatar")
+            q-icon.icon(v-else, name="app:noname", size="24px")
           .flex.flex-col.font-medium
-            .dark-blue Имя Фамилия
-            .grey-color.text-xsx.rounded-md Дата
+            .dark-blue {{patient ? trimPatientName(patient.last_name, patient.first_name, patient.patronymic) : "Имя Фамилия"}}
+            .grey-color.text-xsx.rounded-md {{patient ? patient.birthday : "Дата"}}
         .change.flex.items-center.rounded-md
-          q-btn(dense, padding="18px 4px")
+          q-btn(dense, padding="18px 4px", @click="isShowMedcards = true")
             q-icon.icon(name="app:folder", size="20px")
+          base-modal(v-model="isShowMedcards", title="Медкарты", modal-padding)
+            medcards-modal(
+              :save-medcard="saveMedcard",
+              :close-medcards="closeModalMedcards",
+              :patients="patients"
+            )
 </template>
 
 <script>
@@ -60,17 +67,22 @@ import noname from "@/assets/icons/noname.svg";
 import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseTimeModal from "@/components/base/BaseTimeModal.vue";
+import MedcardsModal from "./MedcardsModal.vue";
+import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
+import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 import * as moment from "moment/moment";
 
 export default {
   name: "HeaderRecordForm",
-  components: { BaseCalendar, BaseModal, BaseTimeModal },
+  components: { BaseCalendar, BaseModal, BaseTimeModal, MedcardsModal },
   props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
   data() {
     return {
       noname,
       currentDate: moment().clone(),
       isShowTime: false,
+      isShowMedcards: false,
+      patients: patientList.find(({ id }) => id === 2).data,
       times: { from: "8:30", to: "10:30" },
       data: [
         {
@@ -82,12 +94,21 @@ export default {
           end: "12:00",
         },
       ],
+      patient: null,
+      trimPatientName: trimName,
     };
   },
   methods: {
     closeModalTime() {
       this.isShowTime = false;
     },
+    closeModalMedcards() {
+      this.isShowMedcards = false;
+    },
+    saveMedcard(medcard) {
+      this.isShowMedcards = false;
+      this.patient = medcard;
+    },
   },
 };
 </script>