@nixweb/nixloc-ui 0.0.271 → 0.0.273

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

@@ -1,198 +0,0 @@
-<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'">
-                                <div class="div-multi-options">
-                                    <CheckboxServer :title="item.title" :url="item.url" v-model="item.value" />
-                                </div>
-                            </div>
-                            <InputText v-if="item.type == 'text'" :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 class="text-center">
-                <Button _key="btnApply" title="Aplicar" backGroundColor="#017AFF" color="white" size="small"
-                    :clicked="apply" />
-            </div>
-        </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 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 { mapMutations, mapState, mapGetters } from "vuex";
-
-export default {
-    name: "FilterBuilder",
-    props: ["filters", "value"],
-    components: { SelectStatic, Button, CheckboxGroup, CheckboxServer, InputText, ScrollBar, DateTime, InputDecimal },
-    data() {
-        return {
-            filterSelected: {},
-            filtersAdded: [],
-        }
-    },
-    mounted() {
-        var filterStorage = this.getQueryFilter(this.$route.name);
-        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,
-                        field: filter.field,
-                        options: filter.options,
-                        title: filter.title,
-                        type: filter.type,
-                        url: filter.url,
-                        value: filter.value
-                    });
-            });
-            return options;
-        },
-        filterFinal() {
-            return this.filtersAdded.map(item => ({
-                title: item.title,
-                field: item.field,
-                type: item.type,
-                originalValue: item.value,
-                value: item.type == "decimal" ? [item.valueStart, item.valueEnd].join(',') : Array.isArray(item.value) ? item.value.join(',') : item.value
-            }));
-        },
-    },
-    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

@@ -1,92 +0,0 @@
-<template>
-    <div class="div-main">
-        <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>
-
-        <div class="side-by-side" v-for="item in tags">
-            <div class="side-by-side 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>
-
-        <Modal title="Filtros" :width="700" :height="750" v-if="showModal('filter')">
-            <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", "value"],
-    components: {
-        Button, Modal, FilterBuilder, Tag
-    },
-    data() {
-        return {
-            filterFinal: [],
-            tags: [],
-        }
-    },
-    computed: {
-        ...mapGetters("generic", ["showModal", "event"]),
-    },
-    methods: {
-        ...mapMutations("generic", ["openModal", "addEvent", "removeLoading", "updateQueryTags"]),
-        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);
-            },
-            deep: true,
-        },
-        tags: {
-            handler(tags) {
-                this.updateQueryTags(tags);
-            },
-            deep: true,
-        },
-    },
-
-}
-
-</script>.
-<style>
-.div-main {
-    margin-bottom: 20px;
-}
-
-.div-tag {
-    margin-left: 2px;
-}
-</style>

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

@@ -1,203 +0,0 @@
-<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

@@ -1,86 +0,0 @@
-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;
-    }
-}