Merge branch 'ASTRA-123' into 'master'

[WIP] Исправил баги и отображение фото

See merge request andrusyakka/urban-couscous!454

src/components/base/BaseInput.vue

@@ -27,6 +27,7 @@
       :accept="accept",
       :debounce="debounce",
       :shadow-text="shadowText",
+      :autofocus="autofocus",
       hide-bottom-space
     )
       template(v-slot:prepend, v-if="iconLeft")
@@ -46,6 +47,7 @@ export default {
     multiple: Boolean,
     circle: Boolean,
     doc: Boolean,
+    autofocus: Boolean,
     dense: {
       type: Boolean,
       default: true,

src/components/base/BaseModalShowingPicture.vue

@@ -6,7 +6,7 @@
     .flex.justify-center.items-center.absolut.w-screen.h-screen.pointer-events-none
       .wrapper.flex.relative.rounded-2xl(:style="{color: 'var(--default-white)'}")
         .flex.absolute(:style="{color: 'var(--default-white)'}")
-        img.h-full.w-full.rounded-2xl(:src="picture?.photo || initPicture?.photo")
+        img.rounded-2xl.w-full.h-full(:src="picture?.photo || initPicture?.photo")
         q-btn.btn.right(
           @click="closeModal"
           round,

src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue

@@ -14,21 +14,23 @@
         :init-picture="value.pictures.find((el) => el.id === pictureId)",
         :list-pictures="value.pictures"
         )
-      .flex.flex-col.gap-y-2.p-2.rounded(
+      .flex.flex-col.gap-y-2.p-2.rounded.h-fit(
         v-if="value.pictures.length || isEdit",
         :style="{backgroundColor: 'var(--bg-light-grey)'}",
         )
-        .flex.gap-2.w-full(v-if="value.pictures.length")
+        .pictures.gap-2(
+          v-if="value.pictures.length"
+          :class="{'edit': isEdit, 'no-edit': !isEdit, 'one-picture': value.pictures.length === 1}"
+          )
           .photo.flex.relative(
             v-for="(picture, index) in value.pictures",
-            :style="{width: isEdit ? '40px' : '104px', height: isEdit ? '40px' : '104px'}",
             )
             .photo-viewing.flex.absolute.rounded.cursor-pointer.w-full.h-full.items-center.justify-center(
               v-if="!isEdit",
               @click="() => showPicture(picture.id)"
               )
               img(src="@/assets/icons/whiteEye.svg" alt="eye")
-            img.h-full.w-full.rounded(:src="picture.photo")
+            img.h-full.w-full.rounded.object-cover(:src="picture.photo")
             q-btn.absolute(
               v-if="isEdit",
               @click="() => deletePicture(picture.id)",
@@ -43,24 +45,23 @@
                 size="8px",
                 :style="{color: 'var(--default-white)'}"
                 )
-        .download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
+        label.download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
           v-if="isEdit",
-          :style="{ height: '93px' }",
           )
-          base-input.w-full.h-full(
+          q-icon.absolute(
-            @update:model-value="(e) => addNewFiles(e)",
+            name="app:download",
+            size="24px"
+            )
+          base-input(
+            @change="(e) => addNewFiles(e)",
             doc,
             type="file",
-            id="download",
             accept="image/*",
+            id="download",
+            :style="{zIndex: '-1'}",
             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.rounded.h-full(
@@ -77,8 +78,9 @@
                 :readonly="!isEdit",
                 v-model="comment.text",
                 borderless,
+                autofocus,
                 dense,
-                :input-style="{'height': '16px', 'font-weight': '500'}"
+                :input-style="{'height': '18px', 'font-weight': '500'}"
                 @keyup="(el) => switchСomment(el, index, comment.text)"
                 )
 </template>
@@ -87,7 +89,7 @@
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseInput from "@/components/base/BaseInput";
 import BaseModalShowingPicture from "@/components/base/BaseModalShowingPicture.vue";
-import { mapActions } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import { v_model } from "@/shared/mixins/v-model";
 
 export default {
@@ -102,6 +104,11 @@ export default {
     };
   },
   mixins: [v_model],
+  computed: {
+    ...mapGetters({
+      getHealthStateData: "getHealthStateData",
+    }),
+  },
   methods: {
     ...mapActions({
       deleteItemData: "deleteItemData",
@@ -117,7 +124,7 @@ export default {
       this.value.pictures = this.value.pictures.filter((el) => el.id !== id);
     },
     addNewFiles(e) {
-      Object.values(e).forEach((file) => {
+      Object.values(e.target.files).forEach((file) => {
         let reader = new FileReader();
         reader.onload = (e) => {
           this.value.pictures.push({
@@ -128,14 +135,19 @@ export default {
         };
         reader.readAsDataURL(file);
       });
+      e.target.value = null;
     },
     openEdit() {
       this.isEdit = true;
     },
     cancelEdit() {
+      this.value = this.getHealthStateData.find(
+        (el) => el.id === this.value.id
+      );
       this.isEdit = false;
     },
     saveСhanges() {
+      this.value.comments = this.value.comments.filter((el) => el.text);
       this.isEdit = false;
     },
     switchСomment(event, index, comment) {
@@ -144,15 +156,13 @@ export default {
         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) {
+        if (!comment && this.value.comments.length > 1) {
           this.value.comments = this.value.comments.filter(
             (_, i) => index !== i
           );
+          this.$refs[`comment-${index - 1}`][0].focus();
         }
       }
     },
@@ -161,6 +171,16 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.pictures
+  display: grid
+  &.no-edit
+    grid-template-columns: repeat(2, 104px)
+    grid-auto-rows: 104px
+    &.one-picture
+      grid-template-columns: repeat(1, 104px)
+  &.edit
+    grid-template-columns: repeat(4, 40px)
+    grid-auto-rows: 40px
 .photo-viewing
   display: none
   background-color: var(--font-dark-blue-color-1)
@@ -169,6 +189,7 @@ export default {
   &:hover .photo-viewing
     display: flex
 .download
+  min-height: 93px
   width: 216px
   border: 1px dashed var(--font-grey-color)
   background-color: var(--default-white)

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue

@@ -90,5 +90,17 @@ export default {
   mounted() {
     this.filtredTooths = Object.keys(this.protocol[this.data.state].formula);
   },
+  watch: {
+    fillInspection: {
+      immediate: true,
+      handler(value) {
+        if (value) {
+          this.isEdit = true;
+        } else {
+          this.isEdit = false;
+        }
+      },
+    },
+  },
 };
 </script>

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -3,6 +3,16 @@
     transition(name="medical-form", mode="out-in")
       .loader.absolute.z-10.flex.items-center.justify-center.w-full.h-full.rounded(v-if="isLoadingData")
         base-loader
+    q-btn.absolute.top-4.right-6(
+      @click="deleteItem",
+      v-if="!titleDelete && deleteItem",
+      :style="{backgroundColor: 'var(--bg-light-grey)', color: 'var(--font-grey-color)',}",
+      padding="10px",
+      )
+      q-icon(
+        name="app:basket",
+        size="20px",
+        )
     .flex.flex-col.h-full.gap-25px.p-6
       .flex.w-full.justify-between
         .flex.w-fit.gap-11px.items-center(v-if="!tag")
@@ -26,23 +36,12 @@
               )
               img.mr-2(:src="layers")
               span.text-smm.font-medium Шаблоны
-        .flex(v-if="deleteItem")
+        .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(
-          q-btn(
+          v-if="!isEdit && titleDelete && deleteItem", 
-            @click="deleteItem",
+          @click="deleteItem"
-            v-if="!titleDelete",
+          )
-            :style="{backgroundColor: 'var(--bg-light-grey)', color: 'var(--font-grey-color)'}",
+          q-icon(name="app:basket" size="20")
-            padding="10px",
+          span.text-smm.font-medium {{ titleDelete }}
-            )
-            q-icon(
-              name="app:basket",
-              size="20px",
-              )
-          .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(
-            v-else-if="!isEdit && titleDelete", 
-            @click="deleteItem"
-            )
-            q-icon(name="app:basket" size="20")
-            span.text-smm.font-medium {{ titleDelete }}
         slot(name="right-corner")
       slot
       .flex.h-fit.w-fit.gap-2(v-if="isEdit && buttonsPresence")

src/store/modules/medicalCard.js

@@ -128,56 +128,7 @@ const state = () => ({
     },
   ],
   protocolData: null,
-  healthState: [
+  healthState: getters.getHealthStateData(),
-    {
-      id: 1,
-      year: 2023,
-      pictures: [],
-      comments: [
-        {
-          text: "Пациент склонен к преувеличению фактов",
-        },
-        {
-          text: "Пациент отказывался заполнять карту",
-        },
-        {
-          text: "Тяжело идет на контакт",
-        },
-      ],
-    },
-    {
-      id: 2,
-      year: 2022,
-      pictures: [],
-      comments: [
-        {
-          text: "Пациент склонен к преувеличению фактов",
-        },
-        {
-          text: "Пациент отказывался заполнять карту",
-        },
-        {
-          text: "Тяжело идет на контакт",
-        },
-      ],
-    },
-    {
-      id: 3,
-      year: 2021,
-      pictures: [],
-      comments: [
-        {
-          text: "Пациент склонен к преувеличению фактов",
-        },
-        {
-          text: "Пациент отказывался заполнять карту",
-        },
-        {
-          text: "Тяжело идет на контакт",
-        },
-      ],
-    },
-  ],
 });
 
 const getters = {
@@ -439,6 +390,58 @@ const getters = {
       clinical: [],
     };
   },
+  getHealthStateData() {
+    return [
+      {
+        id: 1,
+        year: 2023,
+        pictures: [],
+        comments: [
+          {
+            text: "Пациент склонен к преувеличению фактов",
+          },
+          {
+            text: "Пациент отказывался заполнять карту",
+          },
+          {
+            text: "Тяжело идет на контакт",
+          },
+        ],
+      },
+      {
+        id: 2,
+        year: 2022,
+        pictures: [],
+        comments: [
+          {
+            text: "Пациент склонен к преувеличению фактов",
+          },
+          {
+            text: "Пациент отказывался заполнять карту",
+          },
+          {
+            text: "Тяжело идет на контакт",
+          },
+        ],
+      },
+      {
+        id: 3,
+        year: 2021,
+        pictures: [],
+        comments: [
+          {
+            text: "Пациент склонен к преувеличению фактов",
+          },
+          {
+            text: "Пациент отказывался заполнять карту",
+          },
+          {
+            text: "Тяжело идет на контакт",
+          },
+        ],
+      },
+    ];
+  },
 };
 
 const actions = {