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>

src/components/base/BaseModal.vue

@@ -1,36 +1,22 @@
 <template lang="pug">
-  teleport(:to="appContainer")
-    transition
-      .base-overlay(:class="{'base-overlay-bg': !hideOverlay}", :style="styleOverlay", v-if="value")
-        .base-content(v-click-outside="clickOutside", :style="styleContent")
-          .base-header
-            .header-title.text {{ title }}
-            .icon-cancel.text-sm(@click="value = false", v-if="!showIcon")
-          slot
-
+  q-dialog(v-model="value")
+    .base-content
+      .base-header
+        .header-title.text {{ title }}
+        .icon-cancel.text-sm(@click="value = false", v-if="!showIcon")
+      slot
 </template>
 
 <script>
 export default {
   name: "BaseModal",
   props: {
-    hideOverlay: Boolean,
-    styleOverlay: Object,
-    styleContent: Object,
     title: String,
     modelValue: Boolean,
     showIcon: Boolean,
   },
   emits: ["update:modelValue"],
-  methods: {
-    clickOutside() {
-      this.value = false;
-    },
-  },
   computed: {
-    appContainer() {
-      return this.$.appContext.app._container;
-    },
     value: {
       get() {
         return this.modelValue;
@@ -43,7 +29,7 @@ export default {
 };
 </script>
 
-<style scoped lang="sass">
+<style lang="sass" scoped>
 .base-overlay
   z-index: 10000
   position: absolute
@@ -53,12 +39,8 @@ export default {
   justify-content: center
   align-items: center
 
-.base-overlay-bg
-  background: rgba(37, 40, 80, 0.2)
-  backdrop-filter: blur(4px)
-  width: 100vw
-  height: 100vh
 .base-content
+  width: auto
   padding: 32px 40px
   background-color: var(--default-white)
   box-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
@@ -78,13 +60,13 @@ export default {
   margin-right: -11px
   cursor: pointer
   color: var(--font-grey-color)
-
-.v-enter-active,
-.v-leave-active
-  transition: opacity 0.3s ease-in-out
-
-
-.v-enter-from,
-.v-leave-to
-  opacity: 0
+</style>
+<style lang="sass">
+.q-dialog__backdrop
+  background: rgba(37, 40, 80, 0.2) !important
+  backdrop-filter: blur(4px) !important
+
+@media (min-width: 600px)
+  .q-dialog__inner--minimized > div
+    max-width: 100vh !important
 </style>