@nixweb/nixloc-ui 1.16.0 → 1.19.0

package/src/component/shared/filter-builder/FilterBuilder.vue

@@ -0,0 +1,221 @@
+<template>
+    <div>
+        <b-row>
+            <b-col sm="9">
+                <SelectStatic title="Tipo" :onlyQuery="true" :data="options" :markFormDirty="true"
+                    v-model="filterSelected" />
+            </b-col>
+        </b-row>
+        <div>
+            <div v-for="item in filtersAdded">
+                <div class="molded">
+                    <b-row>
+                        <b-col sm="11">
+                            <CheckboxGroup v-if="item.type == 'options'" :title="item.title" :options="item.options"
+                                :initialValue="item.value" v-model="item.value" />
+                            <div class="div-date">
+                                <DateTime v-if="item.type == 'date' || item.type == 'dateRange'" :title="item.title"
+                                    format="DD/MM/YYYY" type="date" :range="true" :confirm="true" confirmText="Ok"
+                                    placeholder v-model="item.value" />
+                            </div>
+                            <div v-if="item.type == 'decimal'">
+                                <b-row>
+                                    <b-col sm="6">
+                                        <InputDecimal title="Valor Inicial" v-model="item.valueStart" />
+                                    </b-col>
+                                    <b-col sm="6">
+                                        <InputDecimal title="Valor Final" v-model="item.valueEnd" />
+                                    </b-col>
+                                </b-row>
+                            </div>
+                            <div v-if="item.type == 'multiOptions' || item.type == 'listOptions'">
+                                <div class="div-multi-options">
+                                    <CheckboxServer v-if="!item.options" :title="item.title"
+                                        :propsParams="item.propsParams" :url="item.url" v-model="item.value" />
+
+                                    <CheckboxGroup v-else :title="item.title" :options="item.options"
+                                        :initialValue="item.value" v-model="item.value" />
+                                </div>
+                            </div>
+
+                            <RadioGroup v-if="item.type == 'radio'" :title="item.title" :options="item.options"
+                                v-model="item.value" />
+
+                            <InputText v-if="item.type == 'text' || item.type == 'patrimony'" :title="item.title"
+                                v-model="item.value" />
+
+                            <InputNumber v-if="item.type == 'number'" :title="item.title" v-model="item.value" />
+                        </b-col>
+                        <b-col sm="1">
+                            <div class="icon-remove" @click="removeItem(item.field)">
+                                <i class="fas fa-times"></i>
+                            </div>
+                        </b-col>
+                    </b-row>
+                </div>
+            </div>
+        </div>
+        <div class="text-center">
+            <Button _key="btnApply" title="Aplicar" backGroundColor="#017AFF" color="white" size="small"
+                :clicked="apply" />
+        </div>
+    </div>
+</template>
+
+<script>
+
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
+import InputNumber from "@nixweb/nixloc-ui/src/component/forms/InputNumber";
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
+import CheckboxServer from "@nixweb/nixloc-ui/src/component/forms/CheckboxServer";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+
+import { mapMutations, mapState, mapGetters } from "vuex";
+
+export default {
+    name: "FilterBuilder",
+    props: ["filters", "value"],
+    components: { SelectStatic, Button, CheckboxGroup, CheckboxServer, InputText, InputNumber, ScrollBar, DateTime, InputDecimal, RadioGroup },
+    data() {
+        return {
+            filterSelected: {},
+            filtersAdded: [],
+        }
+    },
+    mounted() {
+        var filterStorage = this.getQueryFilter(this.$route.name);
+        if (filterStorage) {
+            this.filtersAdded = filterStorage.filtersAdded;
+            this.addEvent({ name: "stringFilter", data: this.filterFinal });
+        }
+
+    },
+    computed: {
+        ...mapGetters("generic", ["event", "getQueryFilter"]),
+        ...mapState("generic", ["filterQuery"]),
+        options() {
+            let options = [];
+            this.filters.forEach(filter => {
+                options.push(
+                    {
+                        id: filter.type,
+                        content: filter.title,
+                        listName: filter.listName,
+                        field: filter.field,
+                        options: filter.options,
+                        title: filter.title,
+                        type: filter.type,
+                        url: filter.url,
+                        value: filter.value,
+                        required: filter.required,
+                        propsParams: filter.propsParams
+                    });
+            });
+            return options;
+        },
+        filterFinal() {
+            return this.filtersAdded.map(item => ({
+                routeName: this.$route.name,
+                title: item.title,
+                listName: item.listName,
+                field: item.field,
+                type: item.type,
+                originalValue: item.value,
+                required: item.required,
+                value: item.type == "decimal" ? [item.valueStart, item.valueEnd].join('<>') : Array.isArray(item.value) ? item.value.join('<>') : item.value.toString()
+            }));
+        },
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent", "hideModal", "removeLoading", "addFilterQuery"]),
+        add() {
+            if (this.filterSelected.id && !this.contentExists(this.filterSelected.field)) {
+                this.filtersAdded.push(this.filterSelected);
+                this.filterSelected = { content: "", id: "" };
+            }
+            this.removeLoading(["btnAddFilter"]);
+        },
+        contentExists(field) {
+            return this.filtersAdded.some(item => item.field === field);
+        },
+        removeItem(field) {
+            this.filtersAdded = this.filtersAdded.filter(item => item.field !== field);
+        },
+        apply() {
+            this.addEvent({ name: "stringFilter", data: this.filterFinal });
+            this.hideModal();
+            this.removeLoading(["btnApply"]);
+        }
+    },
+    watch: {
+        event: {
+            handler(event) {
+
+                if (event.name == "tagFilterRemove") {
+                    this.removeItem(event.data.field);
+                    this.addEvent({ name: "stringFilter" });
+                }
+
+                if (event.name == "filterStorageRemoved") {
+                    this.filtersAdded = [];
+                    this.addEvent({ name: "stringFilter", data: this.filterFinal });
+                }
+            },
+            deep: true,
+        },
+        filterFinal: {
+            handler(filterFinal) {
+                this.$emit("input", filterFinal);
+                this.addFilterQuery({ routeName: this.$route.name, filtersAdded: this.filtersAdded });
+            },
+            deep: true,
+        },
+        filterSelected: {
+            handler(filterSelected) {
+                this.add();
+            },
+            deep: true,
+        },
+    },
+}
+
+
+</script>
+
+<style scoped>
+.div-btn {
+    margin-top: 38px;
+}
+
+.div-date {
+    width: 300px;
+}
+
+.molded {
+    border: 1px solid #e8eaed;
+    background-color: white;
+    border-radius: 8px !important;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 10px;
+    margin-bottom: 10px;
+}
+
+
+.icon-remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+    width: 30px;
+    cursor: pointer;
+    color: #F0134D;
+    cursor: pointer;
+    font-size: 17px;
+}
+</style>

package/src/component/shared/filter-builder/FilterQuery.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="div-main-filter">
+        <div>
+            <Button _key="btnFilter" tooltip="Aplicar Filtros" color="black" backGroundColor="#F0F0F0" title="Filtros"
+                classIcon="fa-sharp fa-solid fa-filters" size="small" :clicked="openFilter" />
+
+            <div class="side-by-side" v-for="item in tags">
+                <div class="div-tag">
+                    <Tag v-if="item.value" eventName="eventName" :params="item" eventData="tag"
+                        :clickedBody="openFilter" :clickedRemove="removeTag" :title="item.title" :value="item.value"
+                        :tagRemoved="false" />
+                </div>
+            </div>
+        </div>
+
+        <Modal title="Filtros" :width="700" :height="750" v-show="showModal('filter')">
+            <slot></slot>
+            <FilterBuilder :filters="filters" v-model="filterFinal" />
+        </Modal>
+    </div>
+</template>
+
+<script>
+
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import FilterBuilder from "./FilterBuilder.vue";
+import Tag from "@nixweb/nixloc-ui/src/component/layout/Tag";
+
+import { mapGetters, mapMutations } from "vuex";
+
+
+export default {
+    name: "FilterQuery",
+    props: ["filters", "showDateYearMonth", "value"],
+    components: {
+        Button, Modal, FilterBuilder, Tag
+    },
+    data() {
+        return {
+            filterFinal: [],
+            tags: [],
+        }
+    },
+    computed: {
+        ...mapGetters("generic", ["showModal", "event"]),
+    },
+    methods: {
+        ...mapMutations("generic", ["openModal", "addEvent", "removeLoading", "updateQueryTags", "updateFilterFinal"]),
+        openFilter() {
+            this.openModal("filter");
+            this.removeLoading(["btnFilter"]);
+        },
+        removeTag(params) {
+            this.tags = this.tags.filter(item => item.field !== params.field);
+            this.addEvent({ name: "tagFilterRemove", data: params });
+        }
+    },
+    watch: {
+        event: {
+            handler(event) {
+                if (event.name == "stringFilter") {
+                    var data = JSON.stringify(event.data);
+                    this.tags = JSON.parse(data);
+                }
+            },
+            deep: true,
+        },
+        filterFinal: {
+            handler(filterFinal) {
+                this.$emit("input", filterFinal);
+                this.updateFilterFinal(filterFinal);
+            },
+            deep: true,
+        },
+        tags: {
+            handler(tags) {
+                this.updateQueryTags(tags);
+            },
+            deep: true,
+        },
+    },
+
+}
+
+</script>.
+<style>
+.div-main-filter {
+    margin-bottom: 20px;
+}
+
+.div-tag {
+    margin-left: 2px;
+}
+</style>

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

@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <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">
+                <div class="div-btn">
+                  <i class="fa-solid fa-circle-plus" @click="add"></i>
+                </div>
+              </b-col>
+            </b-row>
+            <div class="div-and-or">
+              <b-row>
+                <b-col sm="3">
+                  <RadioGroup :options="[
+                  { text: 'e', value: 'and' },
+                  { text: 'ou', value: 'or' },
+                ]" v-model="andOr" />
+                </b-col>
+              </b-row>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <DynamicComponentList />
+  </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 DynamicComponentList from "@nixweb/nixloc-ui/src/component/shared/query-builder/DynamicComponentList.vue";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "AddRule",
+  components: {
+    SelectRule,
+    DynamicComponent,
+    RadioGroup,
+    DynamicComponentList,
+  },
+  props: {
+    rules: Array,
+  },
+  data() {
+    return {
+      selectedRule: this.rules[0],
+      andOr: "and",
+      duplicate: [],
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["addNotifications"]),
+    ...mapMutations("report", ["addSelectedRules"]),
+    add() {
+      this.selectedRule.andOr = this.andOr;
+      this.addRule();
+    },
+    addRule() {
+      let obj = this.mountObject();
+
+      if (!this.verifyIfExist(obj.name)) {
+        this.addSelectedRules(obj);
+        if (obj.notDuplicate) this.duplicate.push(obj);
+      } else {
+        var error = {
+          property: "ERRO QUERY BUILDER",
+          message: `Não é possível adicionar o filter ${obj.title} 2 vezes!`,
+        };
+        this.addNotifications([error]);
+      }
+    },
+    mountObject() {
+      let obj = {
+        id: this.generateId(),
+        name: this.selectedRule.name,
+        title: this.selectedRule.title,
+        typeField: this.selectedRule.typeField,
+        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,
+        notDuplicate: this.selectedRule.notDuplicate,
+        value: null,
+      };
+      return obj;
+    },
+    generateId() {
+      return Math.random()
+        .toString(36)
+        .replace(/[^a-z]+/g, "")
+        .substr(0, 5);
+    },
+    verifyIfExist(name) {
+      var hasRule = this.duplicate.find((rule) => {
+        return rule.name === name;
+      });
+      if (hasRule) 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 "duplicate" para liberar e adicionar novamente.
+        if (event.name == "tagRemoved" || event.name == "selectedRuleRemoved") {
+          var duplicate = this.duplicate.filter((item) => {
+            return item.id != event.data.id;
+          });
+          this.duplicate = duplicate;
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style>
+.card {
+  border: 1px solid #e8eaed !important;
+  background-color: white !important;
+  border-radius: 8px !important;
+}
+
+.card-body {
+  padding: 10px;
+}
+
+.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);
+}
+
+.div-btn {
+  margin-top: -3px;
+  font-size: 25px;
+  color: #577696;
+  cursor: pointer;
+}
+
+.div-and-or {
+  margin-top: 10px;
+}
+
+@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,86 @@
+export default class ConvertToOdata {
+    convertRule(rule) {
+        let operator = rule.operator;
+
+        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.typeField === "dateTime") return this.convertDateTime(rule);
+        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(rule) {
+        let start = this.convertDate(rule.value[0]);
+        let end = this.convertDate(rule.value[1]);
+
+        if (rule.name.includes("&")) {
+            var parts = rule.name.split("&");
+            var first = parts[0];
+            var second = parts[1];
+            return `${first} ge ${start} and ${second} le ${end}`;
+        } else {
+            return `${rule.name} ge ${start} and ${rule.name} le ${end}`;
+        }
+    }
+    convertSelect(name, value) {
+        return `${name} eq '${value.id}'`;
+    }
+    convertCheckbox(name, title, type, options) {
+        let query = "";
+        let seq = 0;
+        var size = options.length;
+        let self = this;
+        options.forEach(function (value) {
+
+            if (type == "field") {
+                query += `${name} eq ${value}`;
+                if (seq + 1 != size) query += ` or `;
+            }
+            if (type == "totalization") {
+
+                let field = value.split('_').pop();
+                field = field.charAt(0).toLowerCase() + field.slice(1);
+
+                query += `${field} with ${value.split('_')[0]} as ${value.replace(/_/g, '')}`;
+                if (seq + 1 != size) query += `,`;
+            }
+            seq++;
+        });
+
+        if (size > 1 && type == "field") return `(${query})`;
+        return `${query}`;
+    }
+    convertDate(data) {
+        // a verificação abaixo valida se tem valor, pois quando não tem está retornando um array com 3 posições em brando
+        if (data.length == 3) return;
+
+        let str = data.replace("/", "").replace("/", "");
+
+        let date = {
+            day: str.substr(0, 2),
+            month: str.substr(2, 2),
+            year: str.substr(4, 4),
+        };
+
+        var iso = date.year + "-" + date.month + "-" + date.day;
+
+        /*
+          iso += date.day + "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;
+    }
+}