vue-intergrall-plugins 1.1.89 → 1.2.0

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

@@ -1,334 +1,334 @@
-<template>
-  <div class="interatividade">
-    <!-- TABELA INTERATIVIDADE HO -->
-    <template v-if="informacao.length">
-      <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" />
-            <span v-else style="display: flex; align-items: center; justify-content-center; cursor: pointer;"
-              @click="openFile(mku, type)" :title="name">
-
-              <fa-icon :icon="returnCurrentIcon(type)" :class="returnCurrentClass(type)" />
-            </span>
-            <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 { formataDataHora } from "../../services/textFormatting";
-
-export default {
-  components: { InteratividadePopup },
-  data() {
-    return {
-      informacaoAdicional: [],
-      informacao: [],
-    };
-  },
-  props: {
-    interatividade: {
-      type: Object,
-      required: true,
-    },
-    dominio: {
-      type: String,
-      required: true,
-    },
-    dictionary: {
-      type: Object,
-      required: true,
-    },
-    anexos: {
-      type: Array,
-      required: false,
-    },
-  },
-  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>
-.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;
-}
-
-.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>
+<template>
+  <div class="interatividade">
+    <!-- TABELA INTERATIVIDADE HO -->
+    <template v-if="informacao.length">
+      <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" />
+            <span v-else style="display: flex; align-items: center; justify-content-center; cursor: pointer;"
+              @click="openFile(mku, type)" :title="name">
+
+              <fa-icon :icon="returnCurrentIcon(type)" :class="returnCurrentClass(type)" />
+            </span>
+            <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 { formataDataHora } from "../../services/textFormatting";
+
+export default {
+  components: { InteratividadePopup },
+  data() {
+    return {
+      informacaoAdicional: [],
+      informacao: [],
+    };
+  },
+  props: {
+    interatividade: {
+      type: Object,
+      required: true,
+    },
+    dominio: {
+      type: String,
+      required: true,
+    },
+    dictionary: {
+      type: Object,
+      required: true,
+    },
+    anexos: {
+      type: Array,
+      required: false,
+    },
+  },
+  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>
+.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;
+}
+
+.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>