Merge branch 'ASTRA-51' into 'master'

WIP Создал форму Аллергий See merge request andrusyakka/urban-couscous!316
2023-04-18 14:26:36 +00:00
parent 28e37dbc93 5baefcc1f8
commit 3db47ddc67
7 changed files with 168 additions and 13 deletions
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
  button.base-button.text-base(
    :disabled="disabled",
-    :class="{'rounded': rounded, 'outlined': outlined, 'outlined-red': outlinedRed, 'secondary': secondary, 'confirm': confirm, 'added': added}"
+    :class="{'rounded': rounded, 'outlined': outlined, 'outlined-red': outlinedRed, 'secondary': secondary, 'confirm': confirm, 'added': added, 'added-border-none': addedBorderNone}"
    :style="{height: size + 'px', minWidth: size + 'px'}"
  )
    .button-container
@@ -27,6 +27,7 @@ export default {
    outlined: Boolean,
    outlinedRed: Boolean,
    added: Boolean,
+    addedBorderNone: Boolean,
    rounded: Boolean,
    disabled: Boolean,
    split: Boolean,
@@ -123,7 +124,17 @@ export default {
    border: none
    background-color: var(--btn-blue-color)
    color: var(--default-white)
-
+.added-border-none
+    border: none
+    width: fit-content
+    background-color: var(--default-white)
+    color: var(--btn-blue-color)
+    padding: 0
+    row-gap: 10px
+    &:hover
+      border: none
+      color: var(--btn-blue-color-hover)
+      background-color: var(--default-white)
 .secondary
  background-color: var(--btn-blue-sec-color)
  border: 1px solid var(--btn-blue-sec-color)
--- a/src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue
+++ b/src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue
@@ -0,0 +1,109 @@
+<template lang="pug">
+  medical-form-wrapper(
+    title="Аллергии"
+    :is-check-change="isCheckChange" 
+    :is-loading-data="isLoadingData" 
+    :is-edit="isEdit"
+    :save="saveChange" 
+    :cancel="cancelEdit" 
+    :open-edit="openEdit"
+    )
+    .flex.flex-col.gap-19px.w-full
+      .flex.flex-col.gap-4
+        .flex.gap-4.items-center(v-for="(allergy, index) in allergies")
+          .label-field.font-sm.text-sm.whitespace-nowrap {{ `Аллерген ${index+1}:` }}
+          .flex.gap-2.w-full.items-center
+            base-input( 
+              :disabled="!isEdit" 
+              v-model="allergy.name"
+              @update:model-value="checkChangeInput"
+              type="text"  
+              :standout="!isEdit" 
+              :outlined="isEdit" 
+              text-color="black"
+              )
+            base-input.w-full(
+              :disabled="!isEdit" 
+              v-model="allergy.title"
+              @update:model-value="checkChangeInput"
+              type="text"  
+              :standout="!isEdit" 
+              :outlined="isEdit" 
+              text-color="black"
+              )
+            .delete-contact.icon-cancel.text-xxs.cursor-pointer(
+              v-if="isEdit" 
+              @click="() => deleteAllergy(index)"
+            )
+    base-button(
+      v-if="isEdit"
+      left-icon="icon-plus" 
+      added-border-none
+      @click="addNewAllergy" 
+      :icon-left-size="12"
+      )
+      span.font-medium.text-base Добавить
+</template>
+
+<script>
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import { checkChangeData } from "@/shared/utils/changesObjects";
+import { mapState, mapGetters } from "vuex";
+
+export default {
+  name: "AllergiesForm",
+  components: { MedicalFormWrapper, BaseButton, BaseInput },
+  data() {
+    return {
+      isEdit: false,
+      isLoadingData: false,
+      isCheckChange: false,
+    };
+  },
+  computed: {
+    ...mapState({
+      allergies: (state) => state.medical.allergies,
+    }),
+    ...mapGetters({
+      initAllergies: "getAllergiesData",
+    }),
+  },
+  methods: {
+    saveChange() {
+      this.isEdit = false;
+      this.isCheckChange = false;
+    },
+    cancelEdit() {
+      this.$store.dispatch("returnInitData");
+      this.isEdit = false;
+      this.isCheckChange = false;
+    },
+    openEdit() {
+      this.isEdit = true;
+    },
+    checkChangeInput() {
+      this.isCheckChange = checkChangeData(this.initAllergies, this.allergies);
+    },
+    addNewAllergy() {
+      this.allergies.push({
+        name: null,
+        title: null,
+      });
+      this.checkChangeInput();
+    },
+    deleteAllergy(index) {
+      this.allergies.splice(index, 1);
+      this.checkChangeInput();
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.delete-contact
+  color: var(--font-grey-color)
+.label-field
+  color: var(--font-grey-color)
+</style>
--- a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
@@ -54,17 +54,20 @@
              v-if="isEdit" 
              @click="() => deleteContact(key, index)"
              )
-        .w-full(v-if="isEdit")
-          .add-contact.w-fit.flex.gap-10px.items-center.cursor-pointer( 
+        base-button.ml-6px(
+            v-if="isEdit" 
+            left-icon="icon-plus" 
+            added-border-none 
+            :icon-left-size="12"
            @click="() => addNewContact(key)"
-            )
-            .icon-plus
-            span.font-medium.text-base Добавить
+          )
+          span.font-medium.text-base Добавить
 </template>

 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
 import BaseSelectNetworks from "@/components/base/BaseSelectNetworks.vue";
 import { mapNetworks } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { checkChangeData } from "@/shared/utils/changesObjects";
@@ -73,13 +76,12 @@ import { mapState, mapGetters } from "vuex";

 export default {
  name: "ContactsForm",
-  components: { MedicalFormWrapper, BaseInput, BaseSelectNetworks },
+  components: { MedicalFormWrapper, BaseInput, BaseSelectNetworks, BaseButton },
  data() {
    return {
      isEdit: false,
      isLoadingData: false,
      isCheckChange: false,
-      isChangeNetwork: false,
      configData: contactsDataForm,
      mapNetworks: mapNetworks,
    };
@@ -175,6 +177,4 @@ export default {
  color: var(--font-grey-color)
 .delete-contact
  color: var(--font-grey-color)
-.add-contact
-  color: var(--btn-blue-color)
 </style>
--- a/src/pages/newMedicalCard/components/MedicalAllergiesWrapper.vue
+++ b/src/pages/newMedicalCard/components/MedicalAllergiesWrapper.vue
@@ -0,0 +1,21 @@
+<template lang="pug">
+  .flex.flex-col.gap-y-2.wrapper.h-full
+    allergies-form
+</template>
+
+<script>
+import AllergiesForm from "@/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue";
+
+export default {
+  name: "MedicalAlergiesWrapper",
+  components: { AllergiesForm },
+};
+</script>
+<style lang="sass" scoped>
+.wrapper
+  width: 83.2%
+  @media (max-width: 600px)
+    width: fit-content
+  &::-webkit-scrollbar
+    width: 0
+</style>
--- a/src/pages/newMedicalCard/components/MedicalBaseInfo.vue
+++ b/src/pages/newMedicalCard/components/MedicalBaseInfo.vue
@@ -10,9 +10,14 @@
 <script>
 import MedicalSidebar from "@/pages/newMedicalCard/components/MedicalSidebar.vue";
 import MedicalBasicDataWrapper from "@/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue";
+import MedicalAllergiesWrapper from "@/pages/newMedicalCard/components/MedicalAllergiesWrapper.vue";
 export default {
  name: "MedicalBaseInfo",
-  components: { MedicalSidebar, MedicalBasicDataWrapper },
+  components: {
+    MedicalSidebar,
+    MedicalBasicDataWrapper,
+    MedicalAllergiesWrapper,
+  },
  data() {
    return {
      currentMenuItem: "MedicalBasicDataWrapper",
--- a/src/pages/newMedicalCard/utils/medicalConfig.js
+++ b/src/pages/newMedicalCard/utils/medicalConfig.js
@@ -218,7 +218,7 @@ export const baseInfoMenu = [
  {
    title: "Аллергии",
    id: "allergies",
-    component: "Allergies",
+    component: "MedicalAllergiesWrapper",
  },
  {
    title: "Состояние здоровья",
--- a/src/store/modules/medicalCard.js
+++ b/src/store/modules/medicalCard.js
@@ -52,6 +52,7 @@ const state = () => ({
    },
  },
  documents: {},
+  allergies: [],
  avatar: "",
  benefitData: [],
 });
@@ -189,6 +190,9 @@ const getters = {
      networks: [...networks],
    };
  },
+  getAllergiesData(state) {
+    return [...state.medicalCard.person.allergic.map((el) => ({ ...el }))];
+  },
  getAvatar(state) {
    let lastName = state?.medicalCard?.person?.last_name;
    let firstName = state?.medicalCard?.person?.first_name;
@@ -214,11 +218,13 @@ const actions = {
        commit("setBasicData");
        commit("setContactsData");
        commit("setDocumentsData");
+        commit("setAllergiesData");
      });
  },
  returnInitData({ commit }) {
    commit("setBasicData");
    commit("setContactsData");
+    commit("setAllergiesData");
  },
  removeMedicalCardData({ commit, rootState }) {
    fetchWrapper
@@ -291,6 +297,9 @@ const mutations = {
  setDocumentsData(state) {
    state.documents = { ...this.getters.getDocumentsData };
  },
+  setAllergiesData(state) {
+    state.allergies = this.getters.getAllergiesData;
+  },
 };

 export default {