@nixweb/nixloc-ui 0.0.101 → 0.0.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.101",
+  "version": "0.0.102",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/shared/CodigoEditor.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <button @click="aplicar()">Aplicar</button>
+    <AceEditor
+      v-model="codigo"
+      lang="html"
+      @init="editorInit"
+      theme="monokai"
+      width="100%"
+      height="400px"
+      :options="{
+        enableBasicAutocompletion: true,
+        enableLiveAutocompletion: true,
+        fontSize: 15,
+        highlightActiveLine: true,
+        enableSnippets: false,
+        showLineNumbers: true,
+        tabSize: 2,
+        showPrintMargin: false,
+        showGutter: true,
+      }"
+    />
+  </div>
+</template>
+
+<script>
+import AceEditor from "vuejs-ace-editor";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "CodigoEditor",
+  components: {
+    AceEditor,
+  },
+  data() {
+    return {
+      codigo: "",
+    };
+  },
+  computed: {
+    documentoHtml: {
+      get() {
+        return this.$store.state.generic.documentoHtml;
+      },
+      set(value) {
+        this.atualizaDocumentoHtml(value);
+      },
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["atualizaDocumentoHtml"]),
+    aplicar() {
+      this.atualizaDocumentoHtml(this.codigo);
+    },
+    dataSumit() {
+      //code here
+    },
+    editorInit: function () {
+      require("brace/ext/language_tools"); //language extension prerequsite...
+      require("brace/mode/html");
+      require("brace/mode/javascript"); //language
+      require("brace/mode/less");
+      require("brace/theme/monokai");
+      require("brace/snippets/javascript"); //snippet
+    },
+  },
+};
+</script>

package/src/component/shared/DocumentoEditor.vue

@@ -1,10 +1,10 @@
 <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"></ckeditor>
         </div>
       </div>
     </div>
@@ -15,6 +15,8 @@
 <script>
 import CKEditor from "ckeditor5-custom-build/build/ckeditor";
 
+import { mapMutations } from "vuex";
+
 export default {
   name: "HtmlEditor",
   components: {
@@ -26,18 +28,23 @@ export default {
   data() {
     return {
       editor: CKEditor,
-      template: "",
     };
   },
   methods: {
+    ...mapMutations("generic", ["atualizaDocumentoHtml"]),
     onReady(editor) {
       const toolbarContainer = document.querySelector(".document-editor__toolbar");
       toolbarContainer.appendChild(editor.ui.view.toolbar.element);
     },
   },
-  watch: {
-    template() {
-      this.$emit("input", this.template);
+  computed: {
+    documentoHtml: {
+      get() {
+        return this.$store.state.generic.documentoHtml;
+      },
+      set(value) {
+        this.atualizaDocumentoHtml(value);
+      },
     },
   },
 };
@@ -49,6 +56,7 @@ export default {
   max-height: 700px;
   display: flex;
   flex-flow: column nowrap;
+  margin: auto !important;
 }
 
 .document-editor__toolbar {
@@ -68,7 +76,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,7 @@ export default {
   },
   props: {
     template: String,
-  },
-  data() {
-    return {
-      nome: "Fábio",
-      sobrenome: "Gomes de Ávila",
-    };
+    dados: Object,
   },
 };
 </script>

package/src/component/template/ModeloDocumentoView.vue

@@ -0,0 +1,174 @@
+<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="salvarRelatorio"
+                      tipo="sucesso"
+                      titulo="Salvar Modelo"
+                      classeIcone="fas fa-save"
+                      tamanho="pequeno"
+                    />
+                  </div>
+                </b-col>
+                <b-col class="text-right" sm="6">
+                  <div class="lado-a-lado">
+                    <Botao
+                      chave="abrirCodigo"
+                      tipo="info"
+                      titulo="Código Fonte"
+                      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="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="documentoHtml" :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 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,
+    Moldura,
+    Botao,
+    Modal,
+    BarraRolagem,
+  },
+  props: {
+    painel: Object,
+    dados: Object,
+  },
+  computed: {
+    ...mapState("generic", ["modal"]),
+    ...mapGetters("generic", ["mostrarModal", "evento"]),
+    documentoHtml: {
+      get() {
+        return this.$store.state.generic.documentoHtml;
+      },
+      set(value) {
+        this.atualizaDocumentoHtml(value);
+      },
+    },
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "abrirModal",
+      "fecharModal",
+      "removeCarregando",
+      "atualizaDocumentoHtml",
+    ]),
+    abrirCodigo() {
+      this.abrirModal("codigo");
+      this.removeCarregando(["abrirCodigo"]);
+    },
+    abrirVisualizar() {
+      this.abrirModal("visualizar");
+      this.removeCarregando(["abrirVisualizar"]);
+    },
+    imprimir() {
+      this.removeCarregando(["imprimir"]);
+    },
+  },
+};
+</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,
@@ -123,6 +124,10 @@ 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;