From 857224785104cce78d72abe3f074c77a7ce2e0f6 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Mon, 3 Apr 2023 18:36:27 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=9F=D0=BE=D0=B4=D0=BA=D0=BB=D1=8E?=
 =?UTF-8?q?=D1=87=D0=B8=D0=BB=20store=20=D0=B4=D0=BB=D1=8F=20=D0=BC=D0=B5?=
 =?UTF-8?q?=D0=B4=20=D0=BA=D0=B0=D1=80=D1=82=D1=8B,=20=D0=BF=D0=BE=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=20=D1=84=D0=BE=D1=80=D0=BC=D1=83?=
 =?UTF-8?q?=20=D0=9E=D1=81=D0=BD=D0=BE=D0=B2=D0=BD=D1=8B=D1=85=20=D0=B4?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=BD=D1=8B=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/newMedicalCard/TheMedicalCard.vue   |  7 ++++
 .../components/BasicDataForm.vue              | 17 ++++++++--
 .../components/MedicalFormWrapper.vue         | 21 ++++++++----
 src/store/index.js                            | 13 ++------
 src/store/modules/medicalCard.js              | 32 +++++++++++++++++++
 5 files changed, 71 insertions(+), 19 deletions(-)
 create mode 100644 src/store/modules/medicalCard.js

diff --git a/src/pages/newMedicalCard/TheMedicalCard.vue b/src/pages/newMedicalCard/TheMedicalCard.vue
index 616e328..28641e9 100644
--- a/src/pages/newMedicalCard/TheMedicalCard.vue
+++ b/src/pages/newMedicalCard/TheMedicalCard.vue
@@ -10,6 +10,7 @@
 <script>
 import MedicalCardHeader from "@/pages/newMedicalCard/components/MedicalCardHeader.vue";
 import MedicalCardBaseInfo from "@/pages/newMedicalCard/components/MedicalCardBaseInfo.vue";
+import { mapState } from "vuex";
 export default {
   name: "TheMedicalCard",
   components: { MedicalCardHeader, MedicalCardBaseInfo },
@@ -18,5 +19,11 @@ export default {
       currentMenuItem: "MedicalCardBaseInfo",
     };
   },
+  computed: mapState({
+    medical: (state) => state.medical.medicalCard,
+  }),
+  created() {
+    this.$store.dispatch("getMedicalCardData");
+  },
 };
 </script>
diff --git a/src/pages/newMedicalCard/components/BasicDataForm.vue b/src/pages/newMedicalCard/components/BasicDataForm.vue
index 0fc2a27..35ce83c 100644
--- a/src/pages/newMedicalCard/components/BasicDataForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForm.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  medical-form-wrapper(title="Основная информация")
+  medical-form-wrapper(title="Основная информация" :change-edit="changeEdit")
     .form-wrap.gap-24.w-full
       .data-section.flex.flex-col.gap-4(v-for="data in configData")
         .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
@@ -7,7 +7,7 @@
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
           .avatar-field.justify-start(v-if="field.type === 'avatar'")
             base-avatar(:size="40")
-          base-input(v-else v-model="initData[data.dataKey][field.key]" :type="field.type" :width="300" standout="bg-white" text-color="black")
+          base-input(v-else :disabled="!isEdit" v-model="initData[data.dataKey][field.key]" :type="field.type" :width="300" :standout="!isEdit" :outlined="isEdit" text-color="black")
 </template>
 
 <script>
@@ -15,11 +15,13 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import { baseDataForm } from "@/pages/newMedicalCard/utils/configMedical";
+import { mapState } from "vuex";
 export default {
   name: "BasicDataForm",
   components: { MedicalFormWrapper, BaseInput, BaseAvatar },
   data() {
     return {
+      isEdit: false,
       configData: baseDataForm,
       initData: {
         basicData: {
@@ -47,6 +49,17 @@ export default {
       },
     };
   },
+  computed: mapState({
+    medical: (state) => state.medical.medicalCard,
+  }),
+  created() {
+    this.$store.dispatch("getMedicalCardData");
+  },
+  methods: {
+    changeEdit() {
+      this.isEdit = !this.isEdit;
+    },
+  },
 };
 </script>
 
diff --git a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
index 07ff522..567a914 100644
--- a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
+++ b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
@@ -6,11 +6,11 @@
     .flex.flex-col.h-full.gap-25px.p-6
       .flex.w-fit.gap-11px.items-center
         span.font-bold.text-base {{title}}
-        q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!thisEdit" @click="clickEditForm" size="20")
+        q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!isEdit" @click="clickEditForm" size="20")
       slot
       .flex.h-fit.w-fit.gap-2
-        base-button.text-base.font-semibold(v-if="thisEdit" outlined :size="40" @click="cancelEdit") Отменить
-        base-button.text-base.font-semibold(v-if="thisEdit" :size="40" @click="saveChangeForm") Сохранить изменения
+        base-button.text-base.font-semibold(v-if="isEdit" outlined :size="40" @click="cancelEdit") Отменить
+        base-button.text-base.font-semibold(v-if="isEdit" :size="40" @click="saveChangeForm") Сохранить изменения
 </template>
 
 <script>
@@ -21,25 +21,32 @@ export default {
   components: { BaseButton, BaseLoader },
   props: {
     title: String,
+    changeEdit: {
+      type: Function,
+      default: () => {},
+    },
   },
   data() {
     return {
-      thisEdit: false,
+      isEdit: false,
       isLoadingData: false,
     };
   },
   methods: {
     clickEditForm() {
-      this.thisEdit = true;
+      this.isEdit = true;
+      this.changeEdit();
     },
     cancelEdit() {
-      this.thisEdit = false;
+      this.isEdit = false;
+      this.changeEdit();
     },
     saveChangeForm() {
       this.isLoadingData = true;
       setTimeout(() => {
         this.isLoadingData = false;
-        this.thisEdit = false;
+        this.isEdit = false;
+        this.changeEdit();
       }, 2000);
     },
   },
diff --git a/src/store/index.js b/src/store/index.js
index 19ebbd9..e4cf5e4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,15 +1,8 @@
 import { createStore } from "vuex";
+import medical from "./modules/medicalCard";
 
 export default createStore({
-  state: {
-    currentPatient: {},
-    test: "Привет",
+  modules: {
+    medical,
   },
-  mutations: {
-    setCurrentPatient(state, patient) {
-      state.currentPatient = patient;
-    },
-  },
-  actions: {},
-  modules: {},
 });
diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js
new file mode 100644
index 0000000..348aee9
--- /dev/null
+++ b/src/store/modules/medicalCard.js
@@ -0,0 +1,32 @@
+import { fetchWrapper } from "@/shared/fetchWrapper";
+
+const state = () => ({
+  medicalCard: {},
+});
+
+const getters = {};
+
+const actions = {
+  getMedicalCardData({ commit }) {
+    fetchWrapper
+      .get(
+        `medical_card/medical_history/${localStorage.getItem(
+          "medicalId"
+        )}/detail/`
+      )
+      .then((res) => commit("setMedicalCard", res));
+  },
+};
+
+const mutations = {
+  setMedicalCard(state, card) {
+    state.medicalCard = card;
+  },
+};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+};