@nixweb/nixloc-ui 0.0.124 → 0.0.127

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

@@ -1,68 +1,65 @@
 export default class ConvertToOdata {
     convertRule(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 (operator === "igual" && rule.typeField === "text") return `${rule.name} eq '${rule.value}'`;
+        if (operator === "diferente" && rule.typeField === "text") return `${rule.name} ne '${rule.value}'`;
+        if (operator === "contem") return `contains(${rule.name},'${rule.value}')`;
+        
+        if (operator === "igual" && rule.typeField === "numeric") return `${rule.name} eq ${rule.value}`;
+        if (operator === "diferente" && rule.typeField === "numeric") return `${rule.name} ne ${rule.value}`;
+        if (operator === "menor") return `${rule.name} lt ${rule.value}`;
+        if (operator === "menor ou igual") return `${rule.name} le ${rule.value}`;
+        if (operator === "maior") return `${rule.name} gt ${rule.value}`;
+        if (operator === "maior ou igual") return `${rule.name} ge ${rule.value}`;
 
-        if (rule.fieldType === "dateTime") return this.convertDateTime(valor);
-        if (rule.fieldType === "escolher") return this.convertSelect(nome, valor);
-        if (rule.fieldType === "checkbox") return this.convertCheckbox(nome, title, type, valor);
+        if (rule.typeField === "dateTime") return this.convertDateTime(rule.name, rule.value);
+        if (rule.typeField === "select") return this.convertSelect(rule.name, rule.value);
+        if (rule.typeField === "checkbox") return this.convertCheckbox(rule.name, rule.title, rule.type, rule.value);
 
     }
-    convertDateTime(valor) {
-        let inicio = this.converteDate(valor[0]);
-        let fim = this.converteDate(valor[1]);
-        return `data ge ${inicio} and data le ${fim}`;
+    convertDateTime(name, value) {
+        let start = this.convertDate(value[0]);
+        let end = this.convertDate(value[1]);
+        return `${name} ge ${start} and ${name} le ${end}`;
     }
-    convertSelect(nome, valor) {
-        return `${nome} eq '${valor.id}'`;
+    convertSelect(name, value) {
+        return `${name} eq '${value.id}'`;
     }
-    convertCheckbox(nome, title, type, options) {
+    convertCheckbox(name, title, type, options) {
         let query = "";
-        let sequencia = 0;
+        let seq = 0;
         var size = options.length;
         let self = this;
-        options.forEach(function (valor) {
+        options.forEach(function (value) {
             if (type == "field") {
-                query += `${nome} eq ${valor}`;
-                if (sequencia + 1 != size) query += ` or `;
+                query += `${name} eq ${value}`;
+                if (seq + 1 != size) query += ` or `;
             }
             if (type == "totalization") {
-                let nomeConvertido = self.converteName(valor);
-                query += `${nome} with ${valor} as ${nomeConvertido}${title}`;
-                if (sequencia + 1 != size) query += `,`;
+                let convertName = self.convertName(value);
+                query += `${name} with ${value} as ${convertName}${title}`;
+                if (seq + 1 != size) query += `,`;
             }
-            sequencia++;
+            seq++;
         });
 
         if (size > 1 && type == "field") return `(${query})`;
         return `${query}`;
     }
-    converteDate(data) {
+    convertDate(data) {
         let str = data.replace("/", "").replace("/", "");
 
         let date = {
-            dia: str.substr(0, 2),
-            mes: str.substr(2, 2),
-            ano: str.substr(4, 4),
+            day: str.substr(0, 2),
+            month: str.substr(2, 2),
+            year: str.substr(4, 4),
         };
 
-        var iso = date.ano + "-" + date.mes + "-" + date.dia;
+        var iso = date.year + "-" + date.month + "-" + date.day;
 
         /*
-          iso += date.dia + "T";
+          iso += date.day + "T";
           iso += "00:00:00.000Z";
           iso += d.getHours().toString().padStart(2, "0") + ":";
           iso += d.getMinutes().toString().padStart(2, "0") + ":";
@@ -71,10 +68,10 @@ export default class ConvertToOdata {
 
         return iso;
     }
-    converteName(valor) {
-        if (valor === "sum") return "soma";
-        if (valor === "average") return "media";
-        if (valor === "max") return "maximo";
-        if (valor === "minimo") return "minimo";
+    convertName(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/DynamicComponent.vue

@@ -15,7 +15,7 @@
         />
       </div>
       <select
-        v-if="rule.fieldType == 'text' || rule.fieldType == 'numeric'"
+        v-if="rule.typeField == 'text' || rule.typeField == 'numeric'"
         v-model="rule.operator"
         class="form-control mr-2"
       >
@@ -24,30 +24,31 @@
         </option>
       </select>
       <input
-        v-if="rule.fieldType == 'text' || rule.fieldType == 'numeric'"
+        v-if="rule.typeField == 'text' || rule.typeField == 'numeric'"
         class="form-control"
-        :type="rule.fieldType == 'text' ? 'text' : 'number'"
+        :type="rule.typeField == 'text' ? 'text' : 'number'"
         placeholder="Valor"
-        v-model="rule.valor"
+        v-model="rule.value"
       />
       <CheckboxGroup
-        v-if="rule.fieldType == 'checkbox'"
+        v-if="rule.typeField == 'checkbox'"
         :options="options"
-        v-model="rule.valor"
+        :initialValue="rule.value"
+        v-model="rule.value"
       />
       <DateTime
-        v-if="rule.fieldType == 'dateTime'"
+        v-if="rule.typeField == 'dateTime'"
         :format="rule.props.format"
         :type="rule.props.type"
         :range="rule.props.range"
-        v-model="rule.valor"
+        v-model="rule.value"
       />
       <Select
-        v-if="rule.fieldType == 'select'"
+        v-if="rule.typeField == 'select'"
         :url="rule.props.url"
-        v-model="rule.valor"
+        v-model="rule.value"
       />
-      <div @click="removeRegra" class="ml-auto btn-remove">
+      <div @click="removeRule" class="ml-auto btn-remove">
         <i class="fas fa-times"></i>
       </div>
     </div>
@@ -74,10 +75,10 @@ export default {
   methods: {
     ...mapMutations("generic", ["addEvent"]),
     ...mapMutations("report", ["removeSelectedRule"]),
-    removeRegra() {
+    removeRule() {
       this.removeSelectedRule(this.rule.id);
       this.addEvent({
-        nome: "selectedRuleRemovida",
+        name: "selectedRuleRemoved",
         data: { id: this.rule.id },
       });
     },
@@ -86,7 +87,7 @@ export default {
     options() {
       let options = [];
       this.rule.options.forEach((item) => {
-        let option = { text: item.title, value: item.valor };
+        let option = { text: item.title, value: item.value };
         options.push(option);
       });
       return options;
@@ -102,6 +103,6 @@ export default {
 }
 
 .div-select {
-  width: 320px;
+  width: 330px;
 }
 </style>

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

@@ -0,0 +1,62 @@
+<template>
+  <div class="component">
+    <component
+      :is="component()"
+      v-for="(rule, index) in selectedRules"
+      :key="index"
+      :rule="rule"
+    />
+    <div v-if="selectedRules.length == 0">
+      <Alert type="info"> Selecione o filtro desejado e clique em +Adicionar</Alert>
+    </div>
+  </div>
+</template>
+
+<script>
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+
+import { mapState, mapMutations } from "vuex";
+
+export default {
+  components: {
+    Alert,
+  },
+  data() {
+    return {
+      dynamicComponent: null,
+    };
+  },
+  computed: {
+    ...mapState("report", ["selectedRules"]),
+  },
+  mounted() {
+    this.dynamicComponent = this.$parent.$options.components["DynamicComponent"];
+  },
+  methods: {
+    ...mapMutations("report", ["mountFinalQueryFormatOData"]),
+    component() {
+      return this.dynamicComponent;
+    },
+  },
+  watch: {
+    selectedRules: {
+      handler(value) {
+        this.mountFinalQueryFormatOData(value);
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.component {
+  min-height: 380px;
+  max-height: 380px;
+  overflow-y: visible;
+  overflow-x: hidden;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-top: 10px;
+}
+</style>

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

@@ -6,27 +6,27 @@
           <div class="div-options">
             <CheckboxGroup
               :stacked="true"
-              :initialValue="optionTable.initialValue"
-              :options="optionTable.options"
-              v-model="selectedField"
+              :initialValue="fieldsLocal.selected"
+              :options="fieldsLocal.options"
+              v-model="fieldsLocal.selected"
             />
           </div>
         </ScrollBar>
       </b-col>
       <b-col sm="6">
-        <options
+        <RadioGroup
           :options="[
             { text: 'Crescente', value: 'asc' },
             { text: 'Decrescente', value: 'desc' },
           ]"
-          v-model="ordenar"
+          v-model="fieldsLocal.orderBy"
         />
         <SelectStatic
           title="Ordenar"
-          fieldTarget="ordenar"
-          :initialValue="initialValue"
-          :data="ordenacao"
-          v-model="campoOrdenado"
+          fieldTarget="order"
+          :initialValue="{ content: fieldsLocal.sort.content, id: fieldsLocal.sort.id }"
+          :data="options"
+          v-model="fieldsLocal.sort"
         />
       </b-col>
     </b-row>
@@ -34,86 +34,52 @@
 </template>
 <script>
 import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
-import options from "@nixweb/nixloc-ui/src/component/forms/options";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
 import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
 import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
 
 import { mapMutations, mapGetters } from "vuex";
 
 export default {
-  name: "CampoRelatorio",
+  name: "Fields",
   components: {
     CheckboxGroup,
     SelectStatic,
     ScrollBar,
-    options,
-  },
-  props: {
-    fields: Array,
+    RadioGroup,
   },
   data() {
     return {
-      ordenar: "asc",
-      initialValue: {},
+      fieldsLocal: {
+        selected: [],
+        options: [],
+        sort: { content: "", id: "asc" },
+        orderBy: "",
+      },
     };
   },
   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);
+    // converte getters para data local para que possa ser manipulado com o v-model
+    this.fieldsLocal = 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);*/
+    ...mapGetters("report", ["fields"]),
+    options() {
+      let options = [];
+      this.fields.options.forEach((option) => {
+        let obj = { content: option.text, id: option.value };
+        options.push(obj);
       });
-      return ordenacao;
+      return options;
     },
   },
   methods: {
-    ...mapMutations("report", [
-      "addFieldsReport",
-      "updateSelectedField",
-      "atualizaCampoOrdenado",
-    ]),
+    ...mapMutations("report", ["updateSelectedFields"]),
   },
   watch: {
-    ordenar: {
-      handler(value) {
-        let obj = {
-          content: this.campoOrdenado.content,
-          id: this.campoOrdenado.id,
-          ordenar: this.ordenar,
-        };
-        this.atualizaCampoOrdenado(obj);
+    fieldsLocal: {
+      handler(fieldsLocal) {
+        this.updateSelectedFields(fieldsLocal);
       },
       deep: true,
     },
@@ -122,6 +88,6 @@ export default {
 </script>
 <style scoped>
 .div-options {
-  margin-left: 10px;
+  padding-left: 0px;
 }
 </style>

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

@@ -9,50 +9,50 @@
 <script>
 import AddRule from "./AddRule.vue";
 
+import { mapState } from "vuex";
+
 export default {
   name: "QueryBuilder",
   components: {
     AddRule,
   },
-  props: {
-    rules: Array,
-  },
   data() {
     return {
-      query: {},
       typeRule: {
         text: {
           id: "text-field",
           operators: ["igual", "diferente", "contem"],
-          fieldType: "text",
+          typeField: "text",
         },
         numeric: {
           id: "number-field",
-          operators: ["=", "!=", "<", "<=", ">", ">="],
-          fieldType: "number",
+          /*  operators: ["=", "!=", "<", "<=", ">", ">="],*/
+          operators: ["igual", "diferente", "menor", "menor ou igual", "maior", "maior ou igual"],
+          typeField: "number",
         },
         radio: {
           id: "radio-field",
           operators: [],
           options: [],
-          fieldType: "radio",
+          typeField: "radio",
         },
         checkbox: {
           id: "checkbox-field",
           operators: ["checkbox"],
           options: [],
-          fieldType: "checkbox",
+          typeField: "checkbox",
         },
       },
     };
   },
   computed: {
+    ...mapState("report", ["report"]),
     mergeRules() {
       var mergeRules = [];
       var self = this;
-      self.rules.forEach(function (rule) {
-        if (typeof self.typeRule[rule.fieldType] !== "undefined") {
-          mergeRules.push(Object.assign({}, self.typeRule[rule.fieldType], rule));
+      self.report.rules.forEach(function (rule) {
+        if (typeof self.typeRule[rule.typeField] !== "undefined") {
+          mergeRules.push(Object.assign({}, self.typeRule[rule.typeField], rule));
         } else {
           mergeRules.push(rule);
         }

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

@@ -1,29 +1,17 @@
 <template>
   <div>
-    <ScrollBar :minHeight="450" :maxHeight="600">
-      <QueryBuilder :rules="rules" />
-    </ScrollBar>
+    <QueryBuilder />
   </div>
 </template>
 
 <script>
 import QueryBuilder from "./QueryBuilder.vue";
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
 
 import { mapMutations } from "vuex";
 
 export default {
   name: "Rules",
-  components: { ScrollBar, QueryBuilder },
-  props: {
-    rules: Array,
-  },
-  mounted() {
-    this.addRulesReport(this.rules);
-  },
-  methods: {
-    ...mapMutations("report", ["addRulesReport"]),
-  },
+  components: { QueryBuilder },
 };
 </script>
 

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

@@ -1,9 +1,9 @@
 <template>
-  <div class="escolher-filter" :tabindex="tabindex" @blur="abrir = false">
-    <div class="selecionado" :class="{ abrir: abrir }" @click="abrir = !abrir">
-      {{ selecionado }}
+  <div class="selected-filter" @blur="open = false">
+    <div class="selected" :class="{ open: open }" @click="open = !open">
+      {{ selected }}
     </div>
-    <div class="items" :class="{ hide: !abrir }">
+    <div class="items" :class="{ hide: !open }">
       <div v-for="(options, i) of options" :key="i">
         <div @click="select(options)">
           <span :class="options.classCss">
@@ -18,28 +18,28 @@
 
 <script>
 export default {
-  props: ["options", "tabindex", "value"],
+  props: ["options", "value"],
   data() {
     return {
-      selecionado: "Selecione os filtros",
-      abrir: false,
+      selected: "Selecione os filtros",
+      open: false,
     };
   },
   mounted() {
-    this.$emit("input", this.selecionado);
+    this.$emit("input", this.selected);
   },
   methods: {
     select(options) {
       this.$emit("input", options);
-      this.selecionado = options.title;
-      this.abrir = false;
+      this.selected = options.title;
+      this.open = false;
     },
   },
 };
 </script>
 
 <style scoped>
-.escolher-filter {
+.selected-filter {
   position: relative;
   width: 100%;
   text-align: left;
@@ -49,7 +49,7 @@ export default {
   z-index: 1000;
 }
 
-.escolher-filter .selecionado {
+.selected-filter .selected {
   background-color: white;
   border-bottom: 1px solid #dbdee0;
   color: black;
@@ -58,7 +58,7 @@ export default {
   user-select: none;
 }
 
-.escolher-filter .selecionado:after {
+.selected-filter .selected:after {
   position: absolute;
   content: "";
   top: 22px;
@@ -69,7 +69,7 @@ export default {
   border-color: black transparent transparent transparent;
 }
 
-.escolher-filter .items {
+.selected-filter .items {
   color: black;
   border-radius: 0px 0px 6px 6px;
   overflow: hidden;
@@ -83,7 +83,7 @@ export default {
   overflow-x: hidden;
 }
 
-.escolher-filter .items div {
+.selected-filter .items div {
   color: black;
   padding-left: 1em;
   cursor: pointer;

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

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div class="side-by-side div-tag" v-for="tag in tags" :key="tag.id">
+    <div class="side-by-side div-tag" v-for="tag in tagsLocal" :key="tag.id">
       <Tag
         :eventName="eventName"
         :eventData="tag"
         :title="tag.title"
-        :valor="tag.valor"
+        :value="tag.value"
       />
     </div>
   </div>
@@ -22,27 +22,43 @@ export default {
   props: {
     eventName: String,
   },
-
+  data() {
+    return {
+      tagsLocal: [],
+    };
+  },
+  created() {
+    let self = this;
+    setTimeout(function () {
+      self.tagsLocal = self.tags;
+    }, 100);
+  },
   computed: {
     ...mapGetters("report", ["tags"]),
     ...mapGetters("generic", ["showModal", "event"]),
   },
   methods: {
-    ...mapMutations("report", ["removeFiltroSelecionado"]),
+    ...mapMutations("report", ["removeSelectedRule"]),
   },
   watch: {
     event: {
       handler(event) {
-        if (event.nome == "tagRemovida") {
-          var tags = this.tags.filter((item) => {
+        if (event.name == "tagRemoved") {
+          var tags = this.tagsLocal.filter((item) => {
             return item.id != event.data.id;
           });
-          this.tags = tags;
-          this.removeFiltroSelecionado(event.data.id);
+          this.tagsLocal = tags;
+          this.removeSelectedRule(event.data.id);
         }
       },
       deep: true,
     },
+    tags: {
+      handler(value) {
+        this.tagsLocal = value;
+      },
+      deep: true,
+    },
   },
 };
 </script>