@nixweb/nixloc-ui 0.0.119 → 0.0.122

package/src/component/template/ModeloRelatorioView.vue

@@ -1,110 +1,112 @@
 <template>
   <div>
     <Painel
-      :modulo="painel.modulo"
-      :titulo="painel.titulo"
-      :mostrarFiltroVertical="painel.mostrarFiltroVertical"
-      :mostrarPesquisa="painel.mostrarPesquisa"
-      :mostrarBotoes="painel.mostrarBotoes"
+      :module="panel.module"
+      :title="panel.title"
+      :showVerticalFilter="panel.showVerticalFilter"
+      :showSearch="panel.showSearch"
+      :showButtons="panel.showButtons"
     >
-      <div slot="conteudo-principal">
+      <div slot="content-main">
         <br />
+        {{ urlConsulta }}
         <div class="div-progresso" v-if="carregando && tamanhoDados > 0">
           <Progresso
-            :texto="`Carregando ${tamanhoDados} registro(s) de ${conteudo.totalRegistros}`"
+            :texto="`Carregando ${tamanhoDados} registro(s) de ${content.totalRecords}`"
             :valor="tamanhoDados"
-            :maximo="conteudo.totalRegistros"
-            tamanho="medium"
+            :maximo="content.totalRecords"
+            size="medium"
           />
         </div>
-        <Modal titulo="Salvar" :largura="550" v-show="mostrarModal('salvar')">
-          <RelatorioAdicionarModificar :modulo="painel.modulo" />
+        <Modal title="Salvar" :width="550" v-show="mostrarModal('salvar')">
+          <RelatorioAdicionarModificar :module="panel.module" />
         </Modal>
-        <Moldura>
+        <Molded>
           <div>
-            <div slot="conteudo-filtro-horizontal">
+            <div slot="content-filter-horizontal">
               <b-row>
                 <b-col sm="6">
-                  <div class="lado-a-lado">
-                    <Botao
-                      chave="buscarRelatorio"
-                      tipo="primario"
-                      titulo="Buscar"
-                      classeIcone="fas fa-file-search"
-                      tamanho="medio"
-                      :desabilitado="invalido || btnDesativado"
-                      :clique="obterTodos"
+                  <div class="side-by-side">
+                    {{ invalid }}
+                    <Button
+                      key="buscarRelatorio"
+                      type="primary"
+                      title="Buscar"
+                      classIcon="fas fa-file-search"
+                      size="medium"
+                      :disabled="invalid || btnDesativado"
+                      :clicked="getAll"
                     />
                   </div>
-                  <div class="lado-a-lado">
-                    <Botao
-                      v-if="!invalido"
-                      chave="salvarRelatorio"
-                      tipo="sucesso"
-                      titulo="Salvar Modelo"
-                      classeIcone="fas fa-save"
-                      :desabilitado="carregando || invalido"
-                      tamanho="pequeno"
-                      :clique="salvarRelatorio"
+                  <div class="side-by-side">
+                    <Button
+                      v-if="!invalid"
+                      key="salvarRelatorio"
+                      type="success"
+                      title="Salvar Modelo"
+                      classIcon="fas fa-save"
+                      :disabled="carregando || invalid"
+                      size="small"
+                      :clicked="salvarRelatorio"
                     />
                   </div>
                 </b-col>
                 <b-col class="text-right" sm="6">
-                  <div class="lado-a-lado">
-                    <Botao
-                      chave="abrirCampo"
-                      tipo="info"
-                      titulo="Campos"
-                      classeIcone="fas fa-database"
-                      tamanho="pequeno"
-                      :desabilitado="carregando"
-                      :clique="abrirCampo"
+                  <div class="side-by-side">
+                    <Button
+                      key="abrirCampo"
+                      type="info"
+                      title="fields"
+                      classIcon="fas fa-database"
+                      size="small"
+                      :disabled="carregando"
+                      :clicked="abrirCampo"
                     />
                   </div>
-                  <div class="lado-a-lado">
-                    <Botao
-                      chave="abrirFiltro"
-                      tipo="info"
-                      titulo="Filtros"
-                      classeIcone="fas fa-filter"
-                      tamanho="pequeno"
-                      :desabilitado="carregando"
-                      :clique="abrirFiltro"
+                  <div class="side-by-side">
+                    <Button
+                      key="abrirFiltro"
+                      type="info"
+                      title="Filtros"
+                      classIcon="fas fa-filter"
+                      size="small"
+                      :disabled="carregando"
+                      :clicked="abrirFiltro"
                     />
                   </div>
                 </b-col>
               </b-row>
-              <Modal titulo="Filtros" :largura="900" v-show="mostrarModal('filtro')">
-                <slot name="filtro"></slot>
+              <Modal title="Filtros" :width="900" v-show="mostrarModal('filter')">
+                <slot name="filter"></slot>
                 <br />
                 <b-row>
                   <b-col class="text-right" sm="12">
-                    <div class="lado-a-lado">
-                      <Botao
-                        chave="aplicaFiltro"
-                        tipo="primario"
-                        titulo="Aplicar"
-                        classeIcone="fas fa-filter"
-                        tamanho="pequeno"
-                        :clique="aplicarFiltro"
+                    <div class="side-by-side">
+                      <Button
+                        key="aplicaFiltro"
+                        type="primary"
+                        title="Aplicar"
+                        classIcon="fas fa-filter"
+                        size="small"
+                        :clicked="aplicarFiltro"
                       />
                     </div>
                   </b-col>
                 </b-row>
               </Modal>
-              <Modal titulo="Campos" :largura="600" v-show="mostrarModal('campo')">
-                <slot name="campo"></slot>
+              <Modal title="fields" :width="600" v-show="mostrarModal('field')">
+                <slot name="field"></slot>
                 <b-row>
                   <b-col class="text-right" sm="12">
-                    <div class="lado-a-lado">
-                      <Botao
-                        chave="aplicaFiltro"
-                        tipo="primario"
-                        titulo="Aplicar"
-                        classeIcone="fas fa-filter"
-                        tamanho="pequeno"
-                        :desabilitado="campoSelecionado.length == 0"
-                        :clique="aplicarFiltro"
+                    <div class="side-by-side">
+                      <Button
+                        key="aplicaFiltro"
+                        type="primary"
+                        title="Aplicar"
+                        classIcon="fas fa-filter"
+                        size="small"
+                        :disabled="selectedField.length == 0"
+                        :clicked="aplicarFiltro"
                       />
                     </div>
                   </b-col>
@@ -112,64 +114,67 @@
               </Modal>
             </div>
           </div>
-        </Moldura>
-        <div class="div-obrigatorio" v-show="invalido">
-          <Alerta tipo="info" v-for="item in filtroObrigatorio" :key="item.id">
-            É necessário informar o filtro
-            <span class="filtro-obrigatorio">{{ item.label }}</span
-            >, clique no botão "Filtros" para adicionar.
-          </Alerta>
+        </Molded>
+        <div class="div-obrigatorio" v-show="invalid">
+          <Alert type="info" v-for="item in requiredRules" :key="item.id">
+            É necessário informar o filter
+            <span class="filter-obrigatorio">{{ item.title }}</span
+            >, clicked no botão "Filtros" para adicionar.
+          </Alert>
         </div>
         <div class="div-tags">
           <Tags nomeEvento="tagRelatorio" />
         </div>
-        <div class="g-div-moldura div-tabela" v-if="!carregando && tamanhoDados > 0">
+        <div class="g-div-molded div-tabela" v-if="!carregando && tamanhoDados > 0">
           <b-row>
             <b-col sm="6">
-              <div class="lado-a-lado">
-                <ExportarExcel
-                  :botao="{ tipo: 'editar', titulo: 'Excel', tamanho: 'pequeno' }"
-                  nomeArquivo="Auditoria"
-                  :cabecalho="conteudo.cabecalhoTabela"
-                  :dados="conteudo.dados"
-                />
-              </div>
-              <div class="lado-a-lado">
-                <div>
-                  <Botao
-                    v-print="'#printMe'"
-                    chave="aplicaFiltro"
-                    tipo="editar"
-                    titulo="Imprimir"
-                    classeIcone="fas fa-print"
-                    tamanho="pequeno"
-                    :clique="aplicarFiltro"
+              <div class="div-botao">
+                <div class="side-by-side">
+                  <ExportarExcel
+                    :botao="{ type: 'edit', title: 'Excel', size: 'small' }"
+                    nomeArquivo="Auditoria"
+                    :cabecalho="content.headerTable"
+                    :data="content.data"
                   />
                 </div>
+                <div class="side-by-side">
+                  <div>
+                    <Button
+                      v-print="'#printMe'"
+                      key="aplicaFiltro"
+                      type="edit"
+                      title="Imprimir"
+                      classIcon="fas fa-print"
+                      size="small"
+                      :clicked="aplicarFiltro"
+                    />
+                  </div>
+                </div>
               </div>
             </b-col>
             <b-col sm="6">
-              <Registro :totalRegistro="conteudo.totalRegistros" />
+              <Registro :totalRegistro="content.totalRecords" />
             </b-col>
           </b-row>
-          <BarraRolagem :alturaMinima="400" :alturaMaxima="600">
+          <BarraRolagem :minHeight="400" :maxHeight="600">
             <div id="printMe">
               <CabecalhoImpressao />
+              {{ content.headerTable }}
               <Tabela
-                :cabecalhoTabela="conteudo.cabecalhoTabela"
-                :dados="conteudo.dados"
+                :headerTable="content.headerTable"
+                :data="content.data"
                 :mostrarChecks="modeloLista.mostrarChecks"
               />
             </div>
           </BarraRolagem>
         </div>
-        <div class="div-sem-dados" v-if="nenhumDadoRetornado">
-          <Alerta tipo="info">
+        <div class="div-sem-data" v-if="nenhumDadoRetornado">
+          <Alert type="info">
             <span> Nenhum registro foi encontrato!</span>
-          </Alerta>
+          </Alert>
         </div>
-        <div class="div-rodape" v-if="conteudo.resumo.length > 0">
-          <Rodape :dados="conteudo.resumo" />
+        <div class="div-rodape" v-if="content.totalization.length > 0">
+          <Rodape :data="content.totalization" />
         </div>
       </div>
     </Painel>
@@ -177,19 +182,19 @@
 </template>
 
 <script>
-import Alerta from "@nixweb/nixloc-ui/src/component/layout/Alerta";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
 import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
-import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
 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";
-import Moldura from "@nixweb/nixloc-ui/src/component/layout/Moldura";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
 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 Rodape from "@nixweb/nixloc-ui/src/component/shared/construtor-consulta/Rodape.vue";
+import Tags from "@nixweb/nixloc-ui/src/component/shared/construtor-consulta/Tags.vue";
 import RelatorioAdicionarModificar from "@nixweb/nixloc-ui/src/component/template/RelatorioAdicionarModificar.vue";
 import print from "vue-print-nb";
 
@@ -202,18 +207,18 @@ export default {
   },
   props: {
     modeloLista: Object,
-    campo: Array,
-    painel: Object,
+    field: Array,
+    panel: Object,
   },
   components: {
-    Alerta,
+    Alert,
     Modal,
-    Botao,
+    Button,
     Registro,
     Tabela,
     Painel,
     BarraRolagem,
-    Moldura,
+    Molded,
     Rodape,
     Progresso,
     Tags,
@@ -223,14 +228,14 @@ export default {
   },
   data() {
     return {
-      conteudo: {
-        cabecalhoTabela: [],
-        dados: [],
-        resumo: [],
+      content: {
+        headerTable: [],
+        data: [],
+        totalization: [],
         paginacao: 0,
-        paginaAtual: 1,
-        totalPorPagina: 100,
-        totalRegistros: 0,
+        currentPage: 1,
+        totalPerPage: 100,
+        totalRecords: 0,
       },
       btnDesativado: true,
       carregando: false,
@@ -239,67 +244,80 @@ export default {
     };
   },
   mounted() {
-    this.removeCarregando(["painel"]);
+    this.removeLoading(["panel"]);
+  },
+  beforeDestroy() {
+    this.updateOptionsInitValue({});
+    this.atualizaCampoOrdenado({});
+    this.atualizaFiltroSelecionado({ children: [] });
   },
   computed: {
     ...mapGetters("generic", ["mostrarModal", "evento"]),
-    ...mapGetters("relatorio", [
-      "cabecalhoTabela",
-      "filtroSelecionado",
-      "filtroObrigatorio",
-      "temCampoSelecionado",
+    ...mapGetters("report", [
+      "headerTable",
+      "selectedRules",
+      "requiredRules",
+      "regraObrigatoriaJaAdicionada",
+      "hasSelectedField",
       "oDataSelect",
       "oDataFilter",
       "oDataOrderBy",
     ]),
-    ...mapState("relatorio", ["relatorio", "campoSelecionado", "resumo"]),
+    ...mapState("report", ["report", "selectedField", "totalization"]),
     urlConsulta() {
-      let baseUrl = `${this.modeloLista.urlGetApi}?${this.oDataSelect}&${this.oDataOrderBy}&${this.oDataFilter.consulta}&$skip=${this.skip}&$top=${this.conteudo.totalPorPagina}&$count=true`;
+      let baseUrl = `${this.modeloLista.urlGetApi}?${this.oDataSelect}&${this.oDataOrderBy}&${this.oDataFilter.consulta}&$skip=${this.skip}&$top=${this.content.totalPerPage}&$count=true`;
       return baseUrl.replace("&&", "&");
     },
     urlResumo() {
-      let consulta = this.oDataFilter.resumo
+      let consulta = this.oDataFilter.totalization
         ? `$apply=filter(${this.oDataFilter.consulta.replace("$filter=", "")})/`
         : "$apply=";
-      let baseUrl = `${this.modeloLista.urlGetApi}?${consulta}aggregate(${this.oDataFilter.resumo})`;
+      let baseUrl = `${this.modeloLista.urlGetApi}?${consulta}aggregate(${this.oDataFilter.totalization})`;
       return baseUrl;
     },
     skip() {
-      return (this.conteudo.paginaAtual - 1) * this.conteudo.totalPorPagina;
+      return (this.content.currentPage - 1) * this.content.totalPerPage;
     },
-    invalido() {
+    invalid() {
       let retorno = true;
-      this.filtroObrigatorio.forEach((filtro) => {
-        var existe = this.filtroSelecionado.children.find((value) => {
-          if (filtro.label == value.query.label) retorno = false;
-        });
+      this.requiredRules.forEach((rule) => {
+        retorno = this.regraObrigatoriaJaAdicionada(rule);
       });
 
-      if (this.filtroObrigatorio.length == 0) retorno = false;
+      if (this.requiredRules.length == 0) retorno = false;
 
       return retorno;
     },
     tamanhoDados() {
-      return this.conteudo.dados.length;
+      return this.content.data.length;
     },
   },
   methods: {
     ...mapActions("generic", ["getApiOdata"]),
-    ...mapMutations("generic", ["abrirModal", "fecharModal", "removeCarregando"]),
-    ...mapMutations("relatorio", ["atualizaCabecalhoTabela", "atualizaConsultaFiltro"]),
-
-    obterTodos() {
-      this.conteudo.dados = [];
-      this.conteudo.resumo = [];
+    ...mapMutations("generic", [
+      "addEvent",
+      "abrirModal",
+      "hideModal",
+      "removeLoading",
+    ]),
+    ...mapMutations("report", [
+      "atualizaFiltroSelecionado",
+      "atualizaCampoOrdenado",
+      "updateOptionsInitValue",
+      "atualizaCabecalhoTabela",
+    ]),
+    getAll() {
+      this.content.data = [];
+      this.content.totalization = [];
       this.btnDesativado = true;
 
-      if (!this.invalido) {
+      if (!this.invalid) {
         this.mostraEscondeCampos();
         this.paginacao();
-        this.removeCarregando(["buscarRelatorio"]);
+        this.removeLoading(["buscarRelatorio"]);
 
-        if (this.oDataFilter.resumo) this.resumoOData();
-        if (!this.oDataFilter.resumo) this.conteudo.resumo = [];
+        if (this.oDataFilter.totalization) this.resumoOData();
+        if (!this.oDataFilter.totalization) this.content.totalization = [];
       }
     },
     paginacao() {
@@ -307,24 +325,24 @@ export default {
       this.reiniciaDados();
 
       this.getApiOdata(paramsConsulta).then((response) => {
-        let totalRegistros = response["@odata.count"];
-        if (totalRegistros == 0) this.nenhumDadoRetornado = true;
-        this.conteudo.totalRegistros = totalRegistros;
-        this.conteudo.paginacao = Math.round(
-          totalRegistros / this.conteudo.totalPorPagina
+        let totalRecords = response["@odata.count"];
+        if (totalRecords == 0) this.nenhumDadoRetornado = true;
+        this.content.totalRecords = totalRecords;
+        this.content.paginacao = Math.round(
+          totalRecords / this.content.totalPerPage
         );
 
-        if (totalRegistros <= this.conteudo.totalPorPagina) {
+        if (totalRecords <= this.content.totalPerPage) {
           this.consultaOdata();
-          this.conteudo.cabecalhoTabela = this.cabecalhoTabela;
+          this.content.headerTable = this.headerTable;
         }
-        if (this.conteudo.paginacao == 0) this.carregando = false;
+        if (this.content.paginacao == 0) this.carregando = false;
       });
     },
     reiniciaDados() {
       this.carregando = true;
-      this.conteudo.dados = [];
-      this.conteudo.paginaAtual = 1;
+      this.content.data = [];
+      this.content.currentPage = 1;
       this.nenhumDadoRetornado = false;
     },
     consultaOdata() {
@@ -332,57 +350,58 @@ export default {
       this.getApiOdata(paramsConsulta).then((response) => {
         let self = this;
         response.value.forEach(function (obj) {
-          self.conteudo.dados.push(obj);
+          self.content.data.push(obj);
         });
-        this.conteudo.paginaAtual++;
+        this.content.currentPage++;
       });
-      this.conteudo.cabecalhoTabela = this.cabecalhoTabela;
+      this.content.headerTable = this.headerTable;
     },
     resumoOData() {
       let paramsResumo = { url: this.urlResumo };
       this.getApiOdata(paramsResumo).then((response) => {
-        this.conteudo.resumo = [];
+        this.content.totalization = [];
         const result = Object.entries(response[0]);
         let self = this;
         result.forEach(function (value) {
-          self.resumo.forEach(function (legenda) {
+          self.totalization.forEach(function (legenda) {
             let obj = {
-              titulo: "",
+              title: "",
               valor: value[1],
               classeCss: legenda.classeCss,
-              tipo: legenda.tipo,
+              type: legenda.type,
             };
             if (legenda.valor == value[0]) {
-              obj.titulo = legenda.titulo;
-              self.conteudo.resumo.push(obj);
+              obj.title = legenda.title;
+              self.content.totalization.push(obj);
             }
           });
         });
       });
     },
     abrirCampo() {
-      this.abrirModal("campo");
-      this.removeCarregando(["abrirCampo"]);
+      this.abrirModal("field");
+      this.removeLoading(["abrirCampo"]);
     },
     abrirFiltro() {
-      this.abrirModal("filtro");
-      this.removeCarregando(["abrirFiltro"]);
+      this.abrirModal("filter");
+      this.removeLoading(["abrirFiltro"]);
     },
     aplicarFiltro() {
-      this.fecharModal();
-      this.removeCarregando(["aplicaFiltro", "aplicaCampo"]);
+      this.hideModal();
+      this.removeLoading(["aplicaFiltro", "aplicaCampo"]);
     },
     salvarRelatorio() {
+      this.addEvent({ nome: "modificarRelatorio" });
       this.abrirModal("salvar");
-      this.removeCarregando(["salvarRelatorio"]);
+      this.removeLoading(["salvarRelatorio"]);
     },
     mostraEscondeCampos() {
       let self = this;
-      this.relatorio.campo.forEach(function (value) {
-        if (self.temCampoSelecionado(value.campo, self.campoSelecionado)) {
-          value.mostrar = true;
+      this.report.fields.forEach(function (field) {
+        if (self.hasSelectedField(field.field, self.selectedField)) {
+          value.show = true;
         } else {
-          value.mostrar = false;
+          value.show = false;
         }
       });
     },
@@ -390,54 +409,49 @@ export default {
   watch: {
     evento: {
       handler(evento) {
-        if (evento.nome == "tagRelatorio") this.abrirModal("filtro");
+        if (evento.nome == "tagRelatorio") this.abrirModal("filter");
       },
       deep: true,
     },
-    campoSelecionado: {
+    selectedField: {
       handler() {
         this.mostraEscondeCampos();
       },
       deep: true,
     },
-    filtroSelecionado: {
-      handler(filtro) {
-        this.atualizaConsultaFiltro(filtro);
-      },
-      deep: true,
-    },
-    "conteudo.paginaAtual": {
-      handler(value) {
-        if (value <= this.conteudo.paginacao - 1) {
+    "content.currentPage": {
+      handler(currentPage) {
+        if (currentPage <= this.content.paginacao - 1) {
           let self = this;
           setTimeout(function () {
             self.consultaOdata();
           }, 200);
         }
-        if (value == this.conteudo.paginacao && value != 0) this.carregando = false;
+        if (currentPage == this.content.paginacao && currentPage != 0)
+          this.carregando = false;
       },
       deep: true,
     },
-    "conteudo.paginacao": {
-      handler(value) {
+    "content.paginacao": {
+      handler() {
         this.consultaOdata();
       },
       deep: true,
     },
     "oDataFilter.consulta": {
-      handler(value) {
+      handler() {
         this.btnDesativado = false;
       },
       deep: true,
     },
     oDataSelect: {
-      handler(value) {
+      handler() {
         this.btnDesativado = false;
       },
       deep: true,
     },
     oDataOrderBy: {
-      handler(value) {
+      handler() {
         this.btnDesativado = false;
       },
       deep: true,
@@ -447,11 +461,15 @@ export default {
 </script>
 
 <style scoped>
+.div-botao {
+  padding-bottom: 15px;
+}
+
 .div-progresso {
   margin-bottom: 10px;
 }
 
-.div-sem-dados {
+.div-sem-data {
   margin-top: 20px;
 }
 
@@ -476,7 +494,7 @@ export default {
   margin-top: 20px;
 }
 
-.filtro-obrigatorio {
+.filter-obrigatorio {
   font-weight: 500;
 }
 </style>