@nixweb/nixloc-ui 0.0.93 → 0.0.96

package/src/component/template/ModeloRelatorioView.vue

@@ -0,0 +1,467 @@
+<template>
+  <div>
+    <Painel
+      :modulo="painel.modulo"
+      :titulo="painel.titulo"
+      :mostrarFiltroVertical="painel.mostrarFiltroVertical"
+      :mostrarPesquisa="painel.mostrarPesquisa"
+      :mostrarBotoes="painel.mostrarBotoes"
+    >
+      <div slot="conteudo-principal">
+        <br />
+        <div class="div-progresso" v-if="carregando && tamanhoDados > 0">
+          <Progresso
+            :texto="`Carregando ${tamanhoDados} registro(s) de ${conteudo.totalRegistros}`"
+            :valor="tamanhoDados"
+            :maximo="conteudo.totalRegistros"
+            tamanho="medium"
+          />
+        </div>
+        <Modal titulo="Salvar" :largura="550" v-show="mostrarModal('salvar')">
+          <RelatorioAdicionarModificar :modulo="painel.modulo" />
+        </Modal>
+        <Moldura>
+          <div>
+            <div slot="conteudo-filtro-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>
+                  <div class="lado-a-lado">
+                    <Botao
+                      v-if="!invalido"
+                      chave="salvarRelatorio"
+                      tipo="sucesso"
+                      titulo="Salvar"
+                      classeIcone="fas fa-save"
+                      :desabilitado="carregando || invalido"
+                      tamanho="pequeno"
+                      :clique="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>
+                  <div class="lado-a-lado">
+                    <Botao
+                      chave="abrirFiltro"
+                      tipo="info"
+                      titulo="Filtros"
+                      classeIcone="fas fa-filter"
+                      tamanho="pequeno"
+                      :desabilitado="carregando"
+                      :clique="abrirFiltro"
+                    />
+                  </div>
+                </b-col>
+              </b-row>
+              <Modal titulo="Filtros" :largura="900" v-show="mostrarModal('filtro')">
+                <slot name="filtro"></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>
+                  </b-col>
+                </b-row>
+              </Modal>
+              <Modal titulo="Campos" :largura="600" v-show="mostrarModal('campo')">
+                <slot name="campo"></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>
+                  </b-col>
+                </b-row>
+              </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>
+        </div>
+        <div class="div-tags">
+          <Tags nomeEvento="tagRelatorio" />
+        </div>
+        <div class="g-div-moldura div-tabela" v-if="!carregando && tamanhoDados > 0">
+          <b-row>
+            <b-col sm="6">
+              <div class="lado-a-lado">
+                <Botao
+                  chave="buscarRelatorio"
+                  tipo="editar"
+                  titulo="Excel"
+                  classeIcone="fas fa-file-excel"
+                  tamanho="pequeno"
+                  :clique="obterTodos"
+                />
+              </div>
+              <div class="lado-a-lado">
+                <Botao
+                  chave="buscarRelatorio"
+                  tipo="editar"
+                  titulo="PDF"
+                  classeIcone="fas fa-file-pdf"
+                  tamanho="pequeno"
+                  :clique="obterTodos"
+                />
+              </div>
+            </b-col>
+            <b-col sm="6">
+              <Registro :totalRegistro="conteudo.totalRegistros" />
+            </b-col>
+          </b-row>
+          <BarraRolagem :alturaMinima="300" :alturaMaxima="500">
+            <Tabela
+              :cabecalhoTabela="conteudo.cabecalhoTabela"
+              :dados="conteudo.dados"
+              :mostrarChecks="modeloLista.mostrarChecks"
+            />
+          </BarraRolagem>
+        </div>
+        <div class="div-sem-dados" v-if="nenhumDadoRetornado">
+          <Alerta tipo="info">
+            <span> Nenhum registro foi encontrato!</span>
+          </Alerta>
+        </div>
+        <div class="div-rodape" v-if="conteudo.resumo.length > 0">
+          <Rodape :dados="conteudo.resumo" />
+        </div>
+      </div>
+    </Painel>
+  </div>
+</template>
+
+<script>
+import Alerta from "@nixweb/nixloc-ui/src/component/layout/Alerta";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
+import Tabela from "../shared/Tabela.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 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 RelatorioAdicionarModificar from "@nixweb/nixloc-ui/src/component/template/RelatorioAdicionarModificar.vue";
+
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ModeloRelatorioView",
+  props: {
+    modeloLista: Object,
+    campo: Array,
+    painel: Object,
+  },
+  components: {
+    Alerta,
+    Modal,
+    Botao,
+    Registro,
+    Tabela,
+    Painel,
+    BarraRolagem,
+    Moldura,
+    Rodape,
+    Progresso,
+    Tags,
+    RelatorioAdicionarModificar,
+  },
+  data() {
+    return {
+      conteudo: {
+        cabecalhoTabela: [],
+        dados: [],
+        resumo: [],
+        paginacao: 0,
+        paginaAtual: 1,
+        totalPorPagina: 100,
+        totalRegistros: 0,
+      },
+      btnDesativado: true,
+      carregando: false,
+      nenhumDadoRetornado: false,
+    };
+  },
+  mounted() {
+    this.removeCarregando(["painel"]);
+  },
+  computed: {
+    ...mapGetters("generic", ["mostrarModal", "evento"]),
+    ...mapGetters("relatorio", [
+      "cabecalhoTabela",
+      "filtroSelecionado",
+      "filtroObrigatorio",
+      "temCampoSelecionado",
+      "oDataSelect",
+      "oDataFilter",
+      "oDataOrderBy",
+    ]),
+    ...mapState("relatorio", ["relatorio", "campoSelecionado", "resumo"]),
+    urlConsulta() {
+      let baseUrl = `${this.modeloLista.urlGetApi}?${this.oDataSelect}&${this.oDataOrderBy}&${this.oDataFilter.consulta}&$skip=${this.skip}&$top=${this.conteudo.totalPorPagina}&$count=true`;
+      return baseUrl.replace("&&", "&");
+    },
+    urlResumo() {
+      let consulta = this.oDataFilter.resumo
+        ? `$apply=filter(${this.oDataFilter.consulta.replace("$filter=", "")})/`
+        : "$apply=";
+      let baseUrl = `${this.modeloLista.urlGetApi}?${consulta}aggregate(${this.oDataFilter.resumo})`;
+      return baseUrl;
+    },
+    skip() {
+      return (this.conteudo.paginaAtual - 1) * this.conteudo.totalPorPagina;
+    },
+    invalido() {
+      let retorno = true;
+      this.filtroObrigatorio.forEach((filtro) => {
+        var existe = this.filtroSelecionado.children.find((value) => {
+          if (filtro.label == value.query.label) retorno = false;
+        });
+      });
+
+      return retorno;
+    },
+    tamanhoDados() {
+      return this.conteudo.dados.length;
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["getApiOdata"]),
+    ...mapMutations("generic", ["abrirModal", "fecharModal", "removeCarregando"]),
+    ...mapMutations("relatorio", ["atualizaCabecalhoTabela", "atualizaConsultaFiltro"]),
+
+    obterTodos() {
+      this.conteudo.dados = [];
+      this.conteudo.resumo = [];
+      this.btnDesativado = true;
+
+      if (!this.invalido) {
+        this.mostraEscondeCampos();
+        this.paginacao();
+        this.removeCarregando(["buscarRelatorio"]);
+
+        if (this.oDataFilter.resumo) this.resumoOData();
+        if (!this.oDataFilter.resumo) this.conteudo.resumo = [];
+      }
+    },
+    paginacao() {
+      let paramsConsulta = { url: this.urlConsulta };
+      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
+        );
+
+        if (totalRegistros <= this.conteudo.totalPorPagina) {
+          this.consultaOdata();
+          this.conteudo.cabecalhoTabela = this.cabecalhoTabela;
+        }
+        if (this.conteudo.paginacao == 0) this.carregando = false;
+      });
+    },
+    reiniciaDados() {
+      this.carregando = true;
+      this.conteudo.dados = [];
+      this.conteudo.paginaAtual = 1;
+      this.nenhumDadoRetornado = false;
+    },
+    consultaOdata() {
+      let paramsConsulta = { url: this.urlConsulta };
+      this.getApiOdata(paramsConsulta).then((response) => {
+        let self = this;
+        response.value.forEach(function (obj) {
+          self.conteudo.dados.push(obj);
+        });
+        this.conteudo.paginaAtual++;
+      });
+      this.conteudo.cabecalhoTabela = this.cabecalhoTabela;
+    },
+    resumoOData() {
+      let paramsResumo = { url: this.urlResumo };
+      this.getApiOdata(paramsResumo).then((response) => {
+        this.conteudo.resumo = [];
+        const result = Object.entries(response[0]);
+        let self = this;
+        result.forEach(function (value) {
+          self.resumo.forEach(function (legenda) {
+            let obj = {
+              titulo: "",
+              valor: value[1],
+              classeCss: legenda.classeCss,
+              tipo: legenda.tipo,
+            };
+            if (legenda.valor == value[0]) {
+              obj.titulo = legenda.titulo;
+              self.conteudo.resumo.push(obj);
+            }
+          });
+        });
+      });
+    },
+    abrirCampo() {
+      this.abrirModal("campo");
+      this.removeCarregando(["abrirCampo"]);
+    },
+    abrirFiltro() {
+      this.abrirModal("filtro");
+      this.removeCarregando(["abrirFiltro"]);
+    },
+    aplicarFiltro() {
+      this.fecharModal();
+      this.removeCarregando(["aplicaFiltro", "aplicaCampo"]);
+    },
+    salvarRelatorio() {
+      this.abrirModal("salvar");
+      this.removeCarregando(["salvarRelatorio"]);
+    },
+    mostraEscondeCampos() {
+      let self = this;
+      this.relatorio.campo.forEach(function (value) {
+        if (self.temCampoSelecionado(value.campo, self.campoSelecionado)) {
+          value.mostrar = true;
+        } else {
+          value.mostrar = false;
+        }
+      });
+    },
+  },
+  watch: {
+    evento: {
+      handler(evento) {
+        if (evento.nome == "tagRelatorio") this.abrirModal("filtro");
+      },
+      deep: true,
+    },
+    campoSelecionado: {
+      handler() {
+        this.mostraEscondeCampos();
+      },
+      deep: true,
+    },
+    filtroSelecionado: {
+      handler(filtro) {
+        this.atualizaConsultaFiltro(filtro);
+      },
+      deep: true,
+    },
+    "conteudo.paginaAtual": {
+      handler(value) {
+        if (value <= this.conteudo.paginacao - 1) {
+          let self = this;
+          setTimeout(function () {
+            self.consultaOdata();
+          }, 200);
+        }
+        if (value == this.conteudo.paginacao && value != 0) this.carregando = false;
+      },
+      deep: true,
+    },
+    "conteudo.paginacao": {
+      handler(value) {
+        this.consultaOdata();
+      },
+      deep: true,
+    },
+    "oDataFilter.consulta": {
+      handler(value) {
+        this.btnDesativado = false;
+      },
+      deep: true,
+    },
+    oDataSelect: {
+      handler(value) {
+        this.btnDesativado = false;
+      },
+      deep: true,
+    },
+    oDataOrderBy: {
+      handler(value) {
+        this.btnDesativado = false;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.div-progresso {
+  margin-bottom: 10px;
+}
+
+.div-sem-dados {
+  margin-top: 20px;
+}
+
+.div-tabela {
+  margin-top: 20px;
+}
+
+.div-separacao {
+  margin-left: 10px;
+  margin-right: 5px;
+}
+
+.div-rodape {
+  margin-top: 20px;
+}
+
+.div-tags {
+  margin-top: 15px;
+}
+
+.div-obrigatorio {
+  margin-top: 20px;
+}
+
+.filtro-obrigatorio {
+  font-weight: 500;
+}
+</style>

package/src/component/template/Relatorio.js

@@ -0,0 +1,10 @@
+export default class Relatorio {
+    constructor() {
+        this.id = "";
+        this.nome = "";
+    }
+    modificar(dados) {
+        this.id = dados.id;
+        this.nome = dados.nome;
+    }
+}

package/src/component/template/RelatorioAdicionarModificar.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <b-row>
+      <b-col sm="12"
+        ><Texto
+          titulo="Nome"
+          campo="nome"
+          :formNome="formNome"
+          :requerido="true"
+          :tamanhoMaximo="40"
+          v-model="relatorio.nome"
+          :marcarFormSujo="false"
+        />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col sm="12">
+        <div class="text-right">
+          <Botao
+            chave="salvar"
+            tipo="sucesso"
+            titulo="Salvar"
+            :desabilitado="!formValido(formNome)"
+            classeIcone="fas fa-save"
+            tamanho="medio"
+            :clique="salvarRelatorio"
+          />
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import Texto from "@nixweb/nixloc-ui/src/component/forms/Texto";
+import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
+import Relatorio from "@nixweb/nixloc-ui/src/component/template/Relatorio.js";
+
+import { mapGetters, mapState, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "RelatorioAdicionarModificar",
+  components: { Botao, Texto },
+  props: {
+    modulo: String,
+  },
+  data() {
+    return {
+      formNome: "relatorioAdicionarModificar",
+      relatorio: new Relatorio(),
+      urlAdicionar: "/api/v1/shared/relatorio/adicionar",
+      urlModificar: "/api/v1/shared/relatorio/modificar",
+    };
+  },
+  computed: {
+    ...mapGetters("validation", ["formValido"]),
+    ...mapGetters("generic", ["evento"]),
+    ...mapGetters("relatorio", ["cabecalhoTabela", "filtroSelecionado"]),
+    ...mapState("relatorio", ["campoSelecionado", "campoOrdenado"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "putApi"]),
+    ...mapMutations("generic", ["removeCarregando", "removeEvento", "fecharModal"]),
+    ...mapMutations("validation", ["reiniciaValidacao"]),
+    salvarRelatorio() {
+      const consulta = {
+        nomeRota: this.$route.name,
+        campo: this.campoSelecionado,
+        ordenacao: this.campoOrdenado,
+        filtro: this.filtroSelecionado.children,
+      };
+      let obj = {
+        nome: this.relatorio.nome,
+        modulo: this.modulo,
+        consulta: JSON.stringify(consulta),
+      };
+      if (this.relatorio.id) {
+        let params = { url: this.urlModificar, obj: obj };
+        this.putApi(params).then((response) => {
+          if (response.sucesso) this.fecharModal();
+          this.removeCarregando(["salvar"]);
+        });
+      } else {
+        let params = { url: this.urlAdicionar, obj: obj };
+        this.postApi(params).then((response) => {
+          if (response.sucesso) this.fecharModal();
+          this.removeCarregando(["salvar"]);
+        });
+      }
+    },
+    modificar(dados) {
+      this.relatorio = new Relatorio();
+      this.relatorio.modificar(dados);
+      this.removeCarregando([dados.id]);
+    },
+  },
+  watch: {
+    evento: {
+      handler(evento) {
+        if (evento.nome == "modificarRelatorio") this.modificar(evento.dados);
+      },
+      deep: true,
+    },
+  },
+};
+</script>

package/src/store/modulos/generic.js

@@ -237,6 +237,17 @@ export default {
                     return false;
                 })
         },
+        getApiOdata: async function (context, params) {
+            return axios.get(params.url, {
+                headers: new Token().tokenHeaders(),
+            })
+                .then((response) => {
+                    return response.data;
+                }, (err) => {
+                    context.commit('insereNotificacaoErroApi');
+                    return false;
+                })
+        },
         deleteAllApi: async function (context, params) {
 
             context.commit('limpaMetodoExecutadoApi');