only improves

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>

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')",

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>

src/pages/medcards/TheMedcards.vue

@@ -16,4 +16,5 @@ export default {
 <style lang="sass">
 .medcards-wrapper
   width: calc(100vw - 72px)
+  overflow: hidden
 </style>

src/pages/medcards/components/MedicalCardSearch.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .medical-wrapper.rounded.h-full
+  .medical-wrapper.rounded
-    list-header
+    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>

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),
   },

src/pages/medcards/components/MedicalCardSearchList.vue

@@ -1,4 +1,5 @@
 <template lang="pug">
+  .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(
@@ -11,7 +12,6 @@
         row(
           v-for="medcard in medcardsInfo",
           :key="medcard.id"
-        :scroll-presence="scrollPresence",
           :header-style="headerStyle",
           :medcard-info="medcard",
         )
@@ -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

src/pages/medcards/components/MedicalCardSearchRow.vue

@@ -39,7 +39,6 @@ export default {
   name: "MedicalCardSearchRow",
   components: { TheNotificationProvider },
   props: {
-    scrollPresence: Boolean,
     headerStyle: Function,
     medcardInfo: Object,
   },

src/pages/newCalendar/components/HeaderRecordForm.vue

@@ -35,12 +35,7 @@
       .flex.gap-x-3.items-center
         .text.font-semibold Время:
         .flex.gap-x-1
-          .input.flex.items-center.pl-4.rounded-md
+          base-input.input.no-border(size="XS", mask="##:## - ##:##")
-            .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")
     .flex.h-14.gap-x-3.items-center.text-smm
       .text.font-semibold Медкарта:
       .flex.gap-x-1
@@ -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)

src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue

@@ -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 person = this.basic.personalData;
-          let updateBasic = this.updateBasicData();
+          this.$store.dispatch("setMedicalCardData", {
-          Promise.allSettled(updateBasic)
+            ...this.medicalCard,
-            .then(() => this.$store.dispatch("getMedicalCardData"))
+            person: {
-            .then(() => {
+              ...this.medicalCard.person,
-              this.isLoadingData = false;
+              ...person,
-              this.isEdit = false;
+            },
-              this.isCheckChange = false;
           });
+          //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>
 

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 },
       ],
     },
   ],

src/store/modules/medicalCard.js

@@ -255,26 +255,34 @@ const getters = {
     };
   },
   getContactsData(state) {
-    let phones = state.medicalCard.person.contacts
+    let phones =
-      .filter((el) => el.kind === "PHONE")
+      state.medicalCard?.person?.contacts
-      .map((el) => ({ ...el }));
+        ?.filter((el) => el.kind === "PHONE")
-    let emails = state.medicalCard.person.contacts
+        ?.map((el) => ({ ...el })) || [];
-      .filter((el) => el.kind === "EMAIL")
+    let emails =
-      .map((el) => ({ ...el }));
+      state.medicalCard?.person?.contacts
-    let networks = state.medicalCard.person.contacts
+        ?.filter((el) => el.kind === "EMAIL")
-      .filter((el) => el.kind !== "PHONE" && el.kind !== "EMAIL")
+        ?.map((el) => ({ ...el })) || [];
-      .map((el) => ({ ...el }));
+    let networks =
+      state.medicalCard?.person?.contacts
+        ?.filter((el) => el.kind !== "PHONE" && el.kind !== "EMAIL")
+        ?.map((el) => ({ ...el })) || [];
     return {
-      phones: [...phones],
+      phones,
-      emails: [...emails],
+      emails,
-      networks: [...networks],
+      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 = {