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

2023-04-17 18:46:17 +03:00
parent 4c63092bb1
commit 2cf725e96d
5 changed files with 80 additions and 55 deletions
--- 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
--- 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
--- 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
--- 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",
  },
 };

--- 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();