Merge branch 'ASTRA-124' into 'master'

[WIP] Добавил сохранение новой записи, поправил баги See merge request andrusyakka/urban-couscous!460
2023-07-03 15:52:22 +00:00
parent 6be76c0fd5 888181f990
commit 6f8637c25d
6 changed files with 160 additions and 115 deletions
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -24,6 +24,7 @@
  --bg-btn-icons-color: rgba(215, 217, 255, 0.6)
  --font-grey-color: #9294a7
  --font-grey-color-0: #85858b
+  --font-dark-grey-color: #7a88a8
  --border-grey-color: #c2c2c2
  --border-light-grey-color: #d3d4dc
  --bg-light-grey: #eff1f4
--- a/src/components/base/BaseDownload.vue
+++ b/src/components/base/BaseDownload.vue
@@ -2,18 +2,6 @@
  label.download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
    :style="{height: `${height}px`, width: width ? `${width}px` : '100%'}"
  )
-    q-icon.absolute(
-      v-if="withIcon",
-      name="app:download",
-      size="24px"
-      )
-    .flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm.w-full(
-      v-else,
-      :style="{color: 'var(--font-grey-color)'}"
-    )
-      span {{`Загрузите ${titleType}`}}
-        label(:style="{color: 'var(--btn-blue-color)'}")  с компьютера
-      span  или перетащите его в это поле
    base-input(
      @change="(e) => addNewFiles(e)",
      doc,
@@ -24,6 +12,18 @@
      borderless,
      :multiple="multiple"
    )
+    q-icon.absolute(
+      v-if="withIcon",
+      name="app:download",
+      :size="sizeIcon"
+      )
+    .flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm.w-full(
+      v-else,
+      :style="{color: 'var(--font-grey-color)'}"
+    )
+      span {{`Загрузите ${titleType}`}}
+        label.pointer-events-none.cursor-pointer(:style="{color: 'var(--btn-blue-color)'}")  с компьютера
+      span  или перетащите его в это поле
 </template>

 <script>
@@ -51,6 +51,10 @@ export default {
      default: "photo",
    },
    withIcon: Boolean,
+    sizeIcon: {
+      type: String,
+      default: "24px",
+    },
    titleType: {
      type: String,
      default: "фото",
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -5,7 +5,7 @@
      :name="name",
      :multiple="multiple",
      :class="{'circle': circle, 'font-input': true, 'doc': doc}",
-      :input-style="{ color: textColor, borderColor: borderColor, resize: resize, fontSize: fontSize, fontWeight: fontWeight, lineHeight: lineHeight}",
+      :input-style="{ color: textColor, borderColor: borderColor, resize: resize, fontSize: fontSize, fontWeight: fontWeight, lineHeight: lineHeight, minHeight: minHeight}",
      :borderless="borderless",
      :placeholder="placeholder",
      :outlined="outlined",
@@ -60,6 +60,10 @@ export default {
      type: Number,
      default: 500,
    },
+    minHeight: {
+      type: String,
+      default: "0px",
+    },
    lineHeight: {
      type: String,
      default: "19px",
--- a/src/pages/newMedicalCard/components/HealthState/HealthStateCreateModal.vue
+++ b/src/pages/newMedicalCard/components/HealthState/HealthStateCreateModal.vue
@@ -8,13 +8,33 @@
          base-download(
            v-model="dataEntry.pictures",
            multiple,
+            title-type="снимок",
            :returned-fields="['photo', 'id', 'name', 'size']"
            )
          .grey-border.rounded-md.flex.w-full.py-2.pr-4.pl-2.justify-between.items-center(v-for="picture in dataEntry.pictures")
-            .flex
-              img.grey-border.rounded.w-8.h-8(:src="picture.photo")
+            .flex.items-center
+              img.grey-border.rounded.w-8.h-8.mr-3(:src="picture.photo")
+              span.text-base.font-normal.mr-2 {{picture.name}}
+              span.text-smm.font-normal(:style="{color: 'var(--font-dark-grey-color)'}") {{`${picture.size} МБ`}}
+            q-icon.delete-img.cursor-pointer(
+              @click="() => deleteImg(picture.id)",
+              name="app:cancel", 
+              size="15px",
+              )
        .flex.flex-col.gap-y-6px.justify-start.w-full
          span.text-smm.font-semibold.title-inputs Комментарий врача
+          .flex.comments.rounded
+            base-input.w-full.min-h-75(
+              v-model="dataEntry.comment",
+              type="textarea",
+              borderless,
+              dense,
+              placeholder="Введите описание"
+              autogrow,
+              min-height="75px",
+              font-size="16px",
+              :text-color="!dataEntry.comment ? 'var(--font-grey-color)' : 'var(--font-dark-blue-color)'"
+              )
      .flex.gap-x-2.text-smm
        q-btn(
          color="primary",
@@ -31,38 +51,80 @@
          no-caps,
          label="Сохранить",
          padding="10px 24px 10px 24px",
+          @click="createNewEntry"
        )
 </template>

 <script>
 import BaseModal from "@/components/base/BaseModal.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 import BaseDownload from "@/components/base/BaseDownload.vue";
+import { mapActions } from "vuex";
 import { v_model } from "@/shared/mixins/v-model";
 import moment from "moment";

 export default {
  name: "HealthStateCreateModal",
-  components: { BaseModal, BaseDownload },
+  components: { BaseModal, BaseDownload, BaseInput },
  mixins: [v_model],
  data() {
    return {
-      dataEntry: {
-        id: 1,
-        date: moment().format("DD.MM.YYYY"),
-        pictures: [],
-        comments: [],
-      },
+      dataEntry: {},
    };
  },
  methods: {
+    ...mapActions({
+      addNewListData: "addNewListData",
+    }),
+    deleteImg(id) {
+      this.dataEntry.pictures = this.dataEntry.pictures.filter(
+        (img) => img.id !== id
+      );
+    },
    closeModal() {
      this.value = false;
    },
+    createNewEntry() {
+      this.addNewListData({
+        stateKey: "healthState",
+        data: { ...this.dataEntry, id: Math.random },
+      });
+      this.value = false;
+    },
+  },
+  computed: {
+    getData() {
+      return {
+        date: moment().format("YYYY-MM-DD"),
+        pictures: [],
+        comment: "",
+      };
+    },
+  },
+  mounted() {
+    this.dataEntry = JSON.parse(JSON.stringify(this.getData));
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        if (!this.value) {
+          this.dataEntry = JSON.parse(JSON.stringify(this.getData));
+        }
+      },
+    },
  },
 };
 </script>

 <style lang="sass" scoped>
+.delete-img
+  color: var(--font-grey-color)
+  &:hover
+    opacity: 0.7
+.comments
+  border: 1px solid var(--border-light-grey-color)
+  padding: 3px 8px 6px 16px
 .title-inputs
  color: var(--font-grey-color)
 .form-wrapper
--- a/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue
+++ b/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue
@@ -8,7 +8,11 @@
    :save="saveСhanges",
    :is-check-change="isCheckChange"
    )
-    .flex.w-full.gap-x-4
+    .flex.w-full.gap-x-4.relative
+      span.absolute.bottom-0.right-0.text-smm.font-medium(
+        v-if="!isEdit",
+        :style="{color: 'var(--font-grey-color)'}"
+        ) {{moment(value?.date).format('DD.MM.YYYY')}}
      base-modal-showing-picture(
        v-model="isShowsPicture",
        :init-picture="value.pictures.find((el) => el.id === pictureId)",
@@ -45,48 +49,36 @@
                size="8px",
                :style="{color: 'var(--default-white)'}"
                )
-        label.download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
+        base-download(
          v-if="isEdit",
-          )
-          q-icon.absolute(
-            name="app:download",
-            size="24px"
-            )
-          base-input(
-            @change="(e) => addNewFiles(e)",
-            doc,
-            type="file",
-            accept="image/*",
-            id="download",
-            :style="{zIndex: '-1'}",
-            borderless,
+          v-model="value.pictures",
+          multiple,
+          with-icon,
+          size-icon="18px",
+          :returned-fields="['photo', 'id', 'name', 'size']"
          )
      .flex.w-full.flex-col.gap-y-2
        .flex.font-semibold.text-sm(:style="{color: 'var(--font-grey-color)'}") Комментарий врача
-        .flex.flex-col.rounded.h-full(
-          :class="{'comments': isEdit}",
-          :style="{padding: isEdit ? '12px 8px 12px 16px' : '0 0 0 12px'}"
-          )
-          .flex.flex-col.w-full
-            .flex.items-center.gap-x-2(v-for="(comment, index) in value.comments")
-              .flex.w-1.h-1.rounded-full(
-                v-if="!isEdit",
-                :style="{backgroundColor: 'var(--font-dark-blue-color)'}")
-              q-input.comment.w-full(
-                :ref="`comment-${index}`",
-                :readonly="!isEdit",
-                v-model="comment.text",
+        .flex.comments.rounded(v-if="isEdit")
+          q-input.w-full(
+            v-model="value.comment",
+            type="textarea",
            borderless,
-                autofocus,
            dense,
-                :input-style="{'height': '18px', 'font-weight': '500'}"
-                @keyup="(el) => switchСomment(el, index, comment.text)"
+            :input-style="{'min-height': '75px', 'font-weight': '500'}"
            )
+        .flex.flex-col.w-full.pl-10px(v-else)
+          .flex(v-for="comment in getListComment")
+            .flex.gap-x-10px.w-full(v-if="comment")
+              .flex.w-1.h-1.rounded-full.mt-7px(
+                :style="{backgroundColor: 'var(--font-dark-blue-color)'}")
+              span.w-full.font-medium {{comment}}
 </template>

 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseInput from "@/components/base/BaseInput";
+import BaseDownload from "@/components/base/BaseDownload.vue";
 import BaseModalShowingPicture from "@/components/base/BaseModalShowingPicture.vue";
 import moment from "moment";
 import { mapActions, mapGetters } from "vuex";
@@ -94,7 +86,12 @@ import { v_model } from "@/shared/mixins/v-model";

 export default {
  name: "HealthStateForm",
-  components: { MedicalFormWrapper, BaseModalShowingPicture, BaseInput },
+  components: {
+    MedicalFormWrapper,
+    BaseModalShowingPicture,
+    BaseInput,
+    BaseDownload,
+  },
  data() {
    return {
      moment,
@@ -102,6 +99,7 @@ export default {
      isCheckChange: true,
      isShowsPicture: false,
      pictureId: "",
+      initData: {},
    };
  },
  mixins: [v_model],
@@ -109,10 +107,24 @@ export default {
    ...mapGetters({
      getHealthStateData: "getHealthStateData",
    }),
+    getListComment() {
+      return this.value.comment.split("\n");
+    },
+  },
+  watch: {
+    isEdit: {
+      immediate: true,
+      handler() {
+        if (this.isEdit) {
+          this.initData = JSON.parse(JSON.stringify(this.value));
+        }
+      },
+    },
  },
  methods: {
    ...mapActions({
      deleteItemData: "deleteItemData",
+      returnInitData: "returnInitData",
    }),
    showPicture(id) {
      this.pictureId = id;
@@ -142,31 +154,12 @@ export default {
      this.isEdit = true;
    },
    cancelEdit() {
-      this.value = this.getHealthStateData.find(
-        (el) => el.id === this.value.id
-      );
+      this.value = this.initData;
      this.isEdit = false;
    },
    saveСhanges() {
-      this.value.comments = this.value.comments.filter((el) => el.text);
      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 (event.code === "Backspace") {
-        if (!comment && this.value.comments.length > 1) {
-          this.value.comments = this.value.comments.filter(
-            (_, i) => index !== i
-          );
-          this.$refs[`comment-${index - 1}`][0].focus();
-        }
-      }
-    },
  },
 };
 </script>
@@ -200,9 +193,5 @@ export default {
    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
+  padding: 3px 8px 6px 16px
 </style>
--- a/src/store/modules/medicalCard.js
+++ b/src/store/modules/medicalCard.js
@@ -128,7 +128,7 @@ const state = () => ({
    },
  ],
  protocolData: null,
-  healthState: getters.getHealthStateData(),
+  healthState: null,
 });

 const getters = {
@@ -396,49 +396,22 @@ const getters = {
        id: 1,
        date: "2023-02-22",
        pictures: [],
-        comments: [
-          {
-            text: "Пациент склонен к преувеличению фактов",
-          },
-          {
-            text: "Пациент отказывался заполнять карту",
-          },
-          {
-            text: "Тяжело идет на контакт",
-          },
-        ],
+        comment:
+          "Пациент склонен к преувеличению фактов\nПациент отказывался заполнять карту\nТяжело идет на контакт",
      },
      {
        id: 2,
        date: "2022-02-22",
        pictures: [],
-        comments: [
-          {
-            text: "Пациент склонен к преувеличению фактов",
-          },
-          {
-            text: "Пациент отказывался заполнять карту",
-          },
-          {
-            text: "Тяжело идет на контакт",
-          },
-        ],
+        comment:
+          "Пациент склонен к преувеличению фактов\nПациент отказывался заполнять карту\nТяжело идет на контакт",
      },
      {
        id: 3,
        date: "2021-02-22",
        pictures: [],
-        comments: [
-          {
-            text: "Пациент склонен к преувеличению фактов",
-          },
-          {
-            text: "Пациент отказывался заполнять карту",
-          },
-          {
-            text: "Тяжело идет на контакт",
-          },
-        ],
+        comment:
+          "Пациент склонен к преувеличению фактов\nПациент отказывался заполнять карту\nТяжело идет на контакт",
      },
    ];
  },
@@ -448,6 +421,9 @@ const actions = {
  deleteItemData({ commit }, props) {
    commit("setDataWithouDeleted", props);
  },
+  addNewListData({ commit }, props) {
+    commit("setNewListData", props);
+  },
  getBenefitData({ commit }) {
    fetchWrapper.get("general/benefit/").then((res) => {
      commit("setBenefitData", res.results);
@@ -474,6 +450,7 @@ const actions = {
        commit("setDocumentsData");
        commit("setAllergiesData");
        commit("setConfidantData");
+        commit("setHealthStateData");
        commit("setEventsPersonData", res.person.id);
      });
  },
@@ -519,6 +496,9 @@ const mutations = {
      (item) => item.id !== props.itemId
    );
  },
+  setNewListData(state, props) {
+    state[props.stateKey] = [...state[props.stateKey], props.data];
+  },
  setBenefitData(state, data) {
    state.benefitData = data;
  },
@@ -561,6 +541,11 @@ const mutations = {
      }
    }
  },
+  setHealthStateData(state) {
+    state.healthState = JSON.parse(
+      JSON.stringify(this.getters.getHealthStateData)
+    );
+  },
 };

 export default {