From 670c4bf71c89b22e9e0d7cabd93daad08c0463cc Mon Sep 17 00:00:00 2001 From: megavrilinvv Date: Tue, 29 Nov 2022 13:32:56 +0300 Subject: [PATCH 1/2] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D0=BB=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=20=D0=B4=D0=BE?= =?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B0=D0=B2?= =?UTF-8?q?=D0=B0=D1=82=D0=B0=D1=80=D0=B0=20=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/camera.svg | 5 ++ src/assets/icons/computer.svg | 3 + src/assets/icons/photo.svg | 6 ++ src/components/base/BaseClientFormCreate.vue | 93 +++++++++++++++++++- 4 files changed, 105 insertions(+), 2 deletions(-) create mode 100644 src/assets/icons/camera.svg create mode 100644 src/assets/icons/computer.svg create mode 100644 src/assets/icons/photo.svg diff --git a/src/assets/icons/camera.svg b/src/assets/icons/camera.svg new file mode 100644 index 0000000..d2ff0e4 --- /dev/null +++ b/src/assets/icons/camera.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/computer.svg b/src/assets/icons/computer.svg new file mode 100644 index 0000000..a061306 --- /dev/null +++ b/src/assets/icons/computer.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/photo.svg b/src/assets/icons/photo.svg new file mode 100644 index 0000000..98069ba --- /dev/null +++ b/src/assets/icons/photo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/base/BaseClientFormCreate.vue b/src/components/base/BaseClientFormCreate.vue index 637ff11..9a30140 100644 --- a/src/components/base/BaseClientFormCreate.vue +++ b/src/components/base/BaseClientFormCreate.vue @@ -4,12 +4,37 @@ span.title.text-xl.font-bold.px-4 Создание клиента .flex.gap-x-4.h-fit.px-4 .flex.gap-x-3.w-full - base-button(:rounded="true" :secondary="true" :size="40") + base-button.relative(:rounded="true", :secondary="true", :size="40", @click="changeOpenPopup") .icon-download.text-xl + base-popup.right-5.top-7(v-if="showPopup", :width="230") + .flex.items-center.gap-x-2 + img(src="@/assets/icons/computer.svg") + span.text-smm(@click="changeOpenModal") Загрузить с компьютера + .flex.items-center.gap-x-2 + img(src="@/assets/icons/camera.svg") + span.text-smm Сделать фото + base-modal(v-model="showModal", title="Загрузить изображение мидла") + .form-avatar.flex.flex-col.items-center.justify-center + .avatar-block.flex.relative.flex-row + input.input( + type="file", + id="image-upload", + accept="image/*", + @change="(e) => previewImages(e)" + ) + .avatar.absolute(v-for="img in image") + img.avatar(for="image-upload", :src="img", v-if="img") + base-button(:rounded="true", :secondary="true", :size="48", @click="closeModal") + .icon-ok base-input.w-full(v-model:value="infoClient.basic.full_name" placeholder="ФИО*") .flex.flex-col.flex-auto.l.gap-y-8 .flex.px-4 - button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(v-for="info in listInfoTitle" @click="(e) => selectTab(e)" :class="{active:info.active}" :key="info.key" :id="info.key") {{info.title}} + button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm( + v-for="info in listInfoTitle", + @click="(e) => selectTab(e)", + :class="{active:info.active}", + :key="info.key" :id="info.key" + ) {{info.title}} .flex(:style="{display :'block'}" ref="basic") form-create-basic-info( :basic-info="infoClient.basic" @@ -53,6 +78,9 @@ import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses" import FormCreateAdditional from "@/pages/clients/components/FormCreateAdditional"; import BaseInput from "@/components/base/BaseInput"; import BaseButton from "@/components/base/BaseButton"; +import BasePopup from "@/components/base/BasePopup"; +import BaseModal from "@/components/base/BaseModal"; +import addImageIcon from "@/assets/icons/photo.svg"; export default { name: "BaseClientFormClient", components: { @@ -62,6 +90,9 @@ export default { FormCreateAddresses, FormCreateAdditional, BaseButton, + BasePopup, + BaseModal, + addImageIcon, }, props: { closeForm: Function, @@ -166,6 +197,9 @@ export default { label: "-", }, ], + showModal: false, + showPopup: false, + image: [addImageIcon], }; }, computed: { @@ -176,6 +210,22 @@ export default { }, }, methods: { + closeModal() { + this.showModal = false; + this.showPopup = false; + this.image = [addImageIcon]; + }, + previewImages(event) { + this.image = []; + var pictures = event.target.files; + for (var i = 0; i < pictures.length; i++) { + var reader = new FileReader(); + reader.onload = (e) => { + this.image.push(e.target.result); + }; + reader.readAsDataURL(pictures[i]); + } + }, createIdentityDocument(id) { Object.keys( this.filterDataEmptyProperty(this.infoClient.identity_document.pass) @@ -244,6 +294,13 @@ export default { this.closeForm(); } }, + changeOpenModal() { + this.showModal = true; + this.showPopup = false; + }, + changeOpenPopup() { + this.showPopup = true; + }, saveDocFile(e) { this.infoClient.doc = e.target.files; }, @@ -288,6 +345,14 @@ export default { } return true; }, + check() { + this.showPopup = false; + }, + }, + showModal: function () { + if (this.showModal === false) { + this.check(); + } }, }; @@ -320,4 +385,28 @@ export default { &.active color: var(--btn-blue-color) border-bottom: 1.5px solid var(--btn-blue-color) +.form-avatar + width: 1221px + height: 793px +.avatar-block + width: 400px + height: 400px + border-radius: 50% +.input + width: 100% + height: 100% + border-radius: 50% + overflow: hidden + z-index: 5 + opacity: 0 + cursor: pointer +.avatar + cursor: pointer + width: 100% + height: 100% + border-radius: 50% + // background-image: url("../../assets/icons/photo.svg") + background-size: cover + background-repeat: no-repeat + background-position: center From fb36d5f284e8b02c692d7da007e3646164c3b879 Mon Sep 17 00:00:00 2001 From: megavrilinvv Date: Tue, 29 Nov 2022 19:04:32 +0300 Subject: [PATCH 2/2] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D0=BB=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE?= =?UTF-8?q?=D1=81=D1=82=D1=8C=20=D1=81=D0=BE=D1=85=D1=80=D0=B0=D0=BD=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D0=B0=D0=B2=D0=B0=D1=82=D0=B0=D1=80=D0=B0?= =?UTF-8?q?=20=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD=D1=82=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/BaseClientFormCreate.vue | 85 ++++++++++++------- .../components/ClientDetailInfoSection.vue | 16 +--- .../clients/components/ClientsTableRow.vue | 2 + .../components/cells/TableCellBodyName.vue | 10 ++- 4 files changed, 67 insertions(+), 46 deletions(-) diff --git a/src/components/base/BaseClientFormCreate.vue b/src/components/base/BaseClientFormCreate.vue index 9a30140..41e5176 100644 --- a/src/components/base/BaseClientFormCreate.vue +++ b/src/components/base/BaseClientFormCreate.vue @@ -4,8 +4,16 @@ span.title.text-xl.font-bold.px-4 Создание клиента .flex.gap-x-4.h-fit.px-4 .flex.gap-x-3.w-full - base-button.relative(:rounded="true", :secondary="true", :size="40", @click="changeOpenPopup") - .icon-download.text-xl + base-button.relative( + :rounded="true", + :secondary="true", + :size="40", + @click="changeOpenPopup", + v-for="img in image" + ) + .icon-download.text-xl(v-if="img === defaultIcon") + .flex.w-10.h-10(v-else) + img.current-avatar(:src="img") base-popup.right-5.top-7(v-if="showPopup", :width="230") .flex.items-center.gap-x-2 img(src="@/assets/icons/computer.svg") @@ -13,18 +21,20 @@ .flex.items-center.gap-x-2 img(src="@/assets/icons/camera.svg") span.text-smm Сделать фото - base-modal(v-model="showModal", title="Загрузить изображение мидла") - .form-avatar.flex.flex-col.items-center.justify-center - .avatar-block.flex.relative.flex-row + base-modal(v-model="showModal", title="Загрузить изображение") + .flex.flex-col.items-center.justify-center( + :style="{padding: '153px 370px'}" + ) + .avatar-wrapper.flex.relative input.input( type="file", id="image-upload", accept="image/*", @change="(e) => previewImages(e)" ) - .avatar.absolute(v-for="img in image") + .avatar.flex.absolute.items-center.gap-x-6(v-for="img in image") img.avatar(for="image-upload", :src="img", v-if="img") - base-button(:rounded="true", :secondary="true", :size="48", @click="closeModal") + base-button(:rounded="true", :size="48", @click="closeModal") .icon-ok base-input.w-full(v-model:value="infoClient.basic.full_name" placeholder="ФИО*") .flex.flex-col.flex-auto.l.gap-y-8 @@ -197,9 +207,11 @@ export default { label: "-", }, ], + defaultIcon: addImageIcon, showModal: false, showPopup: false, image: [addImageIcon], + imageData: [], }; }, computed: { @@ -213,7 +225,6 @@ export default { closeModal() { this.showModal = false; this.showPopup = false; - this.image = [addImageIcon]; }, previewImages(event) { this.image = []; @@ -225,6 +236,7 @@ export default { }; reader.readAsDataURL(pictures[i]); } + this.imageData = [...this.imageData, ...event.target.files]; }, createIdentityDocument(id) { Object.keys( @@ -247,19 +259,24 @@ export default { }); }, postNewClient() { - let sentData = { - full_name: this.infoClient.basic.full_name, - }; + const formData = new FormData(); + this.imageData.forEach((e) => { + formData.append("photo", e); + formData.append("full_name", this.infoClient.basic.full_name); + }); if (this.infoClient.basic.birth_date) - sentData.birth_date = this.infoClient.basic.birth_date; + formData.append("birth_date", this.infoClient.basic.birth_date); + let foundElement = this.prioritySettings.settings.find( (el) => el.text === this.infoClient.basic.priority ); - if (foundElement) sentData.priority = foundElement.priority; - fetchWrapper.post("general/person/create/", sentData).then((result) => { - this.createIdentityDocument(result.id); - this.createAddress(result.id); - }); + if (foundElement) formData.append("priority", foundElement.priority); + fetchWrapper + .post("general/person/create/", formData, "formData") + .then((result) => { + this.createIdentityDocument(result.id); + this.createAddress(result.id); + }); this.$emit("update-client"); }, filterDataEmptyProperty(data) { @@ -297,6 +314,7 @@ export default { changeOpenModal() { this.showModal = true; this.showPopup = false; + this.image = [addImageIcon]; }, changeOpenPopup() { this.showPopup = true; @@ -345,14 +363,13 @@ export default { } return true; }, - check() { - this.showPopup = false; - }, }, - showModal: function () { - if (this.showModal === false) { - this.check(); - } + watch: { + showModal: function () { + if (this.showModal === false) { + this.closeModal(); + } + }, }, }; @@ -365,8 +382,10 @@ export default { width: 634px min-height: 700px box-shadow: var(--default-shadow) + .title color: var(--font-dark-blue-color) + .export-avatar min-width: 40px height: 40px @@ -376,6 +395,7 @@ export default { &:hover color: var(--default-white) background-color: var(--btn-blue-color) + .title-info color: var(--font-grey-color) border-bottom: 1.5px solid var(--font-grey-color) @@ -385,27 +405,28 @@ export default { &.active color: var(--btn-blue-color) border-bottom: 1.5px solid var(--btn-blue-color) -.form-avatar - width: 1221px - height: 793px -.avatar-block + +.avatar-wrapper width: 400px height: 400px border-radius: 50% + .input width: 100% height: 100% border-radius: 50% - overflow: hidden z-index: 5 opacity: 0 cursor: pointer + .avatar - cursor: pointer - width: 100% height: 100% border-radius: 50% - // background-image: url("../../assets/icons/photo.svg") + +.current-avatar + cursor: pointer + height: 100% + border-radius: 50% background-size: cover background-repeat: no-repeat background-position: center diff --git a/src/pages/clients/components/ClientDetailInfoSection.vue b/src/pages/clients/components/ClientDetailInfoSection.vue index dad72ae..fe42fff 100644 --- a/src/pages/clients/components/ClientDetailInfoSection.vue +++ b/src/pages/clients/components/ClientDetailInfoSection.vue @@ -1,7 +1,5 @@