@nixweb/nixloc-ui 0.0.121 → 0.0.122

package/src/component/shared/Tabela.vue

@@ -8,102 +8,102 @@
               <b-form-checkbox v-model="selecionarTodos" @change="selecionar" />
             </div>
           </th>
-          <th v-for="(obj, ind) in cabecalhoTabela" :key="ind">
-            <div class="titulo-margem" :class="obj.classeCssTitulo">
+          <th v-for="(obj, ind) in headerTable" :key="ind">
+            <div class="title-margem" :class="obj.classeCssTitulo">
               <i class="fas fa-search" v-if="obj.iconeBusca"></i>
-              <span class="titulo-cabecalho"> {{ obj.titulo }}</span>
+              <span class="title-cabecalho"> {{ obj.title }}</span>
             </div>
           </th>
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(linha, index) in dados" :key="index" :style="linha.linhaCss">
+        <tr v-for="(linha, index) in data" :key="index" :style="linha.linhaCss">
           <td class="td-checkbox" v-if="mostrarChecks">
             <b-form-checkbox v-model="selecionados" :value="linha.id" />
           </td>
-          <td v-for="(obj, ind) in cabecalhoTabela" :key="ind">
+          <td v-for="(obj, ind) in headerTable" :key="ind">
             <div
               :class="converteClasse(linha[obj.campoComparacao], obj.classeCssCorpo)"
-              v-if="obj.tipo === 'texto'"
+              v-if="obj.type === 'texto'"
             >
-              {{ linha[obj.campo] }}
+              {{ linha[obj.field] }}
             </div>
             <div
               :class="converteClasse(linha[obj.campoComparacao], obj.classeCssCorpo)"
-              v-if="obj.tipo === 'classe'"
+              v-if="obj.type === 'classe'"
             >
-              {{ linha[obj.campo] }}
+              {{ linha[obj.field] }}
             </div>
             <div
               :class="converteClasse(linha[obj.campoComparacao], obj.classeCssCorpo)"
-              v-if="obj.tipo === 'html'"
+              v-if="obj.type === 'html'"
             >
-              <div v-if="linha[obj.campo]" v-html="linha[obj.campo]"></div>
+              <div v-if="linha[obj.field]" v-html="linha[obj.field]"></div>
               <div v-else v-html="obj.html"></div>
             </div>
             <div
               :class="converteClasse(linha[obj.campoComparacao], obj.classeCssCorpo)"
-              v-if="obj.tipo === 'escolher'"
+              v-if="obj.type === 'escolher'"
             >
-              {{ linha[obj.campo].conteudo }}
+              {{ linha[obj.field].content }}
             </div>
             <div
               :class="converteClasse(linha[obj.campoComparacao], obj.classeCssCorpo)"
-              v-if="obj.tipo === 'data'"
+              v-if="obj.type === 'data'"
             >
-              {{ linha[obj.campo] | moment("DD/MM/YYYY") }}
+              {{ linha[obj.field] | moment("DD/MM/YYYY") }}
             </div>
             <div
               :class="converteClasse(linha[obj.campoComparacao], obj.classeCssCorpo)"
-              v-if="obj.tipo === 'dataHora'"
+              v-if="obj.type === 'dataHora'"
             >
-              {{ linha[obj.campo] | moment("DD/MM/YYYY HH:mm") }}
+              {{ linha[obj.field] | moment("DD/MM/YYYY HH:mm") }}
             </div>
             <div
               :class="converteClasse(linha[obj.campoComparacao], obj.classeCssCorpo)"
-              v-if="obj.tipo === 'valor'"
+              v-if="obj.type === 'valor'"
             >
-              {{ linha[obj.campo] | currency }}
+              {{ linha[obj.field] | currency }}
             </div>
             <div
               :class="converteClasse(linha[obj.campoComparacao], obj.classeCssCorpo)"
-              v-if="obj.tipo === 'pdf'"
+              v-if="obj.type === 'pdf'"
             >
               <span
-                @click="solicitarPdf(obj.pdf, linha[obj.campo])"
-                class="icone"
-                v-if="linha[obj.campo]"
+                @click="solicitarPdf(obj.pdf, linha[obj.field])"
+                class="icon"
+                v-if="linha[obj.field]"
               >
-                <i :class="obj.icone"></i
+                <i :class="obj.icon"></i
               ></span>
               <span v-else>N/I</span>
             </div>
             <div
               :class="converteClasse(linha[obj.campoComparacao], obj.classeCssCorpo)"
-              v-if="obj.tipo === 'telerik'"
+              v-if="obj.type === 'telerik'"
             >
               <span
-                @click="solicitarTelerik(obj.pdf, linha[obj.campo])"
-                class="icone"
-                v-if="linha[obj.campo]"
+                @click="solicitarTelerik(obj.pdf, linha[obj.field])"
+                class="icon"
+                v-if="linha[obj.field]"
               >
-                <i :class="obj.icone"></i
+                <i :class="obj.icon"></i
               ></span>
               <span v-else>N/I</span>
             </div>
             <div
               :class="converteClasse(linha[obj.campoComparacao], obj.classeCssCorpo)"
-              v-if="obj.tipo === 'botao'"
+              v-if="obj.type === 'botao'"
             >
               <TabelaBotao :obj="obj" :linha="linha" />
             </div>
-            <div class="link" v-if="obj.tipo === 'link'" @click="navegarPara(obj, linha)">
-              <span> {{ linha[obj.campo] }}</span>
+            <div class="link" v-if="obj.type === 'link'" @click="navegateTo(obj, linha)">
+              <span> {{ linha[obj.field] }}</span>
             </div>
           </td>
         </tr>
       </tbody>
-      <tbody v-show="dados.length == 0">
+      <tbody v-show="data.length == 0">
         <tr>
           <td colspan="12">
             <span>Nenhum registro encontrado!</span>
@@ -122,8 +122,8 @@ import { mapState, mapMutations, mapActions } from "vuex";
 export default {
   components: { TabelaBotao },
   props: {
-    cabecalhoTabela: Array,
-    dados: Array,
+    headerTable: Array,
+    data: Array,
     mostrarChecks: {
       type: Boolean,
       default: true,
@@ -141,18 +141,18 @@ export default {
         return this.$store.state.generic.selecionados;
       },
       set(value) {
-        this.adicionaSelecao(value);
+        this.addSelection(value);
       },
     },
   },
   methods: {
-    ...mapMutations("generic", ["adicionaSelecao", "insereEvento"]),
+    ...mapMutations("generic", ["addSelection", "addEvent"]),
     ...mapActions("generic", ["pdfApi"]),
     selecionar() {
-      this.adicionaSelecao([]);
+      this.addSelection([]);
       if (this.selecionarTodos) {
-        for (let i in this.dados) {
-          this.selecionados.push(this.dados[i].id);
+        for (let i in this.data) {
+          this.selecionados.push(this.data[i].id);
         }
       }
     },
@@ -191,23 +191,23 @@ export default {
       };
       this.pdfApi(params).then((response) => {});
     },
-    navegarPara(obj, linha) {
-      if (obj.nomeRota) {
+    navegateTo(obj, linha) {
+      if (obj.routeName) {
         this.$router.push({
-          name: obj.nomeRota,
+          name: obj.routeName,
           params: { id: linha.id },
         });
       } else {
-        this.insereEvento({
+        this.addEvent({
           nome: obj.nomeEvento,
-          dados: linha,
+          data: linha,
         });
       }
     },
   },
 
   beforeDestroy() {
-    this.adicionaSelecao([]);
+    this.addSelection([]);
   },
 };
 </script>
@@ -235,7 +235,7 @@ tr:hover {
   background-color: #fafafc;
 }
 
-.titulo-cabecalho {
+.title-cabecalho {
   font-size: 13px;
   color: #757d8c;
   font-weight: 400;
@@ -247,7 +247,7 @@ tr:hover {
   font-weight: bold;
 }
 
-.tabela-principal {
+.tabela-main {
   color: #757d8c;
   max-width: 200px;
 }
@@ -269,7 +269,7 @@ tr:hover {
   transition: 0.1s;
 }
 
-.icone-link:hover {
+.icon-link:hover {
   font-size: 12.5px;
 }
 </style>

package/src/component/shared/TabelaBotao.vue

@@ -1,33 +1,33 @@
 <template>
   <div>
-    <Botao
+    <Button
       v-if="obj.qualBotao == 'botao'"
-      :chave="linha.id"
-      :titulo="obj.botao.titulo"
-      :tipo="obj.botao.tipo"
-      :tamanho="obj.botao.tamanho"
-      :classeIcone="obj.botao.classeIcone"
+      :key="linha.id"
+      :title="obj.botao.title"
+      :type="obj.botao.type"
+      :size="obj.botao.size"
+      :classIcon="obj.botao.classIcon"
       :nomeEvento="obj.botao.nomeEvento"
       :dadosEvento="linha"
     />
     <BotaoDropdown
       v-if="obj.qualBotao == 'botaodropdown'"
-      :titulo="obj.botao.titulo"
-      :tipo="obj.botao.tipo"
-      :tamanho="obj.botao.tamanho"
-      :classeIcone="obj.botao.classeIcone"
+      :title="obj.botao.title"
+      :type="obj.botao.type"
+      :size="obj.botao.size"
+      :classIcon="obj.botao.classIcon"
       :dadosEvento="linha"
-      :itens="obj.botao.itens"
+      :items="obj.botao.items"
     />
   </div>
 </template>
 
 <script>
 import BotaoDropdown from "../forms/BotaoDropdown";
-import Botao from "../forms/Botao";
+import Button from "../forms/Button";
 export default {
   name: "TabelaBotao",
-  components: { Botao, BotaoDropdown },
+  components: { Button, BotaoDropdown },
   props: {
     obj: Object,
     linha: Object,

package/src/component/shared/Toast.vue

@@ -18,28 +18,28 @@ export default {
   },
   methods: {
     notifica(value) {
-      if (value.tipo == "postApi" || value.tipo == "putApi")
-        this.$toasted.show("Salvo com sucesso", {
+      if (value.type == "postApi" || value.type == "putApi")
+        this.$toasted.show("Salvo com success", {
           type: "success",
         });
-      if (value.tipo == "postApiErro" || value.tipo == "putApiErro") {
+      if (value.type == "postApiError" || value.type == "putApiErro") {
         this.$toasted.show("Ops! Algo deu errado", {
           type: "error",
         });
         this.voltarParaTopo();
       }
 
-      if (value.tipo == "removerTodosApiSucesso")
-        this.$toasted.show("Removido com sucesso", {
+      if (value.type == "removerTodosApiSucesso")
+        this.$toasted.show("Removido com success", {
           type: "success",
         });
-      if (value.tipo == "removerTodosApiErro") {
+      if (value.type == "removerTodosApiErro") {
         this.$toasted.show("Ops! Algo deu errado", {
           type: "error",
         });
         this.voltarParaTopo();
       }
-      if (value.tipo == "falhaGenerica") {
+      if (value.type == "falhaGenerica") {
         this.$toasted.show("Ops! Algo deu errado", {
           type: "error",
         });

package/src/component/shared/{FiltroVertical.vue → VerticalFilter.vue}

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="moldura-botao"
+      class="molded-botao"
       :class="{ fechado: !mostrarFiltro, aberto: mostrarFiltro }"
       v-show="!mostrarFiltro"
       @click="mouseOver"
@@ -11,7 +11,7 @@
 
     <transition name="slide-fade">
       <div
-        class="moldura-botao botao-recolher"
+        class="molded-botao botao-recolher"
         v-show="mostrarFiltro"
         @click="mostrarFiltro = false"
       >
@@ -20,22 +20,22 @@
     </transition>
 
     <transition name="slide-fade">
-      <div class="moldura" v-show="mostrarFiltro">
+      <div class="molded" v-show="mostrarFiltro">
         <div class="row">
-          <div class="col-4 c-titulo-filtro">
+          <div class="col-4 c-title-filter">
             <i class="fas fa-filter"></i>
-            <span class="espaco-icone">FILTRO</span>
+            <span class="espaco-icon">FILTRO</span>
           </div>
         </div>
         <hr />
         <b-row v-if="mostrarSelecioneTotal">
           <b-col sm="6">
             <Escolher
-              titulo="Mostrar"
-              campo="Mostrar"
-              :requerido="false"
+              title="show"
+              field="show"
+              :required="false"
               url="/api/v1/util/total-por-pagina"
-              v-model="totalPorPagina"
+              v-model="totalPerPage"
             />
           </b-col>
         </b-row>
@@ -64,12 +64,12 @@ export default {
     };
   },
   computed: {
-    totalPorPagina: {
+    totalPerPage: {
       get() {
-        return this.$store.state.generic.totalPorPagina;
+        return this.$store.state.generic.totalPerPage;
       },
       set(value) {
-        if (!value.conteudo) value.conteudo = 10;
+        if (!value.content) value.content = 10;
         this.atualizaTotalPorPagina(value);
       },
     },
@@ -84,7 +84,7 @@ export default {
 </script>
 
 <style scoped>
-.moldura {
+.molded {
   background: white;
   border-left: solid 1px #dbdee0;
   font-size: 13px;
@@ -98,7 +98,7 @@ export default {
   z-index: 999;
 }
 
-.moldura-botao {
+.molded-botao {
   font-size: 18px;
   background: #ffffff;
   border: solid 1px #dbdfe9;

package/src/component/shared/construtor-consulta/AdicionaFiltro.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="vqb-group card">
+    <div class="vqb-group-body card-body">
+      <div class="rule-actions form-inline">
+        <div class="div-custom">
+          <b-row>
+            <b-col sm="6">
+              <EscolherFiltro
+                :options="rules"
+                class="select"
+                v-model="selectedRule"
+              />
+            </b-col>
+            <b-col sm="3">
+              <options
+                :options="[
+                  { text: 'e', value: 'and' },
+                  { text: 'ou', value: 'or' },
+                ]"
+                v-model="andOr"
+              />
+            </b-col>
+            <b-col sm="3">
+              <button type="button" class="btn btn-secondary" @click="adicionar">
+                + Adicionar
+              </button>
+            </b-col>
+          </b-row>
+        </div>
+      </div>
+      <ListaComponenteDinamico />
+    </div>
+  </div>
+</template>
+
+<script>
+import EscolherFiltro from "./EscolherFiltro.vue";
+import ComponenteDinamico from "./ComponenteDinamico.vue";
+import options from "@nixweb/nixloc-ui/src/component/forms/options.vue";
+import ListaComponenteDinamico from "@nixweb/nixloc-ui/src/component/shared/construtor-consulta/ListaComponenteDinamico.vue";
+
+import deepClone from "./utilities.js";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "AdicionaFiltro",
+  components: {
+    EscolherFiltro,
+    ComponenteDinamico,
+    options,
+    ListaComponenteDinamico,
+  },
+  props: {
+    consulta: Object,
+    rules: Array,
+    index: Number,
+    maximaProfunidade: Number,
+    profundidade: Number,
+    titulos: Object,
+  },
+  data() {
+    return {
+      selectedRule: this.rules[0],
+      andOr: "or",
+      duplicidade: [],
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["evento"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["addNotifications"]),
+    ...mapMutations("report", ["addSelectedRules"]),
+    adicionar() {
+      this.selectedRule.andOr = this.andOr;
+      this.adicionarRegra();
+    },
+    adicionarRegra() {
+      let consulta_atualizada = deepClone(this.consulta);
+      let obj = this.montaFiltro();
+
+      if (!this.jaExiste(obj.nome)) {
+        this.addSelectedRules(obj);
+        if (obj.naoPermitirDuplicidade) this.duplicidade.push(obj);
+      } else {
+        var erro = {
+          property: "ERRO QUERY BUILDER",
+          message: `Não é possível adicionar o filter ${obj.title} 2 vezes!`,
+        };
+        this.addNotifications([erro]);
+      }
+    },
+    montaFiltro() {
+      let obj = {
+        id: this.geraId(),
+        nome: this.selectedRule.nome,
+        title: this.selectedRule.title,
+        fieldType: this.selectedRule.fieldType,
+        type: this.selectedRule.type,
+        options: this.selectedRule.options,
+        props: this.selectedRule.props,
+        classeCss: this.selectedRule.classeCss,
+        icon: this.selectedRule.icon,
+        operatores: this.selectedRule.operatores,
+        operator: null,
+        andOr: this.selectedRule.andOr,
+        isRequired: this.selectedRule.isRequired,
+        naoPermitirDuplicidade: this.selectedRule.naoPermitirDuplicidade,
+        valor: null,
+      };
+      return obj;
+    },
+    geraId() {
+      return Math.random()
+        .toString(36)
+        .replace(/[^a-z]+/g, "")
+        .substr(0, 5);
+    },
+    jaExiste(key) {
+      var existe = this.duplicidade.find((item) => {
+        return item.nome === key;
+      });
+      if (existe) return true;
+      return false;
+    },
+  },
+  watch: {
+    evento: {
+      handler(evento) {
+        // Se a tag ou a rule que está selecionada foi removida, é necessário remover tambem do array "duplicidade" para liberar e adicionar novamente.
+        if (evento.nome == "tagRemovida" || evento.nome == "selectedRuleRemovida") {
+          var duplicidade = this.duplicidade.filter((item) => {
+            return item.id != evento.data.id;
+          });
+          this.duplicidade = duplicidade;
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style>
+.title-option {
+  padding: 10px;
+}
+
+.div-custom {
+  width: 100%;
+}
+
+.vue-query-builder .vqb-group .rule-actions {
+  margin-bottom: 20px;
+}
+
+.vue-query-builder .vqb-rule {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  background-color: #f5f5f5;
+  border-color: #ddd;
+  padding: 15px;
+}
+
+.vue-query-builder .vqb-group.depth-1 .vqb-rule,
+.vue-query-builder .vqb-group.depth-2 {
+  border-left: 2px solid #8bc34a;
+}
+
+.vue-query-builder .vqb-group.depth-2 .vqb-rule,
+.vue-query-builder .vqb-group.depth-3 {
+  border-left: 2px solid #00bcd4;
+}
+
+.vue-query-builder .vqb-group.depth-3 .vqb-rule,
+.vue-query-builder .vqb-group.depth-4 {
+  border-left: 2px solid #ff5722;
+}
+
+.vue-query-builder .close {
+  opacity: 1;
+  color: rgb(150, 150, 150);
+}
+
+@media (min-width: 768px) {
+  .vue-query-builder .vqb-rule.form-inline .form-group {
+    display: block;
+  }
+}
+</style>