@nixweb/nixloc-ui 0.0.121 → 0.0.124

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

@@ -0,0 +1,187 @@
+<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">
+              <SelectRule :options="rules" class="select" v-model="selectedRule" />
+            </b-col>
+            <b-col sm="3">
+              <RadioGroup
+                :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="Add">
+                + Adicionar
+              </button>
+            </b-col>
+          </b-row>
+        </div>
+      </div>
+      <ListDynamicComponent />
+    </div>
+  </div>
+</template>
+
+<script>
+import SelectRule from "./SelectRule.vue";
+import DynamicComponent from "./DynamicComponent.vue";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup.vue";
+import ListDynamicComponent from "@nixweb/nixloc-ui/src/component/shared/construtor-query/ListDynamicComponent.vue";
+
+import deepClone from "./utilities.js";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "AddRule",
+  components: {
+    SelectRule,
+    DynamicComponent,
+    RadioGroup,
+    ListDynamicComponent,
+  },
+  props: {
+    query: Object,
+    rules: Array,
+    index: Number,
+    maximaProfunidade: Number,
+    profundidade: Number,
+    titulos: Object,
+  },
+  data() {
+    return {
+      selectedRule: this.rules[0],
+      andOr: "or",
+      duplicidade: [],
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["addNotifications"]),
+    ...mapMutations("report", ["addSelectedRules"]),
+    add() {
+      this.selectedRule.andOr = this.andOr;
+      this.addRule();
+    },
+    addRule() {
+      let consulta_atualizada = deepClone(this.query);
+      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,
+        classCss: this.selectedRule.classCss,
+        icon: this.selectedRule.icon,
+        operators: this.selectedRule.operators,
+        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: {
+    event: {
+      handler(event) {
+        // Se a tag ou a rule que está selecionada foi removida, é necessário remove tambem do array "duplicidade" para liberar e adicionar novamente.
+        if (event.nome == "tagRemovida" || event.nome == "selectedRuleRemovida") {
+          var duplicidade = this.duplicidade.filter((item) => {
+            return item.id != event.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>

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

@@ -0,0 +1,80 @@
+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 (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);
+
+    }
+    convertDateTime(valor) {
+        let inicio = this.converteDate(valor[0]);
+        let fim = this.converteDate(valor[1]);
+        return `data ge ${inicio} and data le ${fim}`;
+    }
+    convertSelect(nome, valor) {
+        return `${nome} eq '${valor.id}'`;
+    }
+    convertCheckbox(nome, title, type, options) {
+        let query = "";
+        let sequencia = 0;
+        var size = options.length;
+        let self = this;
+        options.forEach(function (valor) {
+            if (type == "field") {
+                query += `${nome} eq ${valor}`;
+                if (sequencia + 1 != size) query += ` or `;
+            }
+            if (type == "totalization") {
+                let nomeConvertido = self.converteName(valor);
+                query += `${nome} with ${valor} as ${nomeConvertido}${title}`;
+                if (sequencia + 1 != size) query += `,`;
+            }
+            sequencia++;
+        });
+
+        if (size > 1 && type == "field") return `(${query})`;
+        return `${query}`;
+    }
+    converteDate(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;
+    }
+    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

@@ -0,0 +1,107 @@
+<template>
+  <div class="vqb-rule card">
+    <div class="form-inline">
+      <label :class="rule.classCss" class="mr-5">
+        <i :class="rule.icon"></i>
+        <span style="margin-left: 10px">{{ rule.title }} </span>
+      </label>
+      <div style="margin-right: 20px">
+        <RadioGroup
+          :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.operators" :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"
+      />
+      <Select
+        v-if="rule.fieldType == 'select'"
+        :url="rule.props.url"
+        v-model="rule.valor"
+      />
+      <div @click="removeRegra" class="ml-auto btn-remove">
+        <i class="fas fa-times"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+import Select from "@nixweb/nixloc-ui/src/component/forms/Select";
+import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup.vue";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "DynamicComponent",
+  components: {
+    DateTime,
+    Select,
+    CheckboxGroup,
+    RadioGroup,
+  },
+  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-remove {
+  font-size: 16px;
+  color: darkgray;
+  cursor: pointer;
+}
+
+.div-select {
+  width: 320px;
+}
+</style>

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

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <b-row>
+      <b-col sm="6">
+        <ScrollBar :minHeight="200" :maxHeight="250">
+          <div class="div-options">
+            <CheckboxGroup
+              :stacked="true"
+              :initialValue="optionTable.initialValue"
+              :options="optionTable.options"
+              v-model="selectedField"
+            />
+          </div>
+        </ScrollBar>
+      </b-col>
+      <b-col sm="6">
+        <options
+          :options="[
+            { text: 'Crescente', value: 'asc' },
+            { text: 'Decrescente', value: 'desc' },
+          ]"
+          v-model="ordenar"
+        />
+        <SelectStatic
+          title="Ordenar"
+          fieldTarget="ordenar"
+          :initialValue="initialValue"
+          :data="ordenacao"
+          v-model="campoOrdenado"
+        />
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+import options from "@nixweb/nixloc-ui/src/component/forms/options";
+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",
+  components: {
+    CheckboxGroup,
+    SelectStatic,
+    ScrollBar,
+    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/query-builder/ListDynamicComponent.vue

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