Merge branch 'ASTRA-123' into 'master'

[WIP] Добавил переключение изображений в просмотре

See merge request andrusyakka/urban-couscous!450

src/assets/sass/variables.sass

@@ -6,6 +6,8 @@
   --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-dark-blue-color-2: rgba(37, 40, 80, 0.3)
+  --font-dark-blue-color-3: rgba(37, 40, 80, 0.2)
   --font-black-color: #090a15
   --font-black-color-1: rgba(9, 10, 21, 0.5)
   --icon-light-blue: #d7d9ff

src/components/base/BaseModalShowingPicture.vue

@@ -1,11 +1,42 @@
 <template lang="pug">
-  base-modal(
+  q-dialog(
     v-model="value",
-    hide-header,
+    ref="dialog"
-    default-padding
     )
-    .wrapper.flex.relative
+    .flex.justify-center.items-center.absolut.w-screen.h-screen.pointer-events-none
-      img.w-full.h-full(:src="picture")
+      .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")
+        q-btn.btn.right(
+          @click="closeModal"
+          round,
+          padding="15px"
+          )
+          q-icon(name="app:cancel" size="18px")
+        q-btn.btn.right.print(
+          round,
+          padding="12px"
+          )
+          q-icon(name="print" size="24px")
+        q-btn.btn.right.download(
+          round,
+          padding="13px 14px 15px 14px"
+          )
+          q-icon(name="app:download" size="20px")
+        q-btn.btn.right.arrow(
+          @click="() => switchPictures('next')",
+          v-if="indexPicture !== listPictures.length-1",
+          round,
+          padding="12px 11px 12px 13px"
+          )
+          q-icon(name="navigate_next" size="24px")
+        q-btn.btn.left.arrow(
+          @click="() => switchPictures()",
+          v-if="indexPicture !== 0",
+          round,
+          padding="12px 13px 12px 11px"
+          )
+          q-icon.rotate-180(name="navigate_next" size="24px")          
 </template>
 
 <script>
@@ -16,18 +47,63 @@ export default {
   name: "BaseModalShowingPicture",
   components: { BaseModal },
   mixins: [v_model],
+  data() {
+    return {
+      indexPicture: 0,
+      picture: {},
+    };
+  },
   props: {
-    pictureId: Number,
+    initPicture: Object,
-    picture: String,
+    listPictures: Array,
-    listPicture: Array,
+  },
-    index: Number,
+  methods: {
-    data: Array,
+    closeModal() {
+      this.value = false;
+    },
+
+    switchPictures(direction) {
+      if (direction === "next") {
+        this.indexPicture += 1;
+      } else {
+        this.indexPicture -= 1;
+      }
+      this.picture = this.listPictures[this.indexPicture];
+    },
+  },
+  updated() {
+    this.listPictures?.forEach((el, index) => {
+      if (el.id === this.initPicture?.id) {
+        this.indexPicture = index;
+      }
+    });
+    this.picture = this.initPicture;
+    const backdropEl = this.$refs.dialog?.contentEl?.previousSibling;
+    if (!backdropEl) return;
+    if (!this.hideOverlay) {
+      backdropEl.style.background = "rgba(37, 40, 80, 0.2)";
+      backdropEl.style.backdropFilter = "blur(4px)";
+    } else backdropEl.style.background = "rgba(0,0,0,0)";
   },
 };
 </script>
 
 <style lang="sass" scoped>
 .wrapper
-  width: 640px
   height: 785px
+  width: 640px
+  box-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
+.btn
+  background: var(--font-dark-blue-color-2)
+  position: absolute
+.right
+  right: -64px
+.left
+  left: -64px
+.print
+  top: 72px
+.download
+  top: 128px
+.arrow
+  top: 344px
 </style>

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

@@ -11,7 +11,8 @@
     .flex.w-full.gap-x-4
       base-modal-showing-picture(
         v-model="isShowsPicture",
-        :picture="value.pictures.find((el) => el.id === pictureId)?.photo",
+        :init-picture="value.pictures.find((el) => el.id === pictureId)",
+        :list-pictures="value.pictures"
         )
       .flex.flex-col.gap-y-2.p-2.rounded(
         v-if="value.pictures.length || isEdit",

src/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.w-full.gap-y-2
+  .wrapper.flex.flex-col.w-full.h-full.gap-y-2.overflow-y-auto
     health-state-header
     .flex(v-for="(data, i) in healthState")
       health-state-form(v-model="healthState[i]")
@@ -20,3 +20,9 @@ export default {
   },
 };
 </script>
+
+<style lang="sass" scoped>
+.wrapper
+  &::-webkit-scrollbar
+    width: 0
+</style>