@nixweb/nixloc-ui 1.16.0 → 1.19.0

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

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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+/**
+ * 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;