WIP Почти доделана форма создания клиента

src/components/base/BaseClientFormCreate.vue

@@ -1,23 +1,19 @@
 <template lang="pug">
-  .wrapper-create.flex.flex-col.fixed.right-6.bottom-6.px-8.py-7.gap-y-8(
-    v-click-outside="closeModal"
-  )
+  .wrapper-create.flex.flex-col.fixed.right-6.bottom-6.px-8.py-7.gap-y-8
     .icon-cancel.close.absolute.top-5.right-5.cursor-pointer(@click="closeForm")
     span.title.text-xl.font-bold Создание клиента
     .flex.gap-x-4.h-fit
       .flex.gap-x-3.w-full
-        q-btn.relative(
+        q-btn(
           color="secondary",
           text-color="primary",
-          v-for="img in image",
-          @click="changeOpenPopup",
           style="width: 40px; height: 40px",
           rounded
           no-caps
           padding="0 16px"
         )
           q-icon(
-            v-if="img === defaultIcon"
+            v-if="image === defaultIcon"
             name="app:icon-download",
           )
           q-avatar(
@@ -25,28 +21,41 @@
             size="40px",
             round
           )
-            img(:src="img")
-          base-popup.right-5.top-7(v-if="showPopup", v-click-outside="closePopup", :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 Сделать фото
+            img(:src="image")
+          q-menu(
+            anchor="bottom middle",
+            self="top right",
+            v-model="showPopup"
+          )
+            .flex.flex-col.p-4.gap-y-3
+              .flex.items-center.gap-x-2.cursor-pointer(@click="changeOpenModal")
+                q-icon(
+                  name="app:computer",
+                  size="18px",
+                  color="primary"
+                )
+                span.text-smm.title Загрузить с компьютера
+              .flex.items-center.gap-x-2.cursor-pointer
+                q-icon(
+                  name="app:camera",
+                  size="18px",
+                  color="primary"
+                )
+                span.text-smm.title Сделать фото
           base-modal(v-model="showModal", title="Загрузить изображение")
             .flex.flex-col.items-center.justify-center(
               :style="{padding: '153px 370px'}"
-              )
+            )
               .avatar-wrapper.flex.relative
                 base-input(
                   circle,
                   type="file",
                   id="image-upload",
                   accept="image/*",
-                  @change="(e) => previewImages(e)"
+                  @change="(e) => previewImage(e)"
                 )
-                .avatar.flex.absolute.items-center.gap-x-6(v-for="img in image")
-                  img.avatar.object-cover(for="image-upload", :src="img", v-if="img")
+                .avatar.flex.absolute.items-center.gap-x-6
+                  img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
                   q-btn(
                     round,
                     color="primary",
@@ -114,9 +123,10 @@ export default {
     TheNotificationProvider,
   },
   props: {
-    closeForm: Function,
+    //closeForm: Function,
     setUpdatedClients: Function,
     writeCreatedClientId: Function,
+    modelValue: Boolean,
   },
   data() {
     return {
@@ -221,8 +231,8 @@ export default {
       defaultIcon: addImageIcon,
       showModal: false,
       showPopup: false,
-      image: [addImageIcon],
-      imageData: [],
+      image: addImageIcon,
+      imageData: null,
     };
   },
   computed: {
@@ -233,17 +243,17 @@ export default {
     },
   },
   methods: {
-    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]);
-      }
-      this.imageData = [...this.imageData, ...event.target.files];
+    closeForm() {
+      this.$emit("update:model-value", false);
+    },
+    previewImage(event) {
+      let picture = event.target.files;
+      let reader = new FileReader();
+      reader.onload = (e) => {
+        this.image = e.target.result;
+      };
+      reader.readAsDataURL(picture[0]);
+      this.imageData = [...event.target.files];
     },
     closeAddImage() {
       this.showModal = false;
@@ -319,9 +329,7 @@ export default {
     postNewClient() {
       const formData = new FormData();
       formData.append("full_name", this.infoClient.basic.full_name);
-      this.imageData.forEach((e) => {
-        formData.append("photo", e);
-      });
+      formData.append("photo", this.imageData[0]);
       if (this.infoClient.basic.birth_date)
         formData.append(
           "birth_date",
@@ -386,9 +394,9 @@ export default {
       this.showModal = true;
       this.showPopup = false;
     },
-    changeOpenPopup() {
+    /*changeOpenPopup() {
       this.showPopup = true;
-    },
+    },*/
     saveDocFile(e) {
       this.infoClient.doc = e.target.files;
     },
@@ -529,4 +537,12 @@ export default {
   background-repeat: no-repeat
   background-position: center
   background-image: url(@/assets/icons/download.svg)
+
+.modal
+  max-width: 1220px
+  max-height: 794px
+  width: 1220px
+  height: 794px
+  background-color: var(--default-white)
+  //padding: 32px 370px 153px 370px
 </style>