From d7f8bf5daa239eb0ce465603d2bc6bad26e1179f Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 13 Apr 2023 12:57:23 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=A0=D0=B5=D0=BD=D0=B5=D0=B9=D0=BC?=
 =?UTF-8?q?=D0=B8=D0=BD=D0=B3=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/newMedicalCard/TheMedicalCard.vue   | 18 ++--
 .../{ => BasicDataForms}/BasicDataForm.vue    |  2 +-
 .../BasicDataForms/DocumentsForm.vue          | 12 +++
 .../components/MedicalBaseInfo.vue            | 26 ++++++
 .../components/MedicalBasicDataWrapper.vue    | 20 +++++
 .../components/MedicalCardBaseInfo.vue        | 26 ------
 .../components/MedicalFormWrapper.vue         |  5 +-
 ...edicalCardHeader.vue => MedicalHeader.vue} | 89 +------------------
 ...RemoveModal.vue => MedicalRemoveModal.vue} |  2 +-
 ...icalCardSidebar.vue => MedicalSidebar.vue} |  4 +-
 .../{configMedical.js => medicalConfig.js}    |  4 +-
 src/store/modules/medicalCard.js              |  2 +-
 12 files changed, 77 insertions(+), 133 deletions(-)
 rename src/pages/newMedicalCard/components/{ => BasicDataForms}/BasicDataForm.vue (99%)
 create mode 100644 src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
 create mode 100644 src/pages/newMedicalCard/components/MedicalBaseInfo.vue
 create mode 100644 src/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue
 delete mode 100644 src/pages/newMedicalCard/components/MedicalCardBaseInfo.vue
 rename src/pages/newMedicalCard/components/{MedicalCardHeader.vue => MedicalHeader.vue} (70%)
 rename src/pages/newMedicalCard/components/{MedicalCardRemoveModal.vue => MedicalRemoveModal.vue} (96%)
 rename src/pages/newMedicalCard/components/{MedicalCardSidebar.vue => MedicalSidebar.vue} (89%)
 rename src/pages/newMedicalCard/utils/{configMedical.js => medicalConfig.js} (97%)

diff --git a/src/pages/newMedicalCard/TheMedicalCard.vue b/src/pages/newMedicalCard/TheMedicalCard.vue
index a4c904b..aabef8c 100644
--- a/src/pages/newMedicalCard/TheMedicalCard.vue
+++ b/src/pages/newMedicalCard/TheMedicalCard.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .w-full.h-full
-    medical-card-header.mb-2(
+    medical-header.mb-2(
       v-model="currentMenuItem",
       :change-shown-remove-modal="changeShownRemoveModal",
     )
@@ -12,26 +12,26 @@
       v-model="isShownRemoveModal",
       title="Удаление медкарты"
     )
-      medical-card-remove-modal(:change-shown-remove-modal="changeShownRemoveModal")
+      medical-remove-modal(:change-shown-remove-modal="changeShownRemoveModal")
 </template>
 
 <script>
-import MedicalCardHeader from "@/pages/newMedicalCard/components/MedicalCardHeader.vue";
-import MedicalCardBaseInfo from "@/pages/newMedicalCard/components/MedicalCardBaseInfo.vue";
+import MedicalHeader from "@/pages/newMedicalCard/components/MedicalHeader.vue";
+import MedicalBaseInfo from "@/pages/newMedicalCard/components/MedicalBaseInfo.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
-import MedicalCardRemoveModal from "@/pages/newMedicalCard/components/MedicalCardRemoveModal.vue";
+import MedicalRemoveModal from "@/pages/newMedicalCard/components/MedicalRemoveModal.vue";
 import { mapState } from "vuex";
 export default {
   name: "TheMedicalCard",
   components: {
-    MedicalCardHeader,
-    MedicalCardBaseInfo,
+    MedicalHeader,
+    MedicalBaseInfo,
     BaseModal,
-    MedicalCardRemoveModal,
+    MedicalRemoveModal,
   },
   data() {
     return {
-      currentMenuItem: "MedicalCardBaseInfo",
+      currentMenuItem: "MedicalBaseInfo",
       isShownRemoveModal: false,
     };
   },
diff --git a/src/pages/newMedicalCard/components/BasicDataForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
similarity index 99%
rename from src/pages/newMedicalCard/components/BasicDataForm.vue
rename to src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
index c9e0aff..d331f08 100644
--- a/src/pages/newMedicalCard/components/BasicDataForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
@@ -65,7 +65,7 @@ import moment from "moment";
 import {
   baseDataForm,
   genderOptions,
-} from "@/pages/newMedicalCard/utils/configMedical";
+} from "@/pages/newMedicalCard/utils/medicalConfig.js";
 import { mapGetters, mapState } from "vuex";
 
 export default {
diff --git a/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
new file mode 100644
index 0000000..3fda75c
--- /dev/null
+++ b/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
@@ -0,0 +1,12 @@
+<template lang="pug">
+  medical-form-wrapper
+</template>
+
+<script>
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+export default {
+  name: "DocumentsForm",
+  components: { MedicalFormWrapper },
+};
+</script>
+<style lang="sass" scoped></style>
diff --git a/src/pages/newMedicalCard/components/MedicalBaseInfo.vue b/src/pages/newMedicalCard/components/MedicalBaseInfo.vue
new file mode 100644
index 0000000..8fee4d1
--- /dev/null
+++ b/src/pages/newMedicalCard/components/MedicalBaseInfo.vue
@@ -0,0 +1,26 @@
+<template lang="pug">
+  .base-info-wrapper.w-full.flex.gap-x-2
+    medical-sidebar(v-model="currentMenuItem")
+    component(
+      v-if="currentMenuItem",
+      v-bind:is="currentMenuItem"
+    )
+</template>
+
+<script>
+import MedicalSidebar from "@/pages/newMedicalCard/components/MedicalSidebar.vue";
+import MedicalBasicDataWrapper from "@/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue";
+export default {
+  name: "MedicalBaseInfo",
+  components: { MedicalSidebar, MedicalBasicDataWrapper },
+  data() {
+    return {
+      currentMenuItem: "MedicalBasicDataWrapper",
+    };
+  },
+};
+</script>
+<style lang="sass" scoped>
+.base-info-wrapper
+  height: 79.7%
+</style>
diff --git a/src/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue b/src/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue
new file mode 100644
index 0000000..7d1550f
--- /dev/null
+++ b/src/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue
@@ -0,0 +1,20 @@
+<template lang="pug">
+  .flex.flex-col.gap-y-2.wrapper
+    basic-data-form
+    documents-form
+</template>
+
+<script>
+import BasicDataForm from "@/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue";
+import DocumentsForm from "@/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue";
+export default {
+  name: "MedicalBasicDataWrapper",
+  components: { BasicDataForm, DocumentsForm },
+};
+</script>
+<style lang="sass" scoped>
+.wrapper
+  width: 83.2%
+  @media (max-width: 600px)
+    width: fit-content
+</style>
diff --git a/src/pages/newMedicalCard/components/MedicalCardBaseInfo.vue b/src/pages/newMedicalCard/components/MedicalCardBaseInfo.vue
deleted file mode 100644
index b013985..0000000
--- a/src/pages/newMedicalCard/components/MedicalCardBaseInfo.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<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/MedicalFormWrapper.vue b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
index a76c276..1e6dc09 100644
--- a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
+++ b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .form-wrapper.relative.h-fit.rounded
+  .form-wrapper.relative.h-fit.rounded.w-full
     transition(name="medical-form", mode="out-in")
       .loader.absolute.z-10.flex.items-center.justify-center.w-full.h-full.rounded(v-if="isLoadingData")
         base-loader
@@ -51,10 +51,7 @@ export default {
 
 <style lang="sass" scoped>
 .form-wrapper
-  width: 83.2%
   background-color: var(--default-white)
-  @media (max-width: 600px)
-    width: fit-content
 .edit-button
   color: var(--btn-blue-color)
 .loader
diff --git a/src/pages/newMedicalCard/components/MedicalCardHeader.vue b/src/pages/newMedicalCard/components/MedicalHeader.vue
similarity index 70%
rename from src/pages/newMedicalCard/components/MedicalCardHeader.vue
rename to src/pages/newMedicalCard/components/MedicalHeader.vue
index ec7894a..f49a8c4 100644
--- a/src/pages/newMedicalCard/components/MedicalCardHeader.vue
+++ b/src/pages/newMedicalCard/components/MedicalHeader.vue
@@ -57,12 +57,6 @@
                   q-item-section.cursor-pointer {{allergy.name}}
                   .m-auto.label-color.icon-eye
                     q-icon(name="visibility", size="16px")
-              //.scroll-wrapper.h-hull.px-6px.relative.flex.flex-col
-                .scroll-track.rounded.w-full.h-full
-                .scroll-thumb.rounded.w-1.h-28.absolute(
-                  id="thumb",
-                  :style="{top: `${thumbPos}px`, height: `${thumbHeight}px`}",
-                )
         span.text-smm.label-color Добавлен в систему: 
           span.date-color {{ createdDate }}
         span.text-smm.label-color Последнее обновление: 
@@ -96,9 +90,9 @@ import * as moment from "moment/moment";
 import {
   headerMenuItem,
   routesDictionary,
-} from "@/pages/newMedicalCard/utils/configMedical.js";
+} from "@/pages/newMedicalCard/utils/medicalConfig.js";
 export default {
-  name: "MedicalCardHeader",
+  name: "MedicalHeader",
   mixins: [v_model],
   props: {
     changeShownRemoveModal: Function,
@@ -107,9 +101,6 @@ export default {
     return {
       menuItem: headerMenuItem,
       routes: routesDictionary,
-      //thumbPos: 0,
-      //scrollTop: 0,
-      //thumbHeight: 0,
     };
   },
   computed: {
@@ -152,46 +143,6 @@ export default {
       return this.checkDate("updated_at");
     },
     allergiesList() {
-      /*let arr = [
-        {
-          name: "Грибы",
-          title: "Сыпь",
-        },
-        {
-          name: "Грибы",
-          title: "Сыпь",
-        },
-        {
-          name: "Грибы",
-          title: "Сыпь",
-        },
-        {
-          name: "Грибы",
-          title: "Сыпь",
-        },
-        {
-          name: "Пенецеллин",
-          title: "Сыпь",
-        },
-        {
-          name: "Мох",
-          title: "Опухание лица",
-        },
-        {
-          name: "Пыльца",
-          title: "Чихание",
-        },
-        {
-          name: "Злаковые",
-          title: "Чихание",
-        },
-      ];
-      return this.patientData?.allergic
-        .map((elem) => ({
-          name: elem?.name,
-          title: elem?.title,
-        }))
-        .concat(arr);*/
       return this.patientData?.allergic.map((elem) => ({
         name: elem?.name,
         title: elem?.title,
@@ -210,28 +161,6 @@ export default {
         ? moment.parseZone(this.medicalCardData?.[field]).format("DD.MM.YYYY")
         : "";
     },
-    /*scroll() {
-      let list = document.getElementById("allergiesList");
-      this.thumbHeight =
-        list?.offsetHeight / (list?.scrollHeight / list?.offsetHeight);
-      /*let thumb = document.getElementById("thumb");
-      let nativeThumbHeight =
-        list?.offsetHeight / (list?.scrollHeight / list?.offsetHeight);
-      let difference = Math.abs(nativeThumbHeight - thumb.clientHeight);
-      if (list.scrollTop < this.scrollTop && this.thumbPos > 0) {
-        this.thumbPos = this.thumbPos - difference - this.scrollTop;
-        this.scrollTop = list.scrollTop;
-      }
-      if (
-        list.scrollTop > this.scrollTop &&
-        list.scrollTop + thumb.clientHeight <= list.offsetHeight
-      ) {
-        console.log(list.scrollTop + thumb.clientHeight, list.offsetHeight);
-        this.thumbPos = difference + list.scrollTop;
-        this.scrollTop = list.scrollTop;
-      }
-      this.thumbPos = list.scrollTop;
-    },*/
   },
 };
 </script>
@@ -268,29 +197,15 @@ export default {
   color: var(--font-grey-color)
 .date-color
   color: var(--font-dark-blue-color)
-/*.scroll-wrapper
-  width: 16px
-  background-color: transparent
-/*.scroll-track
-  background-color: var(--bg-ligth-blue-color)
-/*.scroll-thumb
-  background-color: var(--bg-aqua-blue)
 .allergies-list
   max-height: 190px
   overflow-y: auto
-  //&::-webkit-scrollbar-track:horizontal
-  //  margin: 16px 6px 0 104px
   &::-webkit-scrollbar
     //width: 16px
     width: 4px
     background-color: var(--default-white)
   &::-webkit-scrollbar-track
     margin: 0
-  //  border-left: 6px solid var(--default-white)
-  //  border-right: 6px solid var(--default-white)
-  //&::-webkit-scrollbar-thumb
-  //  border-left: 6px solid var(--default-white)
-  //  border-right: 6px solid var(--default-white)
 .allergies-item
   color: var(--font-dark-blue-color)
 .allergies-item:hover
diff --git a/src/pages/newMedicalCard/components/MedicalCardRemoveModal.vue b/src/pages/newMedicalCard/components/MedicalRemoveModal.vue
similarity index 96%
rename from src/pages/newMedicalCard/components/MedicalCardRemoveModal.vue
rename to src/pages/newMedicalCard/components/MedicalRemoveModal.vue
index 7f05dfd..5131880 100644
--- a/src/pages/newMedicalCard/components/MedicalCardRemoveModal.vue
+++ b/src/pages/newMedicalCard/components/MedicalRemoveModal.vue
@@ -22,7 +22,7 @@
 
 <script>
 export default {
-  name: "MedicalCardRemoveModal",
+  name: "MedicalRemoveModal",
   props: {
     changeShownRemoveModal: Function,
   },
diff --git a/src/pages/newMedicalCard/components/MedicalCardSidebar.vue b/src/pages/newMedicalCard/components/MedicalSidebar.vue
similarity index 89%
rename from src/pages/newMedicalCard/components/MedicalCardSidebar.vue
rename to src/pages/newMedicalCard/components/MedicalSidebar.vue
index b906da1..b6044f7 100644
--- a/src/pages/newMedicalCard/components/MedicalCardSidebar.vue
+++ b/src/pages/newMedicalCard/components/MedicalSidebar.vue
@@ -11,9 +11,9 @@
 
 <script>
 import { v_model } from "@/shared/mixins/v-model";
-import { baseInfoMenu } from "@/pages/newMedicalCard/utils/configMedical.js";
+import { baseInfoMenu } from "@/pages/newMedicalCard/utils/medicalConfig.js";
 export default {
-  name: "MedicalCardSidebar",
+  name: "MedicalSidebar",
   mixins: [v_model],
   data() {
     return {
diff --git a/src/pages/newMedicalCard/utils/configMedical.js b/src/pages/newMedicalCard/utils/medicalConfig.js
similarity index 97%
rename from src/pages/newMedicalCard/utils/configMedical.js
rename to src/pages/newMedicalCard/utils/medicalConfig.js
index 0c47070..4b4d56b 100644
--- a/src/pages/newMedicalCard/utils/configMedical.js
+++ b/src/pages/newMedicalCard/utils/medicalConfig.js
@@ -118,7 +118,7 @@ export const headerMenuItem = [
   {
     title: "Общая информация",
     id: "basic",
-    component: "MedicalCardBaseInfo",
+    component: "MedicalBaseInfo",
   },
   {
     title: "Журнал посещений",
@@ -146,7 +146,7 @@ export const baseInfoMenu = [
   {
     title: "Основные данные",
     id: "basic-data",
-    component: "BasicDataForm",
+    component: "MedicalBasicDataWrapper",
   },
   {
     title: "Протоколы первичного осмотра",
diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js
index 3425ff4..5236bd1 100644
--- a/src/store/modules/medicalCard.js
+++ b/src/store/modules/medicalCard.js
@@ -1,5 +1,5 @@
 import { fetchWrapper } from "@/shared/fetchWrapper";
-import { genderOptions } from "@/pages/newMedicalCard/utils/configMedical";
+import { genderOptions } from "@/pages/newMedicalCard/utils/medicalConfig";
 
 const state = () => ({
   medicalCard: {},