vue-intergrall-plugins 0.0.300 → 0.0.500

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

@@ -1,392 +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: .9rem;
-  }
-  .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: 2rem;
-  }
-  .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: .85rem;
-  }
-  .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">
+    <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: .9rem;
+  }
+  .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: 2rem;
+  }
+  .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: .85rem;
+  }
+  .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>