@nixweb/nixloc-ui 0.0.60 → 0.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.60",
+  "version": "0.0.63",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/forms/EscolherEstatico.vue

@@ -60,6 +60,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    somenteConsulta: {
+      type: Boolean,
+      default: false,
+    },
     dados: Array,
     value: Object,
   },
@@ -84,7 +88,7 @@ export default {
     aoSelecionar(value) {
       this.$emit("input", value);
       let obj = { campoAlvo: this.campoAlvo, valor: value.id };
-      this.insereFiltro(obj);
+      if (!this.somenteConsulta) this.insereFiltro(obj);
     },
     aoPesquisar(value) {},
     rotulo(value) {

package/src/component/layout/BarraFixa.vue

@@ -45,7 +45,7 @@ export default {
   overflow: hidden;
   z-index: 20;
   padding: 18px;
-  margin-left: 230px;
+  margin-left: 220px;
 }
 
 .tamanho {

package/src/component/layout/Menu.vue

@@ -7,8 +7,10 @@
           @click.prevent="navegarPara('dashboard')"
           :class="sessaoDestaque('home')"
         >
-          <i class="fa fa-home menu__icon" aria-hidden="true"></i>
-          Dashboard
+          <div class="div-icone lado-a-lado" :style="'background-color:' + corBase">
+            <i class="fa fa-home icone" aria-hidden="true"></i>
+          </div>
+          <div class="lado-a-lado titulo">Dashboard</div>
         </a>
       </li>
 
@@ -18,9 +20,13 @@
           @click.prevent="abrirSubMenu(item.modulo)"
           :class="sessaoDestaque(item.modulo)"
         >
-          <i :class="item.icone" class="menu__icon" aria-hidden="true"></i>
-          {{ item.modulo }}
-          <i class="fa fa-chevron-right menu__arrow-icon" aria-hidden="true"></i>
+          <div class="div-icone lado-a-lado" :style="'background-color:' + corBase">
+            <i :class="item.icone" class="icone" aria-hidden="true"></i>
+          </div>
+          <div class="lado-a-lado titulo">{{ item.modulo }}</div>
+          <div class="lado-a-lado seta menu__arrow-icon">
+            <i class="fa fa-chevron-right" aria-hidden="true"></i>
+          </div>
         </a>
       </li>
     </ul>
@@ -62,6 +68,12 @@ import { mapState } from "vuex";
 
 export default {
   name: "Menu",
+  props: {
+    corBase: {
+      type: String,
+      default: "#4680A5",
+    },
+  },
   data() {
     return {
       modulo: "",
@@ -116,3 +128,25 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.div-icone {
+  width: 30px;
+  height: 30px;
+  padding-left: 6px;
+  padding-top: 3px;
+  border-radius: 8px;
+}
+
+.icone {
+  color: white;
+  font-size: 16px;
+}
+
+.titulo {
+  margin-left: 15px;
+}
+
+.seta {
+}
+</style>

package/src/component/layout/Painel.vue

@@ -32,8 +32,8 @@
           </div>
         </div>
         <br v-show="mostrarBotoes || mostrarPesquisa" />
-        <div class="row" v-show="mostrarBotoes || mostrarPesquisa">
-          <div class="col-8">
+        <div v-show="mostrarBotoes || mostrarPesquisa">
+          <div>
             <div v-show="mostrarPesquisa"><Pesquisa /></div>
           </div>
         </div>

package/src/component/shared/Pesquisa.vue

@@ -1,16 +1,30 @@
 <template>
   <b-row>
-    <b-col xs="12" sm="12" md="12" lg="7" xl="7">
-      <input
-        type="text"
-        name="pesquisar"
-        placeholder="Pesquisar ..."
-        @keyup="verificaLimpaPesquisa()"
-        @keyup.enter.prevent="buscaPesquisa()"
-        v-model="pesquisa"
+    <b-col xs="12" sm="12" md="12" lg="5" xl="5">
+      <div class="margem">
+        <input
+          type="text"
+          name="pesquisar"
+          placeholder="Pesquisar ..."
+          @keyup="verificaLimpaPesquisa()"
+          @keyup.enter.prevent="buscaPesquisa()"
+          v-model="pesquisa.conteudo"
+        />
+      </div>
+    </b-col>
+    <b-col xs="12" sm="12" md="12" lg="2" xl="2">
+      <EscolherEstatico
+        campoAlvo="filtro"
+        :somenteConsulta="true"
+        :valorInicial="{ conteudo: 'Contém', id: 'contem' }"
+        v-model="pesquisa.filtro"
+        :dados="[
+          { conteudo: 'Contém', id: 'contem' },
+          { conteudo: 'Igual', id: 'igual' },
+        ]"
       />
     </b-col>
-    <b-col xs="12" sm="12" md="12" lg="5" xl="5">
+    <b-col xs="4" sm="4" md="4" lg="4" xl="4">
       <div class="div-botao">
         <Botao
           chave="pesquisar"
@@ -35,11 +49,12 @@
 
 <script>
 import Botao from "../forms/Botao";
+import EscolherEstatico from "../forms/EscolherEstatico.vue";
 
 import { mapMutations } from "vuex";
 
 export default {
-  components: { Botao },
+  components: { Botao, EscolherEstatico },
   name: "Pesquisa",
   computed: {
     pesquisa: {
@@ -62,10 +77,11 @@ export default {
     },
     limpaPesquisa() {
       this.limpouPesquisa();
-      this.atualizaCampoPesquisa("");
+      let pesquisa = { conteudo: "", filtro: { conteudo: "contem", id: "contem" } };
+      this.atualizaCampoPesquisa(pesquisa);
     },
     verificaLimpaPesquisa() {
-      if (this.pesquisa.length == 0) this.limpouPesquisa();
+      if (this.pesquisa.conteudo.length == 0) this.limpouPesquisa();
     },
   },
 };
@@ -82,8 +98,12 @@ export default {
   display: inline-block;
 }
 
+.margem {
+  padding-top: 25px;
+}
+
 .div-botao {
-  margin-top: 5px;
+  padding-top: 25px;
 }
 
 ::placeholder {
@@ -105,7 +125,6 @@ input[type="text"] {
   transition: background-color 0.1s ease-in 0s, border 0.1s ease-in 0s;
 }
 
-/* When the input field gets focus, change its width to 100% */
 input[type="text"]:focus {
   outline: none;
 }

package/src/component/template/ModeloLista.vue

@@ -84,6 +84,7 @@ export default {
       },
       baseParams: {
         pesquisa: undefined,
+        filtro: "contem",
         paginaAtual: 1,
         totalPorPagina: 10,
       },
@@ -150,17 +151,19 @@ export default {
   },
   watch: {
     metodoExecutadoApi: function (value) {
-      if (value == "deleteAllApi") {
+      if (value === "deleteAllApi" || value === "deleteAllApiErro") {
         this.obterTodos();
       }
     },
     buscouPesquisa: function () {
-      this.baseParams.pesquisa = this.pesquisa;
+      this.baseParams.pesquisa = this.pesquisa.conteudo;
+      this.baseParams.filtro = this.pesquisa.filtro.id;
       this.limpaParams();
       this.obterTodos();
     },
     limpouPesquisa: function () {
       this.baseParams.pesquisa = "";
+      this.baseParams.filtro = "";
       this.limpaParams();
       this.obterTodos();
     },

package/src/store/modulos/generic.js

@@ -28,7 +28,7 @@ export default {
             tipo: undefined,
         },
         ids: undefined,
-        pesquisa: undefined,
+        pesquisa: { conteudo: "", filtro: { conteudo: "contem", id: "contem" } },
         EscolherEstatico: { dataHora: undefined, campoAlvo: undefined, valor: undefined },
         buscouPesquisa: false,
         limpouPesquisa: false,
@@ -256,6 +256,7 @@ export default {
                         return response.data;
                     } else {
                         context.commit('insereNotificacao', response.data.notificacoes)
+                        context.commit('insereMetodoExecutadoApi', 'deleteAllApiErro');
                         context.commit('insereToast', 'deleteApiErro');
                         return response.data;
                     }