@nixweb/nixloc-ui 0.0.91 → 0.0.94

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

@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <Painel
+      :modulo="painel.modulo"
+      :titulo="painel.titulo"
+      :mostrarFiltroVertical="painel.mostrarFiltroVertical"
+      :mostrarPesquisa="painel.mostrarPesquisa"
+      :mostrarBotoes="painel.mostrarBotoes"
+    >
+      <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>
+            <hr />
+            <div class="div-moldura" v-for="relatorio in favoritos">
+              <div>
+                <Moldura :bordaArredondada="12">
+                  <b-row>
+                    <b-col sm="10" @click="navegarPara(relatorio.nomeRota)">
+                      <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>
+                  </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>
+            <hr />
+            <div class="div-moldura" v-for="relatorio in todos">
+              <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)">
+                      <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>
+            </div>
+          </b-col>
+        </b-row>
+      </div>
+    </Painel>
+  </div>
+</template>
+
+<script>
+import Painel from "@nixweb/nixloc-ui/src/component/layout/Painel.vue";
+import Moldura from "@nixweb/nixloc-ui/src/component/layout/Moldura";
+
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ModeloRelatorioListaView",
+  components: { Painel, Moldura },
+  props: {
+    painel: Object,
+    relatorios: Object,
+  },
+  data() {
+    return {
+      todos: [],
+    };
+  },
+  computed: {
+    ...mapState("generic", ["pesquisa", "buscouPesquisa", "limpouPesquisa"]),
+  },
+  mounted() {
+    this.removeCarregando(["painel"]);
+    this.todos = this.relatorios;
+  },
+  methods: {
+    ...mapMutations("generic", ["removeCarregando"]),
+    navegarPara(nomeRota) {
+      this.$router.push({
+        name: nomeRota,
+      });
+    },
+  },
+  watch: {
+    buscouPesquisa: function () {
+      let filtro = [];
+      let self = this;
+      setTimeout(function () {
+        self.todos.forEach(function (item) {
+          if (self.pesquisa.filtro.conteudo == "igual") {
+            if (item.nome == self.pesquisa.conteudo) filtro.push(item);
+          }
+
+          if (self.pesquisa.filtro.conteudo == "contem") {
+            if (item.nome.includes(self.pesquisa.conteudo)) filtro.push(item);
+          }
+        });
+
+        self.todos = filtro;
+
+        self.removeCarregando(["pesquisar", "limpar"]);
+      }, 300);
+    },
+    limpouPesquisa: function () {
+      let self = this;
+      setTimeout(function () {
+        self.todos = self.relatorios;
+        self.removeCarregando(["pesquisar", "limpar"]);
+      }, 300);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.icone-favorito {
+  color: orange;
+}
+
+.icone-remover {
+  color: red;
+}
+
+.icone-report {
+  font-size: 30px;
+  opacity: 0.2;
+  color: #577696;
+}
+
+.div-moldura {
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+
+.div-moldura:hover {
+  background-color: #fafafc;
+}
+
+.descricao {
+  font-size: 13.5px;
+  color: rgb(117, 117, 117);
+}
+</style>