From e48082af023a75a71edb44b5fb9a6a7f4a16d32d Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 30 Mar 2023 19:38:33 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=9D=D0=B0=D1=87=D0=B0=D0=BB=D0=B0=20?=
 =?UTF-8?q?=D0=BD=D0=B0=D0=B1=D1=80=D0=B0=D1=81=D1=8B=D0=B2=D0=B0=D1=82?=
 =?UTF-8?q?=D1=8C=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80=20=D0=BC=D0=B5=D0=B4?=
 =?UTF-8?q?=D0=BA=D0=B0=D1=80=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LoggedInLayout.vue             |   4 +-
 src/components/TheSidebar.vue                 |  16 ++-
 .../clients/components/ClientsWrapper.vue     |   2 +-
 src/pages/newMedicalCard/TheMedicalCard.vue   |   4 +
 .../components/MedicalCardHeader.vue          | 114 ++++++++++++++++++
 src/pages/schedule/TheSchedule.vue            |   2 +-
 6 files changed, 132 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/newMedicalCard/components/MedicalCardHeader.vue

diff --git a/src/components/LoggedInLayout.vue b/src/components/LoggedInLayout.vue
index 37a8641..5feb2b5 100644
--- a/src/components/LoggedInLayout.vue
+++ b/src/components/LoggedInLayout.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.flex.flex-col.w-full.h-full.gap-y-2
+  .flex.flex-col.w-full.h-full.gap-y-2
     the-header(
       :url="url",
       :is-open-form="isOpenForm",
@@ -10,7 +10,7 @@
     )
     .flex.flex-auto
       the-sidebar
-      router-view(
+      router-view.mx-2(
         :open-form="openForm",
         :is-open-form="isOpenForm",
         :updated-clients="updatedClients",
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index c877092..fc5c839 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -1,7 +1,5 @@
 <template lang="pug">
-  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border(
-    :style="{borderTopRightRadius: this.currenPageBorder ? '0px' : '4px'}"
-  )
+  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border(:style="bordersStyle")
     .flex.flex-col.gap-y-6
       base-button-sidebar(
         v-for="button in pageSettings.filter((el) => el.id !== 'settings')",
@@ -49,7 +47,7 @@ export default {
           active: false,
         },
       ],
-      currenPageBorder: true,
+      currentPageBorder: true,
     };
   },
   methods: {
@@ -65,6 +63,12 @@ export default {
     getSettings() {
       return this.pageSettings.find((el) => el.id === "settings");
     },
+    bordersStyle() {
+      return {
+        "border-top-right-radius": this.currentPageBorder ? "0px" : "4px",
+        //"border-bottom-right-radius": this.currentPageBorder ? "0px" : "4px",
+      };
+    },
   },
   mounted() {
     let href = window.location.href.slice(22);
@@ -77,11 +81,11 @@ export default {
   watch: {
     "$route.path"() {
       if (this.$router.currentRoute._value.fullPath === "/calendar") {
-        this.currenPageBorder = true;
+        this.currentPageBorder = true;
         this.pageSettings.forEach((el) =>
           el.path === "#/calendar" ? (el.active = true) : (el.active = false)
         );
-      } else this.currenPageBorder = false;
+      } else this.currentPageBorder = false;
     },
   },
 };
diff --git a/src/pages/clients/components/ClientsWrapper.vue b/src/pages/clients/components/ClientsWrapper.vue
index 1d5add4..9350301 100644
--- a/src/pages/clients/components/ClientsWrapper.vue
+++ b/src/pages/clients/components/ClientsWrapper.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper.flex.w-full.relative.mx-2
+  .wrapper.flex.w-full.relative
     clients-table(
       :open-form="openForm",
       :is-open-form="isOpenForm",
diff --git a/src/pages/newMedicalCard/TheMedicalCard.vue b/src/pages/newMedicalCard/TheMedicalCard.vue
index 4490cc8..0a20863 100644
--- a/src/pages/newMedicalCard/TheMedicalCard.vue
+++ b/src/pages/newMedicalCard/TheMedicalCard.vue
@@ -1,8 +1,12 @@
 <template lang="pug">
+  .w-full
+    medical-card-header
 </template>
 
 <script>
+import MedicalCardHeader from "@/pages/newMedicalCard/components/MedicalCardHeader.vue";
 export default {
   name: "TheMedicalCard",
+  components: { MedicalCardHeader },
 };
 </script>
diff --git a/src/pages/newMedicalCard/components/MedicalCardHeader.vue b/src/pages/newMedicalCard/components/MedicalCardHeader.vue
new file mode 100644
index 0000000..56feead
--- /dev/null
+++ b/src/pages/newMedicalCard/components/MedicalCardHeader.vue
@@ -0,0 +1,114 @@
+<template lang="pug">
+  .patient-info.pt-4.pr-6.flex.flex-col.justify-between
+    .ml-6.flex.justify-between
+      q-breadcrumbs
+        template(v-slot:separator)
+          q-icon.rotate-180(
+            size="12px",
+            name="app:long-arrow",
+            color="grey",
+          )
+        q-breadcrumbs-el(label="Календарь")
+        q-breadcrumbs-el(label="Медкарта #13019319")
+      q-btn(
+        flat,
+        text-color="grey",
+        icon="app:basket",
+        size="10px"
+        label="Удалить медкарту",
+        no-caps,
+        padding="4px"
+      )
+    .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}",
+          :key="item.id",
+          :id="item.id"
+        ) {{item.title}}
+      q-btn-dropdown(
+        color="primary",
+        icon="print",
+        label="Печатать",
+        dropdown-icon="expand_more",
+        flat,
+        no-caps,
+        padding="2px 4px"
+      )
+</template>
+
+<script>
+export default {
+  name: "MedicalCardHeader",
+  data() {
+    return {
+      menuItem: [
+        {
+          title: "Общая информация",
+          id: "basic",
+          component: "Basic",
+        },
+        {
+          title: "Журнал посещений",
+          id: "session-log",
+          component: "SessionLog",
+        },
+        {
+          title: "Планы лечения",
+          id: "treatment-plans",
+          component: "TreatmentPlans",
+        },
+        {
+          title: "Статистика",
+          id: "statistics",
+          component: "Statistics",
+        },
+        {
+          title: "История контактов",
+          id: "contact-history",
+          component: "ContactHistory",
+        },
+      ],
+      currentMenuItem: "Basic",
+    };
+  },
+  methods: {
+    selectItem(componentName) {
+      this.currentMenuItem = this.menuItem.find(
+        (elem) => elem.component === componentName
+      )?.component;
+    },
+  },
+};
+</script>
+<style scoped lang="sass">
+.patient-info
+  width: 83.2%
+  height: 190px
+  background-color: var(--default-white)
+  border-radius: 4px
+.menu-item
+  color: var(--font-grey-color)
+  border-bottom: 1px solid transparent
+.menu-item:first-child
+  border-bottom-left-radius: 4px
+.menu-item-active
+  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
+.q-btn :deep(.q-btn-dropdown__arrow)
+  margin-left: 0px !important
+  opacity: 0.7
+.text-grey
+  color: var(--font-grey-color) !important
+.q-breadcrumbs__el
+  font-size: 12px
+  line-height: 135%
+  color: var(--font-grey-color)
+</style>
diff --git a/src/pages/schedule/TheSchedule.vue b/src/pages/schedule/TheSchedule.vue
index 3b0d440..4c5b99b 100644
--- a/src/pages/schedule/TheSchedule.vue
+++ b/src/pages/schedule/TheSchedule.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper.flex.w-full.relative.mx-2
+  .wrapper.flex.w-full.relative
     transition(name="schedule", mode="out-in")
       .flex.justify-center.items-center.w-full(v-if="schedulesDataPresence")
           base-loader(