only improves

2023-08-02 01:54:50 +03:00
parent a9b4a7e185
commit e682136ed8
12 changed files with 191 additions and 72 deletions
--- 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>
--- 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')",
--- a/src/pages/createMedicalCard/TheCreateMedicalCard.vue
+++ 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>
--- 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>
--- 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>
--- 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),
  },
--- 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
--- a/src/pages/medcards/components/MedicalCardSearchRow.vue
+++ b/src/pages/medcards/components/MedicalCardSearchRow.vue
@@ -39,7 +39,6 @@ export default {
  name: "MedicalCardSearchRow",
  components: { TheNotificationProvider },
  props: {
-    scrollPresence: Boolean,
    headerStyle: Function,
    medcardInfo: Object,
  },
--- a/src/pages/newCalendar/components/HeaderRecordForm.vue
+++ b/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
-            .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
@@ -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)
--- a/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
+++ b/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 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>

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