@nixweb/nixloc-ui 0.0.124 → 0.0.127

package/src/component/shared/Search.vue

@@ -1,7 +1,7 @@
 <template>
   <b-row>
     <b-col xs="12" sm="12" md="12" lg="7" xl="6">
-      <div class="margem">
+      <div class="margin">
         <div class="molded">
           <b-row>
             <b-col sm="9">
@@ -9,8 +9,8 @@
                 type="text"
                 name="search"
                 placeholder="Pesquisar ..."
-                @keyup="verificaLimpaPesquisa()"
-                @keyup.enter.prevent="buscaPesquisa()"
+                @keyup="verifyCleanSearch()"
+                @keyup.enter.prevent="executeSearch()"
                 v-model="search.content"
             /></b-col>
             <b-col sm="3">
@@ -18,12 +18,12 @@
                 <SelectStatic
                   fieldTarget="filter"
                   :onlyQuery="true"
-                  :initialValue="{ content: 'Contém', id: 'contem' }"
+                  :initialValue="{ content: 'Contém', id: 'contains' }"
                   v-model="search.filter"
                   :showBorder="false"
                   :data="[
-                    { content: 'Contém', id: 'contem' },
-                    { content: 'Igual', id: 'igual' },
+                    { content: 'Contém', id: 'contains' },
+                    { content: 'Igual', id: 'equal' },
                   ]"
                 />
               </div>
@@ -35,20 +35,20 @@
     <b-col xs="4" sm="4" md="4" lg="4" xl="4">
       <div class="div-button">
         <Button
-          key="search"
+          _key="btnSearch"
           type="info"
           title="Buscar"
           classIcon="fas fa-search"
           size="small"
-          :clicked="buscaPesquisa"
+          :clicked="executeSearch"
         />
         <Button
-          key="clean"
+          _key="btnClean"
           type="info"
           title="Limpar"
           classIcon="fas fa-broom"
           size="small"
-          :clicked="limpaPesquisa"
+          :clicked="executeClean"
         />
       </div>
     </b-col>
@@ -63,7 +63,7 @@ import { mapMutations } from "vuex";
 
 export default {
   components: { Button, SelectStatic },
-  name: "Pesquisa",
+  name: "Search",
   computed: {
     search: {
       get() {
@@ -80,15 +80,15 @@ export default {
       "executedSearch",
       "clearedSearch",
     ]),
-    buscaPesquisa() {
+    executeSearch() {
       this.executedSearch();
     },
-    limpaPesquisa() {
+    executeClean() {
       this.clearedSearch();
-      let search = { content: "", filter: { content: "contem", id: "contem" } };
+      let search = { content: "", filter: { content: "Contém", id: "contains" } };
       this.updateSearch(search);
     },
-    verificaLimpaPesquisa() {
+    verifyCleanSearch() {
       if (this.search.content.length == 0) this.clearedSearch();
     },
   },
@@ -106,7 +106,7 @@ export default {
   display: inline-block;
 }
 
-.margem {
+.margin {
   padding-top: 28px;
 }
 

package/src/component/shared/SelectOption.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="div-main text-center">
+    <div class="title" :style="'font-size:' + titleSize + 'px;'">
+      {{ title }}
+    </div>
+    <div class="alignment" v-for="option in options">
+      <div
+        class="option"
+        :style="'width:' + width + 'px; height:' + height + 'px'"
+        :class="{ selected: option.value == selected }"
+        @click="optionSelected(option.value)"
+      >
+        <div class="div-content text-center">
+          <span :style="'font-size:' + option.titleSize + 'px;'">
+            {{ option.title }}</span
+          >
+          <div class="icon" :style="'font-size:' + option.iconSize + 'px;'">
+            <i :class="option.icon"></i>
+          </div>
+        </div>
+        <div>
+          <i
+            v-b-tooltip.hover
+            :title="tip(option.tipId)"
+            class="fas fa-question-circle"
+          ></i>
+        </div>
+      </div>
+    </div>
+    <div class="div-btn">
+      <Button
+        _key="btnClickedNext"
+        type="info"
+        title="Avançar"
+        :disabled="selected == null"
+        :classIcon="buttonClassIcon"
+        :size="buttonSize"
+        :clicked="execute"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+import { mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "SelectOption",
+  components: {
+    Button,
+  },
+  props: {
+    title: String,
+    titleSize: Number,
+    buttonSize: String,
+    buttonClassIcon: String,
+    width: Number,
+    height: Number,
+    options: Array,
+    value: Number,
+    clickedNext: Function,
+  },
+  data() {
+    return {
+      selected: null,
+    };
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    optionSelected(value) {
+      this.selected = value;
+      this.$emit("input", value);
+    },
+    execute() {
+      if (this.clickedNext) this.clickedNext();
+      this.removeLoading(["btnClickedNext"]);
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["tip"]),
+  },
+};
+</script>
+<style scoped>
+.div-main {
+  margin: auto;
+  padding: 10px;
+}
+
+.option {
+  cursor: pointer;
+  border: 1px solid #dbdfe9;
+  background-color: white;
+  border-radius: 8px;
+  padding-left: 10px;
+  padding-right: 7px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  font-size: 16px;
+  font-weight: normal;
+}
+
+.alignment {
+  display: inline-block;
+}
+
+.option:hover {
+  background-color: #fafafc;
+}
+
+.div-content {
+  padding: 10px;
+}
+
+.selected {
+  background-color: #fafafc;
+}
+
+.icon {
+  margin-top: 5px;
+  color: #577696;
+}
+
+.text {
+  font-size: 16px;
+  margin-top: 8px;
+}
+
+.title {
+  margin-bottom: 20px;
+}
+
+.div-btn {
+  margin-top: 20px;
+}
+</style>

package/src/component/shared/Table.vue

@@ -19,7 +19,9 @@
       <tbody>
         <tr v-for="(row, index) in data" :key="index" :style="row.rowCss">
           <td class="td-checkbox" v-if="showChecks">
-            <b-form-checkbox v-model="selected" :value="row.id" />
+            <div :class="{ 'center-vertical': row.photo != null }">
+              <b-form-checkbox v-model="selected" :value="row.id" />
+            </div>
           </td>
           <td v-for="(obj, ind) in header" :key="ind">
             <div
@@ -30,9 +32,20 @@
             </div>
             <div
               :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
-              v-if="obj.type === 'class'"
+              v-if="obj.type === 'image'"
             >
-              {{ row[obj.field] }}
+              <img
+                :style="'width:60;height:50px'"
+                :src="
+                  'https://espaco.blob.core.windows.net/nixloc-photo-product/' +
+                  row[obj.field]
+                "
+              />
+            </div>
+            <div class="text-center center-vertical"  v-if="obj.type === 'class'">
+              <div :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+                {{ row[obj.field] }}
+              </div>
             </div>
             <div
               :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
@@ -67,24 +80,16 @@
             </div>
             <div
               :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
-              v-if="obj.type === 'pdf'"
+              v-if="obj.type === 'button'"
             >
-              <span
-                @click="solicitarPdf(obj.pdf, row[obj.field])"
-                class="icon"
-                v-if="row[obj.field]"
-              >
-                <i :class="obj.icon"></i
-              ></span>
-              <span v-else>N/I</span>
+              <TableButton :obj="obj" :row="row" />
             </div>
             <div
+              class="link"
               :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
-              v-if="obj.type === 'button'"
+              v-if="obj.type === 'link'"
+              @click="navegateTo(obj, row)"
             >
-              <TableButton :obj="obj" :row="row" />
-            </div>
-            <div class="link" v-if="obj.type === 'link'" @click="navegateTo(obj, row)">
               <span> {{ row[obj.field] }}</span>
             </div>
           </td>
@@ -103,6 +108,7 @@
 
 <script>
 import TableButton from "@nixweb/nixloc-ui/src/component/shared/TableButton.vue";
+import draggable from "@nixweb/nixloc-ui/vuedraggable";
 
 import { mapState, mapMutations, mapActions } from "vuex";
 
@@ -149,9 +155,7 @@ export default {
         classCssBody.forEach(function (value) {
           let classCss = value.classCss;
           let condition = value.fieldComparison == fieldComparison;
-          let obj = {
-            [classCss]: condition,
-          };
+          let obj = { [classCss]: condition };
           ret.push(obj);
         });
         return ret;
@@ -163,11 +167,11 @@ export default {
       if (obj.routeName) {
         this.$router.push({
           name: obj.routeName,
-          params: { id: row.id },
+          params: { id: row.id, type: row.type },
         });
       } else {
         this.addEvent({
-          nome: obj.eventName,
+          name: obj.eventName,
           data: row,
         });
       }
@@ -180,7 +184,6 @@ export default {
 </script>
 
 <style scoped>
-
 table tbody tr td {
   max-width: 350px;
 }
@@ -240,4 +243,12 @@ tr:hover {
 .icon-link:hover {
   font-size: 12.5px;
 }
+
+.center-vertical {
+  padding-top: 10px;
+}
+
+.badge-center {
+  margin: auto !important;
+}
 </style>

package/src/component/shared/TableButton.vue

@@ -10,7 +10,7 @@
       :eventName="obj.button.eventName"
       :eventData="row"
     />
-    <BotaoDropdown
+    <Dropdown
       v-if="obj.qualBotao == 'botaodropdown'"
       :title="obj.button.title"
       :type="obj.button.type"
@@ -23,11 +23,11 @@
 </template>
 
 <script>
-import BotaoDropdown from "../forms/BotaoDropdown";
+import Dropdown from "../forms/Dropdown";
 import Button from "../forms/Button";
 export default {
   name: "TableButton",
-  components: { Button, BotaoDropdown },
+  components: { Button, Dropdown },
   props: {
     obj: Object,
     row: Object,

package/src/component/shared/TableTotalRecords.vue

@@ -3,10 +3,10 @@
     <div class="col-sm-12 text-right">
       <span class="c-title">
         Total de
-        <b-badge variant="warning">
-          <span class="c-total">{{ totalRecords }}</span>
-        </b-badge>
-        <span class="records">registros</span>
+        <div class="badge">
+          <span class="total-records">{{ totalRecords }}</span>
+        </div>
+        <span class="records">registro(s)</span>
       </span>
     </div>
   </div>
@@ -33,13 +33,12 @@ export default {
   font-size: 14px;
 }
 
-.c-total {
-  color: white;
-  font-size: 14px;
+.total-records {
+  font-size: 16px;
+  font-weight: 600;
 }
 
-.records{
+.records {
   margin-left: 5px;
 }
-
-</style>
+</style>

package/src/component/shared/Toast.vue

@@ -19,7 +19,7 @@ export default {
   methods: {
     notifica(value) {
       if (value.type == "postApi" || value.type == "putApi")
-        this.$toasted.show("Salvo com success", {
+        this.$toasted.show("Salvo com sucesso", {
           type: "success",
         });
       if (value.type == "postApiError" || value.type == "putApiErro") {
@@ -30,7 +30,7 @@ export default {
       }
 
       if (value.type == "removerTodosApiSucesso")
-        this.$toasted.show("Removido com success", {
+        this.$toasted.show("Removido com sucesso", {
           type: "success",
         });
       if (value.type == "removerTodosApiErro") {

package/src/component/shared/VerticalFilter.vue

@@ -4,7 +4,6 @@
       class="molded-button"
       :class="{ fechado: !showFilter, aberto: showFilter }"
       v-show="!showFilter"
-      @click="mouseOver"
     >
       <i class="fas fa-arrow-circle-left"></i>
     </div>
@@ -19,67 +18,20 @@
       </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>
+    <transition name="slide-fade"> </transition>
   </div>
 </template>
 
 <script>
-import Select from "../forms/Select";
-
 import { mapMutations } from "vuex";
 
 export default {
-  props: {
-    mostrarSelecioneTotal: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  components: { Select },
+  components: {},
   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>
 

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

@@ -1,31 +1,33 @@
 <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 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>
-      <ListDynamicComponent />
     </div>
+    <DynamicComponentList />
   </div>
 </template>
 
@@ -33,9 +35,7 @@
 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/construtor-query/ListDynamicComponent.vue";
-
-import deepClone from "./utilities.js";
+import DynamicComponentList from "@nixweb/nixloc-ui/src/component/shared/query-builder/DynamicComponentList.vue";
 
 import { mapGetters, mapMutations } from "vuex";
 
@@ -45,21 +45,16 @@ export default {
     SelectRule,
     DynamicComponent,
     RadioGroup,
-    ListDynamicComponent,
+    DynamicComponentList,
   },
   props: {
-    query: Object,
     rules: Array,
-    index: Number,
-    maximaProfunidade: Number,
-    profundidade: Number,
-    titulos: Object,
   },
   data() {
     return {
       selectedRule: this.rules[0],
       andOr: "or",
-      duplicidade: [],
+      duplicate: [],
     };
   },
   computed: {
@@ -73,26 +68,25 @@ export default {
       this.addRule();
     },
     addRule() {
-      let consulta_atualizada = deepClone(this.query);
-      let obj = this.montaFiltro();
+      let obj = this.mountObject();
 
-      if (!this.jaExiste(obj.nome)) {
+      if (!this.verifyIfExist(obj.name)) {
         this.addSelectedRules(obj);
-        if (obj.naoPermitirDuplicidade) this.duplicidade.push(obj);
+        if (obj.notDuplicate) this.duplicate.push(obj);
       } else {
-        var erro = {
+        var error = {
           property: "ERRO QUERY BUILDER",
           message: `Não é possível adicionar o filter ${obj.title} 2 vezes!`,
         };
-        this.addNotifications([erro]);
+        this.addNotifications([error]);
       }
     },
-    montaFiltro() {
+    mountObject() {
       let obj = {
-        id: this.geraId(),
-        nome: this.selectedRule.nome,
+        id: this.generateId(),
+        name: this.selectedRule.name,
         title: this.selectedRule.title,
-        fieldType: this.selectedRule.fieldType,
+        typeField: this.selectedRule.typeField,
         type: this.selectedRule.type,
         options: this.selectedRule.options,
         props: this.selectedRule.props,
@@ -102,34 +96,34 @@ export default {
         operator: null,
         andOr: this.selectedRule.andOr,
         isRequired: this.selectedRule.isRequired,
-        naoPermitirDuplicidade: this.selectedRule.naoPermitirDuplicidade,
-        valor: null,
+        notDuplicate: this.selectedRule.notDuplicate,
+        value: null,
       };
       return obj;
     },
-    geraId() {
+    generateId() {
       return Math.random()
         .toString(36)
         .replace(/[^a-z]+/g, "")
         .substr(0, 5);
     },
-    jaExiste(key) {
-      var existe = this.duplicidade.find((item) => {
-        return item.nome === key;
+    verifyIfExist(name) {
+      var hasRule = this.duplicate.find((rule) => {
+        return rule.name === name;
       });
-      if (existe) return true;
+      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 "duplicidade" para liberar e adicionar novamente.
-        if (event.nome == "tagRemovida" || event.nome == "selectedRuleRemovida") {
-          var duplicidade = this.duplicidade.filter((item) => {
+        // 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.duplicidade = duplicidade;
+          this.duplicate = duplicate;
         }
       },
       deep: true,