@nixweb/nixloc-ui 0.0.93 → 0.0.96

package/src/component/shared/query-builder/layouts/Bootstrap/BootstrapGroup.vue

@@ -0,0 +1,120 @@
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <div class="vqb-group card" :class="'depth-' + depth.toString()">
+    <div class="vqb-group-heading card-header" v-if="false">
+      <div class="match-type-container form-inline">
+        <label class="mr-2" for="vqb-match-type">
+          {{ labels.matchType }}
+        </label>
+
+        <select id="vqb-match-type" v-model="query.logicalOperator" class="form-control">
+          <option v-for="label in labels.matchTypes" :key="label.id" :value="label.id">
+            {{ label.label }}
+          </option>
+        </select>
+
+        <button
+          v-if="depth > 1"
+          type="button"
+          class="close ml-auto"
+          @click="remove"
+          v-html="labels.removeGroup"
+        ></button>
+      </div>
+    </div>
+
+    <div class="vqb-group-body card-body">
+      <div class="rule-actions form-inline">
+        <div class="div-custom">
+          <b-row>
+            <b-col sm="6">
+              <CustomSelect :options="rules" class="select" v-model="selectedRule" />
+            </b-col>
+            <b-col sm="4">
+              <button type="button" class="btn btn-secondary mr-2" @click="addRule">
+                {{ labels.addRule }}
+              </button>
+            </b-col>
+          </b-row>
+
+          <!--   <button
+            v-if="depth < maxDepth"
+            type="button"
+            class="btn btn-secondary"
+            @click="addGroup"
+          >
+            {{ labels.addGroup }}
+          </button> -->
+        </div>
+      </div>
+
+      <query-builder-children v-bind="$props" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CustomSelect from "../../components/CustomSelect.vue";
+import QueryBuilderGroup from "../../components/QueryBuilderGroup";
+import QueryBuilderRule from "./BootstrapRule.vue";
+
+export default {
+  name: "QueryBuilderGroup",
+
+  components: {
+    // eslint-disable-next-line vue/no-unused-components
+    QueryBuilderRule: QueryBuilderRule,
+    CustomSelect,
+  },
+
+  extends: QueryBuilderGroup,
+};
+</script>
+
+<style>
+.titulo-option {
+  padding: 10px;
+}
+
+.div-custom {
+  width: 100%;
+}
+
+.vue-query-builder .vqb-group .rule-actions {
+  margin-bottom: 20px;
+}
+
+.vue-query-builder .vqb-rule {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  background-color: #f5f5f5;
+  border-color: #ddd;
+  padding: 15px;
+}
+
+.vue-query-builder .vqb-group.depth-1 .vqb-rule,
+.vue-query-builder .vqb-group.depth-2 {
+  border-left: 2px solid #8bc34a;
+}
+
+.vue-query-builder .vqb-group.depth-2 .vqb-rule,
+.vue-query-builder .vqb-group.depth-3 {
+  border-left: 2px solid #00bcd4;
+}
+
+.vue-query-builder .vqb-group.depth-3 .vqb-rule,
+.vue-query-builder .vqb-group.depth-4 {
+  border-left: 2px solid #ff5722;
+}
+
+.vue-query-builder .close {
+  opacity: 1;
+  color: rgb(150, 150, 150);
+}
+
+@media (min-width: 768px) {
+  .vue-query-builder .vqb-rule.form-inline .form-group {
+    display: block;
+  }
+}
+</style>

package/src/component/shared/query-builder/layouts/Bootstrap/BootstrapRule.vue

@@ -0,0 +1,171 @@
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <div class="vqb-rule card">
+    <div class="form-inline">
+      <label :class="rule.classeCss" class="mr-5">
+        <i :class="rule.icone"></i>
+        <span style="margin-left: 10px">{{ rule.label }} </span>
+      </label>
+
+      <!-- List of operands (optional) -->
+      <select
+        v-if="typeof rule.operands !== 'undefined'"
+        v-model="query.operand"
+        class="form-control mr-2"
+      >
+        <option v-for="operand in rule.operands" :key="operand">
+          {{ operand }}
+        </option>
+      </select>
+
+      <!-- List of operators (e.g. =, !=, >, <) -->
+      <select
+        v-if="typeof rule.operators !== 'undefined' && rule.operators.length > 1"
+        v-model="query.operator"
+        class="form-control mr-2"
+      >
+        <option v-for="operator in rule.operators" :key="operator" :value="operator">
+          {{ operator }}
+        </option>
+      </select>
+
+      <!-- Basic text input -->
+      <input
+        v-if="rule.inputType === 'text'"
+        v-model="query.value"
+        class="form-control"
+        type="text"
+        :placeholder="labels.textInputPlaceholder"
+      />
+
+      <!-- Basic number input -->
+      <input
+        v-if="rule.inputType === 'number'"
+        v-model="query.value"
+        class="form-control"
+        type="number"
+      />
+
+      <!-- Datepicker -->
+      <input
+        v-if="rule.inputType === 'date'"
+        v-model="query.value"
+        class="form-control"
+        type="date"
+      />
+
+      <!-- Custom component input -->
+      <div v-if="isCustomComponent" class="vqb-custom-component-wrap">
+        <DateTime
+          v-if="rule.component == 'datetime'"
+          :format="rule.props.format"
+          :type="rule.props.type"
+          :range="rule.props.range"
+          :value="query.value"
+          @input="updateQuery"
+        />
+      </div>
+
+      <!-- Checkbox input -->
+      <template v-if="rule.inputType === 'checkbox'">
+        <div
+          v-for="choice in rule.choices"
+          :key="choice.value"
+          class="form-check form-check-inline"
+        >
+          <input
+            :id="'depth' + depth + '-' + rule.id + '-' + index + '-' + choice.value"
+            v-model="query.value"
+            type="checkbox"
+            :value="choice.value"
+            class="form-check-input"
+          />
+          <label
+            class="form-check-label"
+            :for="'depth' + depth + '-' + rule.id + '-' + index + '-' + choice.value"
+          >
+            {{ choice.label }}
+          </label>
+        </div>
+      </template>
+
+      <!-- Radio input -->
+      <template v-if="rule.inputType === 'radio'">
+        <div
+          v-for="choice in rule.choices"
+          :key="choice.value"
+          class="form-check form-check-inline"
+        >
+          <input
+            :id="'depth' + depth + '-' + rule.id + '-' + index + '-' + choice.value"
+            v-model="query.value"
+            :name="'depth' + depth + '-' + rule.id + '-' + index"
+            type="radio"
+            :value="choice.value"
+            class="form-check-input"
+          />
+          <label
+            class="form-check-label"
+            :for="'depth' + depth + '-' + rule.id + '-' + index + '-' + choice.value"
+          >
+            {{ choice.label }}
+          </label>
+        </div>
+      </template>
+
+      <!-- Select without groups -->
+      <select
+        v-if="rule.inputType === 'select' && !hasOptionGroups"
+        v-model="query.value"
+        class="form-control"
+        :multiple="rule.type === 'multi-select'"
+      >
+        <option v-for="option in selectOptions" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+
+      <!-- Select with groups -->
+      <select
+        v-if="rule.inputType === 'select' && hasOptionGroups"
+        v-model="query.value"
+        class="form-control"
+        :multiple="rule.type === 'multi-select'"
+      >
+        <optgroup
+          v-for="(option, option_key) in selectOptions"
+          :key="option_key"
+          :label="option_key"
+        >
+          <option
+            v-for="sub_option in option"
+            :key="sub_option.value"
+            :value="sub_option.value"
+          >
+            {{ sub_option.label }}
+          </option>
+        </optgroup>
+      </select>
+
+      <!-- Remove rule button -->
+      <button
+        type="button"
+        class="close ml-auto"
+        @click="remove"
+        v-html="labels.removeRule"
+      ></button>
+    </div>
+  </div>
+</template>
+
+<script>
+import QueryBuilderRule from "../../components/QueryBuilderRule";
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+
+export default {
+  extends: QueryBuilderRule,
+  components: {
+    DateTime,
+  },
+};
+</script>

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

@@ -0,0 +1,81 @@
+import Vue from 'vue'
+import VueQueryBuilder from '@nixweb/nixloc-ui/src/component/shared/QueryBuilder/VueQueryBuilder.vue'
+
+Vue.config.productionTip = false
+
+let rules = [
+    {
+      type: "text",
+      id: "first-name",
+      label: "First Name",
+    },
+    {
+      type: "text",
+      id: "last-name",
+      label: "Last Name",
+    },
+    {
+      type: "radio",
+      id: "plan-type",
+      label: "Plan Type",
+      choices: [
+        {label: "Standard", value: "standard"},
+        {label: "Premium", value: "premium"}
+      ]
+    },
+    {
+      type: "checkbox",
+      id: "sizes",
+      label: "Sizes",
+      choices: [
+        {label: "Small", value: "small"},
+        {label: "Medium", value: "medium"},
+        {label: "Large", value: "large"}
+      ]
+    },
+    {
+      type: "text",
+      id: "date",
+      inputType:"date",
+      label: "Date",
+      operands: ['Start Date', 'End Date']
+    },
+    {
+      type: "select",
+      id: 'select',
+      label: 'Color',
+      operators: ['=', '<>'],
+      choices: [
+        {label: "red", value: 'Red'},
+        {label: "orange", value: 'Orange'},
+        {label: "yellow", value: 'Yellow'},
+        {label: "green", value: 'Green'},
+        {label: "blue", value: 'Blue'},
+        {label: "indigo", value: 'Indigo'},
+        {label: "violet", value: 'Violet'},
+      ]
+    },
+  ];
+
+new Vue({
+  el: '#app',
+
+  components: { VueQueryBuilder },
+
+  data: {
+    rules: rules,
+    output: {},
+  },
+
+  computed: {
+    outputFormatted: function() {
+      return JSON.stringify(this.output, null, 2);
+    }
+  },
+
+  methods: {
+    updateQuery: function(value){
+      this.output = value;
+    }
+  }
+});

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;

package/src/component/template/ModeloRelatorioListaView.vue

@@ -9,44 +9,49 @@
     >
       <div slot="conteudo-principal">
         <b-row>
-          <!--   <b-col xs="12" sm="12" md="12" lg="5" xl="5">
-            <div><i class="fas fa-star icone-favorito"></i> Favoritos</div>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="6" v-if="todos.salvo.length > 0">
+            <div><i class="fas fa-file-alt icone-salvo"></i></i> Personalizado</div>
             <hr />
-            <div class="div-moldura" v-for="relatorio in favoritos">
+            <div class="div-moldura" v-for="relatorio in todos.salvo">
               <div>
                 <Moldura :bordaArredondada="12">
                   <b-row>
-                    <b-col sm="10" @click="navegarPara(relatorio.nomeRota)">
+                    <b-col sm="1">
+                      <i class="fas fa-file-alt icone-report"></i>
+                    </b-col>
+                    <b-col sm="10" @click="navegarPara(relatorio)">
                       <div>{{ relatorio.nome }}</div>
                     </b-col>
-                    <b-col sm="2">
-                      <div class="text-right">
-                        <i class="fas fa-times-circle icone-remover"></i>
-                      </div>
+                    <b-col sm="1">
+                      <Confirmacao
+                        titulo="Deseja excluir?"
+                        tipo="perigo"
+                        :dados="relatorio"
+                        :confirmado="excluir"
+                      >
+                        <div class="text-right">
+                          <i class="fas fa-times-circle icone-remover"></i>
+                        </div>
+                      </Confirmacao>
                     </b-col>
                   </b-row>
                 </Moldura>
               </div>
             </div>
-          </b-col> -->
-          <b-col xs="12" sm="12" md="12" lg="5" xl="5">
-            <div><i class="fas fa-list-ul"></i> Todos</div>
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="6" xl="6">
+            <div><i class="fas fa-file-chart-line"></i> Padrão</div>
             <hr />
-            <div class="div-moldura" v-for="relatorio in todos">
+            <div class="div-moldura" v-for="relatorio in todos.padrao">
               <div>
                 <Moldura :bordaArredondada="12">
                   <b-row>
                     <b-col sm="1">
                       <i class="fas fa-file-alt icone-report"></i>
                     </b-col>
-                    <b-col sm="10" @click="navegarPara(relatorio.nomeRota)">
+                    <b-col sm="11" @click="navegarPara(relatorio)">
                       <div class="lado-a-lado">{{ relatorio.nome }}</div>
                     </b-col>
-                    <!--  <b-col sm="2">
-                      <div class="text-right">
-                        <i class="fas fa-plus-circle icone-favorito"></i>
-                      </div>
-                    </b-col>-->
                   </b-row>
                 </Moldura>
               </div>
@@ -61,52 +66,115 @@
 <script>
 import Painel from "@nixweb/nixloc-ui/src/component/layout/Painel.vue";
 import Moldura from "@nixweb/nixloc-ui/src/component/layout/Moldura";
+import Confirmacao from "@nixweb/nixloc-ui/src/component/shared/Confirmacao";
 
 import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
 
 export default {
   name: "ModeloRelatorioListaView",
-  components: { Painel, Moldura },
+  components: { Painel, Moldura, Confirmacao },
   props: {
     painel: Object,
     relatorios: Object,
   },
   data() {
     return {
-      todos: [],
+      todos: {},
+      urlObterTodos: "/api/v1/shared/relatorio/obter-todos",
+      urlRemover: "/api/v1/shared/relatorio/remover",
     };
   },
   computed: {
     ...mapState("generic", ["pesquisa", "buscouPesquisa", "limpouPesquisa"]),
   },
   mounted() {
-    this.removeCarregando(["painel"]);
-    this.todos = this.relatorios;
+    this.obterTodos();
+    this.todos = JSON.parse(JSON.stringify(this.relatorios)); // remove observable
   },
   methods: {
     ...mapMutations("generic", ["removeCarregando"]),
-    navegarPara(nomeRota) {
+    ...mapMutations("relatorio", [
+      "atualizaFiltroSelecionado",
+      "atualizaCampoOrdenado",
+      "atualizaOpcoesValorInicial",
+    ]),
+    ...mapActions("generic", ["getApi", "deleteAllApi"]),
+    obterTodos() {
+      let obj = { modulo: this.painel.modulo };
+      let params = { url: this.urlObterTodos, obj: obj };
+      this.getApi(params).then((response) => {
+        this.todos.salvo = [];
+        let self = this;
+        response.conteudo.dados.forEach((item) => {
+          const consulta = JSON.parse(item.consulta);
+          let obj = {
+            id: item.id,
+            nome: item.nome,
+            nomeRota: consulta.nomeRota,
+            filtro: consulta.filtro,
+            campo: consulta.campo,
+            ordenacao: consulta.ordenacao,
+          };
+          self.todos.salvo.push(obj);
+        });
+        this.removeCarregando(["painel"]);
+      });
+    },
+    navegarPara(relatorio) {
+      if (relatorio.filtro) {
+        let filtroSelecionado = { logicalOperator: "all", children: relatorio.filtro };
+        this.atualizaOpcoesValorInicial(relatorio.campo);
+        this.atualizaCampoOrdenado(relatorio.ordenacao);
+        this.atualizaFiltroSelecionado(filtroSelecionado);
+      } else {
+        this.atualizaOpcoesValorInicial([]);
+      }
       this.$router.push({
-        name: nomeRota,
+        name: relatorio.nomeRota,
+      });
+    },
+    excluir(dados) {
+      let selecionados = [];
+      selecionados.push(dados.id);
+
+      let params = {
+        url: this.urlRemover,
+        selecionados: selecionados,
+      };
+
+      this.deleteAllApi(params).then((reponse) => {
+        if (reponse.sucesso) this.obterTodos();
       });
     },
   },
   watch: {
     buscouPesquisa: function () {
-      let filtro = [];
+      let padrao = [];
+      let salvo = [];
       let self = this;
       setTimeout(function () {
-        self.todos.forEach(function (item) {
+        self.todos.padrao.forEach(function (item) {
+          if (self.pesquisa.filtro.conteudo == "igual") {
+            if (item.nome == self.pesquisa.conteudo) padrao.push(item);
+          }
+
+          if (self.pesquisa.filtro.conteudo == "contem") {
+            if (item.nome.includes(self.pesquisa.conteudo)) padrao.push(item);
+          }
+        });
+
+        self.todos.salvo.forEach(function (item) {
           if (self.pesquisa.filtro.conteudo == "igual") {
-            if (item.nome == self.pesquisa.conteudo) filtro.push(item);
+            if (item.nome == self.pesquisa.conteudo) salvo.push(item);
           }
 
           if (self.pesquisa.filtro.conteudo == "contem") {
-            if (item.nome.includes(self.pesquisa.conteudo)) filtro.push(item);
+            if (item.nome.includes(self.pesquisa.conteudo)) salvo.push(item);
           }
         });
 
-        self.todos = filtro;
+        self.todos.salvo = salvo;
+        self.todos.padrao = padrao;
 
         self.removeCarregando(["pesquisar", "limpar"]);
       }, 300);
@@ -115,6 +183,7 @@ export default {
       let self = this;
       setTimeout(function () {
         self.todos = self.relatorios;
+        self.obterTodos();
         self.removeCarregando(["pesquisar", "limpar"]);
       }, 300);
     },
@@ -123,8 +192,8 @@ export default {
 </script>
 
 <style scoped>
-.icone-favorito {
-  color: orange;
+.icone-salvo {
+  color: #94aa2a;
 }
 
 .icone-remover {
@@ -132,7 +201,7 @@ export default {
 }
 
 .icone-report {
-  font-size: 30px;
+  font-size: 25px;
   opacity: 0.2;
   color: #577696;
 }