@nixweb/nixloc-ui 0.0.125 → 0.0.128

package/src/component/shared/Pagination.vue

@@ -1,53 +1,52 @@
-<template>
-  <div>
-    <b-pagination
-      v-model="pagination(key).currentPage"
-      prev-text="Anterior"
-      next-text="Próximo"
-      align="right"
-      :hide-goto-end-buttons="true"
-      :per-page="pagination(key).totalPerPage"
-      :total-rows="totalRecords"
-    ></b-pagination>
-  </div>
-</template>
-
-<script>
-import { mapGetters, mapMutations } from "vuex";
-
-export default {
-  name: "Pagination",
-  props: {
-    key: String,
-    totalRecords: Number,
-  },
-  created() {
-    this.addPagination({
-      key: this.key,
-      currentPage: 1,
-      totalPerPage: 10,
-    });
-  },
-  computed: {
-    ...mapGetters("generic", ["pagination"]),
-  },
-  methods: {
-    ...mapMutations("generic", ["addPagination"]),
-  },
-};
-</script>
-
-<style>
-
-.page-item {
-  font-size: 13px !important;
-}
-
-.page-item.active .page-link {
-  font-size: 13px !important;
-  z-index: 3 !important;
-  color: #fff !important;
-  background-color: #d98621 !important;
-  border-color: #d98621 !important;
-}
-</style>
+<template>
+  <div>
+    <b-pagination
+      v-model="pagination(_key).currentPage"
+      prev-text="Anterior"
+      next-text="Próximo"
+      align="right"
+      :hide-goto-end-buttons="true"
+      :per-page="pagination(_key).totalPerPage"
+      :total-rows="totalRecords"
+    ></b-pagination>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "Pagination",
+  props: {
+    _key: String,
+    totalRecords: Number,
+  },
+  created() {
+    this.addPagination({
+      key: this._key,
+      currentPage: 1,
+      totalPerPage: 10,
+    });
+  },
+  computed: {
+    ...mapGetters("generic", ["pagination"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["addPagination"]),
+  },
+};
+</script>
+
+<style>
+.page-item {
+  font-size: 13px !important;
+}
+
+.page-item.active .page-link {
+  font-size: 13px !important;
+  z-index: 3 !important;
+  color: #fff !important;
+  background-color: #d98621 !important;
+  border-color: #d98621 !important;
+}
+</style>

package/src/component/shared/{LegendaParametro.vue → ParameterLegend.vue}

@@ -11,19 +11,19 @@
             <th><span class="title-header">Exemplo</span></th>
           </tr>
         </thead>
-        <tbody v-for="(legendaLocal, grupoNome) in agrupado">
-          <td class="grupo text-center" colspan="8">
-            <div>{{ grupoNome.toUpperCase() }}</div>
+        <tbody v-for="(legendLocal, groupName) in grouped">
+          <td class="group text-center" colspan="8">
+            <div>{{ groupName.toUpperCase() }}</div>
           </td>
-          <tr v-for="item in legendaLocal">
+          <tr v-for="item in legendLocal">
             <td class="parametro">
-              <span> {{ item.parametro }}</span>
+              <span> {{ item.parameter }}</span>
             </td>
             <td>
               <span> {{ item.description }}</span>
             </td>
             <td>
-              <span class="exemplo"> {{ item.exemplo }}</span>
+              <span class="exemplo"> {{ item.example }}</span>
             </td>
           </tr>
         </tbody>
@@ -38,21 +38,21 @@ import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
 import { mapGetters, mapState, mapMutations } from "vuex";
 
 export default {
-  name: "LegendaParametro",
+  name: "ParameterLegend",
   components: {
     ScrollBar,
     Search,
   },
   props: {
-    legenda: [],
+    legend: [],
   },
   data() {
     return {
-      legendaLocal: [],
+      legendLocal: [],
     };
   },
   mounted() {
-    this.legendaLocal = this.legenda;
+    this.legendLocal = this.legend;
   },
   methods: {
     ...mapMutations("generic", ["removeLoading"]),
@@ -60,36 +60,32 @@ export default {
   computed: {
     ...mapGetters("generic", ["groupBy"]),
     ...mapState("generic", ["search", "executedSearch", "clearedSearch"]),
-    agrupado() {
-      var lista = this.groupBy({ array: this.legendaLocal, key: "grupoNome" });
-      return lista;
+    grouped() {
+      var list = this.groupBy({ array: this.legendLocal, key: "groupName" });
+      return list;
     },
   },
   watch: {
     executedSearch: function () {
-      let legenda = [];
-
+      let legend = [];
       let self = this;
       setTimeout(function () {
-        self.legenda.forEach(function (item) {
-          if (self.search.filter.content == "igual") {
-            if (item.description == self.search.content) legenda.push(item);
+        self.legend.forEach(function (item) {
+          if (self.search.filter.content == "equal") {
+            if (item.description == self.search.content) legend.push(item);
           }
-
-          if (self.search.filter.content == "contem") {
-            if (item.description.includes(self.search.content)) legenda.push(item);
+          if (self.search.filter.content == "contains") {
+            if (item.description.includes(self.search.content)) legend.push(item);
           }
         });
-
-        self.legendaLocal = legenda;
-
+        self.legendLocal = legend;
         self.removeLoading(["search", "clean"]);
       }, 300);
     },
     clearedSearch: function () {
       let self = this;
       setTimeout(function () {
-        self.legendaLocal = self.legenda;
+        self.legendLocal = self.legend;
         self.removeLoading(["search", "clean"]);
       }, 300);
     },
@@ -114,7 +110,7 @@ export default {
   text-transform: uppercase;
 }
 
-.grupo {
+.group {
   background-color: #fafafc;
   font-size: 14px;
   font-weight: 500;

package/src/component/shared/ProgressBar.vue

@@ -1,21 +1,22 @@
-<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>
+<template>
+  <div>
+    <progress-bar :size="size" :text="text" :val="value" :max="max"></progress-bar>
+  </div>
+</template>
+<script>
+import ProgressBar from "vue-simple-progress";
+
+// não mudar o nome Progress para ProgressBar
+export default {
+  name: "Progress",
+  components: {
+    ProgressBar,
+  },
+  props: {
+    text: String,
+    value: Number,
+    max: Number,
+    size: String,
+  },
+};
+</script>

package/src/component/shared/QueryButton.vue

@@ -1,66 +1,66 @@
-<template>
-  <div>
-    <div class="alignment" v-for="item in items" :key="item.title">
-      <button
-        :class="{
-          'button-query': true,
-        }"
-        @click="execute(item.valor)"
-      >
-        <span class="icon"> <i :class="item.classIcon"></i></span>
-        <span class="title">{{ item.title }}</span>
-      </button>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "QueryButton",
-  props: ["items", "value", "clicked"],
-  data() {
-    return {
-      currentValue: 0,
-    };
-  },
-  methods: {
-    execute(valor) {
-      this.currentValue = valor;
-      this.$emit("input", valor);
-      if (this.clicked) this.clicked();
-    },
-  },
-};
-</script>
-<style scoped>
-.button-query {
-  cursor: pointer;
-  height: 35px;
-  border: 1px solid #d5d5d5;
-  background-color: white;
-  border-radius: 3px;
-  padding-left: 10px;
-  padding-right: 7px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-  font-size: 16px;
-  font-weight: normal;
-}
-
-.button-query:hover {
-  background-color: #d98621;
-  color: white;
-  border: none;
-}
-
-.icon {
-  font-size: 13px;
-}
-
-.title {
-  font-size: 16px;
-}
-
-.alignment {
-  display: inline-block;
-}
-</style>
+<template>
+  <div>
+    <div class="alignment" v-for="item in items" :key="item.title">
+      <button
+        :class="{
+          'button-query': true,
+        }"
+        @click="execute(item.valor)"
+      >
+        <span class="icon"> <i :class="item.classIcon"></i></span>
+        <span class="title">{{ item.title }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "QueryButton",
+  props: ["items", "value", "clicked"],
+  data() {
+    return {
+      currentValue: 0,
+    };
+  },
+  methods: {
+    execute(valor) {
+      this.currentValue = valor;
+      this.$emit("input", valor);
+      if (this.clicked) this.clicked();
+    },
+  },
+};
+</script>
+<style scoped>
+.button-query {
+  cursor: pointer;
+  height: 35px;
+  border: 1px solid #d5d5d5;
+  background-color: white;
+  border-radius: 3px;
+  padding-left: 10px;
+  padding-right: 7px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  font-size: 16px;
+  font-weight: normal;
+}
+
+.button-query:hover {
+  background-color: #d98621;
+  color: white;
+  border: none;
+}
+
+.icon {
+  font-size: 13px;
+}
+
+.title {
+  font-size: 16px;
+}
+
+.alignment {
+  display: inline-block;
+}
+</style>

package/src/component/shared/Report.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="preview">
+    <div class="toolbar">
+      <div class="icon-toolbar" v-print="'#printMe'">
+        <i class="fas fa-print"></i>
+      </div>
+      <div class="icon-toolbar icon-excel">
+        <ExportExcel :header="header" :data="data" />
+      </div>
+    </div>
+    <ScrollBar :minHeight="400" :maxHeight="820">
+      <br />
+      <div id="printMe" class="a4 footer">
+        <HeaderReport />
+        <table class="table table-responsive-xs">
+          <thead>
+            <tr>
+              <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 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 === '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>
+              </td>
+            </tr>
+          </tbody>
+          <tbody v-show="data.length == 0">
+            <tr>
+              <td colspan="12">
+                <span>Nenhum registro encontrado!</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div>
+          <TotalizationReport :totalization="totalization" :totalRecords="data.length" />
+        </div>
+      </div>
+    </ScrollBar>
+  </div>
+</template>
+
+<script>
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import HeaderReport from "../shared/HeaderReport.vue";
+import TotalizationReport from "../shared/TotalizationReport.vue";
+import ExportExcel from "@nixweb/nixloc-ui/src/component/shared/ExportExcel";
+import print from "vue-print-nb";
+
+import { mapState, mapMutations, mapActions } from "vuex";
+
+export default {
+  directives: {
+    print,
+  },
+  props: ["header", "data", "totalization"],
+  components: { ScrollBar, HeaderReport, TotalizationReport, ExportExcel },
+  methods: {
+    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;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+table tbody tr td {
+  max-width: 350px;
+}
+
+.table thead tr {
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+}
+
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 0px !important;
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+  padding-right: 5px !important;
+  border-bottom: 0px !important;
+  border-top: 0px !important;
+}
+
+.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;
+}
+
+.preview {
+  background-color: #fafafa;
+  padding-bottom: 20px;
+  border: 1px solid #e4e6ec;
+}
+
+.toolbar {
+  height: 40px;
+  border-bottom: 1px hsl(0, 0%, 82.7%) solid;
+  overflow: hidden;
+}
+
+.icon-toolbar {
+  width: 20px;
+  font-size: 18px;
+  margin-left: 10px;
+  margin-top: 2px;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.a4 {
+  max-width: 1100px;
+  min-height: 700px;
+  padding: 20px;
+  border-radius: var(--ck-border-radius);
+  background: white;
+  box-shadow: 0 0 5px hsl(0deg 0% 0% / 10%);
+  margin: 0 auto;
+}
+
+.footer {
+  margin-bottom: 10px;
+}
+
+.icon-excel {
+  color: green;
+}
+</style>

package/src/component/shared/SaveCancel.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <FixedBar posicao="rodape" v-show="formDirty && !modal.open">
-      <div>
+    <FixedBar position="footer" v-show="formDirty && !modal.open">
+      <div class="margin">
         <Button
-          key="cancelSaveCancel"
+          _key="cancelSaveCancel"
           eventName="cancelSaveCancel"
           title="Cancelar"
           type="danger"
@@ -11,7 +11,7 @@
           :clicked="cancel"
         />
         <Button
-          key="saveSaveCancel"
+          _key="saveSaveCancel"
           eventName="saveSaveCancel"
           title="Salvar"
           type="success"
@@ -34,13 +34,29 @@ export default {
   props: {
     formName: String,
   },
+  data() {
+    return {
+      id: this.$route.params.id,
+    };
+  },
+  mounted() {
+    if (!this.id) {
+      let self = this;
+      setTimeout(function () {
+        self.resetValidation(this.formName);
+        self.updateFormDirty(false);
+        self.removeLoading(["panel"]);
+      }, 350);
+    }
+  },
   computed: {
     ...mapState("validation", ["formDirty"]),
+    ...mapState("generic", ["loading"]),
     ...mapGetters("validation", ["isFormValid"]),
     ...mapState("generic", ["modal"]),
   },
   methods: {
-    ...mapMutations("validation", ["updateFormDirty"]),
+    ...mapMutations("validation", ["updateFormDirty", "resetValidation"]),
     ...mapMutations("generic", ["removeLoading"]),
     cancel() {
       this.updateFormDirty(false);
@@ -54,3 +70,8 @@ export default {
   },
 };
 </script>
+<style scoped>
+.margin{
+  margin-left: 0px;
+}
+</style>