[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 Имя Фамилия
+            .dark-blue {{patient ? trimPatientName(patient.last_name, patient.first_name, patient.patronymic) : "Имя Фамилия"}}
-            .grey-color.text-xsx.rounded-md Дата
+            .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>

src/pages/newCalendar/components/MedcardsModal.vue

@@ -0,0 +1,141 @@
+<template lang="pug">
+  .wrapper.flex.flex-col.pt-6.dark-blue.font-medium
+    .flex.flex-col.gap-y-4
+      .flex.justify-between.w-full
+        base-input.search(
+          placeholder="Поиск",
+          :width="422",
+          iconLeft,
+          size="M"
+        )
+          template(v-slot:iconLeft)
+            q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
+        q-btn.ml-2(
+          @click="sortPerson(patients)",
+          :style="{width: '45px', height: '40px', border: '1px solid var(--gray-secondary)'}",
+          padding="0px",
+          :class="sortingClass"
+        )
+          calendar-sidebar-svg(name-svg="sort", :active="sort")
+      .medcards-wrapper.flex.flex-col.overflow-auto
+        .medcard.flex.items-center.cursor-pointer(
+          v-for="patient in patients",
+          @click="selectMedcard(patient)"
+        )
+          .flex.justify-between.w-full.items-center
+            .info-block.flex.justify-between.gap-x-2
+              img.h-10.w-10.object-cover.rounded-full(:src="patient.avatar")
+              .flex.flex-col.gap-y-1
+                .text-m {{trimPatientName(patient.last_name, patient.first_name, patient.patronymic)}}
+                .grey-color.text-smm {{patient.birthday}}
+            q-icon.ok-icon(name="app:ok", v-if="patient.check" size="24px")
+    .footer.flex.gap-2
+      base-button(type="secondary", label="Отменить", width="125px", @click="closeMedcards")
+      base-button(
+        width="132px",
+        label="Сохранить",
+        @click="saveMedcard(selectedMedcard)",
+        :disabled="!selectedMedcard"
+      )
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
+import CalendarSidebarSvg from "@/pages/newCalendar/components/CalendarSidebarSvg.vue";
+
+export default {
+  name: "MedcardsModal",
+  components: { BaseInput, BaseButton, CalendarSidebarSvg },
+  props: { patients: Array, closeMedcards: Function, saveMedcard: Function },
+  data() {
+    return {
+      trimPatientName: trimName,
+      selectedMedcard: null,
+      sort: false,
+    };
+  },
+  computed: {
+    sortingClass() {
+      return this.sort
+        ? {
+            "sort-icon-active": true,
+          }
+        : {
+            "sort-icon-default": true,
+          };
+    },
+  },
+  methods: {
+    selectMedcard(patient) {
+      this.selectedMedcard = patient;
+      this.patients.map((e) => {
+        e.check = false;
+        if (e.id === patient.id) e.check = true;
+      });
+    },
+    sortPerson(arr) {
+      if (!this.sort) {
+        this.sort = true;
+        arr.sort((a, b) => (a.last_name > b.last_name ? 1 : -1));
+      } else {
+        this.sort = false;
+        arr.sort((a, b) => (b.last_name > a.last_name ? 1 : -1));
+      }
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 422px
+
+.search :deep(path)
+  fill: var(--font-grey-color)
+
+.search :deep(.q-field__prepend)
+  padding-right: 4px
+
+.medcard
+  height: 64px
+  margin-right: 14px
+  border-bottom: 1px solid var(--gray-secondary)
+  &:last-child
+    border-bottom: none
+  &:hover
+    border-radius: 4px
+    background: var(--gray-thirdly)
+
+.medcards-wrapper
+  max-height: 563px
+  margin-right: -18px
+  &::-webkit-scrollbar
+    width: 4px
+  &::-webkit-scrollbar-track:vertical
+    margin-bottom: 14px
+
+.info-block
+  padding: 11px 0px
+
+.footer
+  border-top: 1px solid var(--gray-secondary)
+  margin: 0px -32px -12px
+  padding: 16px 32px 0px 32px
+
+.sort-icon-default
+  background-color: var(--bg-light-grey)
+  color: var(--font-grey-color)
+  border: 1px solid var(--gray-secondary)
+
+.sort-icon-active
+  background-color: var(--btn-blue-color)
+  color: var(--default-white)
+
+.grey-color
+  color: var(--font-grey-color)
+
+.ok-icon :deep(path)
+  fill: var(--system-color-green)
+</style>