@nixweb/nixloc-ui 0.0.97 → 0.0.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.97",
+  "version": "0.0.100",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,
@@ -10,12 +10,17 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@ckeditor/ckeditor5-vue2": "^2.0.0",
     "@babel/polyfill": "^7.2.5",
     "bootstrap-vue": "^2.0.0-rc.11",
-    "file-saver": "^2.0.5",
+    "ckeditor5-custom-build": "file:ckeditor5",
     "sass-loader": "^12.4.0",
     "vodal": "^2.4.0",
+    "v-runtime-template": "^1.10.0",
     "vue-color": "^2.7.0",
+    "vue-html2pdf": "^1.8.0",
+    "vue-json-excel": "^0.3.0",
+    "vue-print-nb": "^1.7.5",
     "vue-currency-filter": "^3.3.0",
     "vue-js-toggle-button": "^1.3.0",
     "vue-loading-template": "^1.3.0",
@@ -28,8 +33,7 @@
     "vue-toggles": "^1.1.4",
     "vue-upload-file": "^1.1.0",
     "vue2-datepicker": "^2.13.0",
-    "vue2-editor": "^2.6.6",
-    "xlsx": "^0.18.5"
+    "vue2-editor": "^2.6.6"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -68,4 +72,4 @@
     "type": "git",
     "url": "git+https://github.com/nixweb-sistemas/nixloc-ui.git"
   }
-}
+}

package/src/component/forms/TextoArea.vue

@@ -36,7 +36,6 @@ import { mapState, mapMutations } from "vuex";
 export default {
   components: { Dica },
   name: "TextoArea",
-  mixins: [],
   props: {
     titulo: String,
     campo: String,

package/src/component/shared/CabecalhoImpressao.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="div-cabecalho somente-impressao">
+    <div class="titulo">{{ nomeArquivo }}</div>
+    <div class="lado-a-lado div-tag" v-for="tag in tags" :key="tag.id">
+      <span>{{ tag.titulo }}</span> <span>{{ tag.valor }}</span>
+      <span>,</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "CabecalhoImpressao",
+  computed: {
+    ...mapGetters("relatorio", ["tags"]),
+    nomeArquivo() {
+      return this.$route.matched[0].props.default.relatorio;
+    },
+  },
+};
+</script>
+<style scoped>
+.div-cabecalho {
+  margin: 20px;
+}
+
+.div-tag {
+  margin-right: 10px;
+}
+
+.titulo {
+  font-size: 18px;
+}
+</style>

package/src/component/shared/DocumentoEditor.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <div class="form-group row">
+      <div>
+        <div class="document-editor__toolbar"></div>
+        <div class="document-editor__editable-container">
+          <ckeditor :editor="editor" v-model="template" @ready="onReady"></ckeditor>
+        </div>
+      </div>
+    </div>
+    <br />
+  </div>
+</template>
+
+<script>
+import CKEditor from "ckeditor5-custom-build/build/ckeditor";
+
+export default {
+  name: "HtmlEditor",
+  components: {
+    CKEditor,
+  },
+  props: {
+    value: String,
+  },
+  data() {
+    return {
+      editor: CKEditor,
+      template: "",
+    };
+  },
+  methods: {
+    onReady(editor) {
+      const toolbarContainer = document.querySelector(".document-editor__toolbar");
+      toolbarContainer.appendChild(editor.ui.view.toolbar.element);
+    },
+  },
+  watch: {
+    template() {
+      this.$emit("input", this.template);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.document-editor {
+  border-radius: var(--ck-border-radius);
+  max-height: 700px;
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.document-editor__toolbar {
+  z-index: 1 !important;
+  min-width: 1100px;
+}
+
+.document-editor__toolbar .ck-toolbar {
+  border-radius: 0;
+}
+
+.document-editor__editable-container {
+  padding: 10px;
+  border: 1px solid #e4e6ec;
+  background: var(--ck-color-base-foreground);
+  overflow-y: scroll;
+}
+
+.document-editor__editable-container .ck-editor__editable {
+  width: 20.8cm;
+  min-height: 21cm;
+  padding: 20px;
+  border: 1px hsl(0, 0%, 82.7%) solid;
+  border-radius: var(--ck-border-radius);
+  background: white;
+  box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.1);
+  margin: 0 auto;
+}
+
+.document-editor .ck-content,
+.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
+  font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+/* Adjust the headings dropdown to host some larger heading styles. */
+.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
+  line-height: calc(1.7 * var(--ck-line-height-base) * var(--ck-font-size-base));
+  min-width: 6em;
+}
+
+/* Scale down all heading previews because they are way too big to be presented in the UI.
+    Preserve the relative scale, though. */
+.document-editor
+  .ck-heading-dropdown
+  .ck-list
+  .ck-button:not(.ck-heading_paragraph)
+  .ck-button__label {
+  transform: scale(0.8);
+  transform-origin: left;
+}
+
+/* Set the styles for "Heading 1". */
+.document-editor .ck-content h2,
+.document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
+  font-size: 2.18em;
+  font-weight: normal;
+}
+
+.document-editor .ck-content h2 {
+  line-height: 1.37em;
+  padding-top: 0.342em;
+  margin-bottom: 0.142em;
+}
+
+/* Set the styles for "Heading 2". */
+.document-editor .ck-content h3,
+.document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
+  font-size: 1.75em;
+  font-weight: normal;
+  color: hsl(203, 100%, 50%);
+}
+
+.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
+  color: var(--ck-color-list-button-on-text);
+}
+
+/* Set the styles for "Heading 2". */
+.document-editor .ck-content h3 {
+  line-height: 1.86em;
+  padding-top: 0.171em;
+  margin-bottom: 0.357em;
+}
+</style>

package/src/component/shared/DocumentoPreview.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <v-runtime-template :template="template" />
+  </div>
+</template>
+
+<script>
+import VRuntimeTemplate from "v-runtime-template";
+
+export default {
+  name: "HtmlPreview",
+  components: {
+    VRuntimeTemplate,
+  },
+  props: {
+    template: String,
+  },
+  data() {
+    return {
+      nome: "Fábio",
+      sobrenome: "Gomes de Ávila",
+    };
+  },
+};
+</script>

package/src/component/shared/ExportarExcel.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <download-excel
+      :fields="coluna"
+      :data="dados"
+      :before-finish="exportacaoFinalizada"
+      worksheet="Planilha"
+      :name="`${nomeArquivo}.xls`"
+    >
+      <Botao
+        chave="exportarExcel"
+        :tipo="botao.tipo"
+        :titulo="botao.titulo"
+        classeIcone="fas fa-file-excel"
+        :tamanho="botao.tamanho"
+      />
+    </download-excel>
+  </div>
+</template>
+
+<script>
+import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
+
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ExportarExcel",
+  props: {
+    botao: Object,
+    cabecalho: Array,
+    dados: Array,
+  },
+  components: {
+    Botao,
+  },
+  data() {
+    return {
+      json_meta: [
+        [
+          {
+            key: "charset",
+            value: "utf-8",
+          },
+        ],
+      ],
+    };
+  },
+  methods: {
+    ...mapMutations("generic", ["removeCarregando"]),
+    exportacaoFinalizada() {
+      this.removeCarregando(["exportarExcel"]);
+    },
+  },
+  computed: {
+    coluna() {
+      var object = this.cabecalho.reduce(
+        (obj, item) => Object.assign(obj, { [item.titulo]: item.campo }),
+        {}
+      );
+      return object;
+    },
+    nomeArquivo() {
+      return this.$route.matched[0].props.default.relatorio;
+    },
+  },
+};
+</script>

package/src/component/shared/{Imprimir.vue → ExportarPDF.vue}

@@ -16,7 +16,7 @@
       :paginate-elements-by-height="1400"
       :filename="nomeArquivo"
       :pdf-quality="2"
-      :manual-pagination="true"
+      :manual-pagination="false"
       :pdf-format="tamanhoPagina"
       :pdf-orientation="orientacao"
       pdf-content-width="100%"
@@ -51,7 +51,7 @@ import BarraRolagem from "../layout/BarraRolagem.vue";
 import VueHtml2pdf from "vue-html2pdf";
 
 export default {
-  name: "Imprimir",
+  name: "ExportarPDF",
   components: { VueHtml2pdf, BarraRolagem, Carregando },
   props: {
     titulo: String,
@@ -76,7 +76,9 @@ export default {
         this.carregando = false;
       }
     },
-    hasStartedGeneration() {},
+    hasStartedGeneration() {
+      console.log("começou");
+    },
     hasDownloaded() {
       console.log("finalizou");
     },

package/src/component/shared/query-builder/Tags.vue

@@ -22,51 +22,15 @@ export default {
   props: {
     nomeEvento: String,
   },
-  data() {
-    return {
-      tags: [],
-    };
-  },
+
   computed: {
-    ...mapGetters("relatorio", ["filtroSelecionado"]),
+    ...mapGetters("relatorio", ["tags"]),
     ...mapGetters("generic", ["mostrarModal", "evento"]),
   },
   methods: {
     ...mapMutations("relatorio", ["removeFiltroSelecionado"]),
   },
   watch: {
-    filtroSelecionado: {
-      handler(filtro) {
-        let self = this;
-        this.tags = [];
-        filtro.children.forEach(function (value) {
-          let valor = "";
-          let type = value.query.type;
-
-          if (type == "custom-component" && value.query.label == "Período") {
-            valor = `${value.query.value[0]} - ${value.query.value[1]}`;
-          }
-
-          if (type == "text" || type == "numeric") {
-            valor = `${value.query.operator} "${value.query.value}"`;
-          }
-
-          if (type == "checkbox") {
-            value.query.choices.forEach(function (opcoes) {
-              value.query.value.forEach(function (value) {
-                if (opcoes.value == value) {
-                  valor += `${opcoes.label},`;
-                }
-              });
-            });
-          }
-
-          let tag = { id: value.query.id, titulo: value.query.label, valor: valor };
-          if (value.query.value != null) self.tags.push(tag);
-        });
-      },
-      deep: true,
-    },
     evento: {
       handler(evento) {
         if (evento.nome == "tagRemovida") {

package/src/component/template/ModeloRelatorioView.vue

@@ -127,36 +127,40 @@
           <b-row>
             <b-col sm="6">
               <div class="lado-a-lado">
-                <Botao
-                  chave="buscarRelatorio"
-                  tipo="editar"
-                  titulo="Excel"
-                  classeIcone="fas fa-file-excel"
-                  tamanho="pequeno"
-                  :clique="obterTodos"
+                <ExportarExcel
+                  :botao="{ tipo: 'editar', titulo: 'Excel', tamanho: 'pequeno' }"
+                  nomeArquivo="Auditoria"
+                  :cabecalho="conteudo.cabecalhoTabela"
+                  :dados="conteudo.dados"
                 />
               </div>
               <div class="lado-a-lado">
-                <Botao
-                  chave="buscarRelatorio"
-                  tipo="editar"
-                  titulo="PDF"
-                  classeIcone="fas fa-file-pdf"
-                  tamanho="pequeno"
-                  :clique="obterTodos"
-                />
+                <div>
+                  <Botao
+                    v-print="'#printMe'"
+                    chave="aplicaFiltro"
+                    tipo="editar"
+                    titulo="Imprimir"
+                    classeIcone="fas fa-print"
+                    tamanho="pequeno"
+                    :clique="aplicarFiltro"
+                  />
+                </div>
               </div>
             </b-col>
             <b-col sm="6">
               <Registro :totalRegistro="conteudo.totalRegistros" />
             </b-col>
           </b-row>
-          <BarraRolagem :alturaMinima="300" :alturaMaxima="500">
-            <Tabela
-              :cabecalhoTabela="conteudo.cabecalhoTabela"
-              :dados="conteudo.dados"
-              :mostrarChecks="modeloLista.mostrarChecks"
-            />
+          <BarraRolagem :alturaMinima="400" :alturaMaxima="600">
+            <div id="printMe">
+              <CabecalhoImpressao />
+              <Tabela
+                :cabecalhoTabela="conteudo.cabecalhoTabela"
+                :dados="conteudo.dados"
+                :mostrarChecks="modeloLista.mostrarChecks"
+              />
+            </div>
           </BarraRolagem>
         </div>
         <div class="div-sem-dados" v-if="nenhumDadoRetornado">
@@ -176,7 +180,9 @@
 import Alerta from "@nixweb/nixloc-ui/src/component/layout/Alerta";
 import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
 import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
+import ExportarExcel from "@nixweb/nixloc-ui/src/component/shared/ExportarExcel";
 import Tabela from "../shared/Tabela.vue";
+import CabecalhoImpressao from "../shared/CabecalhoImpressao.vue";
 import Registro from "../shared/Registro.vue";
 import Painel from "@nixweb/nixloc-ui/src/component/layout/Painel.vue";
 import BarraRolagem from "@nixweb/nixloc-ui/src/component/layout/BarraRolagem.vue";
@@ -185,11 +191,15 @@ import Progresso from "@nixweb/nixloc-ui/src/component/shared/Progresso";
 import Rodape from "@nixweb/nixloc-ui/src/component/shared/query-builder/Rodape.vue";
 import Tags from "@nixweb/nixloc-ui/src/component/shared/query-builder/Tags.vue";
 import RelatorioAdicionarModificar from "@nixweb/nixloc-ui/src/component/template/RelatorioAdicionarModificar.vue";
+import print from "vue-print-nb";
 
 import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
 
 export default {
   name: "ModeloRelatorioView",
+  directives: {
+    print,
+  },
   props: {
     modeloLista: Object,
     campo: Array,
@@ -208,6 +218,8 @@ export default {
     Progresso,
     Tags,
     RelatorioAdicionarModificar,
+    ExportarExcel,
+    CabecalhoImpressao,
   },
   data() {
     return {
@@ -223,6 +235,7 @@ export default {
       btnDesativado: true,
       carregando: false,
       nenhumDadoRetornado: false,
+      teste: this.router,
     };
   },
   mounted() {

package/src/store/modulos/generic.js

@@ -312,7 +312,7 @@ export default {
                     return false;
                 })
         },
-        getPdfApi: async function (context, params) {
+        getFileApi: async function (context, params) {
             context.commit('limpaMetodoExecutadoApi');
             return axios.post(params.url, params.obj, {
                 headers: new Token().tokenHeaders(), responseType: "arraybuffer",

package/src/store/modulos/relatorio.js

@@ -17,6 +17,7 @@ export default {
         opcoesValorInicial: [],
         consulta: [],
         resumo: [],
+        tags: []
     },
     getters: {
         cabecalhoTabela: (state) => {
@@ -49,9 +50,9 @@ export default {
             });
 
             // se não tiver salvo, reseta o filtro que estava armazenado
-          /*  if (tamanhoValorInicial == 0)
-                state.filtroSelecionado.children = [];*/
-                
+            /*  if (tamanhoValorInicial == 0)
+                  state.filtroSelecionado.children = [];*/
+
             return state.opcoes;
         },
         filtroObrigatorio: (state) => {
@@ -113,6 +114,37 @@ export default {
 
             return { consulta, resumo };
         },
+        tags: (state) => {
+            state.tags = [];
+            state.filtroSelecionado.children.forEach(function (value) {
+                let valor = "";
+                let type = value.query.type;
+
+                if (value.query.value) {
+                    if (type == "custom-component" && value.query.label == "Período") {
+                        valor = `${value.query.value[0]} - ${value.query.value[1]}`;
+                    }
+
+                    if (type == "text" || type == "numeric") {
+                        valor = `${value.query.operator} "${value.query.value}"`;
+                    }
+
+                    if (type == "checkbox") {
+                        value.query.choices.forEach(function (opcoes) {
+                            value.query.value.forEach(function (value) {
+                                if (opcoes.value == value) {
+                                    valor += `${opcoes.label},`;
+                                }
+                            });
+                        });
+                    }
+
+                    let tag = { id: value.query.id, titulo: value.query.label, valor: valor };
+                    if (value.query.value != null) state.tags.push(tag);
+                }
+            });
+            return state.tags;
+        }
     },
     mutations: {
         insereRelatorio: (state, obj) => {