From 3aba27a7d3cddbeff7a1ab17c56490fdfc0204c6 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Mon, 26 Jun 2023 17:38:14 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=BA=D1=83=20?=
 =?UTF-8?q?=D0=B4=D0=BE=D0=BA=D1=83=D0=BC=D0=B5=D0=BD=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HealthState/HealthStateForm.vue           | 122 ++++++++++++++++--
 .../components/MedicalHealthStateWrapper.vue  |   8 +-
 src/store/modules/medicalCard.js              |  21 +--
 tailwind.config.js                            |   1 +
 4 files changed, 130 insertions(+), 22 deletions(-)

diff --git a/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue b/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue
index cebf26f..9b95510 100644
--- a/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue
+++ b/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue
@@ -1,28 +1,132 @@
 <template lang="pug">
-  medical-form-wrapper(:title="`${data?.year} год`")
-    .flex.flex-col.comments.rounded.py-3.px-4
-      .flex(v-for="comment in data.comments")
-        base-input.comment.w-full(
-          v-model="comment.comment",
-          borderless,
-          dense,
+  medical-form-wrapper(
+    :title="`${value?.year} год`",
+    :is-edit="isEdit",
+    :openEdit="openEdit",
+    :cancel="cancelEdit"
+    )
+    .flex.w-full.gap-x-4
+      .flex.h-fit.flex-col.gap-y-2.p-2.rounded(
+        v-if="value.pictures.length || isEdit"
+        :style="{backgroundColor: 'var(--bg-light-grey)'}"
+        )
+        .flex.gap-x-2(v-if="value.pictures.length")
+          .flex.relative.h-10.w-10(v-for="picture in value.pictures")
+            img.h-10.w-10.rounded(:src="picture.photo")
+            q-btn.absolute(
+              @click="() => deletePicture(picture)",
+              round,
+              dense,
+              size="16px",
+              padding="4px 4px 4px 4.5px",
+              :style="{backgroundColor: 'var(--border-red-color)', top: '-8px', right: '-8px'}"
+            )
+              q-icon(
+                name="app:cancel",
+                size="8px",
+                :style="{color: 'var(--default-white)'}"
+                )
+        .download.flex.cursor-pointer.relative.items-center.justify-center.rounded(:style="{height: '93px'}")
+          base-input.w-full.h-full(
+            @update:model-value="(e) => addNewFiles(e)",
+            doc,
+            type="file",
+            id="download",
+            accept="image/*",
+            borderless,
+            multiple
           )
+          label.absolute.w-fit.h-fit(for="download")
+            q-icon(name="app:download" size="24px")
+      .flex.w-full.flex-col.gap-y-2
+        .flex.font-semibold.text-sm(:style="{color: 'var(--font-grey-color)'}") Комментарий врача
+        .flex.flex-col.comments.rounded.py-3.pl-4.pr-2.h-130px
+          .flex.flex-col.w-full.overflow-y-auto
+            .flex(v-for="(comment, index) in value.comments")
+              q-input.comment.w-full(
+                :ref="`comment-${index}`"
+                v-model="comment.text",
+                borderless,
+                dense,
+                :input-style="{'height': '16px', 'font-weight': '500'}"
+                @keyup="(el) => switchСomment(el, index, comment.text)"
+                )
 </template>
 
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import { v_model } from "@/shared/mixins/v-model";
 import BaseInput from "@/components/base/BaseInput";
 
 export default {
   name: "HealthStateForm",
   components: { MedicalFormWrapper, BaseInput },
-  props: {
-    data: Object,
+  data() {
+    return {
+      isEdit: false,
+    };
+  },
+  mixins: [v_model],
+  methods: {
+    deletePicture(picture) {
+      this.value.pictures = this.value.pictures.filter(
+        (el) => el.photo !== picture.photo
+      );
+    },
+    addNewFiles(e) {
+      Object.values(e).forEach((file) => {
+        let reader = new FileReader();
+        reader.onload = (e) => {
+          this.value.pictures.push({
+            photo: e.target.result,
+            file: file,
+          });
+        };
+        reader.readAsDataURL(file);
+      });
+    },
+    openEdit() {
+      this.isEdit = true;
+    },
+    cancelEdit() {
+      this.isEdit = false;
+    },
+    switchСomment(event, index, comment) {
+      if (event.code === "Enter") {
+        event.target.blur();
+        if (index + 1 === this.value.comments.length) {
+          this.value.comments.push({ text: "" });
+        }
+        if (this.$refs[`comment-${index + 1}`]) {
+          this.$refs[`comment-${index + 1}`][0].focus();
+        }
+      }
+      if (event.code === "Backspace") {
+        if (!comment) {
+          this.value.comments = this.value.comments.filter(
+            (_, i) => index !== i
+          );
+        }
+      }
+    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
+.download
+  width: 216px
+  border: 1px dashed var(--font-grey-color)
+  background-color: var(--default-white)
+  &:hover .q-icon
+    opacity: 0.6
+  & .q-icon
+    color: var(--btn-blue-color)
 .comments
   border: 1px solid var(--border-light-grey-color)
 </style>
+
+<style lang="sass">
+.comment .q-field__inner .q-field__control
+  height: 20px
+</style>
diff --git a/src/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue b/src/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue
index b8e81b7..ec2a897 100644
--- a/src/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue
+++ b/src/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
   .flex.flex-col.w-full.gap-y-2
     health-state-header
-    health-state-form(
-      v-for="data in healthState",
-      :data="data"
-      )
+    .flex(v-for="(data, i) in healthState")
+      health-state-form(
+        v-model="healthState[i]"
+        )
 </template>
 
 <script>
diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js
index d0f7ac2..bfc9c88 100644
--- a/src/store/modules/medicalCard.js
+++ b/src/store/modules/medicalCard.js
@@ -131,43 +131,46 @@ const state = () => ({
   healthState: [
     {
       year: 2023,
+      pictures: [],
       comments: [
         {
-          comment: "Пациент склонен к преувеличению фактов",
+          text: "Пациент склонен к преувеличению фактов",
         },
         {
-          comment: "Пациент отказывался заполнять карту",
+          text: "Пациент отказывался заполнять карту",
         },
         {
-          comment: "Тяжело идет на контакт",
+          text: "Тяжело идет на контакт",
         },
       ],
     },
     {
       year: 2022,
+      pictures: [],
       comments: [
         {
-          comment: "Пациент склонен к преувеличению фактов",
+          text: "Пациент склонен к преувеличению фактов",
         },
         {
-          comment: "Пациент отказывался заполнять карту",
+          text: "Пациент отказывался заполнять карту",
         },
         {
-          comment: "Тяжело идет на контакт",
+          text: "Тяжело идет на контакт",
         },
       ],
     },
     {
       year: 2021,
+      pictures: [],
       comments: [
         {
-          comment: "Пациент склонен к преувеличению фактов",
+          text: "Пациент склонен к преувеличению фактов",
         },
         {
-          comment: "Пациент отказывался заполнять карту",
+          text: "Пациент отказывался заполнять карту",
         },
         {
-          comment: "Тяжело идет на контакт",
+          text: "Тяжело идет на контакт",
         },
       ],
     },
diff --git a/tailwind.config.js b/tailwind.config.js
index 515f369..066ab8c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -67,6 +67,7 @@ module.exports = {
         "74px": "74px",
         "92px": "92px",
         "102px": "102px",
+        "130px": "130px",
         "143px": "143px",
         "148px": "148px",
         "212px": "212px",