@nixweb/nixloc-ui 0.0.121 → 0.0.124

package/src/component/shared/Table.vue

@@ -0,0 +1,243 @@
+<template>
+  <div>
+    <table class="table table-responsive-xs">
+      <thead>
+        <tr>
+          <th class="td-checkbox" v-if="showChecks">
+            <div>
+              <b-form-checkbox v-model="selectAll" @change="select" />
+            </div>
+          </th>
+          <th v-for="(obj, ind) in header" :key="ind">
+            <div class="title-margem" :class="obj.classCssTitle">
+              <i class="fas fa-search" v-if="obj.iconSearch"></i>
+              <span class="title-header"> {{ obj.title }}</span>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <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" />
+          </td>
+          <td v-for="(obj, ind) in header" :key="ind">
+            <div
+              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+              v-if="obj.type === 'text'"
+            >
+              {{ row[obj.field] }}
+            </div>
+            <div
+              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+              v-if="obj.type === 'class'"
+            >
+              {{ row[obj.field] }}
+            </div>
+            <div
+              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+              v-if="obj.type === 'html'"
+            >
+              <div v-if="row[obj.field]" v-html="row[obj.field]"></div>
+              <div v-else v-html="obj.html"></div>
+            </div>
+            <div
+              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+              v-if="obj.type === 'select'"
+            >
+              {{ row[obj.field].content }}
+            </div>
+            <div
+              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+              v-if="obj.type === 'date'"
+            >
+              {{ row[obj.field] | moment("DD/MM/YYYY") }}
+            </div>
+            <div
+              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+              v-if="obj.type === 'dateTime'"
+            >
+              {{ row[obj.field] | moment("DD/MM/YYYY HH:mm") }}
+            </div>
+            <div
+              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+              v-if="obj.type === 'currency'"
+            >
+              {{ row[obj.field] | currency }}
+            </div>
+            <div
+              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+              v-if="obj.type === 'pdf'"
+            >
+              <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>
+            </div>
+            <div
+              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+              v-if="obj.type === 'button'"
+            >
+              <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>
+        </tr>
+      </tbody>
+      <tbody v-show="data.length == 0">
+        <tr>
+          <td colspan="12">
+            <span>Nenhum registro encontrado!</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import TableButton from "@nixweb/nixloc-ui/src/component/shared/TableButton.vue";
+
+import { mapState, mapMutations, mapActions } from "vuex";
+
+export default {
+  components: { TableButton },
+  props: {
+    header: Array,
+    data: Array,
+    showChecks: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      selectAll: false,
+    };
+  },
+  computed: {
+    ...mapState("generic", ["selected"]),
+    selected: {
+      get() {
+        return this.$store.state.generic.selected;
+      },
+      set(value) {
+        this.addSelected(value);
+      },
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["addSelected", "addEvent"]),
+    ...mapActions("generic", ["pdfApi"]),
+    select() {
+      this.addSelected([]);
+      if (this.selectAll) {
+        for (let i in this.data) {
+          this.selected.push(this.data[i].id);
+        }
+      }
+    },
+    convertClass(fieldComparison, classCssBody) {
+      if (Array.isArray(classCssBody)) {
+        let ret = [];
+        classCssBody.forEach(function (value) {
+          let classCss = value.classCss;
+          let condition = value.fieldComparison == fieldComparison;
+          let obj = {
+            [classCss]: condition,
+          };
+          ret.push(obj);
+        });
+        return ret;
+      } else {
+        return classCssBody;
+      }
+    },
+    navegateTo(obj, row) {
+      if (obj.routeName) {
+        this.$router.push({
+          name: obj.routeName,
+          params: { id: row.id },
+        });
+      } else {
+        this.addEvent({
+          nome: obj.eventName,
+          data: row,
+        });
+      }
+    },
+  },
+  beforeDestroy() {
+    this.addSelected([]);
+  },
+};
+</script>
+
+<style scoped>
+
+table tbody tr td {
+  max-width: 350px;
+}
+
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 5px !important;
+  padding-top: 7px !important;
+  padding-bottom: 5px !important;
+  padding-right: 5px !important;
+  border-bottom: 0px !important;
+}
+
+.td-checkbox {
+  width: 30px;
+}
+
+tr:hover {
+  background-color: #fafafc;
+}
+
+.title-header {
+  font-size: 13px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.table-number {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.table-main {
+  color: #757d8c;
+  max-width: 200px;
+}
+
+.table-currency {
+  font-size: 14px;
+  min-width: 100px;
+}
+
+.link {
+  color: #3f529b;
+  font-size: 14px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.link:hover {
+  text-decoration: underline;
+  transition: 0.1s;
+}
+
+.icon-link:hover {
+  font-size: 12.5px;
+}
+</style>

package/src/component/shared/TableButton.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <Button
+      v-if="obj.qualBotao == 'button'"
+      :key="row.id"
+      :title="obj.button.title"
+      :type="obj.button.type"
+      :size="obj.button.size"
+      :classIcon="obj.button.classIcon"
+      :eventName="obj.button.eventName"
+      :eventData="row"
+    />
+    <BotaoDropdown
+      v-if="obj.qualBotao == 'botaodropdown'"
+      :title="obj.button.title"
+      :type="obj.button.type"
+      :size="obj.button.size"
+      :classIcon="obj.button.classIcon"
+      :eventData="row"
+      :items="obj.button.items"
+    />
+  </div>
+</template>
+
+<script>
+import BotaoDropdown from "../forms/BotaoDropdown";
+import Button from "../forms/Button";
+export default {
+  name: "TableButton",
+  components: { Button, BotaoDropdown },
+  props: {
+    obj: Object,
+    row: Object,
+  },
+};
+</script>

package/src/component/shared/{Registro.vue → TableTotalRecords.vue}

@@ -1,12 +1,12 @@
 <template>
   <div class="row c-div-total">
     <div class="col-sm-12 text-right">
-      <span class="c-titulo">
+      <span class="c-title">
         Total de
         <b-badge variant="warning">
-          <span class="c-total">{{ totalRegistro }}</span>
+          <span class="c-total">{{ totalRecords }}</span>
         </b-badge>
-        <span class="registros">registros</span>
+        <span class="records">registros</span>
       </span>
     </div>
   </div>
@@ -14,9 +14,9 @@
 
 <script>
 export default {
-  name: "TotalRegistro",
+  name: "TableTotalRecords",
   props: {
-    totalRegistro: {
+    totalRecords: {
       type: Number,
       default: 0,
     },
@@ -29,7 +29,7 @@ export default {
   padding-bottom: 10px;
 }
 
-.c-titulo {
+.c-title {
   font-size: 14px;
 }
 
@@ -38,7 +38,7 @@ export default {
   font-size: 14px;
 }
 
-.registros{
+.records{
   margin-left: 5px;
 }
 

package/src/component/shared/{ResumoTabela.vue → TableTotalization.vue}

@@ -1,9 +1,13 @@
 <template>
   <div>
-    <div class="badge-lado-a-lado text-center" v-for="item in resumo" :key="item.titulo">
-      <div class="badge-resumo" :class="item.classeCss">
-        <span>{{ item.titulo }}</span>
-        <span>{{ item.valor }}</span>
+    <div
+      class="badge-side-by-side text-center"
+      v-for="item in totalization"
+      :key="item.title"
+    >
+      <div class="badge-totalization" :class="item.classCss">
+        <span>{{ item.title }}</span>
+        <span>{{ item.value }}</span>
       </div>
     </div>
   </div>
@@ -11,21 +15,21 @@
 
 <script>
 export default {
-  name: "ResumoTabela",
+  name: "TableTotalization",
   props: {
-    resumo: Array,
+    totalization: Array,
   },
 };
 </script>
 
 <style scoped>
-.badge-lado-a-lado {
+.badge-side-by-side {
   display: inline-block;
   margin-right: 3px;
   margin-bottom: 10px;
 }
 
-.badge-resumo {
+.badge-totalization {
   border: 1px solid #dbdee0;
   padding-left: 5px;
   padding-right: 5px;

package/src/component/shared/Tip.vue

@@ -0,0 +1,42 @@
+<template>
+  <span class="tip" v-if="title">
+    <i
+      class="fal fa-exclamation-circle"
+      :title="title"
+      v-b-popover.hover.top="description"
+    ></i>
+  </span>
+</template>
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "Tip",
+  props: {
+    field: String,
+    formName: String,
+  },
+  data() {
+    return {
+      title: "",
+      description: "",
+    };
+  },
+  mounted() {
+    let tip = this.tip({ field: this.field, formName: this.formName });
+    if (tip) {
+      this.title = tip.title;
+      this.description = tip.description;
+    }
+  },
+  computed: {
+    ...mapGetters("generic", ["tip"]),
+  },
+};
+</script>
+
+<style scoped>
+.tip {
+  cursor: pointer;
+}
+</style>

package/src/component/shared/Toast.vue

@@ -18,28 +18,28 @@ export default {
   },
   methods: {
     notifica(value) {
-      if (value.tipo == "postApi" || value.tipo == "putApi")
-        this.$toasted.show("Salvo com sucesso", {
+      if (value.type == "postApi" || value.type == "putApi")
+        this.$toasted.show("Salvo com success", {
           type: "success",
         });
-      if (value.tipo == "postApiErro" || value.tipo == "putApiErro") {
+      if (value.type == "postApiError" || value.type == "putApiErro") {
         this.$toasted.show("Ops! Algo deu errado", {
           type: "error",
         });
         this.voltarParaTopo();
       }
 
-      if (value.tipo == "removerTodosApiSucesso")
-        this.$toasted.show("Removido com sucesso", {
+      if (value.type == "removerTodosApiSucesso")
+        this.$toasted.show("Removido com success", {
           type: "success",
         });
-      if (value.tipo == "removerTodosApiErro") {
+      if (value.type == "removerTodosApiErro") {
         this.$toasted.show("Ops! Algo deu errado", {
           type: "error",
         });
         this.voltarParaTopo();
       }
-      if (value.tipo == "falhaGenerica") {
+      if (value.type == "falhaGenerica") {
         this.$toasted.show("Ops! Algo deu errado", {
           type: "error",
         });

package/src/component/shared/{FiltroVertical.vue → VerticalFilter.vue}

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div
-      class="moldura-botao"
-      :class="{ fechado: !mostrarFiltro, aberto: mostrarFiltro }"
-      v-show="!mostrarFiltro"
+      class="molded-button"
+      :class="{ fechado: !showFilter, aberto: showFilter }"
+      v-show="!showFilter"
       @click="mouseOver"
     >
       <i class="fas fa-arrow-circle-left"></i>
@@ -11,31 +11,31 @@
 
     <transition name="slide-fade">
       <div
-        class="moldura-botao botao-recolher"
-        v-show="mostrarFiltro"
-        @click="mostrarFiltro = false"
+        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="moldura" v-show="mostrarFiltro">
+      <div class="molded" v-show="showFilter">
         <div class="row">
-          <div class="col-4 c-titulo-filtro">
+          <div class="col-4 c-title-filter">
             <i class="fas fa-filter"></i>
-            <span class="espaco-icone">FILTRO</span>
+            <span class="espaco-icon">FILTRO</span>
           </div>
         </div>
         <hr />
         <b-row v-if="mostrarSelecioneTotal">
           <b-col sm="6">
-            <Escolher
-              titulo="Mostrar"
-              campo="Mostrar"
-              :requerido="false"
+            <Select
+              title="show"
+              field="show"
+              :required="false"
               url="/api/v1/util/total-por-pagina"
-              v-model="totalPorPagina"
+              v-model="totalPerPage"
             />
           </b-col>
         </b-row>
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import Escolher from "../forms/Escolher";
+import Select from "../forms/Select";
 
 import { mapMutations } from "vuex";
 
@@ -57,19 +57,19 @@ export default {
       default: true,
     },
   },
-  components: { Escolher },
+  components: { Select },
   data() {
     return {
-      mostrarFiltro: false,
+      showFilter: false,
     };
   },
   computed: {
-    totalPorPagina: {
+    totalPerPage: {
       get() {
-        return this.$store.state.generic.totalPorPagina;
+        return this.$store.state.generic.totalPerPage;
       },
       set(value) {
-        if (!value.conteudo) value.conteudo = 10;
+        if (!value.content) value.content = 10;
         this.atualizaTotalPorPagina(value);
       },
     },
@@ -77,14 +77,14 @@ export default {
   methods: {
     ...mapMutations("generic", ["atualizaTotalPorPagina"]),
     mouseOver: function () {
-      this.mostrarFiltro = !this.mostrarFiltro;
+      this.showFilter = !this.showFilter;
     },
   },
 };
 </script>
 
 <style scoped>
-.moldura {
+.molded {
   background: white;
   border-left: solid 1px #dbdee0;
   font-size: 13px;
@@ -98,7 +98,7 @@ export default {
   z-index: 999;
 }
 
-.moldura-botao {
+.molded-button {
   font-size: 18px;
   background: #ffffff;
   border: solid 1px #dbdfe9;
@@ -116,7 +116,7 @@ export default {
   z-index: 999;
 }
 
-.botao-recolher {
+.button-recolher {
   padding-left: 12px;
   padding-right: 418px;
   right: -38px;