@nixweb/nixloc-ui 0.0.111 → 0.0.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.111",
+  "version": "0.0.112",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,
@@ -13,6 +13,7 @@
     "@babel/polyfill": "^7.2.5",
     "@ckeditor/ckeditor5-vue2": "^2.0.0",
     "bootstrap-vue": "^2.0.0-rc.11",
+    "ckeditor5-custom-build": "file:ckeditor5",
     "sass-loader": "^12.4.0",
     "v-runtime-template": "^1.10.0",
     "vodal": "^2.4.0",

package/src/component/shared/CodigoEditor.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <button @click="aplicar()">Aplicar</button>
     <AceEditor
       v-model="codigo"
       lang="html"
@@ -20,11 +19,26 @@
         showGutter: true,
       }"
     />
+    <div class="aplicar">
+      <b-row>
+        <b-col class="text-right">
+          <Botao
+            chave="aplicarCodigo"
+            tipo="primario"
+            titulo="Aplicar"
+            classeIcone="far fa-code"
+            tamanho="pequeno"
+            :clique="aplicar"
+          />
+        </b-col>
+      </b-row>
+    </div>
   </div>
 </template>
 
 <script>
 import AceEditor from "vuejs-ace-editor";
+import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
 
 import { mapMutations } from "vuex";
 
@@ -32,6 +46,7 @@ export default {
   name: "CodigoEditor",
   components: {
     AceEditor,
+    Botao,
   },
   data() {
     return {
@@ -52,12 +67,15 @@ export default {
     this.codigo = this.documentoHtml;
   },
   methods: {
-    ...mapMutations("generic", ["atualizaDocumentoHtml"]),
+    ...mapMutations("generic", [
+      "atualizaDocumentoHtml",
+      "fecharModal",
+      "removeCarregando",
+    ]),
     aplicar() {
       this.atualizaDocumentoHtml(this.codigo);
-    },
-    dataSumit() {
-      //code here
+      this.fecharModal("codigo");
+      this.removeCarregando(["aplicarCodigo"]);
     },
     editorInit: function () {
       require("brace/ext/language_tools"); //language extension prerequsite...
@@ -70,3 +88,8 @@ export default {
   },
 };
 </script>
+<style scoped>
+.aplicar {
+  margin-top: 10px;
+}
+</style>

package/src/component/shared/DocumentoPreview.vue

@@ -5,6 +5,8 @@
 <script>
 import VRuntimeTemplate from "v-runtime-template";
 
+import { mapGetters } from "vuex";
+
 export default {
   name: "HtmlPreview",
   components: {
@@ -15,16 +17,6 @@ export default {
     dados: Object,
   },
   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) => {
@@ -34,10 +26,10 @@ export default {
     },
   },
   computed: {
+    ...mapGetters("generic", ["agruparPor"]),
     produtoAgrupado() {
-      return this.agruparPor(this.dados.produto, "grupoNome");
+      return this.agruparPor({ array: this.dados.produto, key: "grupoNome" });
     },
   },
 };
 </script>
-

package/src/component/shared/LegendaParametro.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="div-alerta">
+      <Alerta tipo="info">
+        <span>
+          Utilize os parâmetros para que as informações sejam carregadas de forma
+          dinâmicas!</span
+        >
+      </Alerta>
+    </div>
+    <table class="table table-responsive-xs">
+      <thead>
+        <tr>
+          <th><span class="titulo-cabecalho">Parâmetro</span></th>
+          <th><span class="titulo-cabecalho">Descrição</span></th>
+          <th><span class="titulo-cabecalho">Exemplo</span></th>
+        </tr>
+      </thead>
+      <tbody v-for="(legenda, grupoNome) in agrupado">
+        <td class="grupo" colspan="8">
+          <div>{{ grupoNome }}</div>
+        </td>
+        <tr v-for="item in legenda">
+          <td>
+            <span> {{ item.parametro }}</span>
+          </td>
+          <td>
+            <span> {{ item.descricao }}</span>
+          </td>
+          <td>
+            <span> {{ item.exemplo }}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+import Alerta from "@nixweb/nixloc-ui/src/component/layout/Alerta";
+
+import { mapGetters } from "vuex";
+
+export default {
+  name: "LegendaParametro",
+  components: {
+    Alerta,
+  },
+  data() {
+    return {
+      legenda: [
+        {
+          grupoNome: "Locação",
+          parametro: "{{d.l.n}}",
+          descricao: "Número da Locação",
+          exemplo: "200",
+        },
+        {
+          grupoNome: "Locação",
+          parametro: "{{d.l.dA}}",
+          descricao: "Número da Locação",
+          exemplo: "200",
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["agruparPor"]),
+    agrupado() {
+      var teste = this.agruparPor({ array: this.legenda, key: "grupoNome" });
+      console.log(teste);
+      return teste;
+    },
+  },
+};
+</script>
+<style scoped>
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 5px !important;
+  padding-top: 7px !important;
+  padding-bottom: 5px !important;
+  padding-right: 5px !important;
+  border-bottom: 0px !important;
+}
+
+.titulo-cabecalho {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.grupo {
+  background-color: #fafafc;
+}
+
+.div-alerta {
+  margin-bottom: 20px;
+}
+</style>

package/src/component/shared/Tabela.vue

@@ -258,7 +258,7 @@ tr:hover {
 }
 
 .link {
-  color: darkblue;
+  color: #3F529B;
   font-size: 15px;
   font-weight: 400;
   cursor: pointer;

package/src/component/template/ModeloDocumentoView.vue

@@ -39,11 +39,11 @@
                 <b-col class="text-right" sm="6">
                   <div class="lado-a-lado">
                     <Botao
-                      chave="abrirConfiguracao"
+                      chave="abrirLegenda"
                       tipo="info"
-                      classeIcone="fas fa-tools"
+                      classeIcone="fas fa-book-reader"
                       tamanho="pequeno"
-                      :clique="abrirConfiguracao"
+                      :clique="abrirLegenda"
                     />
                   </div>
                   <div class="lado-a-lado">
@@ -72,15 +72,13 @@
           <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 />
+          <Modal titulo="Parâmetros" :largura="900" v-if="mostrarModal('legenda')">
+            <BarraRolagem :alturaMinima="400" :alturaMaxima="400">
+              <LegendaParametro />
             </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>
+            <CodigoEditor v-if="modal.abrir" />
           </Modal>
           <Modal titulo="Visualizar" :largura="1100" v-if="mostrarModal('visualizar')">
             <div v-if="modal.abrir">
@@ -122,7 +120,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 LegendaParametro from "@nixweb/nixloc-ui/src/component/shared/LegendaParametro.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";
@@ -142,7 +140,7 @@ export default {
     DocumentoEditor,
     DocumentoPreview,
     CodigoEditor,
-    ConfiguracaoTabela,
+    LegendaParametro,
     Moldura,
     Botao,
     Modal,
@@ -180,9 +178,9 @@ export default {
     fazerCopia() {
       this.insereEvento({ nome: "fazerCopia" });
     },
-    abrirConfiguracao() {
-      this.abrirModal("configuracao");
-      this.removeCarregando(["abrirConfiguracao"]);
+    abrirLegenda() {
+      this.abrirModal("legenda");
+      this.removeCarregando(["abrirLegenda"]);
     },
     abrirCodigo() {
       this.abrirModal("codigo");

package/src/store/modulos/generic.js

@@ -144,7 +144,17 @@ export default {
                 .replaceAll("<p>&nbsp!important;</p>", "<p>&nbsp</p>");
 
             return classeImportant;
-        }
+        },
+        agruparPor: () => (obj) => {
+            const result = {};
+            obj.array.forEach((item) => {
+                if (!result[item[obj.key]]) {
+                    result[item[obj.key]] = [];
+                }
+                result[item[obj.key]].push(item);
+            });
+            return result;
+        },
     },
     mutations: {
         abrirModal: (state, nome) => {
@@ -236,6 +246,7 @@ export default {
             state.EscolherEstatico.campoAlvo = obj.campoAlvo;
             state.EscolherEstatico.valor = obj.valor;
         },
+
     },
     actions: {
         postApi: async function (context, params) {

package/src/component/shared/ConfiguracaoTabela.vue

@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <b-row>
-      <b-col sm="6"
-        ><EscolherEstatico
-          titulo="Primeira Tabela"
-          :valorInicial="{ conteudo: '10', id: 10 }"
-          :dados="opcoes"
-      /></b-col>
-      <b-col sm="6"
-        ><EscolherEstatico
-          titulo="Segunda Tabela"
-          :valorInicial="{ conteudo: '10', id: 10 }"
-          :dados="opcoes"
-      /></b-col>
-    </b-row>
-    <b-row>
-      <b-col sm="6"
-        ><EscolherEstatico
-          titulo="Terceira Tabela"
-          :valorInicial="{ conteudo: '10', id: 10 }"
-          :dados="opcoes"
-      /></b-col>
-      <b-col sm="6"
-        ><EscolherEstatico
-          titulo="Quarta Tabela"
-          :valorInicial="{ conteudo: '10', id: 10 }"
-          :dados="opcoes"
-      /></b-col>
-    </b-row>
-  </div>
-</template>
-<script>
-import Opcoes from "@nixweb/nixloc-ui/src/component/forms/Opcoes";
-import EscolherEstatico from "@nixweb/nixloc-ui/src/component/forms/EscolherEstatico.vue";
-
-export default {
-  name: "ConfiguracaoTabela",
-  components: {
-    EscolherEstatico,
-  },
-  data() {
-    return {
-      opcoes: [
-        { conteudo: "Produto", id: "v-for='n in dados.produtos'" },
-        { conteudo: "Produto Agrupado", id: "v-for='n in dados.produtos'" },
-        { conteudo: "Período", id: "v-for='n in dados.periodos'" },
-        { conteudo: "Pagamento", id: "v-for='n in dados.pagamentos'" },
-      ],
-      tabela1: "v-for='n in dados.produtos'",
-    };
-  },
-};
-</script>