Merge branch 'ASTRA-48' into 'master'

WIP Ренейминг компонентов

See merge request andrusyakka/urban-couscous!305

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 MedicalHeader from "@/pages/newMedicalCard/components/MedicalHeader.vue";
-import MedicalCardBaseInfo from "@/pages/newMedicalCard/components/MedicalCardBaseInfo.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,
+    MedicalHeader,
-    MedicalCardBaseInfo,
+    MedicalBaseInfo,
     BaseModal,
-    MedicalCardRemoveModal,
+    MedicalRemoveModal,
   },
   data() {
     return {
-      currentMenuItem: "MedicalCardBaseInfo",
+      currentMenuItem: "MedicalBaseInfo",
       isShownRemoveModal: false,
     };
   },

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 {

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>

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>

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>

src/pages/newMedicalCard/components/MedicalCardBaseInfo.vue

@@ -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>

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

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

src/pages/newMedicalCard/components/MedicalRemoveModal.vue

@@ -22,7 +22,7 @@
 
 <script>
 export default {
-  name: "MedicalCardRemoveModal",
+  name: "MedicalRemoveModal",
   props: {
     changeShownRemoveModal: Function,
   },

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 {

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: "Протоколы первичного осмотра",

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: {},