@nixweb/nixloc-ui 0.0.124 → 0.0.127

package/src/component/layout/Wizard.vue

@@ -2,32 +2,30 @@
   <div>
     <div class="wrapper-stepper">
       <div class="stepper">
-        <div class="stepper-progress" v-if="mostrarPassos">
+        <div class="stepper-progress" v-if="showSteps">
           <div class="stepper-progress-bar" :style="'width:' + stepperProgress"></div>
         </div>
 
         <div
           class="stepper-item"
-          v-if="mostrarPassos"
+          v-if="showSteps"
           :class="{ current: step == item, success: step > item }"
-          v-for="item in etapa"
+          v-for="item in totalSteps"
           :key="item"
         >
           <div class="stepper-item-counter">
             <img
               class="icon-success"
               src="https://www.seekpng.com/png/full/1-10353_check-mark-green-png-green-check-mark-svg.png"
-              alt=""
             />
             <span class="number">
               {{ item }}
             </span>
           </div>
-          <div class="stepper-item-title text-center">{{ legenda[item - 1] }}</div>
+          <div class="stepper-item-title text-center">{{ legend[item - 1] }}</div>
         </div>
       </div>
-
-      <div class="stepper-content" v-for="item in etapa" :key="item">
+      <div class="stepper-content" v-for="item in totalSteps" :key="item">
         <div class="stepper-pane" v-if="step == item">
           <slot :name="step"></slot>
         </div>
@@ -35,7 +33,7 @@
       <div class="controls">
         <button class="btn" @click="step--" v-if="step != 1">Anterior</button>
         <button
-          v-if="step < etapa"
+          v-if="step < totalSteps"
           class="btn btn--green-1"
           @click="step++"
           :disabled="!isFormValid(formName[step - 1])"
@@ -43,7 +41,7 @@
           Próximo
         </button>
         <div class="slot-final" v-else>
-          <slot name="finalizar"></slot>
+          <slot name="finish"></slot>
         </div>
       </div>
     </div>
@@ -56,10 +54,10 @@ import { mapGetters, mapActions, mapMutations } from "vuex";
 export default {
   name: "Wizard",
   props: {
-    etapa: Number,
-    legenda: Array,
+    totalSteps: Number,
+    legend: Array,
     formName: Array,
-    mostrarPassos: {
+    showSteps: {
       type: Boolean,
       default: true,
     },
@@ -72,7 +70,7 @@ export default {
   computed: {
     ...mapGetters("validation", ["isFormValid"]),
     stepperProgress() {
-      return (100 / this.etapa) * (this.step - 1) + "%";
+      return (100 / this.totalSteps) * (this.step - 1) + "%";
     },
   },
 };

package/src/component/shared/BodyReport.vue

@@ -0,0 +1,186 @@
+<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>
+    </ScrollBar>
+  </div>
+</template>
+
+<script>
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import HeaderReport from "../shared/HeaderReport.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: Array,
+    data: Array,
+  },
+  components: { ScrollBar, HeaderReport, 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 rgb(172, 172, 172);
+  border-bottom: 1px solid rgb(172, 172, 172);
+}
+
+.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/Confirmation.vue

@@ -50,9 +50,9 @@ export default {
     confirmed: Function,
   },
   methods: {
-    ...mapMutations("generic", ["showModal", "hideModal", "removeLoading"]),
+    ...mapMutations("generic", ["openModal", "hideModal", "removeLoading"]),
     execute() {
-      this.showModal(`confirmation${this.data.id}`);
+      this.openModal(`confirmation${this.data.id}`);
     },
     confirm() {
       let self = this;

package/src/component/shared/DocumentEditor.vue

@@ -50,7 +50,7 @@ export default {
       toolbarContainer.appendChild(editor.ui.view.toolbar.element);
     },
     changed() {
-      this.addEvent({ nome: "documentEditorChanged" });
+      this.addEvent({ name: "documentEditorChanged" });
     },
   },
 };

package/src/component/shared/ExportExcel.vue

@@ -7,13 +7,7 @@
       worksheet="Planilha"
       :name="`${fileName}.xls`"
     >
-      <Button
-        key="exportExcel"
-        :type="button.type"
-        :title="button.title"
-        classIcon="fas fa-file-excel"
-        :size="button.size"
-      />
+      <i class="fas fa-file-excel"></i>
     </download-excel>
   </div>
 </template>
@@ -26,7 +20,6 @@ import { mapMutations } from "vuex";
 export default {
   name: "ExportExcel",
   props: {
-    button: Object,
     header: Array,
     data: Array,
   },

package/src/component/shared/{HeaderPrint.vue → HeaderReport.vue}

@@ -1,5 +1,5 @@
 <template>
-  <div class="div-header somente-impressao">
+  <div class="div-header">
     <div class="title">{{ fileName }}</div>
     <div class="side-by-side div-tag" v-for="tag in tags" :key="tag.id">
       <span>{{ tag.title }}</span> <span>{{ tag.value }}</span>
@@ -12,7 +12,7 @@
 import { mapGetters } from "vuex";
 
 export default {
-  name: "HeaderPrint",
+  name: "HeaderReport",
   computed: {
     ...mapGetters("report", ["tags"]),
     fileName() {
@@ -23,7 +23,7 @@ export default {
 </script>
 <style scoped>
 .div-header {
-  margin: 20px;
+  margin-bottom: 20px;
 }
 
 .div-tag {

package/src/component/shared/HorizontalFilter.vue

@@ -18,7 +18,7 @@
         </b-col>
         <b-col xs="12" sm="12" md="12" lg="2" xl="2" v-if="showTotalPerPage">
           <SelectStatic
-            title="show"
+            title="Mostrar"
             fieldTarget="totalPerPage"
             :initialValue="{ content: '10', id: 10 }"
             :data="[

package/src/component/shared/Loading.vue

@@ -42,7 +42,7 @@ export default {
     },
     type: {
       type: String,
-      default: "bolhas",
+      default: "bubbles",
     },
     message: String,
   },

package/src/component/shared/Messages.vue

@@ -1,11 +1,9 @@
 <template>
   <div>
     <div :class="{ 'div-message': !modal.open }" v-if="storageNotification.length > 0">
-      <div>
+      <div v-for="notification in storageNotification">
         <Alert type="danger">
-          <div v-for="notification in storageNotification">
-            {{ notification.message }}
-          </div>
+          {{ notification.message }}
         </Alert>
       </div>
       <b-alert

package/src/component/shared/Pagination.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <b-pagination
-      v-model="pagination(key).currentPage"
+      v-model="pagination(_key).currentPage"
       prev-text="Anterior"
       next-text="Próximo"
       align="right"
       :hide-goto-end-buttons="true"
-      :per-page="pagination(key).totalPerPage"
+      :per-page="pagination(_key).totalPerPage"
       :total-rows="totalRecords"
     ></b-pagination>
   </div>
@@ -18,12 +18,12 @@ import { mapGetters, mapMutations } from "vuex";
 export default {
   name: "Pagination",
   props: {
-    key: String,
+    _key: String,
     totalRecords: Number,
   },
   created() {
     this.addPagination({
-      key: this.key,
+      key: this._key,
       currentPage: 1,
       totalPerPage: 10,
     });
@@ -38,7 +38,6 @@ export default {
 </script>
 
 <style>
-
 .page-item {
   font-size: 13px !important;
 }

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Pesquisa />
+    <Search />
     <br />
     <ScrollBar :minHeight="400" :maxHeight="400">
       <table class="table table-responsive-xs">
@@ -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>
@@ -32,27 +32,27 @@
   </div>
 </template>
 <script>
-import Pesquisa from "@nixweb/nixloc-ui/src/component/shared/Pesquisa.vue";
+import Search from "@nixweb/nixloc-ui/src/component/shared/Search.vue";
 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,
-    Pesquisa,
+    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

@@ -6,8 +6,9 @@
 <script>
 import ProgressBar from "vue-simple-progress";
 
+// não mudar o nome Progress para ProgressBar
 export default {
-  name: "ProgressBar",
+  name: "Progress",
   components: {
     ProgressBar,
   },

package/src/component/shared/SaveCancel.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <FixedBar posicao="rodape" v-show="formDirty && !modal.open">
+    <FixedBar position="footer" v-show="formDirty && !modal.open">
       <div>
         <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);