WIP Интегрировала карточку с бэком

src/pages/newMedicalCard/components/MedicalCardHeader.vue

@@ -9,7 +9,7 @@
             color="grey",
           )
         q-breadcrumbs-el(label="Календарь")
-        q-breadcrumbs-el(label="Медкарта #13019319")
+        q-breadcrumbs-el(:label="`Медкарта #${medicalCardData?.number}`")
       q-btn(
         flat,
         text-color="grey",
@@ -21,23 +21,24 @@
         span Удалить медкарту
     .ml-6.flex.gap-x-4
       q-avatar(size="80px", :style="{'background-color': 'var(--border-light-grey-color)', color: 'var(--font-dark-blue-color)'}")
-        img(v-if="patient?.avatar", :src="patient?.avatar")
+        img(v-if="patientData?.photo", :src="url + patientData?.photo")
         span.text-2xl(v-else) {{patientAvatar}}
       .flex.gap-y-1.flex-col
         .flex.items-center
           span.text-xxl.font-bold.mr-3(
             :style="{color: 'var(--font-dark-blue-color)', 'line-height': '135%'}",
-          ) {{`${patient?.first_name} ${patient?.last_name} ${patient?.patronimic}`}}
+          ) {{patientName}}
           q-chip(
             square,
             text-color="white",
-            :style="{height: '20px', background: priority.color, padding: '2px 8px'}",
+            :style="{height: '20px', background: priority?.color, padding: '2px 8px'}",
-            :label="priority.text"
+            :label="priority?.text"
           )
           q-btn-dropdown(
+            v-if="allergiesList?.length > 0"
             :style="{background: 'var(--border-red-color)', height: '20px'}",
             text-color="white",
-            :label="`+${patient?.allergy?.length}`"
+            :label="`+${allergiesList?.length}`"
             icon="pan_tool"
             size="10px",
             padding="2px 8px",
@@ -48,14 +49,14 @@
             q-list.w-56(:style="{padding: '16px', color: 'var(--font-dark-blue-color)'}")
               q-item.text-smm(
                 v-close-popup,
-                v-for="allergy in patient?.allergy",
+                v-for="allergy in allergiesList",
                 :style="{padding: 0, 'min-height': '32px'}"
               )
                 q-item-section.cursor-pointer {{allergy}}
         span.text-smm.label-color Добавлен в систему: 
-          span.date-color {{ patient?.addedDate}}
+          span.date-color {{ createdDate }}
         span.text-smm.label-color Последнее обновление: 
-          span.date-color {{patient?.updatedDate}}
+          span.date-color {{ updatedDate }}
     .flex.justify-between.pt-4
       .flex
         .menu-item.px-6.py-10px.cursor-pointer.text-base(
@@ -81,6 +82,7 @@
 <script>
 import { v_model } from "@/shared/mixins/v-model";
 import { column } from "@/pages/clients/utils/tableConfig.js";
+import * as moment from "moment/moment";
 export default {
   name: "MedicalCardHeader",
   mixins: [v_model],
@@ -113,36 +115,61 @@ export default {
           component: "ContactHistory",
         },
       ],
-      patient: {
+      url: "https://astra-dev.dopcore.com",
-        first_name: "Иван",
-        last_name: "Иванов",
-        patronimic: "Иванович",
-        avatar: "",
-        addedDate: "22.01.2010",
-        updatedDate: "12.12.2022",
-        priority: 2,
-        allergy: ["Парацетомол", "Пчелы", "Мед"],
-      },
     };
   },
   computed: {
+    medicalCardData() {
+      return this.$store.state.medical.medicalCard;
+    },
+    patientData() {
+      return this.medicalCardData?.person;
+    },
+    patientName() {
+      let name = {
+        lastName: this.ckeckName("last_name"),
+        firstName: this.ckeckName("first_name"),
+        patronymic: this.ckeckName("patronymic"),
+      };
+      return `${name.lastName} ${name.firstName} ${name.patronymic}`;
+    },
     patientAvatar() {
       let checkedFirstName =
-        this.patient.first_name !== null
+        this.patientData?.first_name !== null
-          ? this.patient.first_name[0]
+          ? this.patientData?.first_name[0]
-          : this.patient.last_name[1];
+          : this.patientData?.last_name[1];
-      return `${this.patient.last_name[0]}${checkedFirstName}`;
+      return `${this.patientData?.last_name[0]}${checkedFirstName}`;
     },
     priority() {
       return column
         .find((elem) => elem.name === "priority")
-        ?.settings.find((elem) => elem.priority === this.patient?.priority);
+        ?.settings.find((elem) => elem.priority === this.patientData?.priority);
+    },
+    createdDate() {
+      return this.checkDate("created_at");
+    },
+    updatedDate() {
+      return this.checkDate("updated_at");
+    },
+    allergiesList() {
+      return this.patientData?.allergic.map((elem) => ({
+        name: elem?.name,
+        title: elem?.title,
+      }));
     },
   },
   methods: {
     selectItem(item) {
       this.value = item?.component;
     },
+    ckeckName(field) {
+      return this.patientData?.[field] ? this.patientData[field] : "";
+    },
+    checkDate(field) {
+      return this.medicalCardData?.[field]
+        ? moment.parseZone(this.medicalCardData?.[field]).format("DD.MM.YYYY")
+        : "";
+    },
   },
 };
 </script>