From 4017bbbd23f1ebd64fb570ff8e0441090b9db694 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 31 Mar 2023 15:32:50 +0300
Subject: [PATCH 1/2] =?UTF-8?q?WIP=20=D0=9D=D0=B0=D1=81=D1=82=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B0=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/newMedicalCard/TheMedicalCard.vue   | 14 ++++++++++--
 .../components/MedicalCardHeader.vue          | 22 +++++++++++--------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/pages/newMedicalCard/TheMedicalCard.vue b/src/pages/newMedicalCard/TheMedicalCard.vue
index 0a20863..260f3f8 100644
--- a/src/pages/newMedicalCard/TheMedicalCard.vue
+++ b/src/pages/newMedicalCard/TheMedicalCard.vue
@@ -1,12 +1,22 @@
 <template lang="pug">
   .w-full
-    medical-card-header
+    medical-card-header(v-model="currentMenuItem")
+    component(
+      v-if="currentMenuItem",
+      v-bind:is="currentMenuItem",
+    )
 </template>
 
 <script>
 import MedicalCardHeader from "@/pages/newMedicalCard/components/MedicalCardHeader.vue";
+import BasicDataForm from "@/pages/newMedicalCard/components/BasicDataForm.vue";
 export default {
   name: "TheMedicalCard",
-  components: { MedicalCardHeader },
+  components: { MedicalCardHeader, BasicDataForm },
+  data() {
+    return {
+      currentMenuItem: "BasicDataForm",
+    };
+  },
 };
 </script>
diff --git a/src/pages/newMedicalCard/components/MedicalCardHeader.vue b/src/pages/newMedicalCard/components/MedicalCardHeader.vue
index 56feead..d4c5ddb 100644
--- a/src/pages/newMedicalCard/components/MedicalCardHeader.vue
+++ b/src/pages/newMedicalCard/components/MedicalCardHeader.vue
@@ -17,14 +17,14 @@
         size="10px"
         label="Удалить медкарту",
         no-caps,
-        padding="4px"
+        padding="6px"
       )
     .flex.justify-between.mt-22px
       .flex
         .menu-item.px-6.py-10px.cursor-pointer.text-base(
           v-for="item in menuItem",
-          @click="selectItem(item.component)",
-          :class="{'menu-item-active': item.component === currentMenuItem}",
+          @click="selectItem(item)",
+          :class="{'menu-item-active': item.component === modelValue}",
           :key="item.id",
           :id="item.id"
         ) {{item.title}}
@@ -36,19 +36,22 @@
         flat,
         no-caps,
         padding="2px 4px"
+        :style="{height: '32px'}"
       )
 </template>
 
 <script>
+import { v_model } from "@/shared/mixins/v-model";
 export default {
   name: "MedicalCardHeader",
+  mixins: [v_model],
   data() {
     return {
       menuItem: [
         {
           title: "Общая информация",
           id: "basic",
-          component: "Basic",
+          component: "BasicDataForm",
         },
         {
           title: "Журнал посещений",
@@ -71,14 +74,11 @@ export default {
           component: "ContactHistory",
         },
       ],
-      currentMenuItem: "Basic",
     };
   },
   methods: {
-    selectItem(componentName) {
-      this.currentMenuItem = this.menuItem.find(
-        (elem) => elem.component === componentName
-      )?.component;
+    selectItem(item) {
+      this.value = item?.component;
     },
   },
 };
@@ -100,6 +100,8 @@ export default {
 .q-btn
   font-size: 14px !important
   font-weight: 500 !important
+.q-btn :deep(.q-icon)
+  font-size: 16px !important
 .q-btn :deep(.on-left)
   margin-right: 4px !important
 .q-btn :deep(.q-btn-dropdown__arrow)
@@ -111,4 +113,6 @@ export default {
   font-size: 12px
   line-height: 135%
   color: var(--font-grey-color)
+.q-breadcrumbs :deep(.q-breadcrumbs__separator)
+  margin: 10px 0 4px 8px !important
 </style>

From fbb33325b54f32ad0e1be8a95ae6449dae849ff8 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 31 Mar 2023 18:14:03 +0300
Subject: [PATCH 2/2] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B4=D0=B5=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=B2=D0=B8=D0=B7=D1=83=D0=B0=D0=BB=20=D1=85?=
 =?UTF-8?q?=D0=B5=D0=B4=D0=B5=D1=80=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MedicalCardHeader.vue          | 78 +++++++++++++++++--
 1 file changed, 71 insertions(+), 7 deletions(-)

diff --git a/src/pages/newMedicalCard/components/MedicalCardHeader.vue b/src/pages/newMedicalCard/components/MedicalCardHeader.vue
index d4c5ddb..5b45b2d 100644
--- a/src/pages/newMedicalCard/components/MedicalCardHeader.vue
+++ b/src/pages/newMedicalCard/components/MedicalCardHeader.vue
@@ -13,13 +13,50 @@
       q-btn(
         flat,
         text-color="grey",
-        icon="app:basket",
-        size="10px"
-        label="Удалить медкарту",
         no-caps,
         padding="6px"
+        size="md"
       )
-    .flex.justify-between.mt-22px
+        q-icon(left, name="app:basket", size="16px")
+        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")
+        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}`}}
+          q-chip(
+            square,
+            text-color="white",
+            :style="{height: '20px', background: priority.color, padding: '2px 8px'}",
+            :label="priority.text"
+          )
+          q-btn-dropdown(
+            :style="{background: 'var(--border-red-color)', height: '20px'}",
+            text-color="white",
+            :label="`+${patient?.allergy?.length}`"
+            icon="pan_tool"
+            size="10px",
+            padding="2px 8px",
+            dropdown-icon="expand_more",
+            menu-anchor="bottom left"
+            menu-self="top start"
+          )
+            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",
+                :style="{padding: 0, 'min-height': '32px'}"
+              )
+                q-item-section.cursor-pointer {{allergy}}
+        span.text-smm.label-color Добавлен в систему: 
+          span.date-color {{ patient?.addedDate}}
+        span.text-smm.label-color Последнее обновление: 
+          span.date-color {{patient?.updatedDate}}
+    .flex.justify-between.pt-4
       .flex
         .menu-item.px-6.py-10px.cursor-pointer.text-base(
           v-for="item in menuItem",
@@ -34,6 +71,7 @@
         label="Печатать",
         dropdown-icon="expand_more",
         flat,
+        size="md"
         no-caps,
         padding="2px 4px"
         :style="{height: '32px'}"
@@ -42,6 +80,7 @@
 
 <script>
 import { v_model } from "@/shared/mixins/v-model";
+import { column } from "@/pages/clients/utils/tableConfig.js";
 export default {
   name: "MedicalCardHeader",
   mixins: [v_model],
@@ -74,8 +113,32 @@ export default {
           component: "ContactHistory",
         },
       ],
+      patient: {
+        first_name: "Иван",
+        last_name: "Иванов",
+        patronimic: "Иванович",
+        avatar: "",
+        addedDate: "22.01.2010",
+        updatedDate: "12.12.2022",
+        priority: 2,
+        allergy: ["Парацетомол", "Пчелы", "Мед"],
+      },
     };
   },
+  computed: {
+    patientAvatar() {
+      let checkedFirstName =
+        this.patient.first_name !== null
+          ? this.patient.first_name[0]
+          : this.patient.last_name[1];
+      return `${this.patient.last_name[0]}${checkedFirstName}`;
+    },
+    priority() {
+      return column
+        .find((elem) => elem.name === "priority")
+        ?.settings.find((elem) => elem.priority === this.patient?.priority);
+    },
+  },
   methods: {
     selectItem(item) {
       this.value = item?.component;
@@ -98,10 +161,7 @@ export default {
   color: var(--font-dark-blue-color)
   border-bottom: 1px solid var(--font-dark-blue-color)
 .q-btn
-  font-size: 14px !important
   font-weight: 500 !important
-.q-btn :deep(.q-icon)
-  font-size: 16px !important
 .q-btn :deep(.on-left)
   margin-right: 4px !important
 .q-btn :deep(.q-btn-dropdown__arrow)
@@ -115,4 +175,8 @@ export default {
   color: var(--font-grey-color)
 .q-breadcrumbs :deep(.q-breadcrumbs__separator)
   margin: 10px 0 4px 8px !important
+.label-color
+  color: var(--font-grey-color)
+.date-color
+  color: var(--font-dark-blue-color)
 </style>