From b72886f6748876f4005e5012470c21ad4a4d6faf Mon Sep 17 00:00:00 2001 From: DwCay Date: Thu, 29 Jun 2023 17:24:54 +0300 Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D0=BB=20=D0=B1=D0=B0=D0=B3=D0=B8=20=D0=B8=20=D0=BE=D1=82?= =?UTF-8?q?=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=84?= =?UTF-8?q?=D0=BE=D1=82=D0=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/BaseInput.vue | 2 + .../base/BaseModalShowingPicture.vue | 2 +- .../HealthState/HealthStateForm.vue | 63 +++++++---- .../Forms/ToothFormula/ToothFormulaForm.vue | 12 ++ .../components/MedicalFormWrapper.vue | 33 +++--- src/store/modules/medicalCard.js | 103 +++++++++--------- 6 files changed, 126 insertions(+), 89 deletions(-) diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue index 6bac6b4..8ea298a 100644 --- a/src/components/base/BaseInput.vue +++ b/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, diff --git a/src/components/base/BaseModalShowingPicture.vue b/src/components/base/BaseModalShowingPicture.vue index f1a69a8..2873c86 100644 --- a/src/components/base/BaseModalShowingPicture.vue +++ b/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, diff --git a/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue b/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue index 1116d3b..f9a2faa 100644 --- a/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue +++ b/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( - @update:model-value="(e) => addNewFiles(e)", + q-icon.absolute( + 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)" ) @@ -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 {