@nixweb/nixloc-ui 0.0.101 → 0.0.104

package/src/component/shared/DocumentoEditor.vue

@@ -1,10 +1,15 @@
 <template>
   <div>
-    <div class="form-group row">
+    <div class="form-group">
       <div>
         <div class="document-editor__toolbar"></div>
         <div class="document-editor__editable-container">
-          <ckeditor :editor="editor" v-model="template" @ready="onReady"></ckeditor>
+          <ckeditor
+            :editor="editor"
+            v-model="documentoHtml"
+            @ready="onReady"
+            @focus="modificou"
+          ></ckeditor>
         </div>
       </div>
     </div>
@@ -15,29 +20,37 @@
 <script>
 import CKEditor from "ckeditor5-custom-build/build/ckeditor";
 
+import { mapState, mapMutations } from "vuex";
+
 export default {
-  name: "HtmlEditor",
+  name: "DocumentoEditor",
   components: {
     CKEditor,
   },
-  props: {
-    value: String,
-  },
   data() {
     return {
       editor: CKEditor,
-      template: "",
     };
   },
+  computed: {
+    ...mapState("generic", ["documentoHtml"]),
+    documentoHtml: {
+      get() {
+        return this.$store.state.generic.documentoHtml;
+      },
+      set(value) {
+        this.atualizaDocumentoHtml(value);
+      },
+    },
+  },
   methods: {
+    ...mapMutations("generic", ["atualizaDocumentoHtml", "insereEvento"]),
     onReady(editor) {
       const toolbarContainer = document.querySelector(".document-editor__toolbar");
       toolbarContainer.appendChild(editor.ui.view.toolbar.element);
     },
-  },
-  watch: {
-    template() {
-      this.$emit("input", this.template);
+    modificou() {
+      this.insereEvento({ nome: "documentoEditoFocus" });
     },
   },
 };
@@ -49,6 +62,7 @@ export default {
   max-height: 700px;
   display: flex;
   flex-flow: column nowrap;
+  margin: auto !important;
 }
 
 .document-editor__toolbar {
@@ -68,7 +82,7 @@ export default {
 }
 
 .document-editor__editable-container .ck-editor__editable {
-  width: 20.8cm;
+  width: 22cm;
   min-height: 21cm;
   padding: 20px;
   border: 1px hsl(0, 0%, 82.7%) solid;

package/src/component/shared/DocumentoPreview.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <v-runtime-template :template="template" />
-  </div>
+  <v-runtime-template :template="`<div>${template}</div>`" />
 </template>
 
 <script>
@@ -14,12 +12,32 @@ export default {
   },
   props: {
     template: String,
+    dados: Object,
   },
-  data() {
-    return {
-      nome: "Fábio",
-      sobrenome: "Gomes de Ávila",
-    };
+  methods: {
+    agruparPor(array, key) {
+      const result = {};
+      array.forEach((item) => {
+        if (!result[item[key]]) {
+          result[item[key]] = [];
+        }
+        result[item[key]].push(item);
+      });
+      return result;
+    },
+    somaGrupo(grupoNome) {
+      let total = "";
+      this.dados.produto.forEach((x) => {
+        if (x.grupoNome === grupoNome) return (total = x.grupoTotal);
+      });
+      return total;
+    },
+  },
+  computed: {
+    produtoAgrupado() {
+      return this.agruparPor(this.dados.produto, "grupoNome");
+    },
   },
 };
 </script>
+

package/src/component/template/ModeloDocumentoView.vue

@@ -0,0 +1,227 @@
+<template>
+  <div>
+    <Painel
+      :modulo="painel.modulo"
+      :titulo="painel.titulo"
+      :mostrarFiltro="painel.mostrarFiltro"
+      :mostrarPesquisa="painel.mostrarPesquisa"
+      :mostrarBotoes="painel.mostrarBotoes"
+    >
+      <div slot="conteudo-principal">
+        <div>
+          <div class="div-top">
+            <Moldura>
+              <b-row>
+                <b-col sm="6">
+                  <div class="lado-a-lado">
+                    <Botao
+                      chave="salvarDocumento"
+                      tipo="sucesso"
+                      titulo="Salvar"
+                      classeIcone="fas fa-save"
+                      :desabilitado="salvarDesabilitado"
+                      tamanho="pequeno"
+                      :clique="salvarDocumento"
+                    />
+                  </div>
+                  <div class="lado-a-lado">
+                    <Botao
+                      v-if="id"
+                      chave="fazerCopia"
+                      tipo="sucesso"
+                      titulo="Fazer uma cópia"
+                      classeIcone="fas fa-clone"
+                      tamanho="pequeno"
+                      :clique="fazerCopia"
+                    />
+                  </div>
+                </b-col>
+                <b-col class="text-right" sm="6">
+                  <div class="lado-a-lado">
+                    <Botao
+                      chave="abrirConfiguracao"
+                      tipo="info"
+                      classeIcone="fas fa-tools"
+                      tamanho="pequeno"
+                      :clique="abrirConfiguracao"
+                    />
+                  </div>
+                  <div class="lado-a-lado">
+                    <Botao
+                      chave="abrirCodigo"
+                      tipo="info"
+                      classeIcone="far fa-code"
+                      tamanho="pequeno"
+                      :clique="abrirCodigo"
+                    />
+                  </div>
+                  <div class="lado-a-lado">
+                    <Botao
+                      chave="abrirVisualizar"
+                      tipo="info"
+                      titulo="Visualizar"
+                      classeIcone="far fa-eye"
+                      tamanho="pequeno"
+                      :clique="abrirVisualizar"
+                    />
+                  </div>
+                </b-col>
+              </b-row>
+            </Moldura>
+          </div>
+          <Modal titulo="Salvar" :largura="500" v-show="mostrarModal('salvarDocumento')">
+            <slot></slot>
+          </Modal>
+          <Modal titulo="Configuração" :largura="700" v-if="mostrarModal('configuracao')">
+            <BarraRolagem :alturaMinima="200" :alturaMaxima="400">
+              <ConfiguracaoTabela />
+            </BarraRolagem>
+          </Modal>
+          <Modal titulo="Editor de Código" :largura="900" v-if="mostrarModal('codigo')">
+            <BarraRolagem :alturaMinima="200" :alturaMaxima="400">
+              <CodigoEditor v-if="modal.abrir" />
+            </BarraRolagem>
+          </Modal>
+          <Modal titulo="Visualizar" :largura="1100" v-if="mostrarModal('visualizar')">
+            <div v-if="modal.abrir">
+              <b-row>
+                <b-col class="text-center">
+                  <Botao
+                    v-print="'#printMe'"
+                    chave="imprimir"
+                    tipo="editar"
+                    titulo="Imprimir"
+                    classeIcone="fas fa-print"
+                    tamanho="pequeno"
+                    :clique="imprimir"
+                  />
+                </b-col>
+              </b-row>
+              <br />
+              <BarraRolagem :alturaMinima="300" :alturaMaxima="500">
+                <div class="a4">
+                  <div id="printMe">
+                    <DocumentoPreview :template="documentoPreview" :dados="dados" />
+                  </div>
+                </div>
+              </BarraRolagem>
+            </div>
+          </Modal>
+          <div class="div-editor">
+            <DocumentoEditor />
+          </div>
+        </div>
+      </div>
+    </Painel>
+  </div>
+</template>
+
+<script>
+import Painel from "@nixweb/nixloc-ui/src/component/layout/Painel";
+
+import DocumentoEditor from "@nixweb/nixloc-ui/src/component/shared/DocumentoEditor.vue";
+import DocumentoPreview from "@nixweb/nixloc-ui/src/component/shared/DocumentoPreview.vue";
+import CodigoEditor from "@nixweb/nixloc-ui/src/component/shared/CodigoEditor.vue";
+import ConfiguracaoTabela from "@nixweb/nixloc-ui/src/component/shared/ConfiguracaoTabela.vue";
+import Moldura from "@nixweb/nixloc-ui/src/component/layout/Moldura";
+import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import BarraRolagem from "@nixweb/nixloc-ui/src/component/layout/BarraRolagem.vue";
+
+import print from "vue-print-nb";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "DocumentoAdicionarModificarView",
+  directives: {
+    print,
+  },
+  components: {
+    Painel,
+    DocumentoEditor,
+    DocumentoPreview,
+    CodigoEditor,
+    ConfiguracaoTabela,
+    Moldura,
+    Botao,
+    Modal,
+    BarraRolagem,
+  },
+  props: {
+    painel: Object,
+    dados: Object,
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      salvarDesabilitado: true,
+    };
+  },
+  computed: {
+    ...mapState("generic", ["modal", "documentoHtml"]),
+    ...mapGetters("generic", ["mostrarModal", "evento", "documentoPreview"]),
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "abrirModal",
+      "fecharModal",
+      "removeCarregando",
+      "insereEvento",
+    ]),
+    salvarDocumento() {
+      if (this.id) {
+        this.insereEvento({ nome: "salvarDocumento" });
+      } else {
+        this.abrirModal("salvarDocumento");
+        this.removeCarregando(["salvarDocumento"]);
+      }
+    },
+    fazerCopia() {
+      this.insereEvento({ nome: "fazerCopia" });
+    },
+    abrirConfiguracao() {
+      this.abrirModal("configuracao");
+      this.removeCarregando(["abrirConfiguracao"]);
+    },
+    abrirCodigo() {
+      this.abrirModal("codigo");
+      this.removeCarregando(["abrirCodigo"]);
+    },
+    abrirVisualizar() {
+      this.abrirModal("visualizar");
+      this.removeCarregando(["abrirVisualizar"]);
+    },
+    imprimir() {
+      this.removeCarregando(["imprimir"]);
+    },
+  },
+  watch: {
+    evento: {
+      handler(evento) {
+        if (evento.nome == "documentoEditorModificado") this.salvarDesabilitado = true;
+        if (evento.nome == "documentoEditoFocus") this.salvarDesabilitado = false;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.div-top {
+  margin-top: 30px;
+}
+.div-editor {
+  margin-top: 25px;
+}
+.a4 {
+  width: 22cm;
+  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 hsl(0deg 0% 0% / 10%);
+  margin: 0 auto;
+}
+</style>

package/src/component/template/ModeloRelatorioView.vue

@@ -41,7 +41,7 @@
                       v-if="!invalido"
                       chave="salvarRelatorio"
                       tipo="sucesso"
-                      titulo="Salvar"
+                      titulo="Salvar Modelo"
                       classeIcone="fas fa-save"
                       :desabilitado="carregando || invalido"
                       tamanho="pequeno"

package/src/store/modulos/generic.js

@@ -29,6 +29,7 @@ export default {
         },
         ids: undefined,
         pesquisa: { conteudo: "", filtro: { conteudo: "contem", id: "contem" } },
+        documentoHtml: "",
         EscolherEstatico: { dataHora: undefined, campoAlvo: undefined, valor: undefined },
         buscouPesquisa: false,
         limpouPesquisa: false,
@@ -64,6 +65,86 @@ export default {
         evento: (state) => {
             return state.evento;
         },
+        documentoPreview: (state) => {
+            let documentoHtml = state.documentoHtml
+            let retorno = documentoHtml;
+
+            var tabelas = document.getElementsByTagName("table");
+            let total = tabelas.length;
+
+            let config = [];
+
+            let sequencial = 0;
+            while (sequencial <= total - 1) {
+
+                let tabela = document.getElementsByTagName("table")[sequencial];
+                let th = tabela.getElementsByTagName("th")[0];
+
+                let obj = {
+                    vForAgrupado: "",
+                    vForSimples: "",
+                    nomeGrupo: "",
+                    nomeGrupoReplace: ""
+                };
+
+                if (th) {
+                    let ehProdutoAgrupado = th.innerText.includes("n.grupo");
+                    let ehProduto = th.innerText.includes("n.produto");
+                    let ehPeriodo = th.innerText.includes("n.periodo");
+                    let ehPagamento = th.innerText.includes("n.pagamento");
+
+                    if (ehProduto) {
+                        obj.vForSimples = "v-for='n in dados.produto'";
+                        config.push(obj);
+                    } else if (ehPeriodo) {
+                        obj.vForSimples = "v-for='n in dados.periodo'";
+                        config.push(obj);
+                    } else if (ehPagamento) {
+                        obj.vForSimples = "v-for='n in dados.pagamento'";
+                        config.push(obj);
+                    } else if (ehProdutoAgrupado) {
+                        obj.vForAgrupado = "v-for='(produto, grupoNome) in produtoAgrupado'";
+                        obj.vForSimples = "v-for='n in produto'";
+
+                        var posicaoInicio = documentoHtml.split("<tbody>", sequencial + 1).join("<tbody>").length;
+                        var posicaoFim = documentoHtml.split("</tbody>", sequencial + 1).join("</tbody>").length;
+
+                        let tbody = documentoHtml.substring(documentoHtml.indexOf("<tbody>", posicaoInicio), documentoHtml.lastIndexOf("</tbody>", posicaoFim));
+
+                        let tr = tbody.substring(tbody.indexOf("<tr>"), tbody.lastIndexOf("</tr>"));
+
+                        obj.nomeGrupo = tr.substring(0, tr.indexOf('</tr>')) + "</tr>";
+                        obj.nomeGrupo = obj.nomeGrupo.replaceAll("\"", "'");
+                        obj.nomeGrupoReplace = obj.nomeGrupo.replace("<tr>", "").replace("</tr>", "");
+                        config.push(obj);
+
+                    } else {
+                        config.push(obj);
+                    }
+                } else {
+                    config.push(obj);
+                }
+                sequencial++;
+            }
+
+            let replace = "";
+            config.forEach(x => {
+                replace += `.replace("<tbody>${x.nomeGrupo}<tr>", "<tbody ${x.vForAgrupado}>${x.nomeGrupoReplace}<tr ${x.vForSimples}>")`;
+            });
+
+            var ret = retorno.replaceAll("\"", "'");
+            ret = eval(`ret${replace}`);
+
+            var classeImportant = ret
+                .replaceAll("n.grupo", "")
+                .replaceAll("n.produto", "")
+                .replaceAll("n.periodo", "")
+                .replaceAll("n.pagamento", "")
+                .replaceAll(";", "!important;")
+                .replaceAll("<p>&nbsp!important;</p>", "<p>&nbsp</p>");
+
+            return classeImportant;
+        }
     },
     mutations: {
         abrirModal: (state, nome) => {
@@ -123,6 +204,9 @@ export default {
                     obj.totalPorPagina = paginacao.totalPorPagina;
             });
         },
+        atualizaDocumentoHtml: (state, value) => {
+            state.documentoHtml = value;
+        },
         insereEvento: (state, obj) => {
             state.evento.dataHora = new Date();
             state.evento.nome = obj.nome;