From e07d34d61e9933a280bc6815b805fe0982465e42 Mon Sep 17 00:00:00 2001
From: Norbaev <timnrbv@gmail.com>
Date: Thu, 4 Jul 2024 20:55:25 +0500
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B5=D0=BD=D0=B4=D0=B5=D1=80=20=D1=81?=
 =?UTF-8?q?=D0=BE=D1=86=D0=B8=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D1=85=20=D1=81?=
 =?UTF-8?q?=D0=B5=D1=82=D0=B5=D0=B9=20=D1=87=D0=B5=D1=80=D0=B5=D0=B7=20?=
 =?UTF-8?q?=D1=86=D0=B8=D0=BA=D0=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/views/contacts.vue | 50 ++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/client/src/views/contacts.vue b/client/src/views/contacts.vue
index 081af6f..d95505e 100644
--- a/client/src/views/contacts.vue
+++ b/client/src/views/contacts.vue
@@ -10,15 +10,26 @@
     <div class="contacts__content">
       <div v-if="contacts" class="contacts__info">
         <div v-for="(item, index) in contactsField" :key="index">
-          <div class="text contacts__item">
+          <div
+            v-if="item.title !== dictionaryFields.socials"
+            class="text contacts__item"
+          >
             <span class="title">{{ item.title }}</span>
             {{ item.data }}
           </div>
+          <div v-else class="contacts__socials">
+            <span class="title">{{ item.title }}</span>
+            <div
+              v-for="(href, social) in item.data"
+              :key="social"
+              class="contacts__social"
+            >
+              <a :href="href" :class="['contacts__social', social]"></a>
+            </div>
+          </div>
         </div>
-        <span class="title">Соц. сети</span>
-        <div></div>
       </div>
-      <div class="contacts__map">
+      <!-- <div class="contacts__map">
         <div
           class="contacts__map-frame"
           style="position: relative; overflow: hidden"
@@ -40,7 +51,7 @@
             style="position: relative"
           ></iframe>
         </div>
-      </div>
+      </div> -->
       <FormKit
         v-model="formData"
         type="form"
@@ -116,39 +127,32 @@ export default {
         phone: 'Телефон',
         address: 'Адрес',
         email: 'Почта',
+        socials: 'Соц. сети',
       },
     };
   },
   computed: {
     contactsField() {
-      const address =
-        this.contacts.city && this.contacts.street && this.contacts.house
-          ? `г. ${this.contacts.city}, ул. ${this.contacts.street}, д. ${this.contacts.house}`
-          : null;
-
+      const address = this.formatAddress(this.contacts);
       const phone = this.contacts.phone;
       const email = this.contacts.email;
+      const socials = {
+        ['m--telegram']: this.contacts.telegram_url,
+        ['m--vk']: this.contacts.vk_url,
+      };
 
       const fields = {
         address,
         phone,
         email,
+        socials,
       };
 
       const fieldsWithoutNull = this.removeNullFields(fields);
       return this.createArrayContacts(this.dictionaryFields, fieldsWithoutNull);
     },
-    socialsField() {
-      const socials = {
-        telegram: this.contacts.telegram_url,
-        vk: this.contacts.vk_url,
-      };
-
-      return this.removeNullFields(socials);
-    },
   },
   created() {
-    // Получаем объект с бэка
     app.getSupportInfo().then((responce) => {
       this.contacts = { ...responce };
     });
@@ -156,7 +160,6 @@ export default {
   mounted() {},
   methods: {
     submitHandler() {},
-    // Метод удаляет из объекта ключи с null
     removeNullFields(obj) {
       const result = {};
 
@@ -173,7 +176,6 @@ export default {
       return result;
     },
 
-    // Метод формирует массив, на основе словаря и объекта
     createArrayContacts(dictionary, fields) {
       const result = [];
 
@@ -185,6 +187,12 @@ export default {
 
       return result;
     },
+    formatAddress(contacts) {
+      if (contacts.city && contacts.street && contacts.house) {
+        return `г. ${contacts.city}, ул. ${contacts.street}, д. ${contacts.house}`;
+      }
+      return null;
+    },
   },
 };
 </script>