Merge branch 'H-2' into 'master'

WIP Доделала визуал хедера

See merge request andrusyakka/urban-couscous!290

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>

src/pages/newMedicalCard/components/MedicalCardHeader.vue

@@ -13,18 +13,55 @@
       q-btn(
         flat,
         text-color="grey",
-        icon="app:basket",
-        size="10px"
-        label="Удалить медкарту",
         no-caps,
-        padding="4px"
+        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",
-          @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}}
@@ -34,21 +71,26 @@
         label="Печатать",
         dropdown-icon="expand_more",
         flat,
+        size="md"
         no-caps,
         padding="2px 4px"
+        :style="{height: '32px'}"
       )
 </template>
 
 <script>
+import { v_model } from "@/shared/mixins/v-model";
+import { column } from "@/pages/clients/utils/tableConfig.js";
 export default {
   name: "MedicalCardHeader",
+  mixins: [v_model],
   data() {
     return {
       menuItem: [
         {
           title: "Общая информация",
           id: "basic",
-          component: "Basic",
+          component: "BasicDataForm",
         },
         {
           title: "Журнал посещений",
@@ -71,14 +113,35 @@ export default {
           component: "ContactHistory",
         },
       ],
-      currentMenuItem: "Basic",
+      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(componentName) {
-      this.currentMenuItem = this.menuItem.find(
-        (elem) => elem.component === componentName
-      )?.component;
+    selectItem(item) {
+      this.value = item?.component;
     },
   },
 };
@@ -98,7 +161,6 @@ 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(.on-left)
   margin-right: 4px !important
@@ -111,4 +173,10 @@ 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
+.label-color
+  color: var(--font-grey-color)
+.date-color
+  color: var(--font-dark-blue-color)
 </style>