@nixweb/nixloc-ui 1.14.0 → 1.16.0

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

@@ -1,161 +0,0 @@
-<template>
-  <div class="vqb-rule card move">
-    <div class="form-inline">
-      <label :class="rule.classCss" class="mr-5">
-        <i class="icon-query-builder" :class="rule.icon"></i>
-        <span class="title" style="margin-left: 10px">{{ rule.title }} </span>
-      </label>
-      <div style="margin-right: 20px">
-        <RadioGroup v-if="index > 0" :options="[
-          { text: 'e', value: 'and' },
-          { text: 'ou', value: 'or' },
-        ]" v-model="rule.andOr" />
-      </div>
-      <select v-if="rule.typeField == 'text' || rule.typeField == 'numeric'" v-model="rule.operator"
-        class="select-query-builder form-control mr-2">
-        <option v-for="operator in rule.operators" :key="operator">
-          <span>{{ operator }}</span>
-        </option>
-      </select>
-      <input v-if="rule.typeField == 'text' || rule.typeField == 'numeric'" class="form-control"
-        :type="rule.typeField == 'text' ? 'text' : 'number'" placeholder="Valor" v-model="rule.value" />
-      <CheckboxGroup v-if="rule.typeField == 'checkbox'" :options="options" :initialValue="rule.value"
-        v-model="rule.value" />
-      <div v-if="rule.typeField == 'dateTime'">
-        <div class="side-by-side">
-          <DateTime :format="rule.props.format" :type="rule.props.type" :range="rule.props.range" v-model="rule.value" />
-        </div>
-        <div class="side-by-side margin">ou</div>
-        <div class="side-by-side margin">
-          <select @change="verifyCalculate" v-model="rule.value[2]" class="form-control mr-2">
-            <option v-for="period in optionsPeriodCustom" :key="period">
-              {{ period }}
-            </option>
-          </select>
-        </div>
-        <div v-if="rule.props.filterByField">
-          <RadioGroup v-if="rule.props.filterByField" :options="rule.props.filterByField" v-model="rule.name" />
-        </div>
-      </div>
-
-      <Select v-if="rule.typeField == 'select'" :showNewRegister="false" :url="rule.props.url" v-model="rule.value" />
-      <div @click="removeRule" 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, mapActions } from "vuex";
-
-export default {
-  name: "DynamicComponent",
-  components: {
-    DateTime,
-    Select,
-    CheckboxGroup,
-    RadioGroup,
-  },
-  props: ["rule", "index"],
-  created() {
-    if (this.rule.typeField == "dateTime") {
-      if (this.rule.value == null) {
-        this.rule.value = ["", "", ""];
-      } else {
-        if (this.rule.value.length == 3) {
-          this.verifyCalculate();
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      urlCalculate: "/api/v1/rental/period-rent/calculate-period-query-builder",
-      optionsPeriodCustom: [
-        "hoje",
-        "próximos 7 dias",
-        "próximos 15 dias",
-        "próximos 30 dias",
-        "próximos 45 dias",
-        "últimos 7 dias",
-        "últimos 15 dias",
-        "últimos 30 dias",
-        "últimos 45 dias",
-      ],
-    };
-  },
-  methods: {
-    ...mapMutations("generic", ["addEvent"]),
-    ...mapMutations("report", ["removeSelectedRule"]),
-    ...mapActions("generic", ["postApi"]),
-    removeRule() {
-      this.removeSelectedRule(this.rule.id);
-      this.addEvent({
-        name: "selectedRuleRemoved",
-        data: { id: this.rule.id },
-      });
-    },
-    verifyCalculate() {
-      let title = this.rule.value[2];
-      if (title == "hoje") this.calculate(0, title);
-      if (title == "próximos 7 dias") this.calculate(7, title);
-      if (title == "próximos 15 dias") this.calculate(15, title);
-      if (title == "próximos 30 dias") this.calculate(30, title);
-      if (title == "próximos 45 dias") this.calculate(45, title);
-      if (title == "últimos 7 dias") this.calculate(-7, title);
-      if (title == "últimos 15 dias") this.calculate(-15, title);
-      if (title == "últimos 30 dias") this.calculate(-30, title);
-      if (title == "últimos 45 dias") this.calculate(-45, title);
-    },
-    calculate(days, title) {
-      let params = {
-        url: this.urlCalculate,
-        obj: { days: days },
-        notNotifyToast: true,
-      };
-      this.postApi(params).then((response) => {
-        this.rule.value = [];
-        this.rule.value[0] = response.content.start;
-        this.rule.value[1] = response.content.end;
-        this.rule.value[2] = title;
-      });
-    },
-  },
-  computed: {
-    options() {
-      let options = [];
-      this.rule.options.forEach((item) => {
-        let option = { text: item.title, value: item.value };
-        options.push(option);
-      });
-      return options;
-    },
-  },
-};
-</script>
-<style scoped>
-.move {
-  cursor: move;
-}
-
-.btn-remove {
-  font-size: 16px;
-  color: darkgray;
-  cursor: pointer;
-}
-
-.div-select {
-  width: 330px;
-}
-
-.margin {
-  margin-left: 30px;
-  padding: 10px;
-}
-</style>

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

@@ -1,70 +0,0 @@
-<template>
-  <div>
-    <div class="component">
-      <span v-if="selectedRules.length > 0">
-        <i class="fas fa-expand-arrows-alt"></i> Clique e arraste para ordenar
-      </span>
-      <draggable :list="selectedRules">
-        <component
-          :is="component()"
-          v-for="(rule, index) in selectedRules"
-          :key="index"
-          :rule="rule"
-          :index="index"
-        />
-      </draggable>
-    </div>
-  </div>
-</template>
-
-<script>
-import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
-
-import draggable from "vuedraggable";
-
-import { mapState, mapMutations } from "vuex";
-
-export default {
-  components: {
-    Alert,
-    draggable,
-  },
-  data() {
-    return {
-      dynamicComponent: null,
-    };
-  },
-  computed: {
-    ...mapState("report", ["selectedRules"]),
-  },
-  mounted() {
-    this.dynamicComponent =
-      this.$parent.$options.components["DynamicComponent"];
-  },
-  methods: {
-    ...mapMutations("report", ["mountFinalQueryFormatOData"]),
-    component() {
-      return this.dynamicComponent;
-    },
-  },
-  watch: {
-    selectedRules: {
-      handler(value) {
-        this.mountFinalQueryFormatOData(value);
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.component {
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-top: 10px;
-  max-width: 1100px;
-  margin: auto;
-  padding-top: 20px;
-}
-</style>

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

@@ -1,93 +0,0 @@
-<template>
-  <div>
-    <b-row>
-      <b-col sm="6">
-        <ScrollBar :minHeight="200" :maxHeight="250">
-          <div class="div-options">
-            <CheckboxGroup
-              :stacked="true"
-              :initialValue="fieldsLocal.selected"
-              :options="fieldsLocal.options"
-              v-model="fieldsLocal.selected"
-            />
-          </div>
-        </ScrollBar>
-      </b-col>
-      <b-col sm="6">
-        <RadioGroup
-          :options="[
-            { text: 'Crescente', value: 'asc' },
-            { text: 'Decrescente', value: 'desc' },
-          ]"
-          v-model="fieldsLocal.orderBy"
-        />
-        <SelectStatic
-          title="Ordenar"
-          fieldTarget="order"
-          :initialValue="{ content: fieldsLocal.sort.content, id: fieldsLocal.sort.id }"
-          :data="options"
-          v-model="fieldsLocal.sort"
-        />
-      </b-col>
-    </b-row>
-  </div>
-</template>
-<script>
-import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
-import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
-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: "Fields",
-  components: {
-    CheckboxGroup,
-    SelectStatic,
-    ScrollBar,
-    RadioGroup,
-  },
-  data() {
-    return {
-      fieldsLocal: {
-        selected: [],
-        options: [],
-        sort: { content: "", id: "asc" },
-        orderBy: "",
-      },
-    };
-  },
-  created() {
-    // converte getters para data local para que possa ser manipulado com o v-model
-    this.fieldsLocal = this.fields;
-  },
-  computed: {
-    ...mapGetters("report", ["fields"]),
-    options() {
-      let options = [];
-      this.fields.options.forEach((option) => {
-        let obj = { content: option.text, id: option.value };
-        options.push(obj);
-      });
-      return options;
-    },
-  },
-  methods: {
-    ...mapMutations("report", ["updateSelectedFields"]),
-  },
-  watch: {
-    fieldsLocal: {
-      handler(fieldsLocal) {
-        this.updateSelectedFields(fieldsLocal);
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-<style scoped>
-.div-options {
-  padding-left: 0px;
-}
-</style>

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

@@ -1,69 +0,0 @@
-<template>
-  <div class="vue-query-builder">
-    <slot v-bind="vqbProps">
-      <AddRule v-bind="vqbProps" />
-    </slot>
-  </div>
-</template>
-
-<script>
-import AddRule from "./AddRule.vue";
-
-import { mapState } from "vuex";
-
-export default {
-  name: "QueryBuilder",
-  components: {
-    AddRule,
-  },
-  data() {
-    return {
-      typeRule: {
-        text: {
-          id: "text-field",
-          operators: ["igual", "diferente", "contem"],
-          typeField: "text",
-        },
-        numeric: {
-          id: "number-field",
-          /*  operators: ["=", "!=", "<", "<=", ">", ">="],*/
-          operators: ["igual", "diferente", "menor", "menor ou igual", "maior", "maior ou igual"],
-          typeField: "number",
-        },
-        radio: {
-          id: "radio-field",
-          operators: [],
-          options: [],
-          typeField: "radio",
-        },
-        checkbox: {
-          id: "checkbox-field",
-          operators: ["checkbox"],
-          options: [],
-          typeField: "checkbox",
-        },
-      },
-    };
-  },
-  computed: {
-    ...mapState("report", ["report"]),
-    mergeRules() {
-      var mergeRules = [];
-      var self = this;
-      self.report.rules.forEach(function (rule) {
-        if (typeof self.typeRule[rule.typeField] !== "undefined") {
-          mergeRules.push(Object.assign({}, self.typeRule[rule.typeField], rule));
-        } else {
-          mergeRules.push(rule);
-        }
-      });
-      return mergeRules;
-    },
-    vqbProps() {
-      return {
-        rules: this.mergeRules,
-      };
-    },
-  },
-};
-</script>

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

@@ -1,68 +0,0 @@
-<template>
-  <div>
-    <QueryBuilder />
-  </div>
-</template>
-
-<script>
-import QueryBuilder from "./QueryBuilder.vue";
-
-import { mapMutations } from "vuex";
-
-export default {
-  name: "Rules",
-  components: { QueryBuilder },
-};
-</script>
-
-<style>
-.btn-secondary {
-  background-color: #4ab4e2 !important;
-  border: 0px !important;
-  font-size: 14px !important;
-  border-radius: 20px !important;
-}
-
-.vue-query-builder .vqb-group.depth-1 .vqb-rule,
-.vue-query-builder .vqb-group.depth-2 {
-  border-left: 2px solid #577696 !important;
-}
-
-.vue-query-builder .vqb-rule {
-  background-color: #fafafc !important;
-}
-
-.form-i nline label {
-  font-size: 14px !important;
-}
-
-.card-header {
-  padding: 5px !important;
-}
-
-.card {
-  padding: 10px !important;
-}
-
-.vqb-rule {
-  margin-bottom: 10px !important;
-}
-
-.rule-actions {
-  margin-bottom: 10px !important;
-}
-
-.mr-2 {
-  font-size: 14px !important;
-  margin-left: 10px !important;
-}
-
-.form-inline .form-control {
-  min-width: 200px !important;
-}
-
-option {
-  font-size: 14px !important;
-  padding: 5px !important;
-}
-</style>

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

@@ -1,97 +0,0 @@
-<template>
-  <div class="selected-filter" @blur="open = false">
-    <div class="selected" :class="{ open: open }" @click="open = !open">
-      <span class="title">{{ selected }}</span>
-    </div>
-    <div class="items" :class="{ hide: !open }">
-      <div v-for="(options, i) of options" :key="i">
-        <div @click="select(options)">
-          <span :class="options.classCss">
-            <i class="icon-query-builder" :class="options.icon"></i>
-            <span class="title"> {{ options.title }}</span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ["options", "value"],
-  data() {
-    return {
-      selected: "Selecione os filtros",
-      open: false,
-    };
-  },
-  mounted() {
-    this.$emit("input", this.selected);
-  },
-  methods: {
-    select(options) {
-      this.$emit("input", options);
-      this.selected = options.title;
-      this.open = false;
-    },
-  },
-};
-</script>
-
-<style scoped>
-.selected-filter {
-  position: relative;
-  width: 100%;
-  text-align: left;
-  outline: none;
-  height: 40px;
-  line-height: 40px;
-  z-index: 500;
-}
-
-.selected-filter .selected {
-  background-color: white;
-  border: 1px solid #DBDEE0;
-  border-radius: 6px;
-  color: #495057;
-  padding-left: 1em;
-  cursor: pointer;
-  user-select: none;
-}
-
-.selected-filter .selected:after {
-  position: absolute;
-  content: "";
-  top: 19px;
-  right: 1em;
-  width: 0;
-  height: 0;
-  border: 5px solid transparent;
-  border-color: black transparent transparent transparent;
-}
-
-.selected-filter .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;
-}
-
-.selected-filter .items div {
-  color: black;
-  padding-left: 1em;
-  cursor: pointer;
-  user-select: none;
-}
-
-.hide {
-  display: none;
-}
-</style>

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

@@ -1,59 +0,0 @@
-<template>
-  <div>
-    <div class="side-by-side div-tag" v-for="tag in tagsLocal" :key="tag.id">
-      <Tag :eventName="eventName" :eventData="tag" :title="tag.title" :value="tag.value" />
-    </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: {
-    eventName: String,
-  },
-  data() {
-    return {
-      tagsLocal: [],
-    };
-  },
-  created() {
-    let self = this;
-    setTimeout(function () {
-      self.tagsLocal = self.tags;
-    }, 100);
-  },
-  computed: {
-    ...mapGetters("report", ["tags"]),
-    ...mapGetters("generic", ["showModal", "event"]),
-  },
-  methods: {
-    ...mapMutations("report", ["removeSelectedRule"]),
-  },
-  watch: {
-    event: {
-      handler(event) {
-        if (event.name == "tagRemoved") {
-          var tags = this.tagsLocal.filter((item) => {
-            return item.id != event.data.id;
-          });
-          this.tagsLocal = tags;
-          this.removeSelectedRule(event.data.id);
-        }
-      },
-      deep: true,
-    },
-    tags: {
-      handler(value) {
-        this.tagsLocal = value;
-      },
-      deep: true,
-    },
-  },
-};
-</script>

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

@@ -1,22 +0,0 @@
-/**
- * Returns a depply cloned object without reference.
- * Copied from Vue MultiSelect and Vuex.
- * @type {Object}
- */
-const deepClone = function (obj) {
-  if (Array.isArray(obj)) {
-    return obj.map(deepClone)
-  } else if (obj && typeof obj === 'object') {
-    var cloned = {}
-    var keys = Object.keys(obj)
-    for (var i = 0, l = keys.length; i < l; i++) {
-      var key = keys[i]
-      cloned[key] = deepClone(obj[key])
-    }
-    return cloned
-  } else {
-    return obj
-  }
-}
-
-export default deepClone;