WIP Доделал форму Контактов

src/assets/sass/variables.sass

@@ -19,6 +19,7 @@
   --bg-btn-icons-color: rgba(215, 217, 255, 0.6)
   --font-grey-color: #9294a7
   --font-grey-color-0: #85858b
+  --border-grey-color: #c2c2c2
   --border-light-grey-color: #d3d4dc
   --bg-light-grey: #eff1f4
   --row-overlay-color: #f5f6ff
@@ -26,6 +27,7 @@
   --bg-hover-row-table: rgba(215, 217, 255, 0.25)
   --default-white: #fff
   --btn-red-color: #ff6f6f
+  --icon-violet-color: #791984
   --font-obligatory-color: #ff0000
   --bg-event-box-color: rgba(37, 40, 80, 0.1)
   --bg-event-green-color: #24d07d

src/components/base/BaseSelectNetworks.vue

@@ -3,8 +3,10 @@
     @click="changeSelect",
     v-click-outside="closeSelect",
     :class="{border: styleBorder}"
+    :style="{width: sizeInput + 'px'}" 
   )
-    .flex.select.cursor-pointer.w-full.text-xl.items-center.networks(:class="optionData, 'px-2.5'")
+    .flex.select.cursor-pointer.w-full.text-xl.items-center.networks(:class="'px-2.5'")
+      q-icon(:name="listData.find((el) => el.network === optionData)?.icon || placeholder")
       .absolute.options.top-11.left-0(
         v-show="isSelectOpen",
         :id="id"
@@ -14,8 +16,8 @@
           @click="(e) => chooseOption(e)",
           :key="data.network",
           :id="data.network",
-          :class="data.icon"
         )
+          q-icon(:name="data.icon")
     .select-form-separator.cursor-pointer.mr-6px(v-if="separator")
 </template>
 
@@ -62,7 +64,7 @@ export default {
   background-color: var(--default-white)
   &.border
     background-color: var(--default-white)
-    border: 2px solid var(--border-light-grey-color)
+    border: 1.5px solid var(--border-grey-color)
 .select
   appearance: none
   border: none

src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue

@@ -9,26 +9,31 @@
     :open-edit="openEdit"
     )
     .form-wrap.gap-24.w-full
-      .flex.flex-col.gap-4(v-for="(data, key) in contacts")
+      .flex.flex-col.gap-4(v-for="(contact, key) in contacts")
         .font-semibold.text-sm.whitespace-nowrap {{configData[key].title}}
-        .flex.w-full.justify-between.items-center.gap-4(v-for="(value, index) in data")
+        .flex.w-full.justify-between.items-center.gap-4(v-for="(data, index) in contact")
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${configData[key].fieldName} ${index+1} :`}}
           .input-wrapper.items-center.flex.h-10.gap-10px
             .flex(v-if="key === 'networks'")
               .flex.rounded-full.cursor-pointer.items-center.gap-10px.py-1.pl-1.pr-2(
-                v-if="value.kind" 
+                v-if="data.id || data.filled" 
-                @click="() => copyLinkNetwork(value.username)"
+                @click="() => copyLinkNetwork(data.username)"
                 style="background-color: var(--bg-light-grey)"
               )
-                q-icon(:name="mapNetworks[value.kind].icon" style="color: var(--btn-blue-color)")
+                q-icon.icon(:name="mapNetworks[data.kind].icon" :class="{old: data.id, new: data.filled}")
-                span.text-sm.font-medium {{ mapNetworks[value.kind].title || value.username }}
+                span.text-sm.font-medium {{ mapNetworks[data.kind].title || data.username }}
+              .flex.gap-10px(v-else v-click-outside="() => checkNetworksField(index)")
+                base-select-networks(
+                  :list-data="Object.values(mapNetworks)"
+                  :option-data="data.kind"
+                  :choose-option="(e) => chooseNetwork(e, index)"
+                  :style-border="true"
+                  :size-input="50"
+                  )
                 base-input.w-full(
-                v-else
                   :disabled="!isEdit" 
-                v-model="value.username"
+                  v-model="data.username"
                   :mask="configData[key].inputMask"
-                @keyup.enter="(e) => defineNetworkByValue(e, index)",
-                @update:model-value="checkChangeInput"
                   type="text"  
                   :standout="!isEdit" 
                   :outlined="isEdit" 
@@ -37,7 +42,7 @@
             base-input.w-full( 
               v-else
               :disabled="!isEdit" 
-              v-model="value.username"
+              v-model="data.username"
               :mask="configData[key].inputMask"
               @update:model-value="checkChangeInput"
               type="text"  
@@ -60,6 +65,7 @@
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
+import BaseSelectNetworks from "@/components/base/BaseSelectNetworks.vue";
 import { mapNetworks } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { checkChangeData } from "@/shared/utils/changesObjects";
 import { contactsDataForm } from "@/pages/newMedicalCard/utils/medicalConfig";
@@ -67,7 +73,7 @@ import { mapState, mapGetters } from "vuex";
 
 export default {
   name: "ContactsForm",
-  components: { MedicalFormWrapper, BaseInput },
+  components: { MedicalFormWrapper, BaseInput, BaseSelectNetworks },
   data() {
     return {
       isEdit: false,
@@ -87,6 +93,14 @@ export default {
     }),
   },
   methods: {
+    checkNetworksField(index) {
+      if (
+        this.contacts.networks[index].kind &&
+        this.contacts.networks[index].username
+      ) {
+        this.contacts.networks[index].filled = true;
+      }
+    },
     openEdit() {
       this.isEdit = true;
     },
@@ -108,19 +122,22 @@ export default {
         this.contacts
       );
     },
-    defineNetworkByValue(e, index) {
+    chooseNetwork(e, index) {
-      const arrNetworkMap = Object.values(this.mapNetworks);
+      this.contacts.networks[index].kind = e.currentTarget.id;
-      const value = e.target.value;
-      let newKind = arrNetworkMap.find((el) =>
-        value.includes(el.markerLink)
-      )?.kind;
-      this.contacts.networks[index].kind = newKind;
     },
     addNewContact(key) {
+      if (key === "networks") {
+        this.contacts[key].push({
+          filled: false,
+          kind: null,
+          username: null,
+        });
+      } else {
         this.contacts[key].push({
           kind: this.configData[key].kind,
           username: null,
         });
+      }
       this.checkChangeInput();
     },
     deleteContact(key, index) {
@@ -135,6 +152,11 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.icon
+  &.old
+    color: var(--btn-blue-color)
+  &.new
+    color: var(--icon-violet-color)
 .input-wrapper
   width: 324px
 .form-wrap

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -107,44 +107,38 @@ export const mapNetworks = {
   VK: {
     title: "VK",
     icon: "app:icon-vk",
-    kind: "VK",
+    network: "VK",
-    markerLink: "vk",
   },
   TELEGRAM: {
     title: "Telegram",
     icon: "app:icon-tg",
-    kind: "TELEGRAM",
+    network: "TELEGRAM",
-    markerLink: "t.me",
   },
   GMAIL: {
     title: "Gmail",
     icon: "app:icon-google",
-    kind: "GMAIL",
+    network: "GMAIL",
-    markerLink: "gmail",
   },
   SLACK: {
     title: "Slack",
     icon: "app:icon-slack",
-    kind: "SLACK",
+    network: "SLACK",
     markerLink: "slack",
   },
   DISCORD: {
     title: "Discord",
     icon: "app:icon-discord",
-    kind: "DISCORD",
+    network: "DISCORD",
-    markerLink: "discord",
   },
   VIBER: {
     title: "Viber",
     icon: "wifi_calling_3",
-    kind: "VIBER",
+    network: "VIBER",
-    markerLink: "viber",
   },
   WHATS_APP: {
     title: "WhatsApp",
     icon: "call",
-    kind: "WHATS_APP",
+    network: "WHATS_APP",
-    markerLink: "wa.me",
   },
 };
 

src/store/modules/medicalCard.js

@@ -245,19 +245,24 @@ const actions = {
       .filter((el) => !allNewContacts.find((newNet) => newNet.id === el.id))
       .map((el) => fetchWrapper.del(`general/contact/${el.id}/delete/`));
     const request = allNewContacts
-      .map((network) => {
+      .map((contact) => {
-        let initNetwork = initContacts.find((el) => el.id === network.id);
+        let initNetwork = initContacts.find((el) => el.id === contact.id);
-        if (!network.id) {
+        if (!contact.id && contact.username && contact.kind) {
           return fetchWrapper.post(`general/contact/create/`, {
             person: personId,
-            ...network,
+            username: contact.username,
+            kind: contact.kind,
           });
         }
-        if (network.id && network.username !== initNetwork.username) {
+        if (
-          return fetchWrapper.post(`general/contact/${network.id}/update/`, {
+          contact.id &&
+          contact.username &&
+          contact.username !== initNetwork.username
+        ) {
+          return fetchWrapper.post(`general/contact/${contact.id}/update/`, {
             person: personId,
-            username: network.username,
+            username: contact.username,
-            kind: network.kind,
+            kind: contact.kind,
           });
         }
         return Promise.resolve();