@nixweb/nixloc-ui 0.0.300 → 0.0.301

package/src/component/shared/Pagination.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <div class="pagination">
+      <button class="btn-pagination" @click="previousPage" :disabled="currentPage === 1 || currentPage > totalPages">
+        <i class="fa-solid fa-chevron-left"></i>
+      </button>
+      <div class="div-pagination text-center">
+        <span v-if="isLoading('loadingLine')">
+          <vue-loading type="bubbles" color="#FCA944" :size="{ width: '26px', height: '26px' }"></vue-loading>
+        </span>
+        <span v-else>
+          <div>
+            <span class="title">
+              <span v-if="totalPages == 0">0</span>
+              <span v-else>{{ currentPage }}</span> de {{ totalPages }}</span>
+          </div>
+        </span>
+      </div>
+      <button class="btn-pagination" @click="nextPage"
+        :disabled="currentPage === totalPages || currentPage > totalPages">
+        <i class="fa-solid fa-chevron-right"></i>
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+
+import { mapGetters, mapMutations, mapState } from "vuex";
+
+export default {
+  props: {
+    totalRecords: Number,
+  },
+  data() {
+    return {
+      currentPage: 1,
+      totalPerPage: 10 // Substitua pelo número de registros por página desejado
+    };
+  },
+  created() {
+    var filter = this.getFilterStorage(this.$route.name);
+    if (filter)
+      this.currentPage = filter.baseParams.currentPage;
+  },
+  computed: {
+    ...mapState("generic", ["paginations"]),
+    ...mapGetters("generic", ["isLoading", "getFilterStorage"]),
+    totalPages() {
+      return Math.ceil(this.totalRecords / this.paginations.totalPerPage);
+    },
+    paginatedData() {
+      const startIndex = (this.currentPage - 1) * this.paginations.totalPerPage;
+      const endIndex = Math.min(startIndex + this.paginations.totalPerPage, this.totalRecords);
+      return Array.from({ length: endIndex - startIndex }, (_, index) => index + startIndex + 1);
+    }
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    nextPage() {
+      if (this.currentPage < this.totalPages) {
+        this.currentPage++;
+      }
+      this.addEvent({ name: "page-click", data: this.currentPage });
+    },
+    previousPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+      }
+      this.addEvent({ name: "page-click", data: this.currentPage });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.div-pagination {
+  width: 100px;
+}
+
+.btn-pagination {
+  padding: 5px;
+  cursor: pointer;
+  border: none;
+  min-width: 35px;
+  border-radius: 30px !important;
+  font-size: 13px !important;
+  font-weight: 400;
+  letter-spacing: 1px !important;
+}
+
+
+.pagination {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+
+.pagination-button:hover {
+  background-color: #ccc;
+}
+
+.pagination-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

package/src/component/shared/ParameterLegend.vue

@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <Search />
+    <br />
+    <ScrollBar :minHeight="400" :maxHeight="400">
+      <table class="table table-responsive-xs">
+        <thead>
+          <tr>
+            <th><span class="title-header">Descrição</span></th>
+            <th><span class="title-header">Exemplo</span></th>
+            <th><span class="title-header">Parâmetro</span></th>
+          </tr>
+        </thead>
+        <tbody v-for="(legendLocal, groupName) in grouped">
+          <td class="group text-center" colspan="8">
+            <div>{{ groupName }}</div>
+          </td>
+          <tr v-for="item in legendLocal">
+            <td class="description">
+              <span> {{ item.description }}</span>
+            </td>
+            <td>
+              <span class="exemplo"> {{ item.example }}</span>
+            </td>
+            <td class="parametro">
+              <span @click="copy(item.parameter)" v-clipboard="item.parameter">
+                {{ item.parameter }}
+                <span v-if="item.parameter">
+                  <span class="copy" v-if="copied != item.parameter">
+                    <span>Copiar</span>
+                  </span>
+                  <span class="copied" v-else>
+                    <span>Copiado</span>
+                  </span>
+                </span>
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </ScrollBar>
+  </div>
+</template>
+<script>
+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: "ParameterLegend",
+  components: {
+    ScrollBar,
+    Search,
+  },
+  props: {
+    legend: [],
+    module: String,
+  },
+  data() {
+    return {
+      legendLocal: [],
+      copied: "",
+    };
+  },
+  mounted() {
+    this.legendLocal = this.legend;
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    copy(parameter) {
+      this.copied = parameter;
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["groupBy"]),
+    ...mapState("generic", ["search", "executedSearch", "clearedSearch"]),
+    grouped() {
+      let legend = [];
+    /*  this.legendLocal.forEach((item) => {
+        if (item.showModule.includes(this.module) || item.showModule == "all")
+          legend.push(item);
+      });*/
+
+      var list = this.groupBy({ array: this.legendLocal, key: "groupName" });
+      return list;
+    },
+  },
+  watch: {
+    executedSearch: function () {
+      let legend = [];
+      let self = this;
+      setTimeout(function () {
+        if (self.search.content) {
+          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 == "contains") {
+              if (item.description.includes(self.search.content))
+                legend.push(item);
+            }
+          });
+          self.legendLocal = legend;
+        }
+        self.removeLoading(["btnSearch", "btnClean"]);
+      }, 300);
+    },
+    clearedSearch: function () {
+      let self = this;
+      setTimeout(function () {
+        self.legendLocal = self.legend;
+        self.removeLoading(["btnSearch", "btnClean"]);
+      }, 300);
+    },
+  },
+};
+</script>
+<style scoped>
+.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;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.group {
+  background-color: #fafafc;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.description {
+  width: 350px;
+}
+
+.div-warning {
+  margin-bottom: 20px;
+}
+
+.parametro {
+  font: 12px;
+  width: 340px;
+  cursor: pointer;
+}
+
+.exemplo {
+  font-size: 14px;
+  color: rgb(31, 31, 82);
+}
+
+.copy {
+  color: rgb(31, 31, 82);
+}
+
+.copied {
+  color: red;
+}
+</style>

package/src/component/shared/ProgressBar.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <progress-bar :bg-color="bColor" :bar-color="bgColor" :size="size" :text="text" :val="value" :max="max"
+      bar-border-radius="10"></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: {
+    bgColor: String,
+    bColor: String,
+    text: String,
+    value: Number,
+    max: Number,
+    size: String,
+  },
+};
+</script>

package/src/component/shared/QueryButton.vue

@@ -0,0 +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>

package/src/component/shared/Report.vue

@@ -0,0 +1,200 @@
+<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" :style="'min-height:' + minHeight + 'px'" class="a4 footer">
+        <HeaderReport :title="titleHeader" />
+        <table class="table table-responsive-md">
+          <thead>
+            <tr>
+              <th v-for="(obj, ind) in header" :key="ind">
+                <div class="title-margem" :class="obj.classCssTitle" :style="obj.styleHeader">
+                  <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 :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
+        " v-if="obj.type === 'text'">
+                  {{ row[obj.field] }}
+                </div>
+                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
+        " v-if="obj.type === 'date'">
+                  {{ row[obj.field] | moment("DD/MM/YYYY") }}
+                </div>
+                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :class="convertClass(row[obj.fieldComparison], obj.classCssBody)
+        " v-if="obj.type === 'dateTime'">
+                  {{ row[obj.field] | moment("DD/MM/YYYY HH:mm") }}
+                </div>
+                <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)" :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" :totalizationCustom="totalizationCustom"
+            :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 { mapMutations } from "vuex";
+
+export default {
+  directives: {
+    print,
+  },
+  props: ["titleHeader", "header", "data", "totalization", "totalizationCustom", "minHeight"],
+  components: { ScrollBar, HeaderReport, TotalizationReport, ExportExcel },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    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;
+      }
+    },
+    sendEvent(eventName, data) {
+      if (eventName) this.addEvent({ name: eventName, data: data });
+    }
+  },
+};
+</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;
+  font-size: 13px !important;
+}
+
+.title-header {
+  font-size: 12px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.table-number {
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.table-main {
+  color: #757d8c;
+  max-width: 200px;
+}
+
+.table-currency {
+  font-size: 12px;
+  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;
+  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;
+}
+
+.danger {
+  color: #f0134d;
+}
+
+.progress-rent {
+  color: #4bb4e2;
+}
+
+.accepted {
+  color: #38a169;
+}
+
+.rejected {
+  color: #f0134d;
+}
+</style>

package/src/component/shared/SaveCancel.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <FixedBar :position="positionFixedBar" backgroundColor="#FAFAFC"
+      v-show="formDirty && !modal.open && on || showFixed">
+      <div :class="{ collapsed: menuCollapsed, notCollapsed: !menuCollapsed }"
+        :style="'margin-bottom:' + marginBottom + 'px'">
+        <Button _key="cancelSaveCancel" eventName="cancelSaveCancel" title="Cancelar" type="danger" size="small"
+          :clicked="cancel" />
+        <Button _key="saveSaveCancel" :eventName="eventName" classIcon="fa-solid fa-floppy-disk" title="Salvar"
+          type="success" :disabled="!isFormValid(formName)" size="medium" />
+        <slot></slot>
+      </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,
+    showFixed: {
+      type: Boolean,
+      default: false,
+    },
+    eventName: {
+      type: String,
+      default: "saveSaveCancel",
+    },
+    positionFixedBar: {
+      type: String,
+      default: "footer",
+    },
+    marginBottom: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      on: false,
+    };
+  },
+  mounted() {
+    if (!this.id) {
+      let self = this;
+      setTimeout(function () {
+        self.resetValidation(this.formName);
+        self.updateFormDirty(false);
+        self.removeLoading(["panel"]);
+      }, 350);
+    }
+
+    let self = this;
+    setTimeout(function () {
+      self.updateFormDirty(false);
+      self.on = true;
+    }, 1000);
+  },
+  computed: {
+    ...mapState("validation", ["formDirty"]),
+    ...mapState("generic", ["loading"]),
+    ...mapGetters("generic", ["event"]),
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapState("generic", ["modal", "menuCollapsed"]),
+  },
+  methods: {
+    ...mapMutations("validation", ["updateFormDirty", "resetValidation"]),
+    ...mapMutations("generic", ["removeLoading", "hideSideBar"]),
+    cancel() {
+      this.updateFormDirty(false);
+      this.removeLoading(["cancelSaveCancel"]);
+      this.hideSideBar();
+    },
+  },
+  watch: {
+    "modal.open": function () {
+      this.updateFormDirty(false);
+    },
+  },
+};
+</script>
+<style scoped>
+.collapsed {
+  margin-left: 0px;
+  transition: all 0.4s ease;
+}
+
+.notCollapsed {
+  margin-left: 130px;
+  transition: all 0.4s ease;
+}
+</style>