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

src/components/LoggedInLayout.vue

@@ -4,6 +4,7 @@
       :url="url",
       :is-open-form="isOpenForm",
       :close-form="closeForm",
+      :open-form="openForm",
       :set-updated-clients="setUpdatedClients",
       :write-created-client-id="writeCreatedClientId"
     )
@@ -38,13 +39,10 @@ export default {
   },
   methods: {
     openForm() {
-      console.log("before open", this.isOpenForm);
       this.isOpenForm = true;
-      console.log("after open", this.isOpenForm);
     },
     closeForm() {
       this.isOpenForm = false;
-      console.log("close", this.isOpenForm);
     },
     setUpdatedClients() {
       if (this.$router.currentRoute._value.path === "/clients")
@@ -59,14 +57,5 @@ export default {
         this.createdClientId = id;
     },
   },
-  watch: {
-    isOpenForm: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        console.log("layout", newValue, oldValue);
-      },
-    },
-  },
 };
 </script>

src/components/TheHeader.vue

@@ -1,12 +1,5 @@
 <template lang="pug">
   .header-wrapper.relative.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
-    transition(name="form")
-      base-client-form-create(
-        v-if="isOpenForm",
-        :close-form="closeForm",
-        :set-updated-clients="setUpdatedClients",
-        :write-created-client-id="writeCreatedClientId",
-      )
     .flex.items-center.box-border.cursor-pointer.mr-auto
       img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
       header-inputs
@@ -15,7 +8,6 @@
         color="primary",
         dense,
         padding="4px 22px",
-         @click="openForm"
       )
         q-icon(
           name="app:icon-plus",
@@ -27,6 +19,14 @@
           size="18px",
           style="margin-left: 4px"
         )
+        q-menu(
+          v-model="isOpenFormInternal",
+        )
+          base-client-form-create(
+            v-model="isOpenFormInternal",
+            :set-updated-clients="setUpdatedClients",
+            :write-created-client-id="writeCreatedClientId",
+          )
       q-btn.mr-8(
         flat,
         dense,
@@ -34,7 +34,7 @@
         padding="4px 8px"
         icon="app:icon-bell",
         size="18px",
-        round
+        round,
       )  
       .flex.justify-centflexer.items-center.relative
         base-avatar.mr-2(:size="36", :color="userData?.color", v-if="!userData?.photo") {{changeName}}       
@@ -75,8 +75,8 @@ export default {
   },
   props: {
     url: String,
-    openForm: Function,
     closeForm: Function,
+    openForm: Function,
     isOpenForm: Boolean,
     setUpdatedClients: Function,
     writeCreatedClientId: Function,
@@ -98,6 +98,15 @@ export default {
         this.userData?.first_name || ""
       } ${this.userData?.patronymic || ""}`;
     },
+    isOpenFormInternal: {
+      get() {
+        return this.isOpenForm;
+      },
+      set(val) {
+        if (!val) this.closeForm();
+        else this.openForm();
+      },
+    },
   },
   methods: {
     logout() {

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(
+  .wrapper-create.flex.flex-col.fixed.right-6.bottom-6.px-8.py-7.gap-y-8
-    v-click-outside="closeModal"
-  )
     .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,14 +21,27 @@
             size="40px",
             round
           )
-            img(:src="img")
+            img(:src="image")
-          base-popup.right-5.top-7(v-if="showPopup", v-click-outside="closePopup", :width="230")
+          q-menu(
-            .flex.items-center.gap-x-2
+            anchor="bottom middle",
-              img(src="@/assets/icons/computer.svg")
+            self="top right",
-              span.text-smm(@click="changeOpenModal") Загрузить с компьютера
+            v-model="showPopup"
-            .flex.items-center.gap-x-2
+          )
-              img(src="@/assets/icons/camera.svg")
+            .flex.flex-col.p-4.gap-y-3
-              span.text-smm Сделать фото
+              .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'}"
@@ -43,10 +52,10 @@
                   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")
+                .avatar.flex.absolute.items-center.gap-x-6
-                  img.avatar.object-cover(for="image-upload", :src="img", v-if="img")
+                  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],
+      image: addImageIcon,
-      imageData: [],
+      imageData: null,
     };
   },
   computed: {
@@ -233,17 +243,17 @@ export default {
     },
   },
   methods: {
-    previewImages(event) {
+    closeForm() {
-      this.image = [];
+      this.$emit("update:model-value", false);
-      var pictures = event.target.files;
+    },
-      for (var i = 0; i < pictures.length; i++) {
+    previewImage(event) {
-        var reader = new FileReader();
+      let picture = event.target.files;
+      let reader = new FileReader();
       reader.onload = (e) => {
-          this.image.push(e.target.result);
+        this.image = e.target.result;
       };
-        reader.readAsDataURL(pictures[i]);
+      reader.readAsDataURL(picture[0]);
-      }
+      this.imageData = [...event.target.files];
-      this.imageData = [...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", this.imageData[0]);
-        formData.append("photo", e);
-      });
       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")
+  q-dialog(v-model="value")
-    transition
+    .base-content
-      .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
-
 </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)
-
+</style>
-.v-enter-active,
+<style lang="sass">
-.v-leave-active
+.q-dialog__backdrop
-  transition: opacity 0.3s ease-in-out
+  background: rgba(37, 40, 80, 0.2) !important
-
+  backdrop-filter: blur(4px) !important
-
+
-.v-enter-from,
+@media (min-width: 600px)
-.v-leave-to
+  .q-dialog__inner--minimized > div
-  opacity: 0
+    max-width: 100vh !important
 </style>