@nixweb/nixloc-ui 0.0.103 → 0.0.104

package/src/component/template/ModeloDocumentoView.vue

@@ -15,20 +15,41 @@
                 <b-col sm="6">
                   <div class="lado-a-lado">
                     <Botao
-                      chave="salvarRelatorio"
+                      chave="salvarDocumento"
                       tipo="sucesso"
-                      titulo="Salvar Modelo"
+                      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"
-                      titulo="Código Fonte"
                       classeIcone="far fa-code"
                       tamanho="pequeno"
                       :clique="abrirCodigo"
@@ -48,6 +69,14 @@
               </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" />
@@ -72,7 +101,7 @@
               <BarraRolagem :alturaMinima="300" :alturaMaxima="500">
                 <div class="a4">
                   <div id="printMe">
-                    <DocumentoPreview :template="documentoHtml" :dados="dados" />
+                    <DocumentoPreview :template="documentoPreview" :dados="dados" />
                   </div>
                 </div>
               </BarraRolagem>
@@ -93,6 +122,7 @@ 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";
@@ -112,6 +142,7 @@ export default {
     DocumentoEditor,
     DocumentoPreview,
     CodigoEditor,
+    ConfiguracaoTabela,
     Moldura,
     Botao,
     Modal,
@@ -121,25 +152,38 @@ export default {
     painel: Object,
     dados: Object,
   },
+  data() {
+    return {
+      id: this.$route.params.id,
+      salvarDesabilitado: true,
+    };
+  },
   computed: {
-    ...mapState("generic", ["modal"]),
-    ...mapGetters("generic", ["mostrarModal", "evento"]),
-    documentoHtml: {
-      get() {
-        return this.$store.state.generic.documentoHtml;
-      },
-      set(value) {
-        this.atualizaDocumentoHtml(value);
-      },
-    },
+    ...mapState("generic", ["modal", "documentoHtml"]),
+    ...mapGetters("generic", ["mostrarModal", "evento", "documentoPreview"]),
   },
   methods: {
     ...mapMutations("generic", [
       "abrirModal",
       "fecharModal",
       "removeCarregando",
-      "atualizaDocumentoHtml",
+      "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"]);
@@ -152,6 +196,15 @@ export default {
       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>

package/src/store/modulos/generic.js

@@ -65,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) => {
@@ -126,7 +206,6 @@ export default {
         },
         atualizaDocumentoHtml: (state, value) => {
             state.documentoHtml = value;
-
         },
         insereEvento: (state, obj) => {
             state.evento.dataHora = new Date();