Отрисовка списка контактов (без социальных сетей)

client/src/router/index.js

@@ -49,7 +49,9 @@ export default route(function (/* { store, ssrContext } */) {
   });
 
   Router.beforeEach((to, from, next) => {
-    if (to.meta.isAuth) {
+    console.log(process.env.SERVER);
+    //уточнить зачем нужен process.env.SERVER
+    if (to.meta.isAuth && !process.env.SERVER) {
       if (store.state.user) {
         next();
       } else {

client/src/views/contacts.vue

@@ -9,36 +9,14 @@
     <h1 class="h2">Контакты</h1>
     <div class="contacts__content">
       <div v-if="contacts" class="contacts__info">
-        <div v-if="phone" class="text contacts__item">
+        <div v-for="(item, index) in contactsField" :key="index">
-          <span class="title">Телефон</span>
-          {{ phone }}
-        </div>
           <div class="text contacts__item">
-          <span class="title">Почта</span>
+            <span class="title">{{ item.title }}</span>
-          {{ email }}
+            {{ item.data }}
           </div>
-        <div class="text contacts__item">
-          <span class="title">Адрес</span>
-          {{ address }}
         </div>
-        <div
-          v-if="contacts.telegram_url || contacts.vk_url"
-          class="text contacts__item"
-        >
         <span class="title">Соц. сети</span>
-          <div class="contacts__social">
+        <div></div>
-            <a
-              v-if="contacts.telegram_url"
-              :href="contacts.telegram_url"
-              class="contacts__social m--telegram"
-            ></a>
-            <a
-              v-if="contacts.vk_url"
-              :href="contacts.vk_url"
-              class="contacts__social m--vk"
-            ></a>
-          </div>
-        </div>
       </div>
       <div class="contacts__map">
         <div
@@ -134,28 +112,79 @@ export default {
       ],
       showLoaderSending: false,
       contacts: null,
+      dictionaryFields: {
+        phone: 'Телефон',
+        address: 'Адрес',
+        email: 'Почта',
+      },
     };
   },
   computed: {
-    email() {
+    contactsField() {
-      return this.contacts.email;
+      const address =
+        this.contacts.city && this.contacts.street && this.contacts.house
+          ? `г. ${this.contacts.city}, ул. ${this.contacts.street}, д. ${this.contacts.house}`
+          : null;
+
+      const phone = this.contacts.phone;
+      const email = this.contacts.email;
+
+      const fields = {
+        address,
+        phone,
+        email,
+      };
+
+      const fieldsWithoutNull = this.removeNullFields(fields);
+      return this.createArrayContacts(this.dictionaryFields, fieldsWithoutNull);
     },
-    address() {
+    socialsField() {
-      if (!this.contacts.city) false;
+      const socials = {
-      return `г. ${this.contacts.city}, ул. ${this.contacts.street}, д. ${this.contacts.house}`;
+        telegram: this.contacts.telegram_url,
-    },
+        vk: this.contacts.vk_url,
-    phone() {
+      };
-      return this.contacts?.phone;
+
+      return this.removeNullFields(socials);
     },
   },
   created() {
+    // Получаем объект с бэка
     app.getSupportInfo().then((responce) => {
-      console.log([...responce]);
       this.contacts = { ...responce };
     });
   },
+  mounted() {},
   methods: {
     submitHandler() {},
+    // Метод удаляет из объекта ключи с null
+    removeNullFields(obj) {
+      const result = {};
+
+      for (const key in obj) {
+        if (obj[key] !== null) {
+          if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
+            result[key] = this.removeNullFields(obj[key]);
+          } else {
+            result[key] = obj[key];
+          }
+        }
+      }
+
+      return result;
+    },
+
+    // Метод формирует массив, на основе словаря и объекта
+    createArrayContacts(dictionary, fields) {
+      const result = [];
+
+      for (const key in fields) {
+        if (dictionary[key]) {
+          result.push({ title: dictionary[key], data: fields[key] });
+        }
+      }
+
+      return result;
+    },
   },
 };
 </script>