WIP Изменила BaseAddingNetwork

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",
-            :selected-option="network.icon",
-            :value="network",
-            :choose-network="chooseOption",
-            :save-network-id="saveNetworkId"
+            :items="networksList",
+            :network="network",
           )
         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,
-  },
-  data() {
-    return {
-      networks: column.find((el) => el.name === "networks"),
-    };
+    networksList: Array,
   },
 };
 </script>

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

@@ -1,40 +1,43 @@
 <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",
-          :id="network.kind",
-          @click.stop="(e) => deleteNetwork(e)"
+          floating,
+          rounded
         )
+          q-btn(
+            icon="app:icon-cancel",
+            size="5px"
+            font-color="white",
+            padding="5px 5px",
+            :id="network.kind",
+            @click.stop="(e) => deleteNetwork(e)"
+          )
     .flex.relative
       q-btn(
         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",
-              :selected-option="getSelectedIcon",
-              :list-adding-networks="getAddingNetworks",
-              :choose-network="chooseNetwork"
+              :items="getAddingNetworks",
+              :network="network",
             )
             .w-fit
               q-btn(
@@ -73,11 +76,8 @@ export default {
   data() {
     return {
       isOpenPopupAdding: false,
-      network: {
-        kind: "TELEGRAM",
-        username: "",
-      },
-      settings: column.find((el) => el.name === "networks"),
+      network: {},
+      settings: column.find((el) => el.name === "networks")?.settings,
     };
   },
   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;
-      this.network = {
-        kind: "TELEGRAM",
-        username: "",
-      };
     },
-    openPopupAdding() {
-      this.isOpenPopupAdding = true;
+  },
+  watch: {
+    isOpenPopupAdding(newValue) {
+      if (newValue === true && this.getAddingNetworks[0]) {
+        this.network = {
+          kind: {
+            id: this.getAddingNetworks[0]?.id,
+            icon: this.getAddingNetworks[0]?.icon,
+          },
+          username: "",
+        };
+      }
     },
   },
 };
@@ -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>