@nixweb/nixloc-ui 0.0.127 → 0.0.128

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

@@ -1,62 +1,73 @@
-<template>
-  <div class="component">
-    <component
-      :is="component()"
-      v-for="(rule, index) in selectedRules"
-      :key="index"
-      :rule="rule"
-    />
-    <div v-if="selectedRules.length == 0">
-      <Alert type="info"> Selecione o filtro desejado e clique em +Adicionar</Alert>
-    </div>
-  </div>
-</template>
-
-<script>
-import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
-
-import { mapState, mapMutations } from "vuex";
-
-export default {
-  components: {
-    Alert,
-  },
-  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 {
-  min-height: 380px;
-  max-height: 380px;
-  overflow-y: visible;
-  overflow-x: hidden;
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-top: 10px;
-}
-</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"
+        />
+      </draggable>
+      <br />
+      <div v-if="selectedRules.length == 0">
+        <Alert type="info"> Selecione o filtro desejado e clique em +Adicionar</Alert>
+      </div>
+    </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 {
+  min-height: 380px;
+  max-height: 380px;
+  overflow-y: visible;
+  overflow-x: hidden;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-top: 10px;
+}
+</style>

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

@@ -1,69 +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>
+<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/utilities.js

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