From 2cf725e96d49f3e849b8c918da1b65732cf64e92 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Mon, 17 Apr 2023 18:46:17 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B4=D0=B5=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=BB=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=20=D0=9A=D0=BE=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0=D0=BA=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass                |  2 +
 src/components/base/BaseSelectNetworks.vue    |  8 +-
 .../BasicDataForms/ContactsForm.vue           | 84 ++++++++++++-------
 .../newMedicalCard/utils/medicalConfig.js     | 20 ++---
 src/store/modules/medicalCard.js              | 21 +++--
 5 files changed, 80 insertions(+), 55 deletions(-)

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index 62a1d85..8dea133 100644
--- a/src/assets/sass/variables.sass
+++ b/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
diff --git a/src/components/base/BaseSelectNetworks.vue b/src/components/base/BaseSelectNetworks.vue
index 02c4740..f25afa6 100644
--- a/src/components/base/BaseSelectNetworks.vue
+++ b/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
diff --git a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
index 9da1e53..06acfea 100644
--- a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
@@ -9,35 +9,40 @@
     :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" 
-                @click="() => copyLinkNetwork(value.username)"
+                v-if="data.id || data.filled" 
+                @click="() => copyLinkNetwork(data.username)"
                 style="background-color: var(--bg-light-grey)"
               )
-                q-icon(:name="mapNetworks[value.kind].icon" style="color: var(--btn-blue-color)")
-                span.text-sm.font-medium {{ mapNetworks[value.kind].title || value.username }}
-              base-input.w-full( 
-                v-else
-                :disabled="!isEdit" 
-                v-model="value.username"
-                :mask="configData[key].inputMask"
-                @keyup.enter="(e) => defineNetworkByValue(e, index)",
-                @update:model-value="checkChangeInput"
-                type="text"  
-                :standout="!isEdit" 
-                :outlined="isEdit" 
-                text-color="black"
-                )
+                q-icon.icon(:name="mapNetworks[data.kind].icon" :class="{old: data.id, new: data.filled}")
+                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(
+                  :disabled="!isEdit" 
+                  v-model="data.username"
+                  :mask="configData[key].inputMask"
+                  type="text"  
+                  :standout="!isEdit" 
+                  :outlined="isEdit" 
+                  text-color="black"
+                  )
             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) {
-      const arrNetworkMap = Object.values(this.mapNetworks);
-      const value = e.target.value;
-      let newKind = arrNetworkMap.find((el) =>
-        value.includes(el.markerLink)
-      )?.kind;
-      this.contacts.networks[index].kind = newKind;
+    chooseNetwork(e, index) {
+      this.contacts.networks[index].kind = e.currentTarget.id;
     },
     addNewContact(key) {
-      this.contacts[key].push({
-        kind: this.configData[key].kind,
-        username: null,
-      });
+      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
diff --git a/src/pages/newMedicalCard/utils/medicalConfig.js b/src/pages/newMedicalCard/utils/medicalConfig.js
index b188656..c141546 100644
--- a/src/pages/newMedicalCard/utils/medicalConfig.js
+++ b/src/pages/newMedicalCard/utils/medicalConfig.js
@@ -107,44 +107,38 @@ export const mapNetworks = {
   VK: {
     title: "VK",
     icon: "app:icon-vk",
-    kind: "VK",
-    markerLink: "vk",
+    network: "VK",
   },
   TELEGRAM: {
     title: "Telegram",
     icon: "app:icon-tg",
-    kind: "TELEGRAM",
-    markerLink: "t.me",
+    network: "TELEGRAM",
   },
   GMAIL: {
     title: "Gmail",
     icon: "app:icon-google",
-    kind: "GMAIL",
-    markerLink: "gmail",
+    network: "GMAIL",
   },
   SLACK: {
     title: "Slack",
     icon: "app:icon-slack",
-    kind: "SLACK",
+    network: "SLACK",
     markerLink: "slack",
   },
   DISCORD: {
     title: "Discord",
     icon: "app:icon-discord",
-    kind: "DISCORD",
-    markerLink: "discord",
+    network: "DISCORD",
   },
   VIBER: {
     title: "Viber",
     icon: "wifi_calling_3",
-    kind: "VIBER",
-    markerLink: "viber",
+    network: "VIBER",
   },
   WHATS_APP: {
     title: "WhatsApp",
     icon: "call",
-    kind: "WHATS_APP",
-    markerLink: "wa.me",
+    network: "WHATS_APP",
   },
 };
 
diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js
index 842e9b8..368adb4 100644
--- a/src/store/modules/medicalCard.js
+++ b/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) => {
-        let initNetwork = initContacts.find((el) => el.id === network.id);
-        if (!network.id) {
+      .map((contact) => {
+        let initNetwork = initContacts.find((el) => el.id === contact.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) {
-          return fetchWrapper.post(`general/contact/${network.id}/update/`, {
+        if (
+          contact.id &&
+          contact.username &&
+          contact.username !== initNetwork.username
+        ) {
+          return fetchWrapper.post(`general/contact/${contact.id}/update/`, {
             person: personId,
-            username: network.username,
-            kind: network.kind,
+            username: contact.username,
+            kind: contact.kind,
           });
         }
         return Promise.resolve();