@nixweb/nixloc-ui 0.0.89 → 0.0.92

package/package.json

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

package/src/component/forms/Botao.vue

@@ -73,7 +73,7 @@ export default {
 }
 
 .titulo {
-  margin-right: 5px;
+  margin: 2px;
 }
 
 .botao {

package/src/component/layout/Menu.vue

@@ -7,32 +7,32 @@
         </div>
       </li>
       <li>
-        <a
-          href="#"
-          @click.prevent="navegarPara('dashboard')"
-          :class="sessaoDestaque('home')"
-        >
-          <div class="div-icone lado-a-lado">
-            <i class="fas fa-chart-area icone-dash" :style="'color:' + corBase"></i>
-          </div>
-          <div class="titulo">Dashboard</div>
-        </a>
+        <div :class="{ 'menu-ativo': menuAtivo == 'Dashboard' }">
+          <a
+            href="#"
+            @click.prevent="navegarPara({ nomeRota: 'dashboard', modulo: 'Dashboard' })"
+            :class="sessaoDestaque('home')"
+          >
+            <div class="div-icone lado-a-lado">
+              <i class="fas fa-chart-area icone-dash" :style="'color:' + corBase"></i>
+            </div>
+            <div class="titulo">Dashboard</div>
+          </a>
+        </div>
       </li>
-
       <li v-for="(item, index) in menuFiltro(true)" :key="index">
-        <a
-          href="#"
-          @click.prevent="abrirSubMenu(item.modulo)"
-          :class="sessaoDestaque(item.modulo)"
-        >
-          <div class="div-icone lado-a-lado">
-            <i :class="item.icone" class="icone" :style="'color:' + corBase"></i>
-          </div>
-          <div class="titulo">{{ item.titulo }}</div>
-          <!--  <div class="lado-a-lado seta menu__arrow-icon">
-            <i class="fas fa-angle-right"></i>
-          </div> -->
-        </a>
+        <div :class="{ 'menu-ativo': menuAtivo == item.modulo }">
+          <a
+            href="#"
+            @click.prevent="abrirSubMenu(item.modulo)"
+            :class="sessaoDestaque(item.modulo)"
+          >
+            <div class="div-icone lado-a-lado">
+              <i :class="item.icone" class="icone" :style="'color:' + corBase"></i>
+            </div>
+            <div class="titulo">{{ item.titulo }}</div>
+          </a>
+        </div>
       </li>
     </ul>
 
@@ -55,7 +55,7 @@
             <a
               v-else
               href="#"
-              @click.prevent="navegarPara(item.nomeRota)"
+              @click.prevent="navegarPara(item)"
               :class="classeSubMenu(item.titulo)"
             >
               <b-row>
@@ -81,12 +81,17 @@ export default {
       type: String,
       default: "#4680A5",
     },
+    corBaseAtivo: {
+      type: String,
+      default: "#d98621",
+    },
     urlImagem: String,
   },
   data() {
     return {
       modulo: "",
       subMenuPrimeiroNivel: false,
+      menuAtivo: "Dashboard",
     };
   },
   methods: {
@@ -110,9 +115,9 @@ export default {
         "context-menu__link--active": this.activeSubMenu === subMenuName,
       };
     },
-    navegarPara(nomeRota) {
+    navegarPara(item) {
       this.$router.push({
-        name: nomeRota,
+        name: item.nomeRota,
       });
       this.fecharSubMenu();
     },
@@ -135,6 +140,14 @@ export default {
   computed: {
     ...mapState("usuario", ["menu"]),
   },
+  watch: {
+    $route: {
+      handler: function (router) {
+        this.menuAtivo = router.matched[0].props.default.modulo;
+      },
+      deep: true,
+    },
+  },
 };
 </script>
 
@@ -144,6 +157,12 @@ export default {
   z-index: 1000;
 }
 
+.menu-ativo {
+  border-left: 3px solid #d98621;
+  color: #d98621 ;
+  background-color: #FAFAFC;
+}
+
 .div-logo {
   padding-top: 5px;
   padding-bottom: 15px;

package/src/component/shared/Tabela.vue

@@ -97,6 +97,9 @@
             >
               <TabelaBotao :obj="obj" :linha="linha" />
             </div>
+            <div class="link" v-if="obj.tipo === 'link'" @click="navegarPara(obj, linha)">
+              <span> {{ linha[obj.campo] }}</span>
+            </div>
           </td>
         </tr>
       </tbody>
@@ -143,7 +146,7 @@ export default {
     },
   },
   methods: {
-    ...mapMutations("generic", ["adicionaSelecao"]),
+    ...mapMutations("generic", ["adicionaSelecao", "insereEvento"]),
     ...mapActions("generic", ["pdfApi"]),
     selecionar() {
       this.adicionaSelecao([]);
@@ -188,7 +191,21 @@ export default {
       };
       this.pdfApi(params).then((response) => {});
     },
+    navegarPara(obj, linha) {
+      if (obj.nomeRota) {
+        this.$router.push({
+          name: obj.nomeRota,
+          params: { id: linha.id },
+        });
+      } else {
+        this.insereEvento({
+          nome: obj.nomeEvento,
+          dados: linha,
+        });
+      }
+    },
   },
+
   beforeDestroy() {
     this.adicionaSelecao([]);
   },
@@ -214,10 +231,15 @@ table tbody tr td {
   width: 30px;
 }
 
+tr:hover {
+  background-color: #fafafc;
+}
+
 .titulo-cabecalho {
   font-size: 14px;
   color: #757d8c;
-  font-weight: 500;
+  font-weight: 400;
+  text-transform: uppercase;
 }
 
 .tabela-numero {
@@ -235,12 +257,22 @@ table tbody tr td {
   min-width: 100px;
 }
 
-.icone {
-  font-size: 20px;
-  color: #8ca1b7;
+.link {
+  color: #0c63c0;
+  font-size: 15px;
+  font-weight: 400;
   cursor: pointer;
 }
 
+.link:hover {
+  text-decoration: underline;
+  transition: 0.1s;
+}
+
+.icone-link:hover {
+  font-size: 12.5px;
+}
+
 .receita {
   font-size: 14px;
   color: darkblue;

package/src/component/template/ModeloLista.vue

@@ -142,7 +142,7 @@ export default {
       let params = { url: this.modeloLista.urlGetApi, obj: obj };
       this.getApi(params).then((response) => {
         this.conteudo = response.conteudo;
-        this.removeCarregando(["painel", "pesquisar", "limpar"]);
+        this.removeCarregando(["painel", "modeloSubView", "pesquisar", "limpar"]);
       });
     },
     removerSelecionados() {

package/src/component/template/ModeloRelatorioListaView.vue

@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <Painel
+      :modulo="painel.modulo"
+      :titulo="painel.titulo"
+      :mostrarFiltroVertical="painel.mostrarFiltroVertical"
+      :mostrarPesquisa="painel.mostrarPesquisa"
+      :mostrarBotoes="painel.mostrarBotoes"
+    >
+      <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>
+            <hr />
+            <div class="div-moldura" v-for="relatorio in favoritos">
+              <div>
+                <Moldura :bordaArredondada="12">
+                  <b-row>
+                    <b-col sm="10" @click="navegarPara(relatorio.nomeRota)">
+                      <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>
+                  </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>
+            <hr />
+            <div class="div-moldura" v-for="relatorio in todos">
+              <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)">
+                      <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>
+            </div>
+          </b-col>
+        </b-row>
+      </div>
+    </Painel>
+  </div>
+</template>
+
+<script>
+import Painel from "@nixweb/nixloc-ui/src/component/layout/Painel.vue";
+import Moldura from "@nixweb/nixloc-ui/src/component/layout/Moldura";
+
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ModeloRelatorioListaView",
+  components: { Painel, Moldura },
+  props: {
+    painel: Object,
+    relatorios: Object,
+  },
+  data() {
+    return {
+      todos: [],
+    };
+  },
+  computed: {
+    ...mapState("generic", ["pesquisa", "buscouPesquisa", "limpouPesquisa"]),
+  },
+  mounted() {
+    this.removeCarregando(["painel"]);
+    this.todos = this.relatorios;
+  },
+  methods: {
+    ...mapMutations("generic", ["removeCarregando"]),
+    navegarPara(nomeRota) {
+      this.$router.push({
+        name: nomeRota,
+      });
+    },
+  },
+  watch: {
+    buscouPesquisa: function () {
+      let filtro = [];
+      let self = this;
+      setTimeout(function () {
+        self.todos.forEach(function (item) {
+          if (self.pesquisa.filtro.conteudo == "igual") {
+            if (item.nome == self.pesquisa.conteudo) filtro.push(item);
+          }
+
+          if (self.pesquisa.filtro.conteudo == "contem") {
+            if (item.nome.includes(self.pesquisa.conteudo)) filtro.push(item);
+          }
+        });
+
+        self.todos = filtro;
+
+        self.removeCarregando(["pesquisar", "limpar"]);
+      }, 300);
+    },
+    limpouPesquisa: function () {
+      let self = this;
+      setTimeout(function () {
+        self.todos = self.relatorios;
+        self.removeCarregando(["pesquisar", "limpar"]);
+      }, 300);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.icone-favorito {
+  color: orange;
+}
+
+.icone-remover {
+  color: red;
+}
+
+.icone-report {
+  font-size: 30px;
+  opacity: 0.2;
+  color: #577696;
+}
+
+.div-moldura {
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+
+.div-moldura:hover {
+  background-color: #fafafc;
+}
+
+.descricao {
+  font-size: 13.5px;
+  color: rgb(117, 117, 117);
+}
+</style>

package/src/component/template/ModeloSubView.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <Carregando :centralizado="false" v-show="carregando('modeloSubView')" />
+    <div v-show="!carregando('modeloSubView')">
+      <slot name="conteudo-botoes"></slot>
+      <div v-if="mostrarPesquisa">
+        <Pesquisa />
+        <br />
+      </div>
+
+      <ModeloLista
+        :modeloLista="modeloLista"
+        :propsParam="propsParam"
+        :mostrarMoldura="false"
+        :mostrarFiltroHorizontal="mostrarFiltroHorizontal"
+        :botaoExcluir="botaoExcluir"
+      >
+        <div slot="conteudo-botoes-tabela-cabecalho">
+          <slot name="conteudo-botoes-tabela-cabecalho"></slot>
+        </div>
+        <div slot="conteudo-filtro-horizontal">
+          <slot name="conteudo-filtro-horizontal"></slot>
+        </div>
+        <div slot="conteudo-botoes-tabela">
+          <slot name="conteudo-botoes-tabela"></slot>
+        </div>
+      </ModeloLista>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pesquisa from "../shared/Pesquisa.vue";
+import Carregando from "../shared/Carregando.vue";
+
+import ModeloLista from "@nixweb/nixloc-ui/src/component/template/ModeloLista.vue";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "ModeloView",
+  components: { Pesquisa, Carregando, ModeloLista },
+  props: {
+    modeloLista: Object,
+    propsParam: Object,
+    mostrarPesquisa: {
+      type: Boolean,
+      default: true,
+    },
+    mostrarFiltroHorizontal: {
+      type: Boolean,
+      default: true,
+    },
+    botaoExcluir: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["carregando"]),
+  },
+  created() {
+    this.insereCarregando("modeloSubView");
+  },
+  methods: {
+    ...mapMutations("generic", ["insereCarregando"]),
+  },
+};
+</script>

package/src/component/template/ModeloConfiguracaoView.vue

@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <slot name="conteudo-botoes"></slot>
-    <div v-if="mostrarPesquisa">
-      <Pesquisa />
-      <br />
-    </div>
-
-    <ModeloLista
-      :modeloLista="modeloLista"
-      :propsParam="propsParam"
-      :mostrarMoldura="false"
-      :mostrarFiltroHorizontal="mostrarFiltroHorizontal"
-      :botaoExcluir="botaoExcluir"
-    >
-      <div slot="conteudo-botoes-tabela-cabecalho">
-        <slot name="conteudo-botoes-tabela-cabecalho"></slot>
-      </div>
-      <div slot="conteudo-filtro-horizontal">
-        <slot name="conteudo-filtro-horizontal"></slot>
-      </div>
-      <div slot="conteudo-botoes-tabela">
-        <slot name="conteudo-botoes-tabela"></slot>
-      </div>
-    </ModeloLista>
-  </div>
-</template>
-
-<script>
-import Pesquisa from "../shared/Pesquisa.vue";
-
-import ModeloLista from "@nixweb/nixloc-ui/src/component/template/ModeloLista.vue";
-
-export default {
-  name: "ModeloView",
-  components: { Pesquisa, ModeloLista },
-  props: {
-    modeloLista: Object,
-    propsParam: Object,
-    mostrarPesquisa: {
-      type: Boolean,
-      default: true,
-    },
-    mostrarFiltroHorizontal: {
-      type: Boolean,
-      default: true,
-    },
-    botaoExcluir: {
-      type: Boolean,
-      default: true,
-    },
-  },
-};
-</script>