air-vue-components-2 3.2.165 → 3.2.167

package/package.json

@@ -5,7 +5,7 @@
     "message": "\"Mensagem Automatica\"",
     "version_increment": "patch"
   },
-  "version": "3.2.165",
+  "version": "3.2.167",
   "author": "ti.acessos@alloha.com",
   "main": "src/air-vue-components.js",
   "scripts": {

package/src/app-components/AirPerfil.vue

@@ -90,11 +90,11 @@
       paletaPastel () {
         return [
           '#F7B7B7',
-          '#BFE7C2',
+          '#D7C6FF',
           '#BFD7FF',
           '#FFD6A5',
           '#FBC4E2',
-          '#D7C6FF',
+          '#BFE7C2',
           '#BFEFEA',
           '#FFF1A8'
         ]

package/src/app-components/AirUsuarioCard.vue

@@ -31,18 +31,24 @@
 </template>
 <script>
   export default {
-    props: ['codigo'],
+    props: {
+      codigo: { type: String, default: null },
+      user: { type: Object, default: null }
+    },
     data () {
       return {
-        user: null,
+        userLocal: null,
         fotoErro: false,
         avatarBg: null,
         defaultFoto: require('../assets/default_user_profile.jpg')
       }
     },
     computed: {
+      userEfetivo () {
+        return this.user || this.userLocal
+      },
       emailBase () {
-        return (this.usuarioLogado && this.usuarioLogado.email) || ''
+        return (this.userEfetivo && this.userEfetivo.email) || ''
       },
       avatarSrc () {
         try {
@@ -53,13 +59,13 @@
       },
       fotoSrc () {
         if (this.fotoErro) return this.avatarSrc
-        return (this.usuarioLogado.codigo)
-            ? 'https://air.sumicity.net.br/usuario/foto/' + this.usuarioLogado.codigo
+        return (this.userEfetivo && this.userEfetivo.codigo)
+            ? 'https://air.sumicity.net.br/usuario/foto/' + this.userEfetivo.codigo
             : this.avatarSrc
       }
     },
     watch: {
-      'usuarioLogado.foto' () {
+      'userEfetivo.foto' () {
         this.fotoErro = false
       },
       emailBase () {
@@ -77,7 +83,9 @@
     },
     methods: {
       carregar () {
-        this.httpGet(this.$URL.USUARIO.CODIGO + this.codigo).then(res => { this.user = res })
+        if (!this.user && this.codigo) {
+          this.httpGet(this.$URL.USUARIO.CODIGO + this.codigo).then(res => { this.userLocal = res })
+        }
       },
       onFotoErro (e) {
         if (this.fotoErro) return
@@ -102,11 +110,11 @@
       paletaPastel () {
         return [
           '#F7B7B7',
-          '#BFE7C2',
+          '#D7C6FF',
           '#BFD7FF',
           '#FFD6A5',
           '#FBC4E2',
-          '#D7C6FF',
+          '#BFE7C2',
           '#BFEFEA',
           '#FFF1A8'
         ]
@@ -153,19 +161,19 @@
         const fg = this.escurecerHex(bg, 0.55)
 
         const svg = `
-              <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
-                <rect width="128" height="128" rx="64" ry="64" fill="${bg}"/>
-                <text x="64" y="64"
-                      text-anchor="middle"
-                      dominant-baseline="central"
-                      font-family="Arial, Helvetica, sans-serif"
-                      font-size="56"
-                      font-weight="700"
-                      fill="${fg}">
-                  ${iniciais}
-                </text>
-              </svg>
-            `.trim()
+                  <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
+                    <rect width="128" height="128" rx="64" ry="64" fill="${bg}"/>
+                    <text x="64" y="64"
+                          text-anchor="middle"
+                          dominant-baseline="central"
+                          font-family="Arial, Helvetica, sans-serif"
+                          font-size="56"
+                          font-weight="700"
+                          fill="${fg}">
+                      ${iniciais}
+                    </text>
+                  </svg>
+                `.trim()
 
         return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg)
       }

package/src/components/AirCabecalho.vue

@@ -153,11 +153,11 @@
       paletaPastel () {
         return [
           '#F7B7B7',
-          '#BFE7C2',
+          '#D7C6FF',
           '#BFD7FF',
           '#FFD6A5',
           '#FBC4E2',
-          '#D7C6FF',
+          '#BFE7C2',
           '#BFEFEA',
           '#FFF1A8'
         ]

package/src/components/AirPerfil.vue

@@ -90,11 +90,11 @@
       paletaPastel () {
         return [
           '#F7B7B7',
-          '#BFE7C2',
+          '#D7C6FF',
           '#BFD7FF',
           '#FFD6A5',
           '#FBC4E2',
-          '#D7C6FF',
+          '#BFE7C2',
           '#BFEFEA',
           '#FFF1A8'
         ]

package/src/components/AirUsuario.vue

@@ -24,6 +24,7 @@
   export default {
     data () {
       return {
+        user: null,
         fotoErro: false,
         avatarBg: null,
         defaultFoto: require('../assets/default_user_profile.jpg')
@@ -49,12 +50,20 @@
         default: 'is-dark'
       }
     },
+    created () {
+      if (this.$URL.USUARIO && this.$URL.USUARIO.CODIGO) {
+        this.carregar()
+      } else {
+        this.$toast.open('Constante URL.USUARIO.CODIGO indisponível.')
+        console.error('$URL.USUARIO.CODIGO não existe')
+      }
+    },
     computed: {
       label () {
         return this.equipe ? this.codigo + ' - ' + this.equipe : this.codigo
       },
       emailBase () {
-        return (this.usuarioLogado && this.usuarioLogado.email) || ''
+        return (this.user && this.user.email) || ''
       },
       avatarSrc () {
         try {
@@ -71,7 +80,7 @@
       }
     },
     watch: {
-      'usuarioLogado.foto' () {
+      'user.foto' () {
         this.fotoErro = false
       },
       emailBase () {
@@ -80,11 +89,14 @@
       }
     },
     methods: {
+      carregar () {
+        this.httpGet(this.$URL.USUARIO.CODIGO + this.codigo).then(res => { this.user = res })
+      },
       mostrarDetalhes () {
         this.$modal.open({
           component: UsuarioCard,
           width: 380,
-          props: {codigo: this.codigo, store: this.$store}
+          props: {codigo: this.codigo, user: this.user, store: this.$store}
         })
       },
       onFotoErro (e) {
@@ -110,11 +122,11 @@
       paletaPastel () {
         return [
           '#F7B7B7',
-          '#BFE7C2',
+          '#D7C6FF',
           '#BFD7FF',
           '#FFD6A5',
           '#FBC4E2',
-          '#D7C6FF',
+          '#BFE7C2',
           '#BFEFEA',
           '#FFF1A8'
         ]

package/src/components/AirUsuarioCard.vue

@@ -7,7 +7,7 @@
 
       <div class="media" v-if="user">
         <div class="media-left">
-          <img class="img-lg img-circle m-t-sm m-r-sm" :src="user.foto" alt="Image">
+          <img class="img-lg img-circle m-t-sm m-r-sm" :src="fotoSrc" alt="Image" @error="onFotoErro">
         </div>
         <div class="media-content">
           <p class="title">{{ user.nome }}</p>
@@ -31,10 +31,46 @@
 </template>
 <script>
   export default {
-    props: ['codigo'],
+    props: {
+      codigo: { type: String, default: null },
+      user: { type: Object, default: null }
+    },
     data () {
       return {
-        user: null
+        userLocal: null,
+        fotoErro: false,
+        avatarBg: null,
+        defaultFoto: require('../assets/default_user_profile.jpg')
+      }
+    },
+    computed: {
+      userEfetivo () {
+        return this.user || this.userLocal
+      },
+      emailBase () {
+        return (this.userEfetivo && this.userEfetivo.email) || ''
+      },
+      avatarSrc () {
+        try {
+          return this.gerarAvatarDataUrl(this.emailBase)
+        } catch (err) {
+          return this.defaultFoto
+        }
+      },
+      fotoSrc () {
+        if (this.fotoErro) return this.avatarSrc
+        return (this.userEfetivo && this.userEfetivo.codigo)
+            ? 'https://air.sumicity.net.br/usuario/foto/' + this.userEfetivo.codigo
+            : this.avatarSrc
+      }
+    },
+    watch: {
+      'userEfetivo.foto' () {
+        this.fotoErro = false
+      },
+      emailBase () {
+        this.fotoErro = false
+        this.avatarBg = null
       }
     },
     created () {
@@ -47,7 +83,99 @@
     },
     methods: {
       carregar () {
-        this.httpGet(this.$URL.USUARIO.CODIGO + this.codigo).then(res => { this.user = res })
+        if (!this.user && this.codigo) {
+          this.httpGet(this.$URL.USUARIO.CODIGO + this.codigo).then(res => { this.userLocal = res })
+        }
+      },
+      onFotoErro (e) {
+        if (this.fotoErro) return
+        this.fotoErro = true
+        e.target.src = this.avatarSrc
+      },
+      gerarIniciaisDoEmail (email) {
+        const local = String(email || '').split('@')[0].trim()
+        if (!local) return '?'
+
+        const partes = local
+            .split('.')
+            .map(p => p.trim())
+            .filter(Boolean)
+
+        const primeira = (partes[0] || '')[0] || ''
+        const segunda = (partes[1] || '')[0] || ''
+
+        const iniciais = (primeira + segunda).toUpperCase()
+        return iniciais || '?'
+      },
+      paletaPastel () {
+        return [
+          '#F7B7B7',
+          '#D7C6FF',
+          '#BFD7FF',
+          '#FFD6A5',
+          '#FBC4E2',
+          '#BFE7C2',
+          '#BFEFEA',
+          '#FFF1A8'
+        ]
+      },
+      corPastelPorLetra (letra) {
+        const paleta = this.paletaPastel()
+
+        const ch = String(letra || '?').toUpperCase()
+        const code = ch.charCodeAt(0)
+
+        if (code >= 65 && code <= 90) {
+          const idx = (code - 65) % paleta.length
+          return paleta[idx]
+        }
+
+        return paleta[0]
+      },
+      hexParaRgb (hex) {
+        const h = String(hex || '').replace('#', '').trim()
+        if (h.length !== 6) return null
+        const r = parseInt(h.slice(0, 2), 16)
+        const g = parseInt(h.slice(2, 4), 16)
+        const b = parseInt(h.slice(4, 6), 16)
+        if ([r, g, b].some(n => Number.isNaN(n))) return null
+        return { r, g, b }
+      },
+      rgbParaHex ({ r, g, b }) {
+        const toHex = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0')
+        return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+      },
+      escurecerHex (hex, fator = 0.55) {
+        const rgb = this.hexParaRgb(hex)
+        if (!rgb) return '#2E2E2E'
+        return this.rgbParaHex({
+          r: rgb.r * (1 - fator),
+          g: rgb.g * (1 - fator),
+          b: rgb.b * (1 - fator)
+        })
+      },
+      gerarAvatarDataUrl (email) {
+        const iniciais = this.gerarIniciaisDoEmail(email)
+        const primeiraLetra = (iniciais && iniciais !== '?') ? iniciais[0] : '?'
+        const bg = this.corPastelPorLetra(primeiraLetra)
+        const fg = this.escurecerHex(bg, 0.55)
+
+        const svg = `
+                <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
+                  <rect width="128" height="128" rx="64" ry="64" fill="${bg}"/>
+                  <text x="64" y="64"
+                        text-anchor="middle"
+                        dominant-baseline="central"
+                        font-family="Arial, Helvetica, sans-serif"
+                        font-size="56"
+                        font-weight="700"
+                        fill="${fg}">
+                    ${iniciais}
+                  </text>
+                </svg>
+              `.trim()
+
+        return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg)
       }
     }
   }