Merge branch 'UC-209' into 'master'

WIP Исправление всплывающего окна на странице клиентов в процессе

See merge request andrusyakka/urban-couscous!257

src/components/TheSidebar.vue

@@ -3,7 +3,7 @@
     :style="{borderTopRightRadius: this.currenPageBorder ? '0px' : '4px'}"
   )
     .flex.flex-col.gap-y-6
-      the-button-sidebar(
+      base-button-sidebar(
         v-for="button in pageSettings.filter((el) => el.id !== 'settings')",
         :path="button.path",
         :id="button.id",
@@ -12,7 +12,7 @@
       )
         q-icon(:name="`app:${button.icon}`", size="36px")
     .flex.text-4xl.flex-col.gap-y-6
-      the-button-sidebar(
+      base-button-sidebar(
         :path="getSettings.path",
         :id="getSettings.id",
         :active="getSettings.active",
@@ -22,11 +22,11 @@
 </template>
 
 <script>
-import TheButtonSidebar from "@/components/base/BaseSidebarButton";
+import BaseButtonSidebar from "@/components/base/BaseSidebarButton";
 
 export default {
   name: "TheSidebar",
-  components: { TheButtonSidebar },
+  components: { BaseButtonSidebar },
   data() {
     return {
       pageSettings: [

src/components/base/BaseClientFormCreate.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
-  .wrapper-create.flex.flex-col.fixed.right-6.bottom-6.px-4.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.px-4 Создание клиента
+    span.title.text-xl.font-bold Создание клиента
-    .flex.gap-x-4.h-fit.px-4
+    .flex.gap-x-4.h-fit
       .flex.gap-x-3.w-full
         q-btn.relative(
           color="secondary",
@@ -55,42 +55,35 @@
                   )
         base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*")
     .flex.flex-col.flex-auto.l.gap-y-8
-      .flex.px-4
+      .flex
         button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
-          v-for="info in listInfoTitle",
+          v-for="form in forms",
-          @click="(e) => selectTab(e)",
+          @click="selectForm(form.component)",
-          :class="{active:info.active}",
+          :class="{active: form.component === currentForm}",
-          :key="info.key" :id="info.key"
+          :key="form.id",
-        ) {{info.title}}
+          :id="form.id"
-      .flex(:style="{display :'block'}" ref="basic")
+        ) {{form.title}}
-        form-create-basic-info(
+      component(
-          :basic-info="infoClient.basic"
+        v-bind:is="currentForm",
-          :phone="infoClient.phone"
+        :basic-info="infoClient.basic",
-          :email="infoClient.email"
+        :phone="infoClient.phone",
-          :save-network-id="saveNetworkId"
+        :email="infoClient.email",
-          :add-network="addNewNetwork"
+        :save-network-id="saveNetworkId",
-          :save-client="saveClient"
+        :add-network="addNewNetwork",
-          :choose-option="chooseOptionNetworks"
+        :choose-option="chooseOptionNetworks",
-          :choose-priority="choosePriority"
+        :choose-priority="choosePriority",
-          :priority-list="priorityList"
+        :priority-list="priorityList",
-        )
-      .flex(:style="{display :'none'}" ref="doc")
-        form-create-identity-documents(
         :identity-document="infoClient.identity_document",
-          :save-client="saveClient"
-        )
-      .flex(:style="{display :'none'}" ref="address")
-        form-create-addresses(
         :addresses="infoClient.addresses",
         :save-file="saveDocFile",
-          :save-client="saveClient"
       )
-      .flex(:style="{display :'none'}" ref="additional")
+      q-btn(
-        form-create-additional(
+        label="Создать клиента",
-          :additional-info="infoClient.additional",
+        color="primary",
-          :add-new-additional="addNewAdditionalInfo",
+        style="height: 40px; width: 180px",
-          :save-file="saveAdditionalFiles",
+        no-caps,
-          :save-client="saveClient"
+        padding="8px 24px",
+        @click="saveClient",
       )
 </template>
 
@@ -190,23 +183,24 @@ export default {
           },
         ],
       },
-      listInfoTitle: [
+      forms: [
         {
           title: "Основное",
-          key: "basic",
+          id: "basic",
-          active: true,
+          component: "form-create-basic-info",
         },
         {
           title: "ДУЛ",
-          key: "doc",
+          id: "doc",
-          active: false,
+          component: "form-create-identity-documents",
         },
         {
           title: "Адрес",
-          key: "address",
+          id: "address",
-          active: false,
+          component: "form-create-addresses",
         },
       ],
+      currentForm: "form-create-basic-info",
       priorityList: [
         {
           id: 1,
@@ -422,7 +416,7 @@ export default {
         icon: "icon-tg",
       });
     },
-    selectTab(event) {
+    /*selectTab(event) {
       this.listInfoTitle.forEach((el) => {
         if (el.key === event.target.id) {
           el.active = true;
@@ -432,6 +426,11 @@ export default {
           this.$refs[el.key].style.display = "none";
         }
       });
+    },*/
+    selectForm(componentName) {
+      this.currentForm = this.forms.find(
+        (elem) => elem.component === componentName
+      )?.component;
     },
     checkFormFullness() {
       if (!this.infoClient.basic.full_name) {

src/pages/clients/components/ClientsActionPopup.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
-  .flex.flex-col.absolute.left-2.top-6
+  q-menu(anchor="bottom middle")
-    .corner
+    .popup-wrapper.flex.flex-col.gap-y-3.w-10.h-10.p-4.font-medium.text-sm.cursor-pointer
-    .popup-wrapper.flex.flex-col.gap-y-3.w-10.h-10.p-4
       .button.keep-redaction.flex.gap-x-3(@click="openChangeData")
         .icon-edit.icon
         span Редактировать
@@ -51,10 +50,9 @@ export default {
 <style lang="sass" scoped>
 .popup-wrapper
   width: 180px
-  height: 164px
+  height: auto
   border-radius: 0 4px 4px 4px
   background-color: var(--default-white)
-  box-shadow: var(--default-shadow)
   z-index: 11
 .keep-redaction
   color: var(--font-dark-blue-color)
@@ -65,13 +63,6 @@ export default {
 .button
   &:hover
     opacity: 0.7
-.corner
-  width: 8px
-  height: 8px
-  background: url("@/assets/icons/exclude.svg") right no-repeat
-  transform: scale(-1, 1)
-  z-index: 12
-  overflow: hidden
 .icon-delete
   color: var(--btn-red-color)
 </style>

src/pages/clients/components/ClientsTableRow.vue

@@ -12,14 +12,24 @@
         :class="{'row-overlay-color': rowOverlay}"
       )
         .dots-wrapper.flex.items-center.px-2
-          .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(
+          //.relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(
             v-show="!isOpenChange && !rowOverlay",
             :tabindex="1",
             @click="(e) => openPopup(e)",
             @blur="handleUnFocusPopup"
+          //)
+          q-btn(
+            icon="app:icon-dots",
+            size="12px",
+            class="dots-button",
+            @click.stop,
+            v-show="!isOpenChange && !rowOverlay",
+            round,
+            dense,
+            no-caps,
+            padding="2px"
           )
             clients-action-popup(
-              v-if="isOpenPopup",
               :open-change-data="openChangeData",
               :disabled-delete="!!deletedClientId && !rowOverlay",
               @delete-client="transmitDeleteClient",
@@ -125,7 +135,6 @@ import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
 import ClientDetailInfoWrapper from "@/pages/clients/components/ClientDetailInfoWrapper";
 import BaseButton from "@/components/base/BaseButton";
-import BaseModal from "@/components/base/BaseModal";
 import { fetchWrapper } from "@/shared/fetchWrapper";
 import { column } from "@/pages/clients/utils/tableConfig";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
@@ -136,7 +145,6 @@ export default {
   name: "ClientsTableRow",
   components: {
     BaseButton,
-    BaseModal,
     ClientsTableCheckbox,
     ClientsActionPopup,
     TableCellBodyName,
@@ -765,9 +773,6 @@ export default {
 .dots
   min-width: 14px
 .dots-button
-  width: 20px
-  height: 20px
-  border-radius: 50%
   color: var(--font-grey-color)
   &:hover
     background-color: var(--btn-blue-color)

src/pages/clients/components/FormCreateAddresses.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .wrapper-addresses.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
+  .wrapper-addresses.h-full
-    .flex.flex-col.gap-y-6.px-4
+    .flex.flex-col.gap-y-6
       base-input(
         v-model="addresses.full_address",
         placeholder="Введите адрес целиком",
@@ -53,9 +53,6 @@
           v-model="addresses.zip_code",
           label="Индекс"
         )
-    .px-4
-      base-button(@click="saveClient" :size="40")
-        span.font-semibold Создать клиента
 </template>
 
 <script>
@@ -76,8 +73,7 @@ export default {
 
 <style lang="sass" scoped>
 .wrapper-addresses
-  min-height: 443px
+  height: 368px
-  max-height: 443px
   overflow-y: auto
   &::-webkit-scrollbar
     width: 4px

src/pages/clients/components/FormCreateBasicInfo.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .wrapper-info.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
+  .wrapper-info.h-full
-    .grid.grid-cols-2.gap-x-4.gap-y-6.px-4
+    .grid.grid-cols-2.gap-x-4.gap-y-6
       base-custom-select.input-info(
         :items="priorityList",
         placeholder="Приоритет клиента",
@@ -37,9 +37,6 @@
           v-show="networks.settings.length !== basicInfo.contacts.length",
           @click="addNetwork"
         ) Добавить соцсеть
-    .px-4
-      base-button(@click="saveClient" :size="40")
-        span.font-semibold Создать клиента
 </template>
 
 <script>
@@ -78,8 +75,8 @@ export default {
 
 <style lang="sass" scoped>
 .wrapper-info
-  min-height: 336px
+  max-height: 336px
-  max-height: 443px
+  min-height: 272px
   overflow-y: auto
   &::-webkit-scrollbar
     width: 4px

src/pages/clients/components/FormCreateIdentityDocuments.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .wrapper-documents.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
+  .wrapper-documents.flex.flex-col.flex-auto.h-full.gap-y-8
-    .flex.flex-col.gap-y-6.px-4
+    .flex.flex-col.gap-y-6
       span.title-info.text-base.font-bold Паспортные данные
       .grid.grid-cols-2.gap-x-4.gap-y-6
         base-input(
@@ -26,7 +26,7 @@
           placeholder="Дата",
           label="Дата выдачи"
         )
-    .flex.flex-col.gap-y-6.px-4
+    .flex.flex-col.gap-y-6
       span.title-info.text-base.font-bold СНИЛС и ИНН
       .grid.grid-cols-2.gap-x-4.gap-y-6
         base-input(
@@ -45,9 +45,6 @@
           placeholder="000000000000",
           label="Номер ИНН"
         )
-    .px-4
-      base-button(@click="saveClient" :size="40")
-        span.font-semibold Создать клиента
 </template>
 
 <script>
@@ -66,8 +63,7 @@ export default {
 
 <style lang="sass" scoped>
 .wrapper-documents
-  min-height: 443px
+  height: 338px
-  max-height: 443px
   overflow-y: auto
   &::-webkit-scrollbar
     width: 4px