From e682136ed89450a4698a7ba16f5d050cb673b219 Mon Sep 17 00:00:00 2001
From: kandrusyak <kandrusyak@inno.tech>
Date: Wed, 2 Aug 2023 01:54:50 +0300
Subject: [PATCH] only improves

---
 src/components/LoggedInLayout.vue             |  8 +--
 src/components/TheSidebar.vue                 |  2 +-
 .../TheCreateMedicalCard.vue                  | 60 +++++++++++++++++++
 src/pages/medcards/TheMedcards.vue            |  1 +
 .../medcards/components/MedicalCardSearch.vue | 11 +++-
 .../components/MedicalCardSearchHeader.vue    |  2 +-
 .../components/MedicalCardSearchList.vue      | 43 +++++++------
 .../components/MedicalCardSearchRow.vue       |  3 +-
 .../components/HeaderRecordForm.vue           | 37 +++++++++---
 .../BasicDataForms/BasicDataForm.vue          | 50 ++++++++++------
 src/router.js                                 |  2 +
 src/store/modules/medicalCard.js              | 44 +++++++++-----
 12 files changed, 191 insertions(+), 72 deletions(-)
 create mode 100644 src/pages/createMedicalCard/TheCreateMedicalCard.vue

diff --git a/src/components/LoggedInLayout.vue b/src/components/LoggedInLayout.vue
index 86ea63c..74337e7 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.pb-2
+  .flex.flex-col.w-full.h-full.gap-y-2.pb-2.no-scroll
     the-header(
       :url="url",
       :is-open-form="isOpenForm",
@@ -8,7 +8,7 @@
       :set-updated-clients="setUpdatedClients",
       :write-created-client-id="writeCreatedClientId"
     )
-    .flex.flex-auto.page-wrapper
+    .flex.grow.no-scroll
       the-sidebar
       router-view.mx-2(
         :open-form="openForm",
@@ -59,7 +59,3 @@ export default {
   },
 };
 </script>
-<style lang="sass" scoped>
-.page-wrapper
-  height: calc(100vh - 56px - 16px)
-</style>
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index b55ce2a..6ef976a 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .sidebar.flex.flex-col.justify-between.flex-auto.pt-4.px-2.pb-7.rounded
+  .sidebar.flex.flex-col.justify-between.pt-4.px-2.pb-7.rounded
     .flex.flex-col.gap-y-4
       base-button-sidebar(
         v-for="button in pageSettings.filter((el) => el.id !== 'settings')",
diff --git a/src/pages/createMedicalCard/TheCreateMedicalCard.vue b/src/pages/createMedicalCard/TheCreateMedicalCard.vue
new file mode 100644
index 0000000..43fdd76
--- /dev/null
+++ b/src/pages/createMedicalCard/TheCreateMedicalCard.vue
@@ -0,0 +1,60 @@
+<template lang="pug">
+  .w-full.h-full.flex.flex-col
+    .flex.w-full.gap-x-2.pb-2
+      medical-header(
+        v-model="currentMenuItem",
+        :change-shown-remove-modal="changeShownRemoveModal",
+      )
+      medical-records
+    component(
+      v-if="currentMenuItem",
+      v-bind:is="currentMenuItem",
+    )
+    base-modal(
+      v-model="isShownRemoveModal",
+      title="Удаление медкарты"
+    )
+      medical-remove-modal(:change-shown-remove-modal="changeShownRemoveModal")
+</template>
+
+<script>
+import MedicalHeader from "@/pages/newMedicalCard/components/MedicalHeader.vue";
+import MedicalRecords from "@/pages/newMedicalCard/components/MedicalRecords.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import MedicalRemoveModal from "@/pages/newMedicalCard/components/MedicalRemoveModal.vue";
+import MedicalBaseInfo from "@/pages/newMedicalCard/components/MedicalBaseInfo.vue";
+
+export default {
+  name: "TheCreateMedicalCard",
+  components: {
+    MedicalRemoveModal,
+    BaseModal,
+    MedicalRecords,
+    MedicalHeader,
+    MedicalBaseInfo,
+  },
+  data() {
+    return {
+      isShownRemoveModal: false,
+      currentMenuItem: "MedicalBaseInfo",
+    };
+  },
+  created() {
+    this.$store.dispatch("setMedicalCardData", {
+      created_at: new Date(),
+      updated_at: new Date(),
+      type: "new",
+      number: "новая",
+      person: {
+        last_name: "Введите",
+        first_name: "имя",
+        patronymic: "пациента",
+        priority: 4,
+        allergic: [],
+      },
+    });
+  },
+};
+</script>
+
+<style scoped lang="sass"></style>
diff --git a/src/pages/medcards/TheMedcards.vue b/src/pages/medcards/TheMedcards.vue
index 6a074fe..ec2ad1e 100644
--- a/src/pages/medcards/TheMedcards.vue
+++ b/src/pages/medcards/TheMedcards.vue
@@ -16,4 +16,5 @@ export default {
 <style lang="sass">
 .medcards-wrapper
   width: calc(100vw - 72px)
+  overflow: hidden
 </style>
diff --git a/src/pages/medcards/components/MedicalCardSearch.vue b/src/pages/medcards/components/MedicalCardSearch.vue
index b123c57..0233bc9 100644
--- a/src/pages/medcards/components/MedicalCardSearch.vue
+++ b/src/pages/medcards/components/MedicalCardSearch.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-  .medical-wrapper.rounded.h-full
-    list-header
+  .medical-wrapper.rounded
+    list-header(@search="getMedcards")
     list-contents
 </template>
 
@@ -10,11 +10,18 @@ import ListContents from "@/pages/medcards/components/MedicalCardSearchList.vue"
 export default {
   name: "MedicalCardSearch",
   components: { ListHeader, ListContents },
+  methods: {
+    getMedcards(value) {
+      console.log(value);
+    },
+  },
 };
 </script>
 
 <style lang="sass" scoped>
 .medical-wrapper
   background-color: var(--default-white)
+  display: flex
+  flex-direction: column
   overflow: hidden
 </style>
diff --git a/src/pages/medcards/components/MedicalCardSearchHeader.vue b/src/pages/medcards/components/MedicalCardSearchHeader.vue
index c8b977f..c2b38dd 100644
--- a/src/pages/medcards/components/MedicalCardSearchHeader.vue
+++ b/src/pages/medcards/components/MedicalCardSearchHeader.vue
@@ -36,7 +36,7 @@ export default {
     },
   },
   watch: {
-    filterString: debounce((value) => {
+    filterString: debounce(function (value) {
       this.$emit("search", value);
     }, 300),
   },
diff --git a/src/pages/medcards/components/MedicalCardSearchList.vue b/src/pages/medcards/components/MedicalCardSearchList.vue
index de2d42d..ea82a6a 100644
--- a/src/pages/medcards/components/MedicalCardSearchList.vue
+++ b/src/pages/medcards/components/MedicalCardSearchList.vue
@@ -1,20 +1,20 @@
 <template lang="pug">
-  .list-wrapper.rounded.w-full(id="listWrapper")
-    .w-full.header.h-10.flex
-      .h-full.py-10px.px-4.flex.items-center.justify-start.font-semibold.text-sm.grey-color(
-        v-for="field in headerConfig",
-        :key="field.title",
-        :style="headerStyle(field)"
-      ) {{ field.title }}
-      .h-full.w-8(v-if="scrollPresence")
-    .body.w-full
-      row(
-        v-for="medcard in medcardsInfo",
-        :key="medcard.id"
-        :scroll-presence="scrollPresence",
-        :header-style="headerStyle",
-        :medcard-info="medcard",
-      )
+  .scroll-wrapper
+    .list-wrapper.rounded.w-full(id="listWrapper")
+      .w-full.header.h-10.flex
+        .h-full.py-10px.px-4.flex.items-center.justify-start.font-semibold.text-sm.grey-color(
+          v-for="field in headerConfig",
+          :key="field.title",
+          :style="headerStyle(field)"
+        ) {{ field.title }}
+        .h-full.w-8(v-if="scrollPresence")
+      .body.w-full
+        row(
+          v-for="medcard in medcardsInfo",
+          :key="medcard.id"
+          :header-style="headerStyle",
+          :medcard-info="medcard",
+        )
 </template>
 
 <script>
@@ -57,13 +57,22 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.scroll-wrapper
+  flex-grow: 1
+  overflow-y: hidden
+.list-wrapper
+  overflow: hidden
+  height: 100%
+  display: flex
+  flex-direction: column
+  min-width: min-content
 .header
   background-color: var(--gray-thirdly)
   border-bottom: 1px solid var(--gray-secondary)
 .grey-color
   color: var(--font-grey-color)
 .body
-  overflow: auto
+  overflow-y: auto
   &::-webkit-scrollbar-track
     margin: 24px 0 24px 0
     background: #E9E9ED
diff --git a/src/pages/medcards/components/MedicalCardSearchRow.vue b/src/pages/medcards/components/MedicalCardSearchRow.vue
index e5cb1ad..1e61975 100644
--- a/src/pages/medcards/components/MedicalCardSearchRow.vue
+++ b/src/pages/medcards/components/MedicalCardSearchRow.vue
@@ -2,7 +2,7 @@
   .w-full.row-wrapper.h-14.flex
     .field.gap-x-3(
       :style="headerStyle(headerConfig[0])"
-    ) 
+    )
       q-avatar(size="36px")
         img(:src="medcardInfo.avatar")
       span.font-semibold.text-dark {{patientName}}
@@ -39,7 +39,6 @@ export default {
   name: "MedicalCardSearchRow",
   components: { TheNotificationProvider },
   props: {
-    scrollPresence: Boolean,
     headerStyle: Function,
     medcardInfo: Object,
   },
diff --git a/src/pages/newCalendar/components/HeaderRecordForm.vue b/src/pages/newCalendar/components/HeaderRecordForm.vue
index 26a4c91..54e3091 100644
--- a/src/pages/newCalendar/components/HeaderRecordForm.vue
+++ b/src/pages/newCalendar/components/HeaderRecordForm.vue
@@ -35,15 +35,10 @@
       .flex.gap-x-3.items-center
         .text.font-semibold Время:
         .flex.gap-x-1
-          .input.flex.items-center.pl-4.rounded-md
-            .dark-blue.font-medium 13:00 - 14:00
-          q-btn.change.flex.w-7.h-7.rounded-md(@click="isShowTime = true", dense, padding="4px 4px")
-            q-icon.icon(name="app:time", size="20px")
-          base-modal(v-model="isShowTime", title="Время", modal-padding)
-            base-time-modal(:times="times", :close-modal-time="closeModalTime", :data="data")
+          base-input.input.no-border(size="XS", mask="##:## - ##:##")
     .flex.h-14.gap-x-3.items-center.text-smm
       .text.font-semibold Медкарта:
-      .flex.gap-x-1 
+      .flex.gap-x-1
         .name.flex.items-center.px-4.pt-2.pb-1.gap-x-2.rounded-md
           .photo.flex.h-10.w-10.items-center.justify-center
             img.w-10.h-10.rounded-full(v-if="patient", :src="patient.avatar")
@@ -71,10 +66,17 @@ import MedcardsModal from "./MedcardsModal.vue";
 import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 import * as moment from "moment/moment";
+import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
   name: "HeaderRecordForm",
-  components: { BaseCalendar, BaseModal, BaseTimeModal, MedcardsModal },
+  components: {
+    BaseInput,
+    BaseCalendar,
+    BaseModal,
+    BaseTimeModal,
+    MedcardsModal,
+  },
   props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
   data() {
     return {
@@ -83,7 +85,7 @@ export default {
       isShowTime: false,
       isShowMedcards: false,
       patients: patientList.find(({ id }) => id === 2).data,
-      times: { from: "8:30", to: "10:30" },
+      times: { from: "08:30", to: "10:30" },
       data: [
         {
           start: "8:00",
@@ -109,6 +111,18 @@ export default {
       this.isShowMedcards = false;
       this.patient = medcard;
     },
+    // validateTimeString(value = "") {
+    //   const [start = "", end = ""] = value.split(" - ");
+    //   this.validateTime(start);
+    //   this.times = {
+    //     to: this.validateTime(end),
+    //     from: this.validateTime(start),
+    //   };
+    // },
+    // validateTime(value = "") {
+    //   const [h, m = "00"] = value.split(":");
+    //   return moment(`${h}:${m}`, "HH:mm").format("HH:mm");
+    // },
   },
 };
 </script>
@@ -117,6 +131,11 @@ export default {
 .input
   width: 200px
   border: 1px solid var(--gray-secondary)
+  & :deep(input)
+    min-width: 50px
+    --text-size: 14px
+  & :deep(.q-field__control)
+    padding-left: 1rem
 
 .icon :deep(path)
   fill: var(--font-grey-color)
diff --git a/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
index 9255343..e6bc0b0 100644
--- a/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
@@ -1,11 +1,11 @@
 <template lang="pug">
   medical-form-wrapper(
     title="Основные данные"
-    :is-check-change="isCheckChange" 
-    :is-loading-data="isLoadingData" 
-    :is-edit="isEdit" 
-    :save="saveChange" 
-    :cancel="cancelEdit" 
+    :is-check-change="isCheckChange"
+    :is-loading-data="isLoadingData"
+    :is-edit="isEdit"
+    :save="saveChange"
+    :cancel="cancelEdit"
     :open-edit="openEdit"
     )
     q-form.form-wrap.gap-24.w-full(ref="formBasicData")
@@ -16,8 +16,8 @@
           .avatar-field.flex.gap-3.items-center(v-if="field.type === 'avatar'")
             base-avatar(:size="40")
               img.avatar.object-cover(
-                v-if="basic[data.dataKey][field.key]?.photo" 
-                :src="basic[data.dataKey][field.key].photo" 
+                v-if="basic[data.dataKey][field.key]?.photo"
+                :src="basic[data.dataKey][field.key].photo"
                 alt="AV"
                 )
               span(v-else) {{ avatar }}
@@ -25,7 +25,7 @@
             base-modal(v-model="showModal" title="Загрузить изображение")
               base-upload-photo(
                 v-model="basic[data.dataKey][field.key]"
-                :confirm-upload="confirmCahngeAvatar" 
+                :confirm-upload="confirmCahngeAvatar"
               )
           .select(v-else-if="field.type === 'select'")
             base-select(
@@ -49,11 +49,11 @@
           )
           base-input(
             v-else,
-            :readonly="!isEdit" 
+            :readonly="!isEdit"
             v-model="basic[data.dataKey][field.key]"
             @update:model-value="checkChangeInput"
             :type="field.type"
-            :name="field.key" 
+            :name="field.key"
             :width="302",
             size="M",
             :rule="field.rules"
@@ -113,6 +113,8 @@ export default {
     }),
     ...mapState({
       basic: (state) => state.medical.basicData,
+      isNew: (state) => state.medical.medicalCard.type === "new",
+      medicalCard: (state) => state.medical.medicalCard,
     }),
   },
   methods: {
@@ -195,15 +197,22 @@ export default {
       const form = this.$refs.formBasicData;
       form.validate().then((validate) => {
         if (validate) {
-          this.isLoadingData = true;
-          let updateBasic = this.updateBasicData();
-          Promise.allSettled(updateBasic)
-            .then(() => this.$store.dispatch("getMedicalCardData"))
-            .then(() => {
-              this.isLoadingData = false;
-              this.isEdit = false;
-              this.isCheckChange = false;
-            });
+          let person = this.basic.personalData;
+          this.$store.dispatch("setMedicalCardData", {
+            ...this.medicalCard,
+            person: {
+              ...this.medicalCard.person,
+              ...person,
+            },
+          });
+          //let updateBasic = this.updateBasicData();
+          // Promise.allSettled(updateBasic)
+          //   .then(() => this.$store.dispatch("getMedicalCardData"))
+          //   .then(() => {
+          //     this.isLoadingData = false;
+          //     this.isEdit = false;
+          //     this.isCheckChange = false;
+          //   });
         } else {
           getFieldsNameUnvalidated(form).forEach((errorKey) => {
             addNotification(
@@ -221,6 +230,9 @@ export default {
       this.isEdit = true;
     },
   },
+  mounted() {
+    this.isNew && this.openEdit();
+  },
 };
 </script>
 
diff --git a/src/router.js b/src/router.js
index 5ed03a7..3fc7b8a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -7,6 +7,7 @@ import TheLogin from "@/pages/login/TheLogin";
 import LoggedInLayout from "@/components/LoggedInLayout";
 import TheMedicalCard from "@/pages/newMedicalCard/TheMedicalCard";
 import { fetchWrapper } from "@/shared/fetchWrapper";
+import TheCreateMedicalCard from "@/pages/createMedicalCard/TheCreateMedicalCard.vue";
 
 const ifNotAuthenticated = async (to, from, next) => {
   const data = await fetchWrapper.get("users/me");
@@ -41,6 +42,7 @@ export default createRouter({
         { path: "medcards", component: TheMedcards },
         { path: "settings", component: TheSettings },
         { path: "medical-card", component: TheMedicalCard },
+        { path: "create-medical-card", component: TheCreateMedicalCard },
       ],
     },
   ],
diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js
index c419b8c..a744238 100644
--- a/src/store/modules/medicalCard.js
+++ b/src/store/modules/medicalCard.js
@@ -255,26 +255,34 @@ const getters = {
     };
   },
   getContactsData(state) {
-    let phones = state.medicalCard.person.contacts
-      .filter((el) => el.kind === "PHONE")
-      .map((el) => ({ ...el }));
-    let emails = state.medicalCard.person.contacts
-      .filter((el) => el.kind === "EMAIL")
-      .map((el) => ({ ...el }));
-    let networks = state.medicalCard.person.contacts
-      .filter((el) => el.kind !== "PHONE" && el.kind !== "EMAIL")
-      .map((el) => ({ ...el }));
+    let phones =
+      state.medicalCard?.person?.contacts
+        ?.filter((el) => el.kind === "PHONE")
+        ?.map((el) => ({ ...el })) || [];
+    let emails =
+      state.medicalCard?.person?.contacts
+        ?.filter((el) => el.kind === "EMAIL")
+        ?.map((el) => ({ ...el })) || [];
+    let networks =
+      state.medicalCard?.person?.contacts
+        ?.filter((el) => el.kind !== "PHONE" && el.kind !== "EMAIL")
+        ?.map((el) => ({ ...el })) || [];
     return {
-      phones: [...phones],
-      emails: [...emails],
-      networks: [...networks],
+      phones,
+      emails,
+      networks,
     };
   },
   getAllergiesData(state) {
-    return [...state.medicalCard.person.allergic.map((el) => ({ ...el }))];
+    return [
+      ...(state.medicalCard?.person?.allergic?.map((el) => ({ ...el })) || []),
+    ];
   },
   getConfidantData(state) {
-    return [...state.medicalCard.confidant.map((el) => getConfidantObject(el))];
+    return [
+      ...(state.medicalCard?.confidant?.map((el) => getConfidantObject(el)) ||
+        []),
+    ];
   },
   getAvatar(state) {
     let lastName = state?.medicalCard?.person?.last_name;
@@ -454,7 +462,7 @@ const actions = {
         commit("setAllergiesData");
         commit("setConfidantData");
         commit("setHealthStateData");
-        commit("setEventsPersonData", res.person.id);
+        commit("setEventsPersonData", res?.person?.id);
       });
   },
   getPersonsFiltredList() {
@@ -491,6 +499,12 @@ const actions = {
   getProtocolData({ commit }, props) {
     commit("setProtocolData", props);
   },
+  setMedicalCardData({ commit }, props) {
+    commit("setMedicalCard", props);
+  },
+  setBasicData({ commit }, props) {
+    commit("setBasicData", props);
+  },
 };
 
 const mutations = {