@nixweb/nixloc-ui 0.0.273 → 0.0.274

package/src/component/shared/ListNotifications.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <ScrollBar :minHeight="400" :maxHeight="400">
+      <div>
+        <br />
+        <table class="table table-responsive-xs">
+          <thead>
+            <tr>
+              <th class="title-header">Mensagem</th>
+            </tr>
+          </thead>
+          <tbody v-for="error in listError">
+            <tr>
+              <td>
+                <span class="message"> {{ error }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </ScrollBar>
+  </div>
+</template>
+
+<script>
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+
+export default {
+  name: "ListNotifications",
+  props: {
+    listError: Array,
+  },
+  components: {
+    ScrollBar,
+  },
+};
+</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;
+  padding-left: 10px !important;
+  border-bottom: 0px !important;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+}
+
+.tabela-principal {
+  font-size: 14px;
+  max-width: 200px;
+}
+
+.tabela-descricao {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
+.message {
+  color: red;
+}
+</style>

package/src/component/shared/Loading.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div v-if="type == 'bubbles'" :class="{ loading: center }">
+      <vue-loading
+        type="bubbles"
+        :color="color"
+        :size="{ width: width + 'px', height: height + 'px' }"
+      ></vue-loading>
+    </div>
+    <div v-if="type == 'line'">
+      <div class="loader">
+        <div class="loader__element"></div>
+      </div>
+    </div>
+    <div :class="{ 'loading-text': center }">
+      <div>
+        <div class="message">{{ message }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Loading",
+  props: {
+    height: {
+      type: Number,
+      default: 70,
+    },
+    width: {
+      type: Number,
+      default: 70,
+    },
+    center: {
+      type: Boolean,
+      default: true,
+    },
+    color: {
+      type: String,
+      default: "#D98621",
+    },
+    type: {
+      type: String,
+      default: "bubbles",
+    },
+    message: String,
+  },
+};
+</script>
+
+<style scoped>
+.loading {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.loading-text {
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.message {
+  font-size: 15px;
+  margin-top: 5px;
+}
+
+.loader {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: flex-start;
+  z-index: 100000;
+}
+
+.loader__element {
+  height: 3px;
+  width: 100%;
+  background: #fbf2e8;
+}
+
+.loader__element:before {
+  content: "";
+  display: block;
+  background-color: #fca944;
+  height: 3px;
+  width: 0;
+  animation: getWidth 1s ease-in infinite;
+}
+
+@keyframes getWidth {
+  100% {
+    width: 100%;
+  }
+}
+</style>

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 class="side-by-side" v-for="notification in storageNotification">
+            <div class="side-by-side text">
+              {{ notification.message }}
+            </div>
+          </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: 20,
+      countdown: 20,
+      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: 50px;
+}
+
+.div-message-modal {
+  margin-bottom: 5px;
+}
+
+.invalid {
+  color: #f0134d;
+}
+
+.text {
+  margin-right: 10px;
+}
+</style>

package/src/component/shared/PDFViewer.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <iframe src="https://espaco.blob.core.windows.net/nixloc-preview/H0R078NIPG6BXT8703S0_3.pdf" width="100%" height="800px"></iframe>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "PDFViewer",
+  props: {
+    pdfSrc: String,
+  }
+};
+</script>
+
+<style>
+iframe {
+  width: 100%;
+  height: 800px;
+  border: 0px;
+  border-radius: 10px;
+}
+</style>

package/src/component/shared/Pagination.vue

@@ -0,0 +1,106 @@
+<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"> {{ currentPage }} 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,22 @@
+<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

@@ -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>