@nixweb/nixloc-ui 0.0.93 → 0.0.94

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>

package/src/component/shared/query-builder/layouts/Bootstrap/BootstrapGroup.vue

@@ -0,0 +1,120 @@
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <div class="vqb-group card" :class="'depth-' + depth.toString()">
+    <div class="vqb-group-heading card-header" v-if="false">
+      <div class="match-type-container form-inline">
+        <label class="mr-2" for="vqb-match-type">
+          {{ labels.matchType }}
+        </label>
+
+        <select id="vqb-match-type" v-model="query.logicalOperator" class="form-control">
+          <option v-for="label in labels.matchTypes" :key="label.id" :value="label.id">
+            {{ label.label }}
+          </option>
+        </select>
+
+        <button
+          v-if="depth > 1"
+          type="button"
+          class="close ml-auto"
+          @click="remove"
+          v-html="labels.removeGroup"
+        ></button>
+      </div>
+    </div>
+
+    <div class="vqb-group-body card-body">
+      <div class="rule-actions form-inline">
+        <div class="div-custom">
+          <b-row>
+            <b-col sm="6">
+              <CustomSelect :options="rules" class="select" v-model="selectedRule" />
+            </b-col>
+            <b-col sm="4">
+              <button type="button" class="btn btn-secondary mr-2" @click="addRule">
+                {{ labels.addRule }}
+              </button>
+            </b-col>
+          </b-row>
+
+          <!--   <button
+            v-if="depth < maxDepth"
+            type="button"
+            class="btn btn-secondary"
+            @click="addGroup"
+          >
+            {{ labels.addGroup }}
+          </button> -->
+        </div>
+      </div>
+
+      <query-builder-children v-bind="$props" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CustomSelect from "../../components/CustomSelect.vue";
+import QueryBuilderGroup from "../../components/QueryBuilderGroup";
+import QueryBuilderRule from "./BootstrapRule.vue";
+
+export default {
+  name: "QueryBuilderGroup",
+
+  components: {
+    // eslint-disable-next-line vue/no-unused-components
+    QueryBuilderRule: QueryBuilderRule,
+    CustomSelect,
+  },
+
+  extends: QueryBuilderGroup,
+};
+</script>
+
+<style>
+.titulo-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>