vue-intergrall-plugins 1.0.1 → 1.0.2

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

@@ -3,17 +3,31 @@
     <div v-if="Object.keys(infoCanal).length > 0">
       <!-- CHIPS -->
       <div class="d-flex overflow-hidden mt-10 w-100 d-flex flex-wrap">
-        <div 
+        <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}` : ''}`"
+          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>
+            <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>
+            <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>
@@ -22,38 +36,86 @@
     <!-- TABELA INTERATIVIDADE HO -->
     <template v-if="informacao.length">
       <div class="interatividade-form-header d-flex justify-content-between">
-        {{dictionary.msg_abertura_reclamacao}}
+        {{ dictionary.msg_abertura_reclamacao }}
         <span class="d-flex-center">
           <fa-icon :icon="['fas', 'calendar']" class="mr-5" />
-          {{formataDataHora(infoCanal.DATA_ABERTURA)}}
+          {{ 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
+          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}}
+          {{ 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
+            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>
+                <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>
+                <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}`">
+          <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>
@@ -64,82 +126,91 @@
   </div>
 </template>
 <script>
-import InteratividadePopup from './InteratividadePopup'
-import { formataData, formataDataHora } from '../../services/textFormatting';
+import InteratividadePopup from "./InteratividadePopup";
+import { formataData, formataDataHora } from "../../services/textFormatting";
 
 export default {
-  components: {InteratividadePopup},
+  components: { InteratividadePopup },
   data() {
     return {
       informacaoAdicional: [],
-      informacao: []
-    }
+      informacao: [],
+    };
   },
   props: {
     interatividade: {
       type: Object,
-      required: true
+      required: true,
     },
     infoCanal: {
       type: [Object, Array],
       required: false,
-      default: {}
+      default: {},
     },
     dominio: {
       type: String,
-      required: true
+      required: true,
     },
     dictionary: {
       type: Object,
-      required: true
+      required: true,
     },
     anexos: {
       type: Array,
-      required: false
-    }
+      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)
+        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 {}
+        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()){
+  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'}`
+      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']
+      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)
+      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(){
+    validateInterativity() {
       try {
-        if(this.interatividade.formulario && this.interatividade.formulario.length){
+        if (this.interatividade.formulario && this.interatividade.formulario.length) {
           return true;
         }
       } catch (error) {
@@ -148,245 +219,189 @@ export default {
     },
     verifyInfoAditional() {
       try {
-        let { formulario } = this.interatividade
+        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
+        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
-          })
+            return info;
+          });
         }
-        if(foundInfosAdd) this.informacaoAdicional = foundInfosAdd;
+        if (foundInfosAdd) this.informacaoAdicional = foundInfosAdd;
       } catch (e) {
-          console.error("Erro ao pegar o objeto interatividade formulario")
-          console.error(e)
+        console.error("Erro ao pegar o objeto interatividade formulario");
+        console.error(e);
       }
     },
-    verificaInfos(text){
-      if(typeof text === 'string'){
+    verificaInfos(text) {
+      if (typeof text === "string") {
         return text;
       }
-      if(typeof text === 'object'){
+      if (typeof text === "object") {
         return text.desc;
       }
     },
-    formataDataHora(date){
+    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 {
+.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;
+}
+.text-dark {
+  color: #333;
+}
+.ml-3 {
+  margin-left: 3px;
+}
+.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;
-  }
+}
+.mb-5 {
+  margin-bottom: 5px;
+}
+.mb-10 {
+  margin-bottom: 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>