@nixweb/nixloc-ui 0.0.119 → 0.0.122

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

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <b-row>
+      <b-col sm="6">
+        <BarraRolagem :minHeight="200" :maxHeight="250">
+          <div class="div-options">
+            <CheckboxGroup
+              :stacked="true"
+              :initialValue="optionTable.initialValue"
+              :options="optionTable.options"
+              v-model="selectedField"
+            />
+          </div>
+        </BarraRolagem>
+      </b-col>
+      <b-col sm="6">
+        <options
+          :options="[
+            { text: 'Crescente', value: 'asc' },
+            { text: 'Decrescente', value: 'desc' },
+          ]"
+          v-model="ordenar"
+        />
+        <EscolherEstatico
+          title="Ordenar"
+          fieldTarget="ordenar"
+          :initialValue="initialValue"
+          :data="ordenacao"
+          v-model="campoOrdenado"
+        />
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+import EscolherEstatico from "@nixweb/nixloc-ui/src/component/forms/EscolherEstatico";
+import options from "@nixweb/nixloc-ui/src/component/forms/options";
+import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
+import BarraRolagem from "@nixweb/nixloc-ui/src/component/layout/BarraRolagem.vue";
+
+import { mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "CampoRelatorio",
+  components: {
+    CheckboxGroup,
+    EscolherEstatico,
+    BarraRolagem,
+    options,
+  },
+  props: {
+    fields: Array,
+  },
+  data() {
+    return {
+      ordenar: "asc",
+      initialValue: {},
+    };
+  },
+  created() {
+    this.initialValue = this.ordenacao[0];
+    let obj = {
+      content: this.initialValue.content,
+      id: this.initialValue.id,
+      ordenar: this.ordenar,
+    };
+    this.atualizaCampoOrdenado(obj);
+  },
+  mounted() {
+    this.addFieldsReport(this.fields);
+  },
+  computed: {
+    ...mapGetters("report", ["optionTable"]),
+    selectedField: {
+      get() {
+        return this.$store.state.report.selectedField;
+      },
+      set(value) {
+        this.updateSelectedField(value);
+      },
+    },
+    campoOrdenado: {
+      get() {
+        return this.$store.state.report.campoOrdenado;
+      },
+      set(value) {
+        let obj = { content: value.content, id: value.id, ordenar: this.ordenar };
+        this.atualizaCampoOrdenado(obj);
+      },
+    },
+    ordenacao() {
+      let ordenacao = [];
+      this.optionTable.options.forEach((option) => {
+        console.log(option);
+        /*   let obj = { content: option.text, id: option.value };
+        ordenacao.push(obj);*/
+      });
+      return ordenacao;
+    },
+  },
+  methods: {
+    ...mapMutations("report", [
+      "addFieldsReport",
+      "updateSelectedField",
+      "atualizaCampoOrdenado",
+    ]),
+  },
+  watch: {
+    ordenar: {
+      handler(value) {
+        let obj = {
+          content: this.campoOrdenado.content,
+          id: this.campoOrdenado.id,
+          ordenar: this.ordenar,
+        };
+        this.atualizaCampoOrdenado(obj);
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.div-options {
+  margin-left: 10px;
+}
+</style>

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

@@ -0,0 +1,109 @@
+<template>
+  <div class="vqb-rule card">
+    <div class="form-inline">
+      <label :class="rule.classeCss" class="mr-5">
+        <i :class="rule.icon"></i>
+        <span style="margin-left: 10px">{{ rule.title }} </span>
+      </label>
+      <div style="margin-right: 20px">
+        <options
+          :options="[
+            { text: 'e', value: 'and' },
+            { text: 'ou', value: 'or' },
+          ]"
+          v-model="rule.andOr"
+        />
+      </div>
+      <select
+        v-if="rule.fieldType == 'text' || rule.fieldType == 'numeric'"
+        v-model="rule.operator"
+        class="form-control mr-2"
+      >
+        <option v-for="operator in rule.operatores" :key="operator">
+          {{ operator }}
+        </option>
+      </select>
+      <input
+        v-if="rule.fieldType == 'text' || rule.fieldType == 'numeric'"
+        class="form-control"
+        :type="rule.fieldType == 'text' ? 'text' : 'number'"
+        placeholder="Valor"
+        v-model="rule.valor"
+      />
+      <CheckboxGroup
+        v-if="rule.fieldType == 'checkbox'"
+        :options="options"
+        v-model="rule.valor"
+      />
+      <DateTime
+        v-if="rule.fieldType == 'dateTime'"
+        :format="rule.props.format"
+        :type="rule.props.type"
+        :range="rule.props.range"
+        v-model="rule.valor"
+      />
+      <Escolher
+        v-if="rule.fieldType == 'escolher'"
+        :url="rule.props.url"
+        v-model="rule.valor"
+      />
+      <div @click="removeRegra" class="ml-auto btn-remover">
+        <i class="fas fa-times"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+import Escolher from "@nixweb/nixloc-ui/src/component/forms/Escolher";
+import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
+import options from "@nixweb/nixloc-ui/src/component/forms/options.vue";
+
+import deepClone from "./utilities.js";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "ComponenteDinamico",
+  components: {
+    DateTime,
+    Escolher,
+    CheckboxGroup,
+    options,
+  },
+  props: ["rule"],
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    ...mapMutations("report", ["removeSelectedRule"]),
+    removeRegra() {
+      this.removeSelectedRule(this.rule.id);
+      this.addEvent({
+        nome: "selectedRuleRemovida",
+        data: { id: this.rule.id },
+      });
+    },
+  },
+  computed: {
+    options() {
+      let options = [];
+      this.rule.options.forEach((item) => {
+        let option = { text: item.title, value: item.valor };
+        options.push(option);
+      });
+      return options;
+    },
+  },
+};
+</script>
+<style scoped>
+.btn-remover {
+  font-size: 16px;
+  color: darkgray;
+  cursor: pointer;
+}
+
+.div-escolher {
+  width: 320px;
+}
+</style>

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

@@ -0,0 +1,70 @@
+<template>
+  <div class="vue-query-builder">
+    <slot v-bind="vqbProps">
+      <AdicionaFiltro v-bind="vqbProps" />
+    </slot>
+  </div>
+</template>
+
+<script>
+import AdicionaFiltro from "./AdicionaFiltro.vue";
+import deepClone from "./utilities.js";
+
+export default {
+  name: "ConstrutorConsulta",
+  components: {
+    AdicionaFiltro,
+  },
+  props: {
+    rules: Array,
+  },
+  data() {
+    return {
+      consulta: {},
+      typeRegra: {
+        text: {
+          id: "text-field",
+          operatores: ["igual", "diferente", "contem"],
+          fieldType: "text",
+        },
+        numeric: {
+          id: "number-field",
+          operatores: ["=", "!=", "<", "<=", ">", ">="],
+          fieldType: "number",
+        },
+        radio: {
+          id: "radio-field",
+          operatores: [],
+          options: [],
+          fieldType: "radio",
+        },
+        checkbox: {
+          id: "checkbox-field",
+          operatores: ["checkbox"],
+          options: [],
+          fieldType: "checkbox",
+        },
+      },
+    };
+  },
+  computed: {
+    mesclarRegras() {
+      var mesclarRegras = [];
+      var self = this;
+      self.rules.forEach(function (rule) {
+        if (typeof self.typeRegra[rule.fieldType] !== "undefined") {
+          mesclarRegras.push(Object.assign({}, self.typeRegra[rule.fieldType], rule));
+        } else {
+          mesclarRegras.push(rule);
+        }
+      });
+      return mesclarRegras;
+    },
+    vqbProps() {
+      return {
+        rules: this.mesclarRegras,
+      };
+    },
+  },
+};
+</script>

package/src/component/shared/construtor-consulta/ConverteParaOdata.js

@@ -0,0 +1,80 @@
+export default class ConverteParaOdata {
+    converteRegra(rule) {
+        let nome = rule.nome;
+        let title = rule.title;
+        let valor = rule.valor;
+        let type = rule.type;
+        let operator = rule.operator;
+
+        if (operator === "igual") return `${nome} eq '${valor}'`;
+        if (operator === "diferente") return `${nome} ne '${valor}'`;
+        if (operator === "contem") return `contains(${nome},'${valor}')`;
+        if (operator === "=") return `${nome} eq ${valor}`;
+        if (operator === "!=") return `${nome} ne ${valor}`;
+        if (operator === "<") return `${nome} lt ${valor}`;
+        if (operator === "<=") return `${nome} le ${valor}`;
+        if (operator === ">") return `${nome} gt ${valor}`;
+        if (operator === ">=") return `${nome} ge ${valor}`;
+
+        if (rule.fieldType === "dateTime") return this.convertePeriodo(valor);
+        if (rule.fieldType === "escolher") return this.converteEscolher(nome, valor);
+        if (rule.fieldType === "checkbox") return this.converteCheckbox(nome, title, type, valor);
+
+    }
+    convertePeriodo(valor) {
+        let inicio = this.converteData(valor[0]);
+        let fim = this.converteData(valor[1]);
+        return `data ge ${inicio} and data le ${fim}`;
+    }
+    converteEscolher(nome, valor) {
+        return `${nome} eq '${valor.id}'`;
+    }
+    converteCheckbox(nome, title, type, options) {
+        let consulta = "";
+        let sequencia = 0;
+        var size = options.length;
+        let self = this;
+        options.forEach(function (valor) {
+            if (type == "field") {
+                consulta += `${nome} eq ${valor}`;
+                if (sequencia + 1 != size) consulta += ` or `;
+            }
+            if (type == "totalization") {
+                let nomeConvertido = self.converteNome(valor);
+                consulta += `${nome} with ${valor} as ${nomeConvertido}${title}`;
+                if (sequencia + 1 != size) consulta += `,`;
+            }
+            sequencia++;
+        });
+
+        if (size > 1 && type == "field") 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(valor) {
+        if (valor === "sum") return "soma";
+        if (valor === "average") return "media";
+        if (valor === "max") return "maximo";
+        if (valor === "minimo") return "minimo";
+    }
+}

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

@@ -0,0 +1,96 @@
+<template>
+  <div class="escolher-filter" :tabindex="tabindex" @blur="abrir = false">
+    <div class="selecionado" :class="{ abrir: abrir }" @click="abrir = !abrir">
+      {{ selecionado }}
+    </div>
+    <div class="items" :class="{ esconder: !abrir }">
+      <div v-for="(options, i) of options" :key="i">
+        <div @click="selecionar(options)">
+          <span :class="options.classeCss">
+            <i :class="options.icon"></i>
+            <span> {{ options.title }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["options", "tabindex", "value"],
+  data() {
+    return {
+      selecionado: "Selecione os filtros",
+      abrir: false,
+    };
+  },
+  mounted() {
+    this.$emit("input", this.selecionado);
+  },
+  methods: {
+    selecionar(options) {
+      this.$emit("input", options);
+      this.selecionado = options.title;
+      this.abrir = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.escolher-filter {
+  position: relative;
+  width: 100%;
+  text-align: left;
+  outline: none;
+  height: 40px;
+  line-height: 40px;
+  z-index: 1000;
+}
+
+.escolher-filter .selecionado {
+  background-color: white;
+  border-bottom: 1px solid #dbdee0;
+  color: black;
+  padding-left: 1em;
+  cursor: pointer;
+  user-select: none;
+}
+
+.escolher-filter .selecionado:after {
+  position: absolute;
+  content: "";
+  top: 22px;
+  right: 1em;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-color: black transparent transparent transparent;
+}
+
+.escolher-filter .items {
+  color: black;
+  border-radius: 0px 0px 6px 6px;
+  overflow: hidden;
+  position: absolute;
+  background-color: #fafafc;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  height: 200px;
+  overflow-y: visible;
+  overflow-x: hidden;
+}
+
+.escolher-filter .items div {
+  color: black;
+  padding-left: 1em;
+  cursor: pointer;
+  user-select: none;
+}
+
+.esconder {
+  display: none;
+}
+</style>

package/src/component/shared/{query-builder → construtor-consulta}/Filtro.vue

@@ -1,33 +1,28 @@
 <template>
   <div>
-    <BarraRolagem :alturaMinima="450" :alturaMaxima="600">
-      <QueryBuilder :rules="relatorio.filtro" v-model="filtroSelecionado" />
+    <BarraRolagem :minHeight="450" :maxHeight="600">
+      <ConstrutorConsulta :rules="rules" />
     </BarraRolagem>
   </div>
 </template>
 
 <script>
-import QueryBuilder from "./QueryBuilder.vue";
+import ConstrutorConsulta from "./ConstrutorConsulta.vue";
 import BarraRolagem from "@nixweb/nixloc-ui/src/component/layout/BarraRolagem.vue";
 
-import { mapMutations, mapState } from "vuex";
+import { mapMutations } 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);
-      },
-    },
+  components: { BarraRolagem, ConstrutorConsulta },
+  props: {
+    rules: Array,
+  },
+  mounted() {
+    this.addRulesReport(this.rules);
   },
   methods: {
-    ...mapMutations("relatorio", ["atualizaFiltroSelecionado"]),
+    ...mapMutations("report", ["addRulesReport"]),
   },
 };
 </script>

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="vqb-children">
+    <component
+      :is="componente()"
+      v-for="(rule, index) in query_builder.rules"
+      :rule="rule"
+    />
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from "vuex";
+
+export default {
+  data() {
+    return {
+      componenteDinamico: null,
+    };
+  },
+  computed: {
+    ...mapState("report", ["query_builder"]),
+  },
+  mounted() {
+    this.componenteDinamico = this.$parent.$options.components["ComponenteDinamico"];
+  },
+  methods: {
+    ...mapMutations("report", ["convertRulesToOdata"]),
+    componente() {
+      return this.componenteDinamico;
+    },
+  },
+  watch: {
+    "query_builder.rules": {
+      handler() {
+        this.convertRulesToOdata(this.query_builder.rules);
+      },
+      deep: true,
+    },
+  },
+};
+</script>

package/src/component/shared/{query-builder → construtor-consulta}/Rodape.vue

@@ -1,37 +1,37 @@
 <template>
   <div>
-    <Moldura>
-      <div v-for="item in dados" :key="item.titulo">
+    <Molded>
+      <div v-for="item in data" :key="item.title">
         <div :class="item.classeCss">
           <b-row>
             <b-col class="text-right" sm="10">
-              <span class="titulo">{{ item.titulo }}</span>
+              <span class="title">{{ item.title }}</span>
             </b-col>
             <b-col class="text-right" sm="2">
-              <span class="titulo">{{ item.valor }}</span>
+              <span class="title">{{ item.valor }}</span>
             </b-col>
           </b-row>
         </div>
       </div>
-    </Moldura>
+    </Molded>
   </div>
 </template>
 <script>
-import Moldura from "@nixweb/nixloc-ui/src/component/layout/Moldura";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
 
 export default {
   name: "RodapeRelatorio",
   components: {
-    Moldura,
+    Molded,
   },
   props: {
-    dados: Array,
+    data: Array,
   },
 };
 </script>
 
 <style scoped>
-.titulo {
+.title {
   font-size: 15px;
   font-weight: 400;
 }

package/src/component/shared/{query-builder → construtor-consulta}/Tags.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="lado-a-lado div-tag" v-for="tag in tags" :key="tag.id">
+    <div class="side-by-side div-tag" v-for="tag in tags" :key="tag.id">
       <Tag
         :nomeEvento="nomeEvento"
         :dadosEvento="tag"
-        :titulo="tag.titulo"
+        :title="tag.title"
         :valor="tag.valor"
       />
     </div>
@@ -24,21 +24,21 @@ export default {
   },
 
   computed: {
-    ...mapGetters("relatorio", ["tags"]),
+    ...mapGetters("report", ["tags"]),
     ...mapGetters("generic", ["mostrarModal", "evento"]),
   },
   methods: {
-    ...mapMutations("relatorio", ["removeFiltroSelecionado"]),
+    ...mapMutations("report", ["removeFiltroSelecionado"]),
   },
   watch: {
     evento: {
       handler(evento) {
         if (evento.nome == "tagRemovida") {
-          var tags = this.tags.filter((x) => {
-            return x.id != evento.dados.id;
+          var tags = this.tags.filter((item) => {
+            return item.id != evento.data.id;
           });
           this.tags = tags;
-          this.removeFiltroSelecionado(evento.dados.id);
+          this.removeFiltroSelecionado(evento.data.id);
         }
       },
       deep: true,