vue-intergrall-plugins 0.0.1075 → 1.0.0

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

@@ -0,0 +1,165 @@
+<template>
+  <div class="interatividade">
+    <transition name="show-x">
+      <InteratividadePopup v-if="listaEstaAberta" :lista="listaExpandida" :titulo="objItens.list.title" @close="listaEstaAberta = false" />
+    </transition>
+    <template v-if="arrBotoes.length">
+      <div v-for="(btn, index) in arrBotoes" :key="index" :title="btn.titulo" class="interatividade-btn">
+        <p v-html="btn.titulo" class="interatividade-titulo"></p>
+      </div>
+    </template>
+    <template v-else-if="Object.keys(objItens).length">
+      <div class="interatividade-lista" :class="tipoBotoes == 'listItem' ? 'bg-none' : ''">
+        <div class="interatividade-lista-conteudo" :class="tipoBotoes == 'listItem' ? 'border-bottom-none padding-none' : ''">
+          <p v-if="objItens.header && objItens.header.text" v-html="objItens.header.text" class="interatividade-lista-titulo"></p>
+          <p v-if="objItens.body && objItens.body.text" v-html="objItens.body.text" class="interatividade-lista-corpo"></p>
+          <p v-if="objItens.footer && objItens.footer.text" v-html="objItens.footer.text" class="interatividade-lista-rodape"></p>
+        </div>
+        <p v-if="objItens.list && objItens.list.title" v-html="objItens.list.title" @click="expandirLista" :class="tipoBotoes == 'listItem' ? 'bg-white border-radius-5 mt-5' : ''" class="interatividade-lista-link"></p>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import InteratividadePopup from './InteratividadePopup'
+
+export default {
+  components: {InteratividadePopup},
+  data() {
+    return {
+      listaEstaAberta: false
+    }
+  },
+  props: {
+    interatividade: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    tipoBotoes() {
+      return this.interatividade.tipo
+    },
+    arrBotoes() {
+      const { botoes } = this.interatividade
+      return botoes ? botoes : []
+    },
+    objItens() {
+      const { itens } = this.interatividade
+      return itens ? itens : {}
+    },
+    listaExpandida() {
+      try {
+        const { list } = this.objItens
+        const { sections } = list
+        return sections ? sections : []
+      }catch(e) {
+        console.error("Erro ao definir a lista a ser expandida")
+        console.error(e)
+        return []
+      }
+    }
+  },
+  methods: {
+    expandirLista() {
+      this.listaEstaAberta = !this.listaEstaAberta
+    }
+  }
+}
+</script>
+
+<style>
+  .show-x-enter-active,
+  .show-x-leave-enter {
+    opacity: 1;
+    transform: translateX(0);
+    transition: all 200ms linear;
+  }
+  .show-x-enter,
+  .show-x-leave-to {
+    opacity: 0;
+    transform: translateX(5%);
+  }
+
+  .bg-none {
+    background-color: transparent!important;
+  }
+
+  .bg-white {
+    background-color: #FFF;
+  }
+
+  .border-radius-5 {
+    border-radius: 5px
+  }
+
+  .mt-5 {
+    margin-top: 5px;
+  }
+
+  .interatividade-btn {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #FFF;
+    color: #111B21;
+    padding: 10px 12px;
+    border-radius: 5px;
+    margin-bottom: 10px;
+  }
+  .interatividade-btn:nth-child(1) {
+    margin-top: 10px
+  }
+  .interatividade-titulo {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .interatividade-lista {
+    width: 100%;
+    min-width: 200px;
+    border-radius: 15px;
+    background-color: #FFF;
+    color: #333;
+    margin: 10px 0;
+  }
+
+  .border-bottom-none {
+    border-bottom: none!important;
+  }
+  .padding-none {
+    padding: unset!important;
+  }
+
+  .interatividade-lista-conteudo {
+    padding: 10px;
+    border-bottom: 1px solid #D7D7D7;
+  }
+  .interatividade-lista-titulo {
+    font-weight: bold;
+    font-size: 1.2em;
+    margin-bottom: 10px;
+  }
+  .interatividade-lista-rodape {
+    color: #818181;
+    margin-top: 5px;
+  }
+  .interatividade-lista-link {
+    width: 100%;
+    text-align: center;
+    padding: 10px;
+    color: rgb(0, 110, 255);
+    cursor: pointer;
+    transition: color 200ms ease-in-out;
+  }
+  .interatividade-lista-link:hover {
+    color: rgb(0, 98, 143);
+  }
+  
+</style>

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

@@ -0,0 +1,392 @@
+<template>
+  <div class="interatividade">
+    <div v-if="Object.keys(infoCanal).length > 0">
+      <!-- CHIPS -->
+      <div class="d-flex overflow-hidden mt-10 w-100 d-flex flex-wrap">
+        <div 
+          v-if="situation || deadline.text"
+          class="d-flex-center flex-column w-100 border-radius-10 border-1 bg-dark-white-2 border-color-gray p-10 mb-10" 
+          :style="`${situation && situation.cor ? `border: 1px solid ${situation.cor}` : ''}`"
+        >
+          <div class="d-flex w-100 mb-5">
+            <strong v-if="situation" class="text-ellipsis text-left fs-_85" v-text="`${dictionary.chip_situacao}:`"></strong>
+            <span v-if="situation" :style="`color: ${situation.cor}`" class="ml-5 text-left fs-_85 text-shadow" v-text="verificaInfos(situation)"></span>
+          </div>
+          <div class="d-flex w-100" v-if="deadline.text">
+            <strong v-text="`${deadline.title}:`" class="text-ellipsis text-left fs-_75"></strong>
+            <span class="ml-5 text-nowrap text-left fs-_75" v-text="deadline.text"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- TABELA INTERATIVIDADE HO -->
+    <template v-if="informacao.length">
+      <div class="interatividade-form-header d-flex justify-content-between">
+        {{dictionary.msg_abertura_reclamacao}}
+        <span class="d-flex-center">
+          <fa-icon :icon="['fas', 'calendar']" class="mr-5" />
+          {{formataDataHora(infoCanal.DATA_ABERTURA)}}
+        </span>
+      </div>
+      <div class="interatividade-form-body">
+        <div v-for="(form) in informacao" :key="form.TIPO_TEXTO" class="interatividade-info-form">
+          <p v-if="form.TIPO_TEXTO < 1000" v-text="form.DESC_TIPO_TEXTO" class="interatividade-titulo-form"></p>
+          <p v-if="form.TIPO_TEXTO < 1000" v-text="form.TEXTO" class="interatividade-description-form"></p>
+        </div>
+        <div v-if="informacaoAdicional.length" class="interatividade-form-header">
+          {{dictionary.msg_info_adicional}}
+        </div>
+        <div class="interatividade-form-body">
+          <div v-for="(form) in informacaoAdicional" :key="form.TIPO_TEXTO" class="interatividade-add-info-form">
+            <div class="divisor-form-info-aditional">
+              <div class="info-aditional">
+                <p v-if="form.TIPO_TEXTO > 999" v-text="form.DESC_TIPO_TEXTO+': '" class="interatividade-titulo-form"></p>
+              </div>
+              <div class="info-aditional">
+                <p v-if="form.TIPO_TEXTO > 999" v-text="form.TEXTO" class="interatividade-description-form"></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <h3 class="m-5 text-bold" v-text="`Anexos`"></h3>
+        <div class="d-flex flex-wrap align-items-center">
+          <div v-for="({ name, type, mkuDownload, mku }, fileIndex) in anexos" :key="`file-${fileIndex}`" class="mb-5 mx-5 d-flex">
+            <img class="box-shadow max-w-75px max-h-75px cursor-pointer" @click="openFile(mku, type)" v-if="!type" :src="`${dominio}/callcenter/docs.php?mku=${mku}`" :alt="name" :title="name" />
+            <fa-icon v-else :icon="returnCurrentIcon(type)" @click="openFile(mku, type)" :class="returnCurrentClass(type)" :title="name" />
+            <a class="d-flex align-items-end ml-3 text-dark" :href="`${dominio}/callcenter/docs.php?mku=${mkuDownload}`" :download="`${name}`" target="_blank" rel="noreferrer noopener" :title="`Download ${name}`">
+              <fa-icon :icon="['fas', 'download']" />
+            </a>
+          </div>
+        </div>
+        <p v-if="!anexos.length" class="text-center mb-5" v-text="`Sem anexos`"></p>
+      </div>
+    </template>
+  </div>
+</template>
+<script>
+import InteratividadePopup from './InteratividadePopup'
+import { formataData, formataDataHora } from '../../services/textFormatting';
+
+export default {
+  components: {InteratividadePopup},
+  data() {
+    return {
+      informacaoAdicional: [],
+      informacao: []
+    }
+  },
+  props: {
+    interatividade: {
+      type: Object,
+      required: true
+    },
+    infoCanal: {
+      type: [Object, Array],
+      required: false,
+      default: {}
+    },
+    dominio: {
+      type: String,
+      required: true
+    },
+    dictionary: {
+      type: Object,
+      required: true
+    },
+    anexos: {
+      type: Array,
+      required: false
+    }
+  },
+  computed: {
+    situation() {
+      try {
+        const { SITUACAO } = this.infoCanal
+        return SITUACAO ? SITUACAO : null
+      }catch(e) {
+        console.error("Erro ao gerar a situacao do atendimento")
+        console.error(e)
+      }
+    },
+    deadline() {
+      try {
+        const { PRAZO, NOME_CAMPO_PRAZO } = this.infoCanal
+        return { text: PRAZO ? formataData(PRAZO) : "---", title: NOME_CAMPO_PRAZO ? NOME_CAMPO_PRAZO : this.dictionary.tit_prazo }
+      }catch(e) {
+        console.error("Erro ao gerar o prazo do atendimento")
+        console.error(e)
+        return {}
+      }
+    },
+  },
+  mounted(){
+    if(this.validateInterativity()){
+      this.verifyInfoAditional();
+    }
+  },
+  methods: {
+    returnCurrentClass(isDoc) {
+      return `fs-2 cursor-pointer ${typeof isDoc == 'string' && isDoc.indexOf('pdf') > -1 ? 'text-red' : 'text-blue'}`
+    },
+    returnCurrentIcon(isDoc) {
+      return typeof isDoc == 'string' && isDoc.indexOf('pdf') > -1 ? ['fas', 'file-pdf'] : ['fas', 'file-alt']
+    },
+    openFile(url, isImg) {
+      const width = window.innerWidth
+      const height = window.innerHeight
+      const options = !isImg ? `width=${width},height=${height}` : "width=auto,height=auto"
+      window.open(`${this.dominio}/callcenter/docs.php?mku=${url}`, "card-file", options)
+    },
+    validateInterativity(){
+      try {
+        if(this.interatividade.formulario && this.interatividade.formulario.length){
+          return true;
+        }
+      } catch (error) {
+        return false;
+      }
+    },
+    verifyInfoAditional() {
+      try {
+        let { formulario } = this.interatividade
+        formulario = formulario ? formulario : [];
+        if(!formulario.length) return
+        const foundInfosAdd = formulario.filter(f => f.TIPO_TEXTO > 999);
+        const foundInfos = formulario.filter(f => f.TIPO_TEXTO < 1000);
+        if(foundInfos){
+          this.informacao = foundInfos.map(info => {
+            if(info.TIPO_TEXTO == 1){
+              info.TEXTO = info.TEXTO == 'S' ? this.dictionary.msg_sim : this.dictionary.msg_nao
+            }
+            return info
+          })
+        }
+        if(foundInfosAdd) this.informacaoAdicional = foundInfosAdd;
+      } catch (e) {
+          console.error("Erro ao pegar o objeto interatividade formulario")
+          console.error(e)
+      }
+    },
+    verificaInfos(text){
+      if(typeof text === 'string'){
+        return text;
+      }
+      if(typeof text === 'object'){
+        return text.desc;
+      }
+    },
+    formataDataHora(date){
+      return formataDataHora(date);
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .show-x-enter-active,
+  .show-x-leave-enter {
+    opacity: 1;
+    transform: translateX(0);
+    transition: all 200ms linear;
+  }
+  .show-x-enter,
+  .show-x-leave-to {
+    opacity: 0;
+    transform: translateX(5%);
+  }
+  .divisor-form-info-aditional {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+  .info-aditional {
+    border-bottom: 1px solid #ccc;
+    width: 49%;
+  }
+  .interatividade-form-header {
+    background-color: #efefef;
+    margin-top: 5px;
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    justify-content: space-between;
+    display: flex;
+    color: #333;
+    font-weight: 700;
+    font-size: 14.4px;
+  }
+  .interatividade-form-body{
+    padding: 0px 10px;
+    background: white;
+    border-right: 1px solid rgb(239, 239, 239);
+    border-left: 1px solid rgb(239, 239, 239);
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    padding-bottom: 10px;
+  }
+  .interatividade {
+    margin: 10px 0;
+  }
+  .interatividade-titulo-form {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-weight: bold;
+    overflow: hidden;
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+    padding-top: 5px;
+  }
+  .interatividade-description-form {
+    overflow: hidden;
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .interatividade-lista {
+    width: 100%;
+    min-width: 200px;
+    border-radius: 15px;
+    background-color: #FFF;
+    color: #333;
+    margin: 10px 0;
+  }
+  .interatividade-lista-conteudo {
+    padding: 10px;
+    border-bottom: 1px solid #D7D7D7;
+  }
+  .interatividade-lista-titulo {
+    font-weight: bold;
+    font-size: 1.2em;
+    margin-bottom: 10px;
+  }
+  .interatividade-lista-rodape {
+    color: #818181;
+    margin-top: 5px;
+  }
+  .interatividade-lista-link {
+    width: 100%;
+    text-align: center;
+    padding: 10px;
+    color: rgb(0, 110, 255);
+    cursor: pointer;
+    transition: color 200ms ease-in-out;
+  }
+  .interatividade-lista-link:hover {
+    color: rgb(0, 98, 143);
+  }
+  .text-blue {
+    color: #294ED3;
+  }
+  .text-red {
+    color: #E74C3C
+  }
+  .text-dark {
+    color: #333;
+  }
+  .ml-3 {
+    margin-left: 3px;
+  }
+  .fs-2 {
+    font-size: 32px;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .align-items-center {
+    align-items: center;
+  }
+  .d-flex {
+    display: flex;
+  }
+  .align-items-end {
+    align-items: flex-end;
+  }
+  .flex-column {
+    flex-direction: column;
+  }
+  .text-bold {
+    font-weight: bold;
+  }
+  .m-5 {
+    margin: 5px;
+  }
+  .mb-5 {
+    margin-bottom: 5px;
+  }
+  .mx-5 {
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .bg-dark-white-2 {
+    background-color: #f7f7f7;
+  }
+  .border-radius-10 {
+    border-radius: 10px;
+  }
+  .w-100 {
+    width: 100%;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .mt-10 {
+    margin-top: 10px;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .d-flex {
+    display: flex;
+  }
+  .p-10 {
+  padding: 10px;
+  }
+  .mb-5 {
+    margin-bottom: 5px;
+  }
+  .mb-10 {
+    margin-bottom: 10px;
+  }
+  .mx-10 {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  .d-flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .fs-_85 {
+    font-size: 13.6px;
+  }
+  .text-ellipsis {
+    text-overflow: ellipsis;
+  }
+  .text-left {
+    text-align: left;
+  }
+  .text-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .ml-5 {
+    margin-left: 5px;
+  }
+  .text-shadow {
+    text-shadow: 0 0 #000;
+  }
+  .justify-content-between{
+    justify-content: space-between;
+  }
+  .mr-5 {
+    margin-right: 5px;
+  }
+</style>

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="interatividade-popup box-shadow" v-on-clickaway="away">
+    <div class="interatividade-popup-titulo" v-if="titulo">
+      <h1>
+        <span v-html="titulo"></span>
+        <fa-icon :icon="['fas', 'times-circle']" @click="away" />
+      </h1>
+    </div>
+    <div class="interatividade-popup-conteudo" v-for="(objItem, index) in lista" :key="index">
+      <template v-if="objItem.items && objItem.items.length">
+        <div class="interatividade-popup-item" v-for="(item, indexItem) in objItem.items" :key="`${index}${indexItem}`">
+          <p v-if="item.title" v-html="item.title" class="interatividade-popup-item-titulo"></p>
+          <p v-if="item.description" v-html="item.description" class="interatividade-popup-item-desc"></p>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway'
+
+export default {
+  mixins: [ clickaway ],
+  props: {
+    lista: {
+      type: [Array, Object],
+      required: true
+    },
+    titulo: {
+      type: String,
+      required: false
+    }
+  },
+  methods: {
+    away() {
+      this.$emit("close")
+    }
+  }
+}
+</script>
+
+<style>
+  .box-shadow {
+    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  }
+
+  .interatividade-popup {
+    position: absolute;
+    top: 15px;
+    right: 0;
+    width: 250px;
+    height: auto;
+    max-height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #FFF;
+    border-radius: 15px;
+    color: #333;
+    font-size: 14px;
+  }
+
+  .interatividade-popup-titulo h1 {    
+    padding: 4px 10px;
+    background-color: #333;
+    color: #FFF;
+    font-size: 1.2em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .interatividade-popup-titulo h1 svg{
+    color: #E74C3C;
+    cursor: pointer;
+    font-size: .9em;
+  }
+  
+  .interatividade-popup-item {
+    padding: 10px;
+    border-bottom: 1px solid #D7D7D7;
+  }
+
+  .interatividade-popup-item-desc {
+    font-size: .9em;
+    color: #767676;
+  }
+</style>