WIP Изменила BaseAddingNetwork

src/components/HeaderInputs.vue

@@ -13,10 +13,10 @@
           .icon-wrapper.mr-2.flex.justify-center
             .icon-ok.text-xs.flex.justify-center.items-center(v-if="filter === selectedFilter")
           .flex.items-center {{ filter }}
-    base-input.p-4(
+    q-input.px-4(
       type="text",
       placeholder="Искать ...",
-      text-color="var(--btn-blue-color)",
+      :input-style="{color: 'var(--btn-blue-color)'}",
       borderless,
       square
     )
@@ -109,4 +109,7 @@ export default {
 .icon-down-arrow
   width: 16px
   height: 16px
+
+.input-height
+  height: 38px
 </style>

src/components/base/BaseAddingNetwork.vue

@@ -1,25 +1,34 @@
 <template lang="pug">
   .flex.w-full(class="gap-x-1.5")
-    .flex(:id="value.id" @click="(e) => saveNetworkId(e)")
+    base-select(:items="items", v-model="network.kind")  
-      base-select-networks(:style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
+    base-input.w-full(v-model="network.username", placeholder="Ссылкa", outlined)
-    base-input.w-full(v-model="value.username", placeholder="Ссылкa" outlined)
 </template>
 
 <script>
-import BaseSelectNetworks from "@/components/base/BaseSelectNetworks";
 import BaseInput from "@/components/base/BaseInput";
+import BaseSelect from "@/components/base/BaseSelect.vue";
 export default {
   name: "TableAddingNetwork",
-  components: { BaseInput, BaseSelectNetworks },
+  components: { BaseInput, BaseSelect },
   props: {
-    saveNetworkId: {
+    items: {
-      type: Function,
+      type: Array,
+      default: () => [],
+    },
+    network: {
+      type: Object,
       default: () => {},
     },
-    selectedOption: String,
+  },
-    value: Object,
+  computed: {
-    listAddingNetworks: Array,
+    networkInternal: {
-    chooseNetwork: Function,
+      get() {
+        return this.network;
+      },
+      set(val) {
+        this.$emit("update:network", val);
+      },
+    },
   },
 };
 </script>

src/components/base/BaseClientFormCreate.vue

@@ -76,14 +76,12 @@
         :basic-info="infoClient.basic",
         :phone="infoClient.phone",
         :email="infoClient.email",
-          :save-network-id="saveNetworkId",
         :add-network="addNewNetwork",
-          :choose-option="chooseOptionNetworks",
-          :choose-priority="choosePriority",
         :priority-list="priorityList",
         :identity-document="infoClient.identity_document",
         :addresses="infoClient.addresses",
         :save-file="saveDocFile",
+        :networks-list="getNetworksList",
       )
       q-btn(
         label="Создать клиента",
@@ -129,7 +127,7 @@ export default {
   mixins: [v_model],
   data() {
     return {
-      networksSettings: column.find((el) => el.name === "networks"),
+      networksSettings: column.find((el) => el.name === "networks")?.settings,
       prioritySettings: column.find((el) => el.name === "priority"),
       networkId: "",
       infoClient: {
@@ -142,10 +140,11 @@ export default {
           },
           contacts: [
             {
-              id: "network",
+              kind: {
-              kind: "TELEGRAM",
+                id: "TELEGRAM",
+                icon: "app:icon-tg",
+              },
               username: "",
-              icon: "icon-tg",
             },
           ],
         },
@@ -240,6 +239,16 @@ export default {
         return { label: el.text, id: el.id };
       });
     },
+    getNetworksList() {
+      let contacts = [];
+      this.infoClient.basic.contacts.forEach((elem) =>
+        contacts.push(elem.kind.id)
+      );
+      let filteredNetworks = this.networksSettings.filter(
+        ({ id }) => !contacts.includes(id)
+      );
+      return filteredNetworks;
+    },
   },
   methods: {
     previewImage(event) {
@@ -262,6 +271,7 @@ export default {
       !this.showModal ? this.closeForm() : null;
     },
     createIdentityDocument(id) {
+      let doc = null;
       let filteredData = Object.keys(
         this.filterDataEmptyProperty(this.infoClient.identity_document.pass)
       );
@@ -281,9 +291,12 @@ export default {
             "Паспортные данные не будут записаны в профиль клиента"
           );
         } else
-          fetchWrapper.post("general/identity_document/create/", {
+          fetchWrapper
-            series_number: this.infoClient.identity_document.pass.series_number,
+            .post("general/identity_document/create/", {
-            issued_by_org: this.infoClient.identity_document.pass.issued_by_org,
+              series_number:
+                this.infoClient.identity_document.pass.series_number,
+              issued_by_org:
+                this.infoClient.identity_document.pass.issued_by_org,
               issued_by_date: moment(
                 this.infoClient.identity_document.pass.issued_by_date
               ).format("YYYY-MM-DD"),
@@ -291,36 +304,49 @@ export default {
                 this.infoClient.identity_document.pass.issued_by_org_code,
               person: id,
               kind: "Паспорт",
-          });
+            })
+            .then((res) => (doc = res));
+        return Promise.resolve(doc);
       }
     },
     createAddress(id) {
+      let address = null;
       Object.keys(this.filterDataEmptyProperty(this.infoClient.addresses))
         .length > 0 &&
-        fetchWrapper.post("general/address/create/", {
+        fetchWrapper
+          .post("general/address/create/", {
             ...this.filterDataEmptyProperty(this.infoClient.addresses),
             person: id,
-        });
+          })
+          .then((res) => (address = res));
+      return Promise.resolve(address);
     },
-    createContacts(id) {
+    async createContacts(id) {
+      let phone = null,
+        email = null,
+        contacts = [];
       if (this.infoClient.phone.username)
-        fetchWrapper.post("general/contact/create/", {
+        phone = await fetchWrapper.post("general/contact/create/", {
           ...this.filterDataEmptyProperty(this.infoClient.phone),
           person: id,
         });
       if (this.infoClient.email.username)
-        fetchWrapper.post("general/contact/create/", {
+        email = await fetchWrapper.post("general/contact/create/", {
           ...this.filterDataEmptyProperty(this.infoClient.email),
           person: id,
         });
       this.infoClient.basic.contacts.forEach((el) => {
         if (el.username)
-          fetchWrapper.post("general/contact/create/", {
+          fetchWrapper
-            kind: el.kind,
+            .post("general/contact/create/", {
+              kind: el.kind.id,
               username: el.username,
               person: id,
+            })
+            .then((res) => contacts.push(res));
       });
-      });
+      console.log(Promise.allSettled([phone, email, contacts]));
+      return Promise.allSettled([phone, email, contacts]);
     },
     postNewClient() {
       const formData = new FormData();
@@ -340,12 +366,16 @@ export default {
         .post("general/person/create/", formData, "formData")
         .then((result) => {
           if (result.id) {
-            this.createIdentityDocument(result.id);
+            Promise.allSettled([
-            this.createAddress(result.id);
+              this.createIdentityDocument(result.id),
-            this.createContacts(result.id);
+              this.createAddress(result.id),
+              this.createContacts(result.id),
+            ]).then((res) => {
+              console.log(res);
               this.writeCreatedClientId(result.id);
               this.setUpdatedClients();
               this.addSuccessNotification();
+            });
           } else {
             this.addErrorNotification(
               "Клиент не создан",
@@ -364,13 +394,10 @@ export default {
       });
       return postData;
     },
-    saveNetworkId(e) {
-      this.networkId = e.currentTarget.id;
-    },
     choosePriority(e) {
       this.infoClient.basic.priority = e.target.id;
     },
-    chooseOptionNetworks(e) {
+    /*chooseOptionNetworks(e) {
       let index = this.infoClient.basic.contacts.findIndex(
         (el) => el.id === this.networkId
       );
@@ -379,7 +406,7 @@ export default {
       ).icon;
       this.infoClient.basic.contacts[index].kind = e.target.id;
       this.infoClient.basic.contacts[index].icon = icon;
-    },
+    },*/
     saveClient() {
       if (this.checkFormFullness()) {
         this.postNewClient();
@@ -407,13 +434,14 @@ export default {
       });
     },
     addNewNetwork() {
+      const newNetwork = this.getNetworksList;
+      if (newNetwork[0])
         this.infoClient.basic.contacts.push({
-        id:
+          kind: {
-          this.infoClient.basic.contacts[0].id +
+            id: newNetwork[0].id,
-          this.infoClient.basic.contacts.length,
+            icon: newNetwork[0].icon,
-        kind: "TELEGRAM",
+          },
           username: "",
-        icon: "icon-tg",
         });
     },
     selectForm(componentName) {

src/components/base/BaseSelect.vue

@@ -13,7 +13,19 @@
         map-options
       )
         template(v-slot:selected)
-          span {{ textSelect }}
+          span(v-if="!value.icon") {{ textSelect }}
+          q-icon(
+            v-else,
+            :name="iconSelect",
+            size="20px"
+          )
+        template(
+          v-slot:option="scope",
+          v-if="value.icon"
+        )
+          q-item(v-bind="scope.itemProps", style="justify-content: center")
+            q-item-section(avatar, style="padding: 0px; min-width: 0px")
+              q-icon(:name="scope.opt.icon", size="20px")
 </template>
 
 <script>
@@ -55,6 +67,9 @@ export default {
     textSelect() {
       return this.value.label ? this.value.label : this.placeholder;
     },
+    iconSelect() {
+      return this.value?.icon ? this.value.icon : this.placeholder;
+    },
   },
 };
 </script>

src/pages/clients/components/ClientsTableRow.vue

@@ -381,11 +381,14 @@ export default {
       });
     },
     addNetwork(network) {
-      this.dataClient.contacts.push(network);
+      this.dataClient.contacts.push({
+        kind: network.kind?.id,
+        username: network.username,
+      });
     },
     deleteNetwork(e) {
       this.dataClient.contacts = this.dataClient.contacts.filter(
-        (el) => el.kind !== e.target.id
+        (el) => el.kind !== e.currentTarget.id
       );
     },
     choosePriority(e) {

src/pages/clients/components/FormCreateBasicInfo.vue

@@ -28,16 +28,13 @@
       )
       .flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
         span.text-sm.font-semibold.opacity-40.input-info Ссылки на соцсети
-        .flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.id")
+        .flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.kind.id")
           base-adding-network(
-            :list-adding-networks="networks.settings",
+            :items="networksList",
-            :selected-option="network.icon",
+            :network="network",
-            :value="network",
-            :choose-network="chooseOption",
-            :save-network-id="saveNetworkId"
           )
         span.add-network.cursor-pointer(
-          v-show="networks.settings.length !== basicInfo.contacts.length",
+          v-show="networksList.length !== 0",
           @click="addNetwork"
         ) Добавить соцсеть
 </template>
@@ -45,7 +42,6 @@
 <script>
 import BaseInput from "@/components/base/BaseInput";
 import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
-import { column } from "@/pages/clients/utils/tableConfig";
 import BaseSelect from "@/components/base/BaseSelect";
 
 export default {
@@ -56,20 +52,13 @@ export default {
     BaseSelect,
   },
   props: {
-    choosePriority: Function,
     priorityList: Array,
-    saveNetworkId: Function,
-    chooseOption: Function,
     phone: Object,
     email: Object,
     basicInfo: Object,
     saveClient: Function,
     addNetwork: Function,
-  },
+    networksList: Array,
-  data() {
-    return {
-      networks: column.find((el) => el.name === "networks"),
-    };
   },
 };
 </script>

src/pages/clients/components/cells/TableCellBodyNetworks.vue

@@ -1,12 +1,23 @@
 <template lang="pug">
   .flex.box-border.px-4.items-center.w-full(:style="{ width: width + 'px'}")
     .flex.gap-x-1
-      .text-xl.icon.relative(
+      q-icon(
         v-for="network in getNetworks",
-        :class="settings.settings.find((el) => el.network === network.kind)?.icon || ''"
+        :name="settings.find((el) => el.id === network.kind)?.icon || ''",
+        size="20px", 
+        class="icon",
+        :id="`icon-${network.kind}`"
       )
-        .absolute.icon-cancel-mini.delete.flex.w-4.h-4.justify-center.items-center.bottom-4.left-2(
+        q-badge.delete(
           v-if="isOpenChange",
+          floating,
+          rounded
+        )
+          q-btn(
+            icon="app:icon-cancel",
+            size="5px"
+            font-color="white",
+            padding="5px 5px",
             :id="network.kind",
             @click.stop="(e) => deleteNetwork(e)"
           )
@@ -15,26 +26,18 @@
         icon="add",
         size="14px",
         class="add-button"
-        v-if="isOpenChange && settings.settings.length !== getNetworks.length",
+        v-if="isOpenChange && settings.length !== getNetworks.length",
         @click.stop
         round,
         dense,
         no-caps,
         padding="1px"
       )
-        //base-popup.right-3.top-6.z-20(
-          v-if="isOpenPopupAdding",
-          @click.stop,
-          v-click-outside="closePopup",
-          :width="485"
-        //)
         q-menu(v-model="isOpenPopupAdding", anchor="bottom left", self="top right")
           .menu-wrapper.flex.flex-col.gap-y-3.p-4
             base-adding-network(
-              :value="network",
+              :items="getAddingNetworks",
-              :selected-option="getSelectedIcon",
+              :network="network",
-              :list-adding-networks="getAddingNetworks",
-              :choose-network="chooseNetwork"
             )
             .w-fit
               q-btn(
@@ -73,11 +76,8 @@ export default {
   data() {
     return {
       isOpenPopupAdding: false,
-      network: {
+      network: {},
-        kind: "TELEGRAM",
+      settings: column.find((el) => el.name === "networks")?.settings,
-        username: "",
-      },
-      settings: column.find((el) => el.name === "networks"),
     };
   },
   computed: {
@@ -86,33 +86,31 @@ export default {
         (el) => el.kind !== "EMAIL" && el.kind !== "PHONE"
       );
     },
-    getSelectedIcon() {
-      return this.settings.settings.find(
-        (el) => el.network === this.network.kind
-      ).icon;
-    },
     getAddingNetworks() {
       let kinds = this.networks.map((el) => el.kind);
-      return this.settings.settings.filter((el) => !kinds.includes(el.network));
+      return this.settings.filter((el) => !kinds.includes(el.id));
     },
   },
   methods: {
-    chooseNetwork(e) {
-      this.network.kind = e.target.id;
-    },
     closePopup() {
       this.isOpenPopupAdding = false;
     },
     saveNetwork() {
       this.addNetwork(this.network);
       this.isOpenPopupAdding = false;
+    },
+  },
+  watch: {
+    isOpenPopupAdding(newValue) {
+      if (newValue === true && this.getAddingNetworks[0]) {
         this.network = {
-        kind: "TELEGRAM",
+          kind: {
+            id: this.getAddingNetworks[0]?.id,
+            icon: this.getAddingNetworks[0]?.icon,
+          },
           username: "",
         };
-    },
+      }
-    openPopupAdding() {
-      this.isOpenPopupAdding = true;
     },
   },
 };
@@ -122,12 +120,10 @@ export default {
 .icon
   color: var(--btn-blue-color)
   &:last-child
-    padding-right: 46px
+    padding-right: 0
+    margin-right: 46px
 .delete
-  border-radius: 50%
   background-color: var(--btn-red-color)
-  color: var(--default-white)
-  font-size: 8px
 .add-button
   border: 2px solid var(--btn-blue-color)
   color: var(--btn-blue-color)
@@ -136,4 +132,9 @@ export default {
     color: var(--default-white)
 .menu-wrapper
   width: 484px
+.q-badge
+  padding: 0
+.q-badge--floating
+  top: -8px
+  right: -6px
 </style>

src/pages/clients/utils/tableConfig.js

@@ -66,32 +66,32 @@ export const column = [
     title: "Сети",
     settings: [
       {
-        network: "VK",
+        id: "VK",
-        icon: "icon-vk",
+        icon: "app:icon-vk",
       },
       {
-        network: "TELEGRAM",
+        id: "TELEGRAM",
-        icon: "icon-tg",
+        icon: "app:icon-tg",
       },
       {
-        network: "GMAIL",
+        id: "GMAIL",
-        icon: "icon-google",
+        icon: "app:icon-google",
       },
       {
-        network: "SLACK",
+        id: "SLACK",
-        icon: "icon-slack",
+        icon: "app:icon-slack",
       },
       {
-        network: "DISCORD",
+        id: "DISCORD",
-        icon: "icon-discord",
+        icon: "app:icon-discord",
       },
       {
-        network: "VIBER",
+        id: "VIBER",
-        icon: "icon-mail",
+        icon: "wifi_calling_3",
       },
       {
-        network: "WHATS_APP",
+        id: "WHATS_APP",
-        icon: "icon-mail",
+        icon: "call",
       },
     ],
     iconHead: false,