@nixweb/nixloc-ui 0.0.121 → 0.0.124

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

@@ -1,164 +1,69 @@
 <template>
   <div class="vue-query-builder">
     <slot v-bind="vqbProps">
-      <query-builder-group v-bind="vqbProps" :query.sync="query" />
+      <AddRule v-bind="vqbProps" />
     </slot>
   </div>
 </template>
 
 <script>
-/* eslint-disable vue/require-default-prop */
-import QueryBuilderGroup from "./layouts/Bootstrap/BootstrapGroup.vue";
-import deepClone from "./utilities.js";
-
-var defaultLabels = {
-  matchType: "Construtor de Consulta",
-  matchTypes: [
-    { id: "all", label: "All" },
-    { id: "any", label: "Any" },
-  ],
-  addRule: "+ Adicionar",
-  removeRule: "&times;",
-  addGroup: "+ Adicionar",
-  removeGroup: "&times;",
-  textInputPlaceholder: "Valor",
-};
+import AddRule from "./AddRule.vue";
 
 export default {
-  name: "VueQueryBuilder",
-
+  name: "QueryBuilder",
   components: {
-    QueryBuilderGroup,
+    AddRule,
   },
-
   props: {
     rules: Array,
-    labels: {
-      type: Object,
-      default() {
-        return defaultLabels;
-      },
-    },
-    maxDepth: {
-      type: Number,
-      default: 3,
-      validator: function (value) {
-        return value >= 1;
-      },
-    },
-    value: Object,
   },
-
   data() {
     return {
-      query: {
-        logicalOperator: this.labels.matchTypes[0].id,
-        children: [],
-      },
-      ruleTypes: {
+      query: {},
+      typeRule: {
         text: {
-          operators: ["igual", "diferente", "contem"],
-          inputType: "text",
           id: "text-field",
+          operators: ["igual", "diferente", "contem"],
+          fieldType: "text",
         },
         numeric: {
-          operators: ["=", "!=", "<", "<=", ">", ">="],
-          inputType: "number",
           id: "number-field",
-        },
-        custom: {
-          operators: [],
-          inputType: "text",
-          id: "custom-field",
+          operators: ["=", "!=", "<", "<=", ">", ">="],
+          fieldType: "number",
         },
         radio: {
-          operators: [],
-          choices: [],
-          inputType: "radio",
           id: "radio-field",
+          operators: [],
+          options: [],
+          fieldType: "radio",
         },
         checkbox: {
-          operators: ["checkbox"],
-          choices: [],
-          inputType: "checkbox",
           id: "checkbox-field",
-        },
-        select: {
-          operators: [],
-          choices: [],
-          inputType: "select",
-          id: "select-field",
-        },
-        "multi-select": {
-          operators: ["="],
-          choices: [],
-          inputType: "select",
-          id: "multi-select-field",
+          operators: ["checkbox"],
+          options: [],
+          fieldType: "checkbox",
         },
       },
     };
   },
-
   computed: {
-    mergedLabels() {
-      return Object.assign({}, defaultLabels, this.labels);
-    },
-
-    mergedRules() {
-      var mergedRules = [];
-      var vm = this;
-
-      vm.rules.forEach(function (rule) {
-        if (typeof vm.ruleTypes[rule.type] !== "undefined") {
-          mergedRules.push(Object.assign({}, vm.ruleTypes[rule.type], rule));
+    mergeRules() {
+      var mergeRules = [];
+      var self = this;
+      self.rules.forEach(function (rule) {
+        if (typeof self.typeRule[rule.fieldType] !== "undefined") {
+          mergeRules.push(Object.assign({}, self.typeRule[rule.fieldType], rule));
         } else {
-          mergedRules.push(rule);
+          mergeRules.push(rule);
         }
       });
-
-      return mergedRules;
+      return mergeRules;
     },
-
     vqbProps() {
       return {
-        index: 0,
-        depth: 1,
-        maxDepth: this.maxDepth,
-        ruleTypes: this.ruleTypes,
-        rules: this.mergedRules,
-        labels: this.mergedLabels,
+        rules: this.mergeRules,
       };
     },
   },
-
-  mounted() {
-    this.$watch(
-      "query",
-      (newQuery) => {
-        if (JSON.stringify(newQuery) !== JSON.stringify(this.value)) {
-          this.$emit("input", deepClone(newQuery));
-        }
-      },
-      {
-        deep: true,
-      }
-    );
-
-    this.$watch(
-      "value",
-      (newValue) => {
-        if (JSON.stringify(newValue) !== JSON.stringify(this.query)) {
-          this.query = deepClone(newValue);
-        }
-      },
-      {
-        deep: true,
-      }
-    );
-
-    if (typeof this.$options.propsData.value !== "undefined") {
-      this.query = Object.assign(this.query, this.$options.propsData.value);
-    }
-  },
 };
 </script>

package/src/component/shared/query-builder/{Filtro.vue → Rules.vue}

@@ -1,33 +1,28 @@
 <template>
   <div>
-    <BarraRolagem :alturaMinima="450" :alturaMaxima="600">
-      <QueryBuilder :rules="relatorio.filtro" v-model="filtroSelecionado" />
-    </BarraRolagem>
+    <ScrollBar :minHeight="450" :maxHeight="600">
+      <QueryBuilder :rules="rules" />
+    </ScrollBar>
   </div>
 </template>
 
 <script>
 import QueryBuilder from "./QueryBuilder.vue";
-import BarraRolagem from "@nixweb/nixloc-ui/src/component/layout/BarraRolagem.vue";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
 
-import { mapMutations, mapState } from "vuex";
+import { mapMutations } from "vuex";
 
 export default {
-  name: "Filtro",
-  components: { BarraRolagem, QueryBuilder },
-  computed: {
-    ...mapState("relatorio", ["relatorio"]),
-    filtroSelecionado: {
-      get() {
-        return this.$store.state.relatorio.filtroSelecionado;
-      },
-      set(value) {
-        this.atualizaFiltroSelecionado(value);
-      },
-    },
+  name: "Rules",
+  components: { ScrollBar, QueryBuilder },
+  props: {
+    rules: Array,
+  },
+  mounted() {
+    this.addRulesReport(this.rules);
   },
   methods: {
-    ...mapMutations("relatorio", ["atualizaFiltroSelecionado"]),
+    ...mapMutations("report", ["addRulesReport"]),
   },
 };
 </script>

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

@@ -0,0 +1,96 @@
+<template>
+  <div class="escolher-filter" :tabindex="tabindex" @blur="abrir = false">
+    <div class="selecionado" :class="{ abrir: abrir }" @click="abrir = !abrir">
+      {{ selecionado }}
+    </div>
+    <div class="items" :class="{ hide: !abrir }">
+      <div v-for="(options, i) of options" :key="i">
+        <div @click="select(options)">
+          <span :class="options.classCss">
+            <i :class="options.icon"></i>
+            <span> {{ options.title }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["options", "tabindex", "value"],
+  data() {
+    return {
+      selecionado: "Selecione os filtros",
+      abrir: false,
+    };
+  },
+  mounted() {
+    this.$emit("input", this.selecionado);
+  },
+  methods: {
+    select(options) {
+      this.$emit("input", options);
+      this.selecionado = options.title;
+      this.abrir = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.escolher-filter {
+  position: relative;
+  width: 100%;
+  text-align: left;
+  outline: none;
+  height: 40px;
+  line-height: 40px;
+  z-index: 1000;
+}
+
+.escolher-filter .selecionado {
+  background-color: white;
+  border-bottom: 1px solid #dbdee0;
+  color: black;
+  padding-left: 1em;
+  cursor: pointer;
+  user-select: none;
+}
+
+.escolher-filter .selecionado:after {
+  position: absolute;
+  content: "";
+  top: 22px;
+  right: 1em;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-color: black transparent transparent transparent;
+}
+
+.escolher-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;
+}
+
+.escolher-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,10 +1,10 @@
 <template>
   <div>
-    <div class="lado-a-lado div-tag" v-for="tag in tags" :key="tag.id">
+    <div class="side-by-side div-tag" v-for="tag in tags" :key="tag.id">
       <Tag
-        :nomeEvento="nomeEvento"
-        :dadosEvento="tag"
-        :titulo="tag.titulo"
+        :eventName="eventName"
+        :eventData="tag"
+        :title="tag.title"
         :valor="tag.valor"
       />
     </div>
@@ -20,25 +20,25 @@ export default {
   name: "Tags",
   components: { Tag },
   props: {
-    nomeEvento: String,
+    eventName: String,
   },
 
   computed: {
-    ...mapGetters("relatorio", ["tags"]),
-    ...mapGetters("generic", ["mostrarModal", "evento"]),
+    ...mapGetters("report", ["tags"]),
+    ...mapGetters("generic", ["showModal", "event"]),
   },
   methods: {
-    ...mapMutations("relatorio", ["removeFiltroSelecionado"]),
+    ...mapMutations("report", ["removeFiltroSelecionado"]),
   },
   watch: {
-    evento: {
-      handler(evento) {
-        if (evento.nome == "tagRemovida") {
-          var tags = this.tags.filter((x) => {
-            return x.id != evento.dados.id;
+    event: {
+      handler(event) {
+        if (event.nome == "tagRemovida") {
+          var tags = this.tags.filter((item) => {
+            return item.id != event.data.id;
           });
           this.tags = tags;
-          this.removeFiltroSelecionado(evento.dados.id);
+          this.removeFiltroSelecionado(event.data.id);
         }
       },
       deep: true,

package/src/component/shared/query-builder/{Rodape.vue → Totalization.vue}

@@ -1,37 +1,37 @@
 <template>
   <div>
-    <Moldura>
-      <div v-for="item in dados" :key="item.titulo">
-        <div :class="item.classeCss">
+    <Molded>
+      <div v-for="item in data" :key="item.title">
+        <div :class="item.classCss">
           <b-row>
             <b-col class="text-right" sm="10">
-              <span class="titulo">{{ item.titulo }}</span>
+              <span class="title">{{ item.title }}</span>
             </b-col>
             <b-col class="text-right" sm="2">
-              <span class="titulo">{{ item.valor }}</span>
+              <span class="title">{{ item.valor }}</span>
             </b-col>
           </b-row>
         </div>
       </div>
-    </Moldura>
+    </Molded>
   </div>
 </template>
 <script>
-import Moldura from "@nixweb/nixloc-ui/src/component/layout/Moldura";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
 
 export default {
   name: "RodapeRelatorio",
   components: {
-    Moldura,
+    Molded,
   },
   props: {
-    dados: Array,
+    data: Array,
   },
 };
 </script>
 
 <style scoped>
-.titulo {
+.title {
   font-size: 15px;
   font-weight: 400;
 }

package/src/component/template/AddEditReport.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <b-row>
+      <b-col sm="12"
+        ><InputText
+          title="Nome"
+          field="name"
+          :formName="formName"
+          :required="true"
+          :maxLength="40"
+          v-model="report.name"
+          :markFormDirty="false"
+        />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col sm="12">
+        <div class="text-right">
+          <Button
+            key="save"
+            type="success"
+            title="Salvar"
+            :disabled="!isFormValid(formName)"
+            classIcon="fas fa-save"
+            size="medium"
+            :clicked="saveReport"
+          />
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Report from "@nixweb/nixloc-ui/src/component/template/model/Report.js";
+
+import { mapGetters, mapState, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "AddEditReport",
+  components: { Button, InputText },
+  props: {
+    module: String,
+  },
+  data() {
+    return {
+      formName: "reportAddEditView",
+      report: new Report(),
+      urlAdicionar: "/api/v1/shared/report/adicionar",
+      urlModificar: "/api/v1/shared/report/modificar",
+    };
+  },
+  computed: {
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapGetters("generic", ["event"]),
+    ...mapGetters("report", ["headerTable", "filtroSelecionado"]),
+    ...mapState("report", ["selectedField", "campoOrdenado"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "putApi"]),
+    ...mapMutations("generic", ["removeLoading", "removeEvent", "hideModal"]),
+    ...mapMutations("validation", ["resetValidation"]),
+    saveReport() {
+      var personalizado = this.report.id ? "" : "Personalizado";
+      const query = {
+        routeName: `${this.$route.name}${personalizado}`,
+        field: this.selectedField,
+        ordenacao: this.campoOrdenado,
+        filter: this.filtroSelecionado.children,
+      };
+      let obj = {
+        id: this.report.id,
+        name: this.report.name,
+        module: this.module,
+        query: JSON.stringify(query),
+      };
+      if (this.report.id) {
+        let params = { url: this.urlModificar, obj: obj };
+        this.putApi(params).then((response) => {
+          if (response.success) this.hideModal();
+          this.removeLoading(["save"]);
+        });
+      } else {
+        let params = { url: this.urlAdicionar, obj: obj };
+        this.postApi(params).then((response) => {
+          if (response.success) this.hideModal();
+          this.removeLoading(["save"]);
+        });
+      }
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "changeReport") {
+          this.report.id = this.$route.params.id;
+          if (this.report.id) this.report.name = this.$route.params.name;
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>