@nixweb/nixloc-ui 1.17.0 → 1.19.0

package/@nixweb/nixloc-ui/src/component/shared/query-builder/DynamicComponent.vue

@@ -1,161 +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>
+<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/@nixweb/nixloc-ui/src/component/shared/query-builder/DynamicComponentList.vue

@@ -1,70 +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>
+<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/@nixweb/nixloc-ui/src/component/shared/query-builder/Fields.vue

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