@nixweb/nixloc-ui 0.0.92 → 0.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.92",
+  "version": "0.0.95",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,
@@ -15,13 +15,14 @@
     "sass-loader": "^12.4.0",
     "vodal": "^2.4.0",
     "vue-color": "^2.7.0",
+    "vue-currency-filter": "^3.3.0",
     "vue-js-toggle-button": "^1.3.0",
     "vue-loading-template": "^1.3.0",
     "vue-moment": "^4.0.0",
     "vue-multiselect": "^2.1.0",
     "vue-numeric": "^2.4.1",
     "vue-the-mask": "^0.11.1",
-    "vue-sidebar-menu": "^3.6.3",
+    "vue-simple-progress": "^1.1.1",
     "vue-toasted": "^1.1.28",
     "vue-toggles": "^1.1.4",
     "vue-upload-file": "^1.1.0",

package/src/component/forms/EscolherEstatico.vue

@@ -119,9 +119,6 @@ export default {
 </script>
 
 <style scoped>
-.titulo {
-  color: #5f7587;
-}
 div.antes-lista {
   padding: 8px;
 }

package/src/component/layout/BarraRolagem.vue

@@ -1,5 +1,11 @@
 <template>
-  <div :id="id" class="barra-rolagem div" :style="'height:' + altura + 'px'">
+  <div
+    :id="id"
+    class="barra-rolagem div"
+    :style="
+      'max-height:' + alturaMaxima + 'px' + ';' + 'min-height:' + alturaMinima + 'px'
+    "
+  >
     <slot></slot>
   </div>
 </template>
@@ -11,7 +17,8 @@ export default {
   name: "BarraRolagem",
   props: {
     id: String,
-    altura: Number,
+    alturaMaxima: Number,
+    alturaMinima: Number,
   },
   mounted() {
     const listElm = document.querySelector("#" + this.id);

package/src/component/layout/Menu.vue

@@ -14,7 +14,13 @@
             :class="sessaoDestaque('home')"
           >
             <div class="div-icone lado-a-lado">
-              <i class="fas fa-chart-area icone-dash" :style="'color:' + corBase"></i>
+              <i
+                :class="{
+                  'icone-ativo': menuAtivo == 'Dashboard',
+                  'icone-normal': menuAtivo != 'Dashboard',
+                }"
+                class="fas fa-chart-area icone-dash"
+              ></i>
             </div>
             <div class="titulo">Dashboard</div>
           </a>
@@ -28,7 +34,14 @@
             :class="sessaoDestaque(item.modulo)"
           >
             <div class="div-icone lado-a-lado">
-              <i :class="item.icone" class="icone" :style="'color:' + corBase"></i>
+              <span
+                :class="{
+                  'icone-ativo': menuAtivo == item.modulo,
+                  'icone-normal': menuAtivo != item.modulo
+                }"
+              > <i :class="item.icone"></i>
+              </span>
+             
             </div>
             <div class="titulo">{{ item.titulo }}</div>
           </a>
@@ -83,7 +96,7 @@ export default {
     },
     corBaseAtivo: {
       type: String,
-      default: "#d98621",
+      default: "#3F529B",
     },
     urlImagem: String,
   },
@@ -157,12 +170,6 @@ 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/layout/Moldura.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="moldura">
+  <div class="moldura" :style="'border-radius:' + bordaArredondada + 'px'">
     <slot></slot>
   </div>
 </template>
@@ -7,13 +7,18 @@
 <script>
 export default {
   name: "Moldura",
+  props: {
+    bordaArredondada: {
+      type: Number,
+      default: 3,
+    },
+  },
 };
 </script>
 <style scoped>
 .moldura {
   border: 1px solid #dbdfe9;
-  background-color: white;
-  border-radius: 3px;
+  background-color: transparent;
   padding: 15px;
 }
 </style>

package/src/component/layout/Tag.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="div-tag">
+    <div class="tag">
+      <span @click="executar()">{{ titulo }}: {{ valor }}</span>
+      <i @click="remover()" class="icone fas fa-times-circle"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  name: "Tag",
+  props: {
+    titulo: String,
+    valor: String,
+    nomeEvento: String,
+    dadosEvento: Object,
+  },
+  methods: {
+    ...mapMutations("generic", ["insereEvento"]),
+    executar() {
+      if (this.nomeEvento)
+        this.insereEvento({
+          nome: this.nomeEvento,
+          dados: this.dadosEvento,
+        });
+    },
+    remover() {
+      this.insereEvento({
+        nome: "tagRemovida",
+        dados: this.dadosEvento,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.tag {
+  align-items: center;
+  background: #e0e0e0;
+  border-radius: 32px;
+  box-sizing: border-box;
+  display: flex;
+  font-size: 13px;
+  height: 32px;
+  margin: 4px 8px 4px 0;
+  width: 100%;
+  outline: none;
+  padding: 0 6px 0 16px;
+  position: relative;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.div-tag {
+  margin-right: 10px;
+}
+
+.icone {
+  color: #9e9e9e;
+  padding-left: 5px;
+}
+</style>

package/src/component/shared/FiltroHorizontal.vue

@@ -13,10 +13,10 @@
       }"
     >
       <b-row>
-        <b-col sm="10">
+        <b-col :sm="mostrarTotalPorPagina ? 10 : 12">
           <slot name="conteudo-filtro-horizontal"></slot>
         </b-col>
-        <b-col xs="12" sm="12" md="12" lg="2" xl="2">
+        <b-col xs="12" sm="12" md="12" lg="2" xl="2" v-if="mostrarTotalPorPagina">
           <EscolherEstatico
             titulo="Mostrar"
             campoAlvo="totalPorPagina"
@@ -43,6 +43,12 @@ import Escolher from "../forms/Escolher";
 export default {
   name: "ModeloLista",
   components: { Escolher, EscolherEstatico, EsconderMostrar },
+  props: {
+    mostrarTotalPorPagina: {
+      type: Boolean,
+      default: true,
+    },
+  },
 };
 </script>
 

package/src/component/shared/Progresso.vue

@@ -1,8 +1,21 @@
 <template>
-  <div>barra de progresso</div>
+  <div>
+    <progress-bar :size="tamanho" :text="texto" :val="valor" :max="maximo"></progress-bar>
+  </div>
 </template>
 <script>
+import ProgressBar from "vue-simple-progress";
+
 export default {
   name: "Progresso",
+  components: {
+    ProgressBar,
+  },
+  props: {
+    texto: String,
+    valor: Number,
+    maximo: Number,
+    tamanho: String,
+  },
 };
 </script>

package/src/component/shared/Tabela.vue

@@ -243,7 +243,7 @@ tr:hover {
 }
 
 .tabela-numero {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: bold;
 }
 
@@ -253,7 +253,7 @@ tr:hover {
 }
 
 .tabela-valor {
-  font-size: 16px;
+  font-size: 15px;
   min-width: 100px;
 }
 
@@ -272,14 +272,4 @@ tr:hover {
 .icone-link:hover {
   font-size: 12.5px;
 }
-
-.receita {
-  font-size: 14px;
-  color: darkblue;
-}
-
-.despesa {
-  font-size: 14px;
-  color: red;
-}
 </style>

package/src/component/shared/query-builder/Campo.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <b-row>
+      <b-col sm="6">
+        <BarraRolagem :alturaMinima="200" :alturaMaxima="250">
+          <div class="div-opcoes">
+            <CheckboxMultiplo
+              :empilhado="true"
+              :valorInicial="opcoes.valorInicial"
+              :opcoes="opcoes.opcoes"
+              v-model="campoSelecionado"
+            />
+          </div>
+        </BarraRolagem>
+      </b-col>
+      <b-col sm="6">
+        <Opcoes
+          :opcoes="[
+            { text: 'Crescente', value: 'asc' },
+            { text: 'Decrescente', value: 'desc' },
+          ]"
+          v-model="ordenar"
+        />
+        <EscolherEstatico
+          titulo="Ordenar"
+          campoAlvo="ordenar"
+          :valorInicial="valorInicial"
+          :dados="ordenacao"
+          v-model="campoOrdenado"
+        />
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+import EscolherEstatico from "@nixweb/nixloc-ui/src/component/forms/EscolherEstatico";
+import Opcoes from "@nixweb/nixloc-ui/src/component/forms/Opcoes";
+import CheckboxMultiplo from "@nixweb/nixloc-ui/src/component/forms/CheckboxMultiplo";
+import BarraRolagem from "@nixweb/nixloc-ui/src/component/layout/BarraRolagem.vue";
+
+import { mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "CampoRelatorio",
+  components: {
+    CheckboxMultiplo,
+    EscolherEstatico,
+    BarraRolagem,
+    Opcoes,
+  },
+  data() {
+    return {
+      ordenar: "asc",
+      valorInicial: {},
+    };
+  },
+  created() {
+    this.valorInicial = this.ordenacao[0];
+    let obj = {
+      conteudo: this.valorInicial.conteudo,
+      id: this.valorInicial.id,
+      ordenar: this.ordenar,
+    };
+    this.atualizaCampoOrdenado(obj);
+  },
+  computed: {
+    ...mapGetters("relatorio", ["opcoes"]),
+    campoSelecionado: {
+      get() {
+        return this.$store.state.relatorio.campoSelecionado;
+      },
+      set(value) {
+        this.atualizaCampoSelecionado(value);
+      },
+    },
+    campoOrdenado: {
+      get() {
+        return this.$store.state.relatorio.campoOrdenado;
+      },
+      set(value) {
+        let obj = { conteudo: value.conteudo, id: value.id, ordenar: this.ordenar };
+        this.atualizaCampoOrdenado(obj);
+      },
+    },
+    ordenacao() {
+      let ordenacao = [];
+      this.opcoes.opcoes.forEach((opcao) => {
+        let obj = { conteudo: opcao.text, id: opcao.value };
+        ordenacao.push(obj);
+      });
+      return ordenacao;
+    },
+  },
+  methods: {
+    ...mapMutations("relatorio", ["atualizaCampoSelecionado", "atualizaCampoOrdenado"]),
+  },
+  watch: {
+    ordenar: {
+      handler(value) {
+        let obj = {
+          conteudo: this.campoOrdenado.conteudo,
+          id: this.campoOrdenado.id,
+          ordenar: this.ordenar,
+        };
+        this.atualizaCampoOrdenado(obj);
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.div-opcoes {
+  margin-left: 10px;
+}
+</style>

package/src/component/shared/query-builder/ConverteParaOdata.js

@@ -0,0 +1,73 @@
+export default class ConverteParaOdata {
+    converteFiltro(query) {
+        let campo = query.rule;
+        let valor = query.value;
+        let tipo = query.tipo;
+        let label = query.label;
+
+        if (query.operator === "igual") return `${campo} eq '${valor}'`;
+        if (query.operator === "diferente") return `${campo} ne '${valor}'`;
+        if (query.operator === "contem") return `contains(${campo},'${valor}')`;
+        if (query.operator === "periodo") return this.convertePeriodo(valor);
+        if (query.operator === "checkbox") return this.converteCheckbox(campo, valor, tipo, label);
+        if (query.operator === "=") return `${campo} eq ${valor}`;
+        if (query.operator === "!=") return `${campo} ne ${valor}`;
+        if (query.operator === "<") return `${campo} lt ${valor}`;
+        if (query.operator === "<=") return `${campo} le ${valor}`;
+        if (query.operator === ">") return `${campo} gt ${valor}`;
+        if (query.operator === ">=") return `${campo} ge ${valor}`;
+    }
+    convertePeriodo(valor) {
+        let inicio = this.converteData(valor[0]);
+        let fim = this.converteData(valor[1]);
+        return `data ge ${inicio} and data le ${fim}`;
+    }
+    converteCheckbox(campo, valor, tipo, label) {
+        let consulta = "";
+        let sequencia = 0;
+        var tamanho = valor.length;
+        let self = this;
+        valor.forEach(function (value) {
+            if (tipo == "campo") {
+                consulta += `${campo} eq ${value}`;
+                if (sequencia + 1 != tamanho) consulta += ` or `;
+            }
+            if (tipo == "resumo") {
+                let nome = self.converteNome(value);
+                consulta += `${campo} with ${value} as ${nome}${label}`;
+                if (sequencia + 1 != tamanho) consulta += `,`;
+            }
+            sequencia++;
+        });
+
+        if (tamanho > 1 && tipo == "campo") return `(${consulta})`;
+        return `${consulta}`;
+    }
+    converteData(data) {
+        let str = data.replace("/", "").replace("/", "");
+
+        let date = {
+            dia: str.substr(0, 2),
+            mes: str.substr(2, 2),
+            ano: str.substr(4, 4),
+        };
+
+        var iso = date.ano + "-" + date.mes + "-" + date.dia;
+
+        /*
+          iso += date.dia + "T";
+          iso += "00:00:00.000Z";
+          iso += d.getHours().toString().padStart(2, "0") + ":";
+          iso += d.getMinutes().toString().padStart(2, "0") + ":";
+          iso += d.getSeconds().toString().padStart(2, "0");
+        */
+
+        return iso;
+    }
+    converteNome(value) {
+        if (value === "sum") return "soma";
+        if (value === "average") return "media";
+        if (value === "max") return "maximo";
+        if (value === "minimo") return "minimo";
+    }
+}

package/src/component/shared/query-builder/Filtro.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <BarraRolagem :alturaMinima="450" :alturaMaxima="600">
+      <QueryBuilder :rules="relatorio.filtro" v-model="filtroSelecionado" />
+    </BarraRolagem>
+  </div>
+</template>
+
+<script>
+import QueryBuilder from "./QueryBuilder.vue";
+import BarraRolagem from "@nixweb/nixloc-ui/src/component/layout/BarraRolagem.vue";
+
+import { mapMutations, mapState } from "vuex";
+
+export default {
+  name: "Filtro",
+  components: { BarraRolagem, QueryBuilder },
+  computed: {
+    ...mapState("relatorio", ["relatorio"]),
+    filtroSelecionado: {
+      get() {
+        return this.$store.state.relatorio.filtroSelecionado;
+      },
+      set(value) {
+        this.atualizaFiltroSelecionado(value);
+      },
+    },
+  },
+  methods: {
+    ...mapMutations("relatorio", ["atualizaFiltroSelecionado"]),
+  },
+};
+</script>
+
+<style>
+.btn-secondary {
+  background-color: #4ab4e2 !important;
+  border: 0px !important;
+  font-size: 14px !important;
+  border-radius: 20px !important;
+}
+
+.vue-query-builder .vqb-group.depth-1 .vqb-rule,
+.vue-query-builder .vqb-group.depth-2 {
+  border-left: 2px solid #577696 !important;
+}
+
+.vue-query-builder .vqb-rule {
+  background-color: #fafafc !important;
+}
+
+.form-i nline label {
+  font-size: 14px !important;
+}
+
+.card-header {
+  padding: 5px !important;
+}
+
+.card {
+  padding: 10px !important;
+}
+
+.vqb-rule {
+  margin-bottom: 10px !important;
+}
+
+.rule-actions {
+  margin-bottom: 10px !important;
+}
+
+.mr-2 {
+  font-size: 14px !important;
+  margin-left: 10px !important;
+}
+
+.form-inline .form-control {
+  min-width: 200px !important;
+}
+
+option {
+  font-size: 14px !important;
+  padding: 5px !important;
+}
+</style>