@nixweb/nixloc-ui 0.0.121 → 0.0.124

package/src/component/shared/{Carregando.vue → Loading.vue}

@@ -1,20 +1,20 @@
 <template>
   <div>
-    <div v-if="tipo == 'bolhas'" :class="{ carregando: centralizado }">
+    <div v-if="type == 'bubbles'" :class="{ loading: center }">
       <vue-loading
         type="bubbles"
-        :color="cor"
-        :size="{ width: largura + 'px', height: altura + 'px' }"
+        :color="color"
+        :size="{ width: width + 'px', height: height + 'px' }"
       ></vue-loading>
     </div>
-    <div v-if="tipo == 'linha'">
+    <div v-if="type == 'line'">
       <div class="loader">
         <div class="loader__element"></div>
       </div>
     </div>
-    <div :class="{ 'carregando-texto': centralizado }">
+    <div :class="{ 'loading-text': center }">
       <div>
-        <div class="mensagem">{{ mensagem }}</div>
+        <div class="message">{{ message }}</div>
       </div>
     </div>
   </div>
@@ -22,35 +22,35 @@
 
 <script>
 export default {
-  name: "Carregando",
+  name: "Loading",
   props: {
-    altura: {
+    height: {
       type: Number,
       default: 70,
     },
-    largura: {
+    width: {
       type: Number,
       default: 70,
     },
-    centralizado: {
+    center: {
       type: Boolean,
       default: true,
     },
-    cor: {
+    color: {
       type: String,
       default: "#D98621",
     },
-    tipo: {
+    type: {
       type: String,
       default: "bolhas",
     },
-    mensagem: String,
+    message: String,
   },
 };
 </script>
 
 <style scoped>
-.carregando {
+.loading {
   position: absolute;
   left: 50%;
   top: 50%;
@@ -58,7 +58,7 @@ export default {
   transform: translate(-50%, -50%);
 }
 
-.carregando-texto {
+.loading-text {
   position: absolute;
   left: 50%;
   top: 45%;
@@ -66,7 +66,7 @@ export default {
   transform: translate(-50%, -50%);
 }
 
-.mensagem {
+.message {
   font-size: 15px;
   margin-top: 5px;
 }

package/src/component/shared/LoadingMoreButton.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <Button
+      key="loadingMore"
+      eventName="loadingMore"
+      type="warning"
+      title="Carregar mais..."
+      classIcon="fas fa-redo"
+      size="medium"
+    />
+  </div>
+</template>
+<script>
+import Button from "../forms/Button.vue";
+export default {
+  name: "LoadingMoreButton",
+  components: { Button },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>

package/src/component/shared/Messages.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <div :class="{ 'div-message': !modal.open }" v-if="storageNotification.length > 0">
+      <div>
+        <Alert type="danger">
+          <div v-for="notification in storageNotification">
+            {{ notification.message }}
+          </div>
+        </Alert>
+      </div>
+      <b-alert
+        v-show="false"
+        :show="countdown"
+        dismissible
+        variant="danger"
+        @dismissed="countdown = 0"
+        @dismiss-count-down="countdownChanged"
+      >
+      </b-alert>
+    </div>
+  </div>
+</template>
+
+<script>
+import Alert from "../layout/Alert.vue";
+import { mapState, mapMutations } from "vuex";
+
+export default {
+  components: { Alert },
+  name: "Messages",
+  data() {
+    return {
+      maxSeconds: 10,
+      countdown: 10,
+      storageNotification: [],
+    };
+  },
+  computed: {
+    ...mapState("generic", ["notifications", "modal"]),
+  },
+  watch: {
+    notifications() {
+      if (this.notifications.length > 0) {
+        this.storageNotification = this.notifications;
+        this.countdown = 5;
+      }
+    },
+    countdown() {
+      if (this.countdown === 0) {
+        this.storageNotification = [];
+        this.removeNotificarions();
+      }
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["removeNotificarions"]),
+    countdownChanged(countdown) {
+      this.countdown = countdown;
+    },
+    messages(notifications) {
+      var message = "";
+      notifications.forEach(function (notification) {
+        message += notification.message + " ";
+      });
+
+      return message;
+    },
+  },
+};
+</script>
+<style scoped>
+.div-message {
+  margin-top: 15px;
+}
+
+.div-message-modal {
+  margin-bottom: 5px;
+}
+
+.invalid {
+  color: #f0134d;
+}
+</style>

package/src/component/shared/{Paginacao.vue → Pagination.vue}

@@ -1,13 +1,13 @@
 <template>
   <div>
     <b-pagination
-      v-model="paginacao(chave).paginaAtual"
+      v-model="pagination(key).currentPage"
       prev-text="Anterior"
       next-text="Próximo"
       align="right"
       :hide-goto-end-buttons="true"
-      :per-page="paginacao(chave).totalPorPagina"
-      :total-rows="totalRegistros"
+      :per-page="pagination(key).totalPerPage"
+      :total-rows="totalRecords"
     ></b-pagination>
   </div>
 </template>
@@ -16,23 +16,23 @@
 import { mapGetters, mapMutations } from "vuex";
 
 export default {
-  name: "Paginacao",
+  name: "Pagination",
   props: {
-    chave: String,
-    totalRegistros: Number,
+    key: String,
+    totalRecords: Number,
   },
   created() {
-    this.inserePaginacao({
-      chave: this.chave,
-      paginaAtual: 1,
-      totalPorPagina: 10,
+    this.addPagination({
+      key: this.key,
+      currentPage: 1,
+      totalPerPage: 10,
     });
   },
   computed: {
-    ...mapGetters("generic", ["paginacao"]),
+    ...mapGetters("generic", ["pagination"]),
   },
   methods: {
-    ...mapMutations("generic", ["inserePaginacao"]),
+    ...mapMutations("generic", ["addPagination"]),
   },
 };
 </script>

package/src/component/shared/ProgressBar.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <progress-bar :size="size" :text="text" :val="value" :max="max"></progress-bar>
+  </div>
+</template>
+<script>
+import ProgressBar from "vue-simple-progress";
+
+export default {
+  name: "ProgressBar",
+  components: {
+    ProgressBar,
+  },
+  props: {
+    text: String,
+    value: Number,
+    max: Number,
+    size: String,
+  },
+};
+</script>

package/src/component/shared/{BotaoConsulta.vue → QueryButton.vue}

@@ -1,38 +1,38 @@
 <template>
   <div>
-    <div class="alinhamento" v-for="item in itens" :key="item.titulo">
+    <div class="alignment" v-for="item in items" :key="item.title">
       <button
         :class="{
-          'botao-consulta': true,
+          'button-query': true,
         }"
-        @click="executar(item.valor)"
+        @click="execute(item.valor)"
       >
-        <span class="icone"> <i :class="item.classeIcone"></i></span>
-        <span class="titulo">{{ item.titulo }}</span>
+        <span class="icon"> <i :class="item.classIcon"></i></span>
+        <span class="title">{{ item.title }}</span>
       </button>
     </div>
   </div>
 </template>
 <script>
 export default {
-  name: "BotaoConsulta",
-  props: ["itens", "value", "clique"],
+  name: "QueryButton",
+  props: ["items", "value", "clicked"],
   data() {
     return {
-      valorAtual: 0,
+      currentValue: 0,
     };
   },
   methods: {
-    executar(valor) {
-      this.valorAtual = valor;
+    execute(valor) {
+      this.currentValue = valor;
       this.$emit("input", valor);
-      if (this.clique) this.clique();
+      if (this.clicked) this.clicked();
     },
   },
 };
 </script>
 <style scoped>
-.botao-consulta {
+.button-query {
   cursor: pointer;
   height: 35px;
   border: 1px solid #d5d5d5;
@@ -46,21 +46,21 @@ export default {
   font-weight: normal;
 }
 
-.botao-consulta:hover {
+.button-query:hover {
   background-color: #d98621;
   color: white;
   border: none;
 }
 
-.icone {
+.icon {
   font-size: 13px;
 }
 
-.titulo {
+.title {
   font-size: 16px;
 }
 
-.alinhamento {
+.alignment {
   display: inline-block;
 }
 </style>

package/src/component/shared/SaveCancel.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <FixedBar posicao="rodape" v-show="formDirty && !modal.open">
+      <div>
+        <Button
+          key="cancelSaveCancel"
+          eventName="cancelSaveCancel"
+          title="Cancelar"
+          type="danger"
+          size="medium"
+          :clicked="cancel"
+        />
+        <Button
+          key="saveSaveCancel"
+          eventName="saveSaveCancel"
+          title="Salvar"
+          type="success"
+          :disabled="!isFormValid(formName)"
+          size="medium"
+        />
+      </div>
+    </FixedBar>
+  </div>
+</template>
+<script>
+import FixedBar from "@nixweb/nixloc-ui/src/component/layout/FixedBar.vue";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+import { mapState, mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "SaveCancel",
+  components: { FixedBar, Button },
+  props: {
+    formName: String,
+  },
+  computed: {
+    ...mapState("validation", ["formDirty"]),
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapState("generic", ["modal"]),
+  },
+  methods: {
+    ...mapMutations("validation", ["updateFormDirty"]),
+    ...mapMutations("generic", ["removeLoading"]),
+    cancel() {
+      this.updateFormDirty(false);
+      this.removeLoading(["cancelSaveCancel"]);
+    },
+  },
+  watch: {
+    "modal.open": function () {
+      this.updateFormDirty(false);
+    },
+  },
+};
+</script>

package/src/component/shared/{Pesquisa.vue → Search.vue}

@@ -2,28 +2,28 @@
   <b-row>
     <b-col xs="12" sm="12" md="12" lg="7" xl="6">
       <div class="margem">
-        <div class="moldura">
+        <div class="molded">
           <b-row>
             <b-col sm="9">
               <input
                 type="text"
-                name="pesquisar"
+                name="search"
                 placeholder="Pesquisar ..."
                 @keyup="verificaLimpaPesquisa()"
                 @keyup.enter.prevent="buscaPesquisa()"
-                v-model="pesquisa.conteudo"
+                v-model="search.content"
             /></b-col>
             <b-col sm="3">
-              <div class="div-escolher">
-                <EscolherEstatico
-                  campoAlvo="filtro"
-                  :somenteConsulta="true"
-                  :valorInicial="{ conteudo: 'Contém', id: 'contem' }"
-                  v-model="pesquisa.filtro"
-                  :mostrarBorda="false"
-                  :dados="[
-                    { conteudo: 'Contém', id: 'contem' },
-                    { conteudo: 'Igual', id: 'igual' },
+              <div class="div-select">
+                <SelectStatic
+                  fieldTarget="filter"
+                  :onlyQuery="true"
+                  :initialValue="{ content: 'Contém', id: 'contem' }"
+                  v-model="search.filter"
+                  :showBorder="false"
+                  :data="[
+                    { content: 'Contém', id: 'contem' },
+                    { content: 'Igual', id: 'igual' },
                   ]"
                 />
               </div>
@@ -33,22 +33,22 @@
       </div>
     </b-col>
     <b-col xs="4" sm="4" md="4" lg="4" xl="4">
-      <div class="div-botao">
-        <Botao
-          chave="pesquisar"
-          tipo="info"
-          titulo="Buscar"
-          classeIcone="fas fa-search"
-          tamanho="pequeno"
-          :clique="buscaPesquisa"
+      <div class="div-button">
+        <Button
+          key="search"
+          type="info"
+          title="Buscar"
+          classIcon="fas fa-search"
+          size="small"
+          :clicked="buscaPesquisa"
         />
-        <Botao
-          chave="limpar"
-          tipo="info"
-          titulo="Limpar"
-          classeIcone="fas fa-broom"
-          tamanho="pequeno"
-          :clique="limpaPesquisa"
+        <Button
+          key="clean"
+          type="info"
+          title="Limpar"
+          classIcon="fas fa-broom"
+          size="small"
+          :clicked="limpaPesquisa"
         />
       </div>
     </b-col>
@@ -56,47 +56,47 @@
 </template>
 
 <script>
-import Botao from "../forms/Botao";
-import EscolherEstatico from "../forms/EscolherEstatico.vue";
+import Button from "../forms/Button";
+import SelectStatic from "../forms/SelectStatic.vue";
 
 import { mapMutations } from "vuex";
 
 export default {
-  components: { Botao, EscolherEstatico },
+  components: { Button, SelectStatic },
   name: "Pesquisa",
   computed: {
-    pesquisa: {
+    search: {
       get() {
-        return this.$store.state.generic.pesquisa;
+        return this.$store.state.generic.search;
       },
       set(value) {
-        this.atualizaCampoPesquisa(value);
+        this.updateSearch(value);
       },
     },
   },
   methods: {
     ...mapMutations("generic", [
-      "atualizaCampoPesquisa",
-      "buscouPesquisa",
-      "limpouPesquisa",
+      "updateSearch",
+      "executedSearch",
+      "clearedSearch",
     ]),
     buscaPesquisa() {
-      this.buscouPesquisa();
+      this.executedSearch();
     },
     limpaPesquisa() {
-      this.limpouPesquisa();
-      let pesquisa = { conteudo: "", filtro: { conteudo: "contem", id: "contem" } };
-      this.atualizaCampoPesquisa(pesquisa);
+      this.clearedSearch();
+      let search = { content: "", filter: { content: "contem", id: "contem" } };
+      this.updateSearch(search);
     },
     verificaLimpaPesquisa() {
-      if (this.pesquisa.conteudo.length == 0) this.limpouPesquisa();
+      if (this.search.content.length == 0) this.clearedSearch();
     },
   },
 };
 </script>
 
 <style scoped>
-.icone-pesquisa {
+.icon-search {
   font-size: 20px;
   color: #577696;
   display: inline-block;
@@ -110,7 +110,7 @@ export default {
   padding-top: 28px;
 }
 
-.div-botao {
+.div-button {
   padding-top: 33px;
 }
 
@@ -118,7 +118,7 @@ export default {
   color: #b8c4d2;
 }
 
-.moldura {
+.molded {
   width: 100%;
   height: 45px;
   font-size: 14px;
@@ -146,7 +146,7 @@ input[type="text"]:focus {
   outline: none;
 }
 
-.div-escolher {
+.div-select {
   margin-top: -30px;
   margin-right: 5px;
 }