Merge branch 'ASTRA-123' into 'master'

[WIP] Добавил возможность просмотра фото

See merge request andrusyakka/urban-couscous!449

src/assets/icons/whiteEye.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0013 9.58331C13.6376 9.58331 8.19428 13.8732 6.26783 19.8888C6.24403 19.9631 6.24406 20.0453 6.26789 20.1196C8.19673 26.1307 13.638 30.4166 19.9987 30.4166C26.3624 30.4166 31.8057 26.1267 33.7322 20.1112C33.756 20.0369 33.7559 19.9547 33.7321 19.8804C31.8033 13.8692 26.362 9.58331 20.0013 9.58331ZM3.88694 19.1263C6.11882 12.157 12.4675 7.08331 20.0013 7.08331C27.5316 7.08331 33.8779 12.1523 36.1126 19.1166C36.2956 19.6871 36.2958 20.303 36.1131 20.8737C33.8812 27.843 27.5325 32.9166 19.9987 32.9166C12.4684 32.9166 6.1221 27.8477 3.88744 20.8834C3.70436 20.3128 3.70419 19.697 3.88694 19.1263ZM20.0001 16.5833C18.2535 16.5833 16.7574 18.0678 16.7574 20C16.7574 21.9321 18.2535 23.4166 20.0001 23.4166C21.7467 23.4166 23.2428 21.9321 23.2428 20C23.2428 18.0678 21.7467 16.5833 20.0001 16.5833ZM14.2574 20C14.2574 16.7775 16.7842 14.0833 20.0001 14.0833C23.216 14.0833 25.7428 16.7775 25.7428 20C25.7428 23.2225 23.216 25.9166 20.0001 25.9166C16.7842 25.9166 14.2574 23.2225 14.2574 20Z" fill="white"/>
+</svg>

src/assets/sass/variables.sass

@@ -5,6 +5,7 @@
   --bg-opacity-0: rgba(0, 0, 0, 0 )
   --font-dark-blue-color: #252850
   --font-dark-blue-color-0: rgba(37, 40, 80, 0.7)
+  --font-dark-blue-color-1: rgba(37, 40, 80, 0.4)
   --font-black-color: #090a15
   --font-black-color-1: rgba(9, 10, 21, 0.5)
   --icon-light-blue: #d7d9ff

src/components/base/BaseModalShowingPicture.vue

@@ -0,0 +1,33 @@
+<template lang="pug">
+  base-modal(
+    v-model="value",
+    hide-header,
+    default-padding
+    )
+    .wrapper.flex.relative
+      img.w-full.h-full(:src="picture")
+</template>
+
+<script>
+import { v_model } from "@/shared/mixins/v-model";
+import BaseModal from "@/components/base/BaseModal.vue";
+
+export default {
+  name: "BaseModalShowingPicture",
+  components: { BaseModal },
+  mixins: [v_model],
+  props: {
+    pictureId: Number,
+    picture: String,
+    listPicture: Array,
+    index: Number,
+    data: Array,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 640px
+  height: 785px
+</style>

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

@@ -2,19 +2,35 @@
   medical-form-wrapper(
     :title="`${value?.year} год`",
     :is-edit="isEdit",
-    :openEdit="openEdit",
+    :open-edit="openEdit",
-    :cancel="cancelEdit"
+    :cancel="cancelEdit",
+    :delete-item="deleteCard",
+    :save="saveСhanges",
+    :is-check-change="isCheckChange"
     )
     .flex.w-full.gap-x-4
-      .flex.h-fit.flex-col.gap-y-2.p-2.rounded(
+      base-modal-showing-picture(
-        v-if="value.pictures.length || isEdit"
+        v-model="isShowsPicture",
-        :style="{backgroundColor: 'var(--bg-light-grey)'}"
+        :picture="value.pictures.find((el) => el.id === pictureId)?.photo",
         )
-        .flex.gap-x-2(v-if="value.pictures.length")
+      .flex.flex-col.gap-y-2.p-2.rounded(
-          .flex.relative.h-10.w-10(v-for="picture in value.pictures")
+        v-if="value.pictures.length || isEdit",
-            img.h-10.w-10.rounded(:src="picture.photo")
+        :style="{backgroundColor: 'var(--bg-light-grey)'}",
+        )
+        .flex.gap-2.w-full(v-if="value.pictures.length")
+          .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")
             q-btn.absolute(
-              @click="() => deletePicture(picture)",
+              v-if="isEdit",
+              @click="() => deletePicture(picture.id)",
               round,
               dense,
               size="16px",
@@ -26,7 +42,10 @@
                 size="8px",
                 :style="{color: 'var(--default-white)'}"
                 )
-        .download.flex.cursor-pointer.relative.items-center.justify-center.rounded(:style="{height: '93px'}")
+        .download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
+          v-if="isEdit",
+          :style="{ height: '93px' }",
+          )
           base-input.w-full.h-full(
             @update:model-value="(e) => addNewFiles(e)",
             doc,
@@ -37,14 +56,24 @@
             multiple
           )
           label.absolute.w-fit.h-fit(for="download")
-            q-icon(name="app:download" size="24px")
+            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.rounded.h-full(
-          .flex.flex-col.w-full.overflow-y-auto
+          :class="{'comments': isEdit}",
-            .flex(v-for="(comment, index) in value.comments")
+          :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}`"
+                :ref="`comment-${index}`",
+                :readonly="!isEdit",
                 v-model="comment.text",
                 borderless,
                 dense,
@@ -55,23 +84,36 @@
 
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-import { v_model } from "@/shared/mixins/v-model";
 import BaseInput from "@/components/base/BaseInput";
+import BaseModalShowingPicture from "@/components/base/BaseModalShowingPicture.vue";
+import { mapActions } from "vuex";
+import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "HealthStateForm",
-  components: { MedicalFormWrapper, BaseInput },
+  components: { MedicalFormWrapper, BaseModalShowingPicture, BaseInput },
   data() {
     return {
       isEdit: false,
+      isCheckChange: true,
+      isShowsPicture: false,
+      pictureId: "",
     };
   },
   mixins: [v_model],
   methods: {
-    deletePicture(picture) {
+    ...mapActions({
-      this.value.pictures = this.value.pictures.filter(
+      deleteItemData: "deleteItemData",
-        (el) => el.photo !== picture.photo
+    }),
-      );
+    showPicture(id) {
+      this.pictureId = id;
+      this.isShowsPicture = true;
+    },
+    deleteCard() {
+      this.deleteItemData({ stateKey: "healthState", itemId: this.value.id });
+    },
+    deletePicture(id) {
+      this.value.pictures = this.value.pictures.filter((el) => el.id !== id);
     },
     addNewFiles(e) {
       Object.values(e).forEach((file) => {
@@ -80,6 +122,7 @@ export default {
           this.value.pictures.push({
             photo: e.target.result,
             file: file,
+            id: Math.random(),
           });
         };
         reader.readAsDataURL(file);
@@ -91,6 +134,9 @@ export default {
     cancelEdit() {
       this.isEdit = false;
     },
+    saveСhanges() {
+      this.isEdit = false;
+    },
     switchСomment(event, index, comment) {
       if (event.code === "Enter") {
         event.target.blur();
@@ -114,6 +160,13 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.photo-viewing
+  display: none
+  background-color: var(--font-dark-blue-color-1)
+  color: var(--default-white)
+.photo
+  &:hover .photo-viewing
+    display: flex
 .download
   width: 216px
   border: 1px dashed var(--font-grey-color)

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -7,14 +7,40 @@
       .flex.w-full.justify-between
         .flex.w-fit.gap-11px.items-center(v-if="!tag")
           span.font-bold.text-base.whitespace-nowrap {{title}}
-          q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!isEdit" @click="openEdit" size="20")
+          q-icon.edit-button.text-lg.cursor-pointer(
+            name="app:edit",
+            v-if="!isEdit",
+            @click="openEdit",
+            size="20"
+            )
         .flex.w-full.gap-11px.items-center.justify-between(v-else)
           span.font-bold.text-base.whitespace-nowrap {{title}}
-          .flex.items-center.h-5(v-if="!template", :style="{color: 'var(--btn-blue-color)'}")
+          .flex.items-center.h-5(
-            q-btn(no-caps, outline, padding="10px 24px")
+            v-if="!template",
+            :style="{color: 'var(--btn-blue-color)'}"
+            )
+            q-btn(
+              no-caps,
+              outline,
+              padding="10px 24px"
+              )
               img.mr-2(:src="layers")
               span.text-smm.font-medium Шаблоны
-        .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(v-if="!isEdit && titleDelete" @click="deleteItem")
+        .flex(v-if="deleteItem")
+          q-btn(
+            @click="deleteItem",
+            v-if="!titleDelete",
+            :style="{backgroundColor: 'var(--bg-light-grey)', color: 'var(--font-grey-color)'}",
+            padding="10px",
+            )
+            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")
@@ -69,10 +95,7 @@ export default {
       type: Function,
       default: () => {},
     },
-    deleteItem: {
+    deleteItem: Function,
-      type: Function,
-      default: () => {},
-    },
     isCheckChange: {
       type: Boolean,
       default: false,

src/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue

@@ -2,9 +2,7 @@
   .flex.flex-col.w-full.gap-y-2
     health-state-header
     .flex(v-for="(data, i) in healthState")
-      health-state-form(
+      health-state-form(v-model="healthState[i]")
-        v-model="healthState[i]"
-        )
 </template>
 
 <script>

src/store/modules/medicalCard.js

@@ -130,6 +130,7 @@ const state = () => ({
   protocolData: null,
   healthState: [
     {
+      id: 1,
       year: 2023,
       pictures: [],
       comments: [
@@ -145,6 +146,7 @@ const state = () => ({
       ],
     },
     {
+      id: 2,
       year: 2022,
       pictures: [],
       comments: [
@@ -160,6 +162,7 @@ const state = () => ({
       ],
     },
     {
+      id: 3,
       year: 2021,
       pictures: [],
       comments: [
@@ -439,6 +442,9 @@ const getters = {
 };
 
 const actions = {
+  deleteItemData({ commit }, props) {
+    commit("setDataWithouDeleted", props);
+  },
   getBenefitData({ commit }) {
     fetchWrapper.get("general/benefit/").then((res) => {
       commit("setBenefitData", res.results);
@@ -505,6 +511,11 @@ const actions = {
 };
 
 const mutations = {
+  setDataWithouDeleted(state, props) {
+    state[props.stateKey] = state[props.stateKey].filter(
+      (item) => item.id !== props.itemId
+    );
+  },
   setBenefitData(state, data) {
     state.benefitData = data;
   },