@nixweb/nixloc-ui 0.0.125 → 0.0.128

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 (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 (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.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 += `,`;
+                query += `${name} with ${value} as ${value}${name.charAt(0).toUpperCase() + name.slice(1)}`;
+                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,4 @@ 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";
-    }
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="vqb-rule card">
+  <div class="vqb-rule card move">
     <div class="form-inline">
       <label :class="rule.classCss" class="mr-5">
         <i :class="rule.icon"></i>
@@ -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;
@@ -95,6 +96,10 @@ export default {
 };
 </script>
 <style scoped>
+.move {
+  cursor: move;
+}
+
 .btn-remove {
   font-size: 16px;
   color: darkgray;
@@ -102,6 +107,6 @@ export default {
 }
 
 .div-select {
-  width: 320px;
+  width: 330px;
 }
 </style>

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

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div class="component">
+      <span v-if="selectedRules.length > 0">
+        <i class="fas fa-expand-arrows-alt"></i> Clique e arraste para ordenar
+      </span>
+      <draggable :list="selectedRules">
+        <component
+          :is="component()"
+          v-for="(rule, index) in selectedRules"
+          :key="index"
+          :rule="rule"
+        />
+      </draggable>
+      <br />
+      <div v-if="selectedRules.length == 0">
+        <Alert type="info"> Selecione o filtro desejado e clique em +Adicionar</Alert>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+
+import draggable from "vuedraggable";
+
+import { mapState, mapMutations } from "vuex";
+
+export default {
+  components: {
+    Alert,
+    draggable,
+  },
+  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,9 +6,9 @@
           <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>
@@ -19,14 +19,14 @@
             { 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>
@@ -41,79 +41,45 @@ 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,
     RadioGroup,
   },
-  props: {
-    fields: Array,
-  },
   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

@@ -1,69 +1,69 @@
-<template>
-  <div class="vue-query-builder">
-    <slot v-bind="vqbProps">
-      <AddRule v-bind="vqbProps" />
-    </slot>
-  </div>
-</template>
-
-<script>
-import AddRule from "./AddRule.vue";
-
-export default {
-  name: "QueryBuilder",
-  components: {
-    AddRule,
-  },
-  props: {
-    rules: Array,
-  },
-  data() {
-    return {
-      query: {},
-      typeRule: {
-        text: {
-          id: "text-field",
-          operators: ["igual", "diferente", "contem"],
-          fieldType: "text",
-        },
-        numeric: {
-          id: "number-field",
-          operators: ["=", "!=", "<", "<=", ">", ">="],
-          fieldType: "number",
-        },
-        radio: {
-          id: "radio-field",
-          operators: [],
-          options: [],
-          fieldType: "radio",
-        },
-        checkbox: {
-          id: "checkbox-field",
-          operators: ["checkbox"],
-          options: [],
-          fieldType: "checkbox",
-        },
-      },
-    };
-  },
-  computed: {
-    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));
-        } else {
-          mergeRules.push(rule);
-        }
-      });
-      return mergeRules;
-    },
-    vqbProps() {
-      return {
-        rules: this.mergeRules,
-      };
-    },
-  },
-};
-</script>
+<template>
+  <div class="vue-query-builder">
+    <slot v-bind="vqbProps">
+      <AddRule v-bind="vqbProps" />
+    </slot>
+  </div>
+</template>
+
+<script>
+import AddRule from "./AddRule.vue";
+
+import { mapState } from "vuex";
+
+export default {
+  name: "QueryBuilder",
+  components: {
+    AddRule,
+  },
+  data() {
+    return {
+      typeRule: {
+        text: {
+          id: "text-field",
+          operators: ["igual", "diferente", "contem"],
+          typeField: "text",
+        },
+        numeric: {
+          id: "number-field",
+          /*  operators: ["=", "!=", "<", "<=", ">", ">="],*/
+          operators: ["igual", "diferente", "menor", "menor ou igual", "maior", "maior ou igual"],
+          typeField: "number",
+        },
+        radio: {
+          id: "radio-field",
+          operators: [],
+          options: [],
+          typeField: "radio",
+        },
+        checkbox: {
+          id: "checkbox-field",
+          operators: ["checkbox"],
+          options: [],
+          typeField: "checkbox",
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapState("report", ["report"]),
+    mergeRules() {
+      var mergeRules = [];
+      var self = this;
+      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);
+        }
+      });
+      return mergeRules;
+    },
+    vqbProps() {
+      return {
+        rules: this.mergeRules,
+      };
+    },
+  },
+};
+</script>

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>