@nixweb/nixloc-ui 0.0.93 → 0.0.96

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

@@ -0,0 +1,164 @@
+<template>
+  <div class="vue-query-builder">
+    <slot v-bind="vqbProps">
+      <query-builder-group v-bind="vqbProps" :query.sync="query" />
+    </slot>
+  </div>
+</template>
+
+<script>
+/* eslint-disable vue/require-default-prop */
+import QueryBuilderGroup from "./layouts/Bootstrap/BootstrapGroup.vue";
+import deepClone from "./utilities.js";
+
+var defaultLabels = {
+  matchType: "Construtor de Consulta",
+  matchTypes: [
+    { id: "all", label: "All" },
+    { id: "any", label: "Any" },
+  ],
+  addRule: "+ Adicionar",
+  removeRule: "&times;",
+  addGroup: "+ Adicionar",
+  removeGroup: "&times;",
+  textInputPlaceholder: "Valor",
+};
+
+export default {
+  name: "VueQueryBuilder",
+
+  components: {
+    QueryBuilderGroup,
+  },
+
+  props: {
+    rules: Array,
+    labels: {
+      type: Object,
+      default() {
+        return defaultLabels;
+      },
+    },
+    maxDepth: {
+      type: Number,
+      default: 3,
+      validator: function (value) {
+        return value >= 1;
+      },
+    },
+    value: Object,
+  },
+
+  data() {
+    return {
+      query: {
+        logicalOperator: this.labels.matchTypes[0].id,
+        children: [],
+      },
+      ruleTypes: {
+        text: {
+          operators: ["igual", "diferente", "contem"],
+          inputType: "text",
+          id: "text-field",
+        },
+        numeric: {
+          operators: ["=", "!=", "<", "<=", ">", ">="],
+          inputType: "number",
+          id: "number-field",
+        },
+        custom: {
+          operators: [],
+          inputType: "text",
+          id: "custom-field",
+        },
+        radio: {
+          operators: [],
+          choices: [],
+          inputType: "radio",
+          id: "radio-field",
+        },
+        checkbox: {
+          operators: ["checkbox"],
+          choices: [],
+          inputType: "checkbox",
+          id: "checkbox-field",
+        },
+        select: {
+          operators: [],
+          choices: [],
+          inputType: "select",
+          id: "select-field",
+        },
+        "multi-select": {
+          operators: ["="],
+          choices: [],
+          inputType: "select",
+          id: "multi-select-field",
+        },
+      },
+    };
+  },
+
+  computed: {
+    mergedLabels() {
+      return Object.assign({}, defaultLabels, this.labels);
+    },
+
+    mergedRules() {
+      var mergedRules = [];
+      var vm = this;
+
+      vm.rules.forEach(function (rule) {
+        if (typeof vm.ruleTypes[rule.type] !== "undefined") {
+          mergedRules.push(Object.assign({}, vm.ruleTypes[rule.type], rule));
+        } else {
+          mergedRules.push(rule);
+        }
+      });
+
+      return mergedRules;
+    },
+
+    vqbProps() {
+      return {
+        index: 0,
+        depth: 1,
+        maxDepth: this.maxDepth,
+        ruleTypes: this.ruleTypes,
+        rules: this.mergedRules,
+        labels: this.mergedLabels,
+      };
+    },
+  },
+
+  mounted() {
+    this.$watch(
+      "query",
+      (newQuery) => {
+        if (JSON.stringify(newQuery) !== JSON.stringify(this.value)) {
+          this.$emit("input", deepClone(newQuery));
+        }
+      },
+      {
+        deep: true,
+      }
+    );
+
+    this.$watch(
+      "value",
+      (newValue) => {
+        if (JSON.stringify(newValue) !== JSON.stringify(this.query)) {
+          this.query = deepClone(newValue);
+        }
+      },
+      {
+        deep: true,
+      }
+    );
+
+    if (typeof this.$options.propsData.value !== "undefined") {
+      this.query = Object.assign(this.query, this.$options.propsData.value);
+    }
+  },
+};
+</script>

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

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

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

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div class="lado-a-lado div-tag" v-for="tag in tags" :key="tag.id">
+      <Tag
+        :nomeEvento="nomeEvento"
+        :dadosEvento="tag"
+        :titulo="tag.titulo"
+        :valor="tag.valor"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Tag from "@nixweb/nixloc-ui/src/component/layout/Tag";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "Tags",
+  components: { Tag },
+  props: {
+    nomeEvento: String,
+  },
+  data() {
+    return {
+      tags: [],
+    };
+  },
+  computed: {
+    ...mapGetters("relatorio", ["filtroSelecionado"]),
+    ...mapGetters("generic", ["mostrarModal", "evento"]),
+  },
+  methods: {
+    ...mapMutations("relatorio", ["removeFiltroSelecionado"]),
+  },
+  watch: {
+    filtroSelecionado: {
+      handler(filtro) {
+        let self = this;
+        this.tags = [];
+        filtro.children.forEach(function (value) {
+          let valor = "";
+          let type = value.query.type;
+
+          if (type == "custom-component" && value.query.label == "Período") {
+            valor = `${value.query.value[0]} - ${value.query.value[1]}`;
+          }
+
+          if (type == "text" || type == "numeric") {
+            valor = `${value.query.operator} "${value.query.value}"`;
+          }
+
+          if (type == "checkbox") {
+            value.query.choices.forEach(function (opcoes) {
+              value.query.value.forEach(function (value) {
+                if (opcoes.value == value) {
+                  valor += `${opcoes.label},`;
+                }
+              });
+            });
+          }
+
+          let tag = { id: value.query.id, titulo: value.query.label, valor: valor };
+          if (value.query.value != null) self.tags.push(tag);
+        });
+      },
+      deep: true,
+    },
+    evento: {
+      handler(evento) {
+        if (evento.nome == "tagRemovida") {
+          var tags = this.tags.filter((x) => {
+            return x.id != evento.dados.id;
+          });
+          this.tags = tags;
+          this.removeFiltroSelecionado(evento.dados.id);
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>

package/src/component/shared/query-builder/components/CustomSelect.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="custom-escolher" :tabindex="tabindex" @blur="open = false">
+    <div class="selected" :class="{ open: open }" @click="open = !open">
+      {{ selected }}
+    </div>
+    <div class="items" :class="{ selectHide: !open }">
+      <div v-for="(option, i) of options" :key="i">
+        <div @click="selecionar(option)">
+          <span :class="option.classeCss">
+            <i :class="option.icone"></i>
+            <span> {{ option.label }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    "options",
+    "tabindex",
+    "value",
+  ] /* {
+    options: {
+      type: Array,
+      required: true,
+    },
+    default: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    tabindex: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    value: Object,
+  },*/,
+  data() {
+    return {
+      selected: "Selecione os filtros",
+      open: false,
+    };
+  },
+  mounted() {
+    this.$emit("input", this.selected);
+  },
+  methods: {
+    selecionar(option) {
+      this.$emit("input", option);
+      this.selected = option.label;
+      this.open = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.custom-escolher {
+  position: relative;
+  width: 100%;
+  text-align: left;
+  outline: none;
+  height: 40px;
+  line-height: 40px;
+}
+
+.custom-escolher .selected {
+  background-color: white;
+  border-bottom: 1px solid #dbdee0;
+  color: black;
+  padding-left: 1em;
+  cursor: pointer;
+  user-select: none;
+}
+
+.custom-escolher .selected:after {
+  position: absolute;
+  content: "";
+  top: 22px;
+  right: 1em;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-color: black transparent transparent transparent;
+}
+
+.custom-escolher .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;
+}
+
+.custom-escolher .items div {
+  color: black;
+  padding-left: 1em;
+  cursor: pointer;
+  user-select: none;
+}
+
+.selectHide {
+  display: none;
+}
+</style>

package/src/component/shared/query-builder/components/QueryBuilderChildren.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="vqb-children">
+    <component
+      :is="getComponent(child.type)"
+      v-for="(child, index) in query.children"
+      :key="index"
+      :type="child.type"
+      :query.sync="child.query"
+      :rule-types="ruleTypes"
+      :rules="rules"
+      :rule="$parent.ruleById(child.query.rule)"
+      :index="index"
+      :max-depth="maxDepth"
+      :depth="depth + 1"
+      :labels="labels"
+      @child-deletion-requested="$parent.removeChild"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['query', 'ruleTypes', 'rules', 'maxDepth', 'labels', 'depth'],
+
+  data() {
+    return {
+      groupComponent: null,
+      ruleComponent: null
+    }
+  },
+
+  mounted() {
+    this.groupComponent = this.$parent.$options.components['QueryBuilderGroup'];
+    this.ruleComponent = this.$parent.$options.components['QueryBuilderRule'];
+  },
+
+  methods: {
+    getComponent(type) {
+      return type === 'query-builder-group'
+        ? this.groupComponent
+        : this.ruleComponent;
+    }
+  }
+}
+</script>

package/src/component/shared/query-builder/components/QueryBuilderGroup.vue

@@ -0,0 +1,151 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+/* eslint-disable vue/require-default-prop */
+import deepClone from "../utilities.js";
+import QueryBuilderChildren from "./QueryBuilderChildren.vue";
+
+import { mapMutations, mapGetters } from "vuex";
+
+export default {
+  components: {
+    // eslint-disable-next-line vue/no-unused-components
+    QueryBuilderChildren,
+  },
+
+  props: {
+    ruleTypes: Object,
+    type: {
+      type: String,
+      default: "query-builder-group",
+    },
+    query: Object,
+    rules: Array,
+    index: Number,
+    maxDepth: Number,
+    depth: Number,
+    labels: Object,
+  },
+
+  data() {
+    return {
+      selectedRule: this.rules[0],
+      valida: [],
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["evento"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["insereNotificacao"]),
+
+    ruleById(ruleId) {
+      var rule = null;
+
+      this.rules.forEach(function (value) {
+        if (value.id === ruleId) {
+          rule = value;
+          return false;
+        }
+      });
+
+      return rule;
+    },
+
+    addRule() {
+      let updated_query = deepClone(this.query);
+      let child = {
+        type: "query-builder-rule",
+        query: {
+          id: Math.random()
+            .toString(36)
+            .replace(/[^a-z]+/g, "")
+            .substr(0, 5),
+          obrigatorio: this.selectedRule.obrigatorio,
+          type: this.selectedRule.type,
+          choices: this.selectedRule.choices,
+          classeCss: this.selectedRule.classeCss,
+          valida: this.selectedRule.valida,
+          tipo: this.selectedRule.tipo,
+          label: this.selectedRule.label,
+          rule: this.selectedRule.id,
+          operator: this.selectedRule.operators[0],
+          operand:
+            typeof this.selectedRule.operands === "undefined"
+              ? this.selectedRule.label
+              : this.selectedRule.operands[0],
+          value: null,
+        },
+      };
+      // A bit hacky, but `v-model` on `select` requires an array.
+      if (this.ruleById(child.query.rule).type === "multi-select") {
+        child.query.value = [];
+      }
+
+      if (!this.jaExiste(child.query.rule)) {
+        updated_query.children.push(child);
+        if (child.query.valida) this.valida.push(child);
+      } else {
+        var erro = {
+          property: "ERRO QUERY BUILDER",
+          mensagem: `Não é possível adicionar o filtro ${child.query.label} 2 vezes!`,
+        };
+        this.insereNotificacao([erro]);
+      }
+
+      this.$emit("update:query", updated_query);
+    },
+
+    addGroup() {
+      let updated_query = deepClone(this.query);
+      if (this.depth < this.maxDepth) {
+        updated_query.children.push({
+          type: "query-builder-group",
+          query: {
+            logicalOperator: this.labels.matchTypes[0].id,
+            children: [],
+          },
+        });
+        this.$emit("update:query", updated_query);
+      }
+    },
+
+    remove() {
+      this.$emit("child-deletion-requested", this.index);
+    },
+
+    removeChild(index) {
+      this.valida.splice(this.valida.indexOf(index, 1));
+
+      let updated_query = deepClone(this.query);
+
+      updated_query.children.splice(index, 1);
+
+      this.$emit("update:query", updated_query);
+    },
+
+    jaExiste(chave) {
+      var existe = this.valida.find((value) => {
+        return value.query.rule === chave;
+      });
+      if (existe) return true;
+      return false;
+    },
+  },
+  watch: {
+    evento: {
+      handler(evento) {
+        if (evento.nome == "tagRemovida") {
+          var valida = this.valida.filter((x) => {
+            return x.query.id != evento.dados.id;
+          });
+          this.valida = valida;
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>

package/src/component/shared/query-builder/components/QueryBuilderRule.vue

@@ -0,0 +1,81 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import deepClone from "../utilities.js";
+
+export default {
+  // eslint-disable-next-line vue/require-prop-types
+  props: ["query", "index", "rule", "labels", "depth"],
+
+  computed: {
+    isCustomComponent() {
+      return this.rule.type === "custom-component";
+    },
+
+    selectOptions() {
+      if (typeof this.rule.choices === "undefined") {
+        return {};
+      }
+
+      // Nest items to support <optgroup> if the rule's choices have
+      // defined groups. Otherwise just return a single-level array
+      return this.rule.choices.reduce(function (groups, item, index) {
+        let key = item["group"];
+        if (typeof key !== "undefined") {
+          groups[key] = groups[key] || [];
+          groups[key].push(item);
+        } else {
+          groups[index] = item;
+        }
+
+        return groups;
+      }, {});
+    },
+
+    hasOptionGroups() {
+      return this.selectOptions.length && Array.isArray(this.selectOptions[0]);
+    },
+  },
+
+  beforeMount() {
+    if (this.rule.type === "custom-component") {
+      this.$options.components[this.id] = this.rule.component;
+    }
+  },
+
+  mounted() {
+    let updated_query = deepClone(this.query);
+
+    // Set a default value for these types if one isn't provided already
+    if (this.query.value === null) {
+      if (this.rule.inputType === "checkbox") {
+        updated_query.value = [];
+      }
+      if (this.rule.type === "select") {
+        updated_query.value = this.rule.choices[0].value;
+      }
+      if (this.rule.type === "custom-component") {
+        updated_query.value = null;
+        if (typeof this.rule.default !== "undefined") {
+          updated_query.value = deepClone(this.rule.default);
+        }
+      }
+
+      this.$emit("update:query", updated_query);
+    }
+  },
+
+  methods: {
+    remove: function () {
+      this.$emit("child-deletion-requested", this.index);
+    },
+    updateQuery(value) {
+      let updated_query = deepClone(this.query);
+      updated_query.value = value;
+      this.$emit("update:query", updated_query);
+    },
+  },
+};
+</script>