@nixweb/nixloc-ui 0.0.125 → 0.0.128

package/src/component/shared/VerticalFilter.vue

@@ -1,145 +1,97 @@
-<template>
-  <div>
-    <div
-      class="molded-button"
-      :class="{ fechado: !showFilter, aberto: showFilter }"
-      v-show="!showFilter"
-      @click="mouseOver"
-    >
-      <i class="fas fa-arrow-circle-left"></i>
-    </div>
-
-    <transition name="slide-fade">
-      <div
-        class="molded-button button-recolher"
-        v-show="showFilter"
-        @click="showFilter = false"
-      >
-        <i class="fas fa-arrow-circle-right"></i>
-      </div>
-    </transition>
-
-    <transition name="slide-fade">
-      <div class="molded" v-show="showFilter">
-        <div class="row">
-          <div class="col-4 c-title-filter">
-            <i class="fas fa-filter"></i>
-            <span class="espaco-icon">FILTRO</span>
-          </div>
-        </div>
-        <hr />
-        <b-row v-if="mostrarSelecioneTotal">
-          <b-col sm="6">
-            <Select
-              title="show"
-              field="show"
-              :required="false"
-              url="/api/v1/util/total-por-pagina"
-              v-model="totalPerPage"
-            />
-          </b-col>
-        </b-row>
-        <slot></slot>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-import Select from "../forms/Select";
-
-import { mapMutations } from "vuex";
-
-export default {
-  props: {
-    mostrarSelecioneTotal: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  components: { Select },
-  data() {
-    return {
-      showFilter: false,
-    };
-  },
-  computed: {
-    totalPerPage: {
-      get() {
-        return this.$store.state.generic.totalPerPage;
-      },
-      set(value) {
-        if (!value.content) value.content = 10;
-        this.atualizaTotalPorPagina(value);
-      },
-    },
-  },
-  methods: {
-    ...mapMutations("generic", ["atualizaTotalPorPagina"]),
-    mouseOver: function () {
-      this.showFilter = !this.showFilter;
-    },
-  },
-};
-</script>
-
-<style scoped>
-.molded {
-  background: white;
-  border-left: solid 1px #dbdee0;
-  font-size: 13px;
-  height: 100%;
-  width: 350px;
-  right: 0px;
-  padding: 10px;
-  position: fixed;
-  -webkit-box-shadow: 20px 20px 20px 20px rgba(124, 125, 129, 0.53);
-  box-shadow: 20px 20px 20px 20px rgba(124, 125, 129, 0.53);
-  z-index: 999;
-}
-
-.molded-button {
-  font-size: 18px;
-  background: #ffffff;
-  border: solid 1px #dbdfe9;
-  border-radius: 5px;
-  color: #577696;
-  height: 40px;
-  width: 80px;
-  line-height: 32px;
-  padding-top: 3px;
-  padding-right: 35px;
-  text-align: center;
-  position: fixed;
-  top: 160px;
-  cursor: pointer;
-  z-index: 999;
-}
-
-.button-recolher {
-  padding-left: 12px;
-  padding-right: 418px;
-  right: -38px;
-}
-
-.aberto {
-  right: 365px;
-}
-
-.fechado {
-  right: -38px;
-  color: #577696;
-}
-
-.slide-fade-enter-active {
-  transition: all 0.2s ease;
-}
-.slide-fade-leave-active {
-  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
-}
-.slide-fade-enter,
-.slide-fade-leave-to {
-  transform: translateX(200px);
-  opacity: 0;
-}
-</style>
+<template>
+  <div>
+    <div
+      class="molded-button"
+      :class="{ fechado: !showFilter, aberto: showFilter }"
+      v-show="!showFilter"
+    >
+      <i class="fas fa-arrow-circle-left"></i>
+    </div>
+
+    <transition name="slide-fade">
+      <div
+        class="molded-button button-recolher"
+        v-show="showFilter"
+        @click="showFilter = false"
+      >
+        <i class="fas fa-arrow-circle-right"></i>
+      </div>
+    </transition>
+
+    <transition name="slide-fade"> </transition>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  components: {},
+  data() {
+    return {
+      showFilter: false,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.molded {
+  background: white;
+  border-left: solid 1px #dbdee0;
+  font-size: 13px;
+  height: 100%;
+  width: 350px;
+  right: 0px;
+  padding: 10px;
+  position: fixed;
+  -webkit-box-shadow: 20px 20px 20px 20px rgba(124, 125, 129, 0.53);
+  box-shadow: 20px 20px 20px 20px rgba(124, 125, 129, 0.53);
+  z-index: 999;
+}
+
+.molded-button {
+  font-size: 18px;
+  background: #ffffff;
+  border: solid 1px #dbdfe9;
+  border-radius: 5px;
+  color: #577696;
+  height: 40px;
+  width: 80px;
+  line-height: 32px;
+  padding-top: 3px;
+  padding-right: 35px;
+  text-align: center;
+  position: fixed;
+  top: 160px;
+  cursor: pointer;
+  z-index: 999;
+}
+
+.button-recolher {
+  padding-left: 12px;
+  padding-right: 418px;
+  right: -38px;
+}
+
+.aberto {
+  right: 365px;
+}
+
+.fechado {
+  right: -38px;
+  color: #577696;
+}
+
+.slide-fade-enter-active {
+  transition: all 0.2s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter,
+.slide-fade-leave-to {
+  transform: translateX(200px);
+  opacity: 0;
+}
+</style>

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

@@ -1,187 +1,181 @@
-<template>
-  <div class="vqb-group card">
-    <div class="vqb-group-body card-body">
-      <div class="rule-actions form-inline">
-        <div class="div-custom">
-          <b-row>
-            <b-col sm="6">
-              <SelectRule :options="rules" class="select" v-model="selectedRule" />
-            </b-col>
-            <b-col sm="3">
-              <RadioGroup
-                :options="[
-                  { text: 'e', value: 'and' },
-                  { text: 'ou', value: 'or' },
-                ]"
-                v-model="andOr"
-              />
-            </b-col>
-            <b-col sm="3">
-              <button type="button" class="btn btn-secondary" @click="Add">
-                + Adicionar
-              </button>
-            </b-col>
-          </b-row>
-        </div>
-      </div>
-      <ListDynamicComponent />
-    </div>
-  </div>
-</template>
-
-<script>
-import SelectRule from "./SelectRule.vue";
-import DynamicComponent from "./DynamicComponent.vue";
-import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup.vue";
-import ListDynamicComponent from "@nixweb/nixloc-ui/src/component/shared/query-builder/ListDynamicComponent.vue";
-
-import deepClone from "./utilities.js";
-
-import { mapGetters, mapMutations } from "vuex";
-
-export default {
-  name: "AddRule",
-  components: {
-    SelectRule,
-    DynamicComponent,
-    RadioGroup,
-    ListDynamicComponent,
-  },
-  props: {
-    query: Object,
-    rules: Array,
-    index: Number,
-    maximaProfunidade: Number,
-    profundidade: Number,
-    titulos: Object,
-  },
-  data() {
-    return {
-      selectedRule: this.rules[0],
-      andOr: "or",
-      duplicidade: [],
-    };
-  },
-  computed: {
-    ...mapGetters("generic", ["event"]),
-  },
-  methods: {
-    ...mapMutations("generic", ["addNotifications"]),
-    ...mapMutations("report", ["addSelectedRules"]),
-    add() {
-      this.selectedRule.andOr = this.andOr;
-      this.addRule();
-    },
-    addRule() {
-      let consulta_atualizada = deepClone(this.query);
-      let obj = this.montaFiltro();
-
-      if (!this.jaExiste(obj.nome)) {
-        this.addSelectedRules(obj);
-        if (obj.naoPermitirDuplicidade) this.duplicidade.push(obj);
-      } else {
-        var erro = {
-          property: "ERRO QUERY BUILDER",
-          message: `Não é possível adicionar o filter ${obj.title} 2 vezes!`,
-        };
-        this.addNotifications([erro]);
-      }
-    },
-    montaFiltro() {
-      let obj = {
-        id: this.geraId(),
-        nome: this.selectedRule.nome,
-        title: this.selectedRule.title,
-        fieldType: this.selectedRule.fieldType,
-        type: this.selectedRule.type,
-        options: this.selectedRule.options,
-        props: this.selectedRule.props,
-        classCss: this.selectedRule.classCss,
-        icon: this.selectedRule.icon,
-        operators: this.selectedRule.operators,
-        operator: null,
-        andOr: this.selectedRule.andOr,
-        isRequired: this.selectedRule.isRequired,
-        naoPermitirDuplicidade: this.selectedRule.naoPermitirDuplicidade,
-        valor: null,
-      };
-      return obj;
-    },
-    geraId() {
-      return Math.random()
-        .toString(36)
-        .replace(/[^a-z]+/g, "")
-        .substr(0, 5);
-    },
-    jaExiste(key) {
-      var existe = this.duplicidade.find((item) => {
-        return item.nome === key;
-      });
-      if (existe) return true;
-      return false;
-    },
-  },
-  watch: {
-    event: {
-      handler(event) {
-        // Se a tag ou a rule que está selecionada foi removida, é necessário remove tambem do array "duplicidade" para liberar e adicionar novamente.
-        if (event.nome == "tagRemovida" || event.nome == "selectedRuleRemovida") {
-          var duplicidade = this.duplicidade.filter((item) => {
-            return item.id != event.data.id;
-          });
-          this.duplicidade = duplicidade;
-        }
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-
-<style>
-.title-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>
+<template>
+  <div>
+    <div class="vqb-group card">
+      <div class="vqb-group-body card-body">
+        <div class="rule-actions form-inline">
+          <div class="div-custom">
+            <b-row>
+              <b-col sm="6">
+                <SelectRule :options="rules" class="select" v-model="selectedRule" />
+              </b-col>
+              <b-col sm="3">
+                <RadioGroup
+                  :options="[
+                    { text: 'e', value: 'and' },
+                    { text: 'ou', value: 'or' },
+                  ]"
+                  v-model="andOr"
+                />
+              </b-col>
+              <b-col sm="3">
+                <button type="button" class="btn btn-secondary" @click="add">
+                  + Adicionar
+                </button>
+              </b-col>
+            </b-row>
+          </div>
+        </div>
+      </div>
+    </div>
+    <DynamicComponentList />
+  </div>
+</template>
+
+<script>
+import SelectRule from "./SelectRule.vue";
+import DynamicComponent from "./DynamicComponent.vue";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup.vue";
+import DynamicComponentList from "@nixweb/nixloc-ui/src/component/shared/query-builder/DynamicComponentList.vue";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "AddRule",
+  components: {
+    SelectRule,
+    DynamicComponent,
+    RadioGroup,
+    DynamicComponentList,
+  },
+  props: {
+    rules: Array,
+  },
+  data() {
+    return {
+      selectedRule: this.rules[0],
+      andOr: "or",
+      duplicate: [],
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["addNotifications"]),
+    ...mapMutations("report", ["addSelectedRules"]),
+    add() {
+      this.selectedRule.andOr = this.andOr;
+      this.addRule();
+    },
+    addRule() {
+      let obj = this.mountObject();
+
+      if (!this.verifyIfExist(obj.name)) {
+        this.addSelectedRules(obj);
+        if (obj.notDuplicate) this.duplicate.push(obj);
+      } else {
+        var error = {
+          property: "ERRO QUERY BUILDER",
+          message: `Não é possível adicionar o filter ${obj.title} 2 vezes!`,
+        };
+        this.addNotifications([error]);
+      }
+    },
+    mountObject() {
+      let obj = {
+        id: this.generateId(),
+        name: this.selectedRule.name,
+        title: this.selectedRule.title,
+        typeField: this.selectedRule.typeField,
+        type: this.selectedRule.type,
+        options: this.selectedRule.options,
+        props: this.selectedRule.props,
+        classCss: this.selectedRule.classCss,
+        icon: this.selectedRule.icon,
+        operators: this.selectedRule.operators,
+        operator: null,
+        andOr: this.selectedRule.andOr,
+        isRequired: this.selectedRule.isRequired,
+        notDuplicate: this.selectedRule.notDuplicate,
+        value: null,
+      };
+      return obj;
+    },
+    generateId() {
+      return Math.random()
+        .toString(36)
+        .replace(/[^a-z]+/g, "")
+        .substr(0, 5);
+    },
+    verifyIfExist(name) {
+      var hasRule = this.duplicate.find((rule) => {
+        return rule.name === name;
+      });
+      if (hasRule) return true;
+      return false;
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        // se a tag ou a rule que está selecionada foi removida, é necessário remove tambem do array "duplicate" para liberar e adicionar novamente.
+        if (event.name == "tagRemoved" || event.name == "selectedRuleRemoved") {
+          var duplicate = this.duplicate.filter((item) => {
+            return item.id != event.data.id;
+          });
+          this.duplicate = duplicate;
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style>
+.title-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>