vue-intergrall-plugins 1.1.11 → 1.1.12

package/src/lib-components/Messages/InteratividadeContatoItem.vue

@@ -1,214 +1,214 @@
-<template>
-  <div class="contact-card" ref="contactCard">
-    <div class="contact-header">
-      <div class="header-content">
-        <span class="badge">{{ getInitials(item.name) }}</span>
-        <h3>{{ item.name.formatted_name }}</h3>
-      </div>
-      <ul v-if="item.org" class="contact-list">
-        <li v-if="item.org.company">{{ item.org.company }}</li>
-        <li v-if="item.org.title">{{ item.org.title }}</li>
-      </ul>
-    </div>
-    <div class="contact-content">
-      <div class="contact-section">
-        <h4>
-          <fa-icon :icon="['fas', 'phone-alt']" />
-          Telefones
-        </h4>
-        <ul class="contact-list">
-          <li v-for="phone in item.phones" :key="phone.phone">
-            {{ dictionary[`${phone.type}_phone`] || phone.type }}: {{ phone.phone }}
-            <button v-if="emitContactClick" @click="emitData(phone.phone, 'phone')" title="Adicionar contato">
-              <fa-icon :icon="['fas', 'user-plus']" />
-            </button>
-          </li>
-        </ul>
-      </div>
-      <div class="contact-section" v-if="item.emails && item.emails.length">
-        <h4><fa-icon :icon="['fas', 'envelope']" />Emails</h4>
-        <ul class="contact-list">
-          <li v-for="email in item.emails" :key="email.email">
-            {{ dictionary[`${email.type}_email`] || email.type }}: {{ email.email }}
-            <button v-if="emitContactClick" @click="emitData(email.email, 'email')" title="Adicionar contato">
-              <fa-icon :icon="['fas', 'user-plus']" />
-            </button>
-          </li>
-        </ul>
-      </div>
-      <div class="contact-section" v-if="hasInfos">
-        <h4>
-          <fa-icon :icon="['fas', 'info']" /> {{ dictionary.titulo_informacoes }} adicionais
-        </h4>
-        <ul class="contact-list">
-          <template v-if="item.addresses && item.addresses.length">
-            <li v-for="address in item.addresses" :key="address.street">
-              {{ dictionary[`${address.type}_address`] || address.type }}: {{ address.street }}, {{ address.city }} - {{
-                address.state ? address.state.toUpperCase() : '(vazio)' }} - {{
-                address.country }}, {{
-                address.zip }}
-            </li>
-          </template>
-          <template v-if="item.urls && item.urls.length">
-            <li v-for="url in item.urls" :key="url.url">
-              {{ dictionary[url.type] || url.type }}: <a
-                :href="`${url.url.startsWith('https://') ? url.url : `https://${url.url}`}`" target="_blank">{{ url.url
-                }}</a>
-            </li>
-          </template>
-          <li v-if="item.birthday">{{ dictionary.birthday }}: {{ formatBirthday(item.birthday) }}</li>
-          <template v-if="additionals && additionals.length">
-            <li v-for="(value, key) in additionals" :key="key">
-              {{ key }}: {{ value }}
-            </li>
-          </template>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  props: {
-    item: {
-      type: Object,
-      required: true,
-    },
-    dictionary: {
-      type: Object,
-      required: true,
-    },
-    emitContactClick: {
-      type: Boolean,
-      default: false,
-    }
-  },
-  data() {
-    return {
-      additionals: [],
-      hasInfos: false,
-    }
-  },
-  mounted() {
-    this.additionals = this.getAdditionalInfo(JSON.parse(JSON.stringify(this.item)));
-    this.verifyHasInfos()
-  },
-  methods: {
-    getInitials(name) {
-      if (!name) return '';
-      const initials = name.first_name.charAt(0);
-      if (name.last_name) {
-        return initials + name.last_name.charAt(0);
-      }
-      return initials;
-    },
-    formatBirthday(birthday) {
-      if (!birthday) return '';
-      const values = birthday.split('-');
-      const month = values[values.length - 2]
-      const day = values[values.length - 1]
-      const months = [
-        'janeiro', 'fevereiro', `mar${this.dictionary.c_dil}o`, 'abril', 'maio', 'junho',
-        'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro'
-      ];
-      return `${parseInt(day)} de ${months[parseInt(month) - 1]}`;
-    },
-    emitData(contact, type) {
-      this.$emit('contact-click', {
-        contact,
-        type,
-        data: JSON.parse(JSON.stringify(this.item))
-      });
-    },
-    verifyHasInfos() {
-      const keysToInclude = ['addresses', 'urls', 'birthday'];
-      this.hasInfos = Object.keys(this.item).some(key => keysToInclude.includes(key));
-    },
-    getAdditionalInfo(item) {
-      const keysToExclude = ['name', 'org', 'phones', 'emails', 'addresses', 'urls', 'birthday'];
-      return Object.keys(item)
-        .filter(key => !keysToExclude.includes(key))
-        .reduce((obj, key) => {
-          obj[key] = item[key];
-          return obj;
-        }, {});
-    }
-  },
-};
-</script>
-
-<style scoped>
-.contact-card {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: rgba(255, 255, 255, 0.9);
-  border-radius: 5px;
-  padding: 5px;
-  margin-bottom: 10px;
-}
-
-.contact-header {
-  margin-bottom: 16px;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.header-content h3 {
-  margin: 0;
-}
-
-.contact-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  margin: 10px 0;
-}
-
-.contact-list li>button {
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  color: var(--konecta-success);
-}
-
-.contact-list li>button:hover {
-  color: var(--konecta-success-hover);
-}
-
-.badge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  background-color: var(--message-color);
-  color: var(--text-color);
-  text-align: center;
-  line-height: 24px;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.contact-section {
-  margin-bottom: 16px;
-}
-
-.contact-section h4 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
+<template>
+  <div class="contact-card" ref="contactCard">
+    <div class="contact-header">
+      <div class="header-content">
+        <span class="badge">{{ getInitials(item.name) }}</span>
+        <h3>{{ item.name.formatted_name }}</h3>
+      </div>
+      <ul v-if="item.org" class="contact-list">
+        <li v-if="item.org.company">{{ item.org.company }}</li>
+        <li v-if="item.org.title">{{ item.org.title }}</li>
+      </ul>
+    </div>
+    <div class="contact-content">
+      <div class="contact-section">
+        <h4>
+          <fa-icon :icon="['fas', 'phone-alt']" />
+          Telefones
+        </h4>
+        <ul class="contact-list">
+          <li v-for="phone in item.phones" :key="phone.phone">
+            {{ dictionary[`${phone.type}_phone`] || phone.type }}: {{ phone.phone }}
+            <button v-if="emitContactClick" @click="emitData(phone.phone, 'phone')" title="Adicionar contato">
+              <fa-icon :icon="['fas', 'user-plus']" />
+            </button>
+          </li>
+        </ul>
+      </div>
+      <div class="contact-section" v-if="item.emails && item.emails.length">
+        <h4><fa-icon :icon="['fas', 'envelope']" />Emails</h4>
+        <ul class="contact-list">
+          <li v-for="email in item.emails" :key="email.email">
+            {{ dictionary[`${email.type}_email`] || email.type }}: {{ email.email }}
+            <button v-if="emitContactClick" @click="emitData(email.email, 'email')" title="Adicionar contato">
+              <fa-icon :icon="['fas', 'user-plus']" />
+            </button>
+          </li>
+        </ul>
+      </div>
+      <div class="contact-section" v-if="hasInfos">
+        <h4>
+          <fa-icon :icon="['fas', 'info']" /> {{ dictionary.titulo_informacoes }} adicionais
+        </h4>
+        <ul class="contact-list">
+          <template v-if="item.addresses && item.addresses.length">
+            <li v-for="address in item.addresses" :key="address.street">
+              {{ dictionary[`${address.type}_address`] || address.type }}: {{ address.street }}, {{ address.city }} - {{
+                address.state ? address.state.toUpperCase() : '(vazio)' }} - {{
+                address.country }}, {{
+                address.zip }}
+            </li>
+          </template>
+          <template v-if="item.urls && item.urls.length">
+            <li v-for="url in item.urls" :key="url.url">
+              {{ dictionary[url.type] || url.type }}: <a
+                :href="`${url.url.startsWith('https://') ? url.url : `https://${url.url}`}`" target="_blank">{{ url.url
+                }}</a>
+            </li>
+          </template>
+          <li v-if="item.birthday">{{ dictionary.birthday }}: {{ formatBirthday(item.birthday) }}</li>
+          <template v-if="additionals && additionals.length">
+            <li v-for="(value, key) in additionals" :key="key">
+              {{ key }}: {{ value }}
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    dictionary: {
+      type: Object,
+      required: true,
+    },
+    emitContactClick: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      additionals: [],
+      hasInfos: false,
+    }
+  },
+  mounted() {
+    this.additionals = this.getAdditionalInfo(JSON.parse(JSON.stringify(this.item)));
+    this.verifyHasInfos()
+  },
+  methods: {
+    getInitials(name) {
+      if (!name) return '';
+      const initials = name.first_name.charAt(0);
+      if (name.last_name) {
+        return initials + name.last_name.charAt(0);
+      }
+      return initials;
+    },
+    formatBirthday(birthday) {
+      if (!birthday) return '';
+      const values = birthday.split('-');
+      const month = values[values.length - 2]
+      const day = values[values.length - 1]
+      const months = [
+        'janeiro', 'fevereiro', `mar${this.dictionary.c_dil}o`, 'abril', 'maio', 'junho',
+        'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro'
+      ];
+      return `${parseInt(day)} de ${months[parseInt(month) - 1]}`;
+    },
+    emitData(contact, type) {
+      this.$emit('contact-click', {
+        contact,
+        type,
+        data: JSON.parse(JSON.stringify(this.item))
+      });
+    },
+    verifyHasInfos() {
+      const keysToInclude = ['addresses', 'urls', 'birthday'];
+      this.hasInfos = Object.keys(this.item).some(key => keysToInclude.includes(key));
+    },
+    getAdditionalInfo(item) {
+      const keysToExclude = ['name', 'org', 'phones', 'emails', 'addresses', 'urls', 'birthday'];
+      return Object.keys(item)
+        .filter(key => !keysToExclude.includes(key))
+        .reduce((obj, key) => {
+          obj[key] = item[key];
+          return obj;
+        }, {});
+    }
+  },
+};
+</script>
+
+<style scoped>
+.contact-card {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 5px;
+  padding: 5px;
+  margin-bottom: 10px;
+}
+
+.contact-header {
+  margin-bottom: 16px;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.header-content h3 {
+  margin: 0;
+}
+
+.contact-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin: 10px 0;
+}
+
+.contact-list li>button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--konecta-success);
+}
+
+.contact-list li>button:hover {
+  color: var(--konecta-success-hover);
+}
+
+.badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: var(--message-color);
+  color: var(--text-color);
+  text-align: center;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.contact-section {
+  margin-bottom: 16px;
+}
+
+.contact-section h4 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
 </style>