@nixweb/nixloc-ui 0.0.95 → 0.0.96

package/package.json

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

package/src/component/forms/DateTime.vue

@@ -52,7 +52,21 @@ export default {
   components: { Dica, DatePicker },
   name: "Data",
   mixins: [],
-  props: {
+  props: [
+    "titulo",
+    "campo",
+    "campoAlvo",
+    "placeholder",
+    "formNome",
+    "requerido",
+    "format",
+    "type",
+    "value",
+    "range",
+    "confirm",
+    "confirmText",
+  ],
+  /* props: {
     titulo: String,
     campo: String,
     campoAlvo: String,
@@ -65,7 +79,7 @@ export default {
     range: Boolean,
     confirm: Boolean,
     confirmText: String,
-  },
+  },*/
   data() {
     return {
       notificacoes: [],
@@ -152,7 +166,6 @@ export default {
 </script>
 
 <style scoped>
-
 .sucesso {
   color: #94aa2a;
   font-size: 14px;

package/src/component/layout/Menu.vue

@@ -37,11 +37,11 @@
               <span
                 :class="{
                   'icone-ativo': menuAtivo == item.modulo,
-                  'icone-normal': menuAtivo != item.modulo
+                  'icone-normal': menuAtivo != item.modulo,
                 }"
-              > <i :class="item.icone"></i>
+              >
+                <i :class="item.icone"></i>
               </span>
-             
             </div>
             <div class="titulo">{{ item.titulo }}</div>
           </a>
@@ -171,8 +171,8 @@ export default {
 }
 
 .div-logo {
-  padding-top: 5px;
-  padding-bottom: 15px;
+  padding-top: 2px;
+  padding-bottom: 16px;
 }
 
 .div-icone {
@@ -208,7 +208,7 @@ export default {
 }
 
 img {
-  height: 27px;
+  height: 22px;
   margin-top: 10px;
 }
 </style>

package/src/component/shared/Confirmacao.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div @click="executar()">
+      <slot></slot>
+    </div>
+    <Modal
+      :titulo="titulo"
+      :largura="450"
+      :altura="250"
+      v-show="mostrarModal(`confirmacao${dados.id}`)"
+    >
+      <b-col sm="12">
+        <div class="div-botao text-center">
+          <Botao
+            chave="confirmacaoNao"
+            tipo="editar"
+            titulo="cancelar"
+            tamanho="pequeno"
+            :clique="cancelar"
+          />
+          <Botao
+            chave="confirmacaoSim"
+            :tipo="tipo"
+            titulo="Sim, confirmar"
+            tamanho="medio"
+            :clique="confirmar"
+          />
+        </div>
+      </b-col>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Botao from "@nixweb/nixloc-ui/src/component/forms/Botao";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "Confirmacao",
+  components: {
+    Botao,
+    Modal,
+  },
+  props: {
+    titulo: String,
+    tipo: String,
+    dados: Object,
+    confirmado: Function,
+  },
+  methods: {
+    ...mapMutations("generic", ["abrirModal", "fecharModal", "removeCarregando"]),
+    executar() {
+      this.abrirModal(`confirmacao${this.dados.id}`);
+    },
+    confirmar() {
+      let self = this;
+      setTimeout(function () {
+        if (self.confirmado) self.confirmado(self.dados);
+        self.removeCarregando(["confirmacaoSim"]);
+        self.fecharModal();
+      }, 200);
+    },
+    cancelar() {
+      this.removeCarregando(["confirmacaoNao"]);
+      this.fecharModal();
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["mostrarModal", "evento"]),
+  },
+};
+</script>
+<style scoped>
+.div-botao {
+  padding-top: 20px;
+  height: 100px;
+}
+</style>

package/src/component/shared/Tabela.vue

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

package/src/component/template/ModeloRelatorioListaView.vue

@@ -9,44 +9,49 @@
     >
       <div slot="conteudo-principal">
         <b-row>
-          <!--   <b-col xs="12" sm="12" md="12" lg="5" xl="5">
-            <div><i class="fas fa-star icone-favorito"></i> Favoritos</div>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="6" v-if="todos.salvo.length > 0">
+            <div><i class="fas fa-file-alt icone-salvo"></i></i> Personalizado</div>
             <hr />
-            <div class="div-moldura" v-for="relatorio in favoritos">
+            <div class="div-moldura" v-for="relatorio in todos.salvo">
               <div>
                 <Moldura :bordaArredondada="12">
                   <b-row>
-                    <b-col sm="10" @click="navegarPara(relatorio.nomeRota)">
+                    <b-col sm="1">
+                      <i class="fas fa-file-alt icone-report"></i>
+                    </b-col>
+                    <b-col sm="10" @click="navegarPara(relatorio)">
                       <div>{{ relatorio.nome }}</div>
                     </b-col>
-                    <b-col sm="2">
-                      <div class="text-right">
-                        <i class="fas fa-times-circle icone-remover"></i>
-                      </div>
+                    <b-col sm="1">
+                      <Confirmacao
+                        titulo="Deseja excluir?"
+                        tipo="perigo"
+                        :dados="relatorio"
+                        :confirmado="excluir"
+                      >
+                        <div class="text-right">
+                          <i class="fas fa-times-circle icone-remover"></i>
+                        </div>
+                      </Confirmacao>
                     </b-col>
                   </b-row>
                 </Moldura>
               </div>
             </div>
-          </b-col> -->
-          <b-col xs="12" sm="12" md="12" lg="5" xl="5">
-            <div><i class="fas fa-list-ul"></i> Todos</div>
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="6">
+            <div><i class="fas fa-file-chart-line"></i> Padrão</div>
             <hr />
-            <div class="div-moldura" v-for="relatorio in todos">
+            <div class="div-moldura" v-for="relatorio in todos.padrao">
               <div>
                 <Moldura :bordaArredondada="12">
                   <b-row>
                     <b-col sm="1">
                       <i class="fas fa-file-alt icone-report"></i>
                     </b-col>
-                    <b-col sm="10" @click="navegarPara(relatorio.nomeRota)">
+                    <b-col sm="11" @click="navegarPara(relatorio)">
                       <div class="lado-a-lado">{{ relatorio.nome }}</div>
                     </b-col>
-                    <!--  <b-col sm="2">
-                      <div class="text-right">
-                        <i class="fas fa-plus-circle icone-favorito"></i>
-                      </div>
-                    </b-col>-->
                   </b-row>
                 </Moldura>
               </div>
@@ -61,52 +66,115 @@
 <script>
 import Painel from "@nixweb/nixloc-ui/src/component/layout/Painel.vue";
 import Moldura from "@nixweb/nixloc-ui/src/component/layout/Moldura";
+import Confirmacao from "@nixweb/nixloc-ui/src/component/shared/Confirmacao";
 
 import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
 
 export default {
   name: "ModeloRelatorioListaView",
-  components: { Painel, Moldura },
+  components: { Painel, Moldura, Confirmacao },
   props: {
     painel: Object,
     relatorios: Object,
   },
   data() {
     return {
-      todos: [],
+      todos: {},
+      urlObterTodos: "/api/v1/shared/relatorio/obter-todos",
+      urlRemover: "/api/v1/shared/relatorio/remover",
     };
   },
   computed: {
     ...mapState("generic", ["pesquisa", "buscouPesquisa", "limpouPesquisa"]),
   },
   mounted() {
-    this.removeCarregando(["painel"]);
-    this.todos = this.relatorios;
+    this.obterTodos();
+    this.todos = JSON.parse(JSON.stringify(this.relatorios)); // remove observable
   },
   methods: {
     ...mapMutations("generic", ["removeCarregando"]),
-    navegarPara(nomeRota) {
+    ...mapMutations("relatorio", [
+      "atualizaFiltroSelecionado",
+      "atualizaCampoOrdenado",
+      "atualizaOpcoesValorInicial",
+    ]),
+    ...mapActions("generic", ["getApi", "deleteAllApi"]),
+    obterTodos() {
+      let obj = { modulo: this.painel.modulo };
+      let params = { url: this.urlObterTodos, obj: obj };
+      this.getApi(params).then((response) => {
+        this.todos.salvo = [];
+        let self = this;
+        response.conteudo.dados.forEach((item) => {
+          const consulta = JSON.parse(item.consulta);
+          let obj = {
+            id: item.id,
+            nome: item.nome,
+            nomeRota: consulta.nomeRota,
+            filtro: consulta.filtro,
+            campo: consulta.campo,
+            ordenacao: consulta.ordenacao,
+          };
+          self.todos.salvo.push(obj);
+        });
+        this.removeCarregando(["painel"]);
+      });
+    },
+    navegarPara(relatorio) {
+      if (relatorio.filtro) {
+        let filtroSelecionado = { logicalOperator: "all", children: relatorio.filtro };
+        this.atualizaOpcoesValorInicial(relatorio.campo);
+        this.atualizaCampoOrdenado(relatorio.ordenacao);
+        this.atualizaFiltroSelecionado(filtroSelecionado);
+      } else {
+        this.atualizaOpcoesValorInicial([]);
+      }
       this.$router.push({
-        name: nomeRota,
+        name: relatorio.nomeRota,
+      });
+    },
+    excluir(dados) {
+      let selecionados = [];
+      selecionados.push(dados.id);
+
+      let params = {
+        url: this.urlRemover,
+        selecionados: selecionados,
+      };
+
+      this.deleteAllApi(params).then((reponse) => {
+        if (reponse.sucesso) this.obterTodos();
       });
     },
   },
   watch: {
     buscouPesquisa: function () {
-      let filtro = [];
+      let padrao = [];
+      let salvo = [];
       let self = this;
       setTimeout(function () {
-        self.todos.forEach(function (item) {
+        self.todos.padrao.forEach(function (item) {
+          if (self.pesquisa.filtro.conteudo == "igual") {
+            if (item.nome == self.pesquisa.conteudo) padrao.push(item);
+          }
+
+          if (self.pesquisa.filtro.conteudo == "contem") {
+            if (item.nome.includes(self.pesquisa.conteudo)) padrao.push(item);
+          }
+        });
+
+        self.todos.salvo.forEach(function (item) {
           if (self.pesquisa.filtro.conteudo == "igual") {
-            if (item.nome == self.pesquisa.conteudo) filtro.push(item);
+            if (item.nome == self.pesquisa.conteudo) salvo.push(item);
           }
 
           if (self.pesquisa.filtro.conteudo == "contem") {
-            if (item.nome.includes(self.pesquisa.conteudo)) filtro.push(item);
+            if (item.nome.includes(self.pesquisa.conteudo)) salvo.push(item);
           }
         });
 
-        self.todos = filtro;
+        self.todos.salvo = salvo;
+        self.todos.padrao = padrao;
 
         self.removeCarregando(["pesquisar", "limpar"]);
       }, 300);
@@ -115,6 +183,7 @@ export default {
       let self = this;
       setTimeout(function () {
         self.todos = self.relatorios;
+        self.obterTodos();
         self.removeCarregando(["pesquisar", "limpar"]);
       }, 300);
     },
@@ -123,8 +192,8 @@ export default {
 </script>
 
 <style scoped>
-.icone-favorito {
-  color: orange;
+.icone-salvo {
+  color: #94aa2a;
 }
 
 .icone-remover {
@@ -132,7 +201,7 @@ export default {
 }
 
 .icone-report {
-  font-size: 30px;
+  font-size: 25px;
   opacity: 0.2;
   color: #577696;
 }

package/src/component/template/ModeloRelatorioView.vue

@@ -17,6 +17,9 @@
             tamanho="medium"
           />
         </div>
+        <Modal titulo="Salvar" :largura="550" v-show="mostrarModal('salvar')">
+          <RelatorioAdicionarModificar :modulo="painel.modulo" />
+        </Modal>
         <Moldura>
           <div>
             <div slot="conteudo-filtro-horizontal">
@@ -112,11 +115,11 @@
         </Moldura>
         <div class="div-obrigatorio" v-show="invalido">
           <Alerta tipo="info" v-for="item in filtroObrigatorio" :key="item.id">
-            É necessário informar o filtro <b>{{ item.label }}</b
+            É 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>
@@ -181,6 +184,7 @@ 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";
 
@@ -203,6 +207,7 @@ export default {
     Rodape,
     Progresso,
     Tags,
+    RelatorioAdicionarModificar,
   },
   data() {
     return {
@@ -352,7 +357,10 @@ export default {
       this.fecharModal();
       this.removeCarregando(["aplicaFiltro", "aplicaCampo"]);
     },
-    salvarRelatorio() {},
+    salvarRelatorio() {
+      this.abrirModal("salvar");
+      this.removeCarregando(["salvarRelatorio"]);
+    },
     mostraEscondeCampos() {
       let self = this;
       this.relatorio.campo.forEach(function (value) {
@@ -452,4 +460,8 @@ export default {
 .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/relatorio.js

@@ -10,6 +10,11 @@ export default {
         campoSelecionado: [],
         campoOrdenado: {},
         filtroSelecionado: { children: [] },
+        opcoes: {
+            valorInicial: [],
+            opcoes: []
+        },
+        opcoesValorInicial: [],
         consulta: [],
         resumo: [],
     },
@@ -22,17 +27,32 @@ export default {
             return lista;
         },
         opcoes: (state) => {
-            let obj = {
+            // opcoesValorInicial é quando vem do relatório salvo
+
+            state.opcoes = {
                 valorInicial: [],
                 opcoes: []
-            }
+            };
+
+            var tamanhoValorInicial = state.opcoesValorInicial.length;
+
             state.relatorio.campo.forEach(function (value) {
                 let opcoes = { text: value.titulo, value: value.campo };
-                obj.opcoes.push(opcoes);
+                state.opcoes.opcoes.push(opcoes);
+
+                if (value.mostrar && tamanhoValorInicial == 0)
+                    state.opcoes.valorInicial.push(value.campo);
+
+                if (tamanhoValorInicial > 0)
+                    state.opcoes.valorInicial = state.opcoesValorInicial;
 
-                if (value.mostrar) obj.valorInicial.push(value.campo);
             });
-            return obj;
+
+            // se não tiver salvo, reseta o filtro que estava armazenado
+          /*  if (tamanhoValorInicial == 0)
+                state.filtroSelecionado.children = [];*/
+                
+            return state.opcoes;
         },
         filtroObrigatorio: (state) => {
             var filtroObrigatorio = state.relatorio.filtro.filter(x => x.obrigatorio == true);
@@ -101,6 +121,9 @@ export default {
         atualizaCampoSelecionado: (state, value) => {
             state.campoSelecionado = value;
         },
+        atualizaOpcoesValorInicial: (state, value) => {
+            state.opcoesValorInicial = value;
+        },
         atualizaFiltroSelecionado: (state, value) => {
             state.filtroSelecionado = value;
         },
@@ -143,7 +166,4 @@ export default {
             });
         }
     },
-    actions: {
-
-    }
 }