From 7d866c4bbfe35d681adb3d208b617dc19843f745 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 3 Apr 2023 14:47:17 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D1=81=D0=B0=D0=B9=D0=B4=D0=B1=D0=B0=D1=80=20=D0=BE?=
 =?UTF-8?q?=D0=B1=D1=89=D0=B5=D0=B9=20=D0=B8=D0=BD=D1=84=D0=BE=D1=80=D0=BC?=
 =?UTF-8?q?=D0=B0=D1=86=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/newMedicalCard/TheMedicalCard.vue   | 10 +--
 .../components/MedicalCardBaseInfo.vue        | 26 +++++++
 .../components/MedicalCardHeader.vue          |  7 +-
 .../components/MedicalCardSidebar.vue         | 74 +++++++++++++++++++
 4 files changed, 108 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/newMedicalCard/components/MedicalCardBaseInfo.vue
 create mode 100644 src/pages/newMedicalCard/components/MedicalCardSidebar.vue

diff --git a/src/pages/newMedicalCard/TheMedicalCard.vue b/src/pages/newMedicalCard/TheMedicalCard.vue
index 260f3f8..616e328 100644
--- a/src/pages/newMedicalCard/TheMedicalCard.vue
+++ b/src/pages/newMedicalCard/TheMedicalCard.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-  .w-full
-    medical-card-header(v-model="currentMenuItem")
+  .w-full.h-full
+    medical-card-header.mb-2(v-model="currentMenuItem")
     component(
       v-if="currentMenuItem",
       v-bind:is="currentMenuItem",
@@ -9,13 +9,13 @@
 
 <script>
 import MedicalCardHeader from "@/pages/newMedicalCard/components/MedicalCardHeader.vue";
-import BasicDataForm from "@/pages/newMedicalCard/components/BasicDataForm.vue";
+import MedicalCardBaseInfo from "@/pages/newMedicalCard/components/MedicalCardBaseInfo.vue";
 export default {
   name: "TheMedicalCard",
-  components: { MedicalCardHeader, BasicDataForm },
+  components: { MedicalCardHeader, MedicalCardBaseInfo },
   data() {
     return {
-      currentMenuItem: "BasicDataForm",
+      currentMenuItem: "MedicalCardBaseInfo",
     };
   },
 };
diff --git a/src/pages/newMedicalCard/components/MedicalCardBaseInfo.vue b/src/pages/newMedicalCard/components/MedicalCardBaseInfo.vue
new file mode 100644
index 0000000..b013985
--- /dev/null
+++ b/src/pages/newMedicalCard/components/MedicalCardBaseInfo.vue
@@ -0,0 +1,26 @@
+<template lang="pug">
+  .base-info-wrapper.w-full.flex.gap-x-2
+    medical-card-sidebar(v-model="currentMenuItem")
+    component(
+      v-if="currentMenuItem",
+      v-bind:is="currentMenuItem"
+    )
+</template>
+
+<script>
+import MedicalCardSidebar from "@/pages/newMedicalCard/components/MedicalCardSidebar.vue";
+import BasicDataForm from "@/pages/newMedicalCard/components/BasicDataForm.vue";
+export default {
+  name: "MedicalCardBaseInfo",
+  components: { MedicalCardSidebar, BasicDataForm },
+  data() {
+    return {
+      currentMenuItem: "BasicDataForm",
+    };
+  },
+};
+</script>
+<style lang="sass" scoped>
+.base-info-wrapper
+  height: 79.7%
+</style>
diff --git a/src/pages/newMedicalCard/components/MedicalCardHeader.vue b/src/pages/newMedicalCard/components/MedicalCardHeader.vue
index 5b45b2d..09b36e6 100644
--- a/src/pages/newMedicalCard/components/MedicalCardHeader.vue
+++ b/src/pages/newMedicalCard/components/MedicalCardHeader.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .patient-info.pt-4.pr-6.flex.flex-col.justify-between
+  .patient-info.pt-4.pr-6.flex.flex-col.justify-between.rounded
     .ml-6.flex.justify-between
       q-breadcrumbs
         template(v-slot:separator)
@@ -90,7 +90,7 @@ export default {
         {
           title: "Общая информация",
           id: "basic",
-          component: "BasicDataForm",
+          component: "MedicalCardBaseInfo",
         },
         {
           title: "Журнал посещений",
@@ -149,9 +149,8 @@ export default {
 <style scoped lang="sass">
 .patient-info
   width: 83.2%
-  height: 190px
+  height: 18.7%
   background-color: var(--default-white)
-  border-radius: 4px
 .menu-item
   color: var(--font-grey-color)
   border-bottom: 1px solid transparent
diff --git a/src/pages/newMedicalCard/components/MedicalCardSidebar.vue b/src/pages/newMedicalCard/components/MedicalCardSidebar.vue
new file mode 100644
index 0000000..86668a7
--- /dev/null
+++ b/src/pages/newMedicalCard/components/MedicalCardSidebar.vue
@@ -0,0 +1,74 @@
+<template lang="pug">
+  .sidebar-wrapper.h-full.rounded.px-2.py-6.flex.flex-col
+    .menu-item.text-base.px-4.py-3.rounded(
+      v-for="item in menuItem",
+      :key="item.id",
+      :id="item.id",
+      @click="selectItem(item)",
+      :class="{'menu-item-active': item.component === modelValue}"
+    ) {{item.title}}
+</template>
+
+<script>
+import { v_model } from "@/shared/mixins/v-model";
+export default {
+  name: "MedicalCardSidebar",
+  mixins: [v_model],
+  data() {
+    return {
+      menuItem: [
+        {
+          title: "Основные данные",
+          id: "basic-data",
+          component: "BasicDataForm",
+        },
+        {
+          title: "Протоколы первичного осмотра",
+          id: "protocols",
+          component: "Protocols",
+        },
+        {
+          title: "Доверенное лицо",
+          id: "trusted-person",
+          component: "TrustedPerson",
+        },
+        {
+          title: "Аллергии",
+          id: "allergies",
+          component: "Allergies",
+        },
+        {
+          title: "Состояние здоровья",
+          id: "health-status",
+          component: "HealthStatus",
+        },
+        {
+          title: "История болезней",
+          id: "medical-history",
+          component: "MedicalHistory",
+        },
+        {
+          title: "Зубная формула",
+          id: "dental-formula",
+          component: "DentalFormula",
+        },
+      ],
+    };
+  },
+  methods: {
+    selectItem(item) {
+      this.value = item?.component;
+    },
+  },
+};
+</script>
+<style lang="sass" scoped>
+.sidebar-wrapper
+  width: 16.3%
+  background-color: var(--default-white)
+.menu-item
+  color: var(--font-grey-color)
+.menu-item-active, .menu-item:hover
+  color: var(--btn-blue-color)
+  background-color: var(--bg-ligth-blue-color)
+</style>