@nixweb/nixloc-ui 1.16.0 → 1.19.0

package/src/component/shared/TableTotalPerPage.vue

@@ -0,0 +1,114 @@
+<template>
+    <div v-if="showTotalPerPage && totalRecords > 0" class="pagination-wrapper">
+        <ul class="pagination-list">
+            <li v-for="opt in filteredOptions" :key="opt">
+                <button class="pagination-pill" :class="{ 'is-selected': value === opt }" type="button"
+                    @click="select(opt)">
+                    {{ opt }}
+                </button>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from "vuex";
+
+export default {
+    name: "PaginationPerPage",
+    props: {
+        totalRecords: { type: Number, default: 0 },
+        showTotalPerPage: { type: Boolean, default: true },
+    },
+    data() {
+        return {
+            value: 10,
+            options: [10, 20, 50, 100],
+        };
+    },
+    computed: {
+        ...mapState("generic", ["paginations"]),
+        filteredOptions() {
+            const total = this.totalRecords;
+
+            if (total <= 10) return [10];
+            if (total <= 20) return [10, 20];
+            if (total <= 50) return [10, 20, 50];
+            if (total <= 100) return [10, 20, 50, 100];
+            return this.options;
+        },
+    },
+    created() {
+        const fromStore = Number(this.paginations?.totalPerPage);
+        if (Number.isFinite(fromStore)) {
+            this.value = fromStore;
+        }
+        this.updateTotalPerPage({ content: String(this.value), id: this.value });
+    },
+    methods: {
+        ...mapMutations("generic", ["executedSearch", "updateTotalPerPage"]),
+        select(opt) {
+            if (this.value === opt) return;
+            this.value = opt;
+            this.updateTotalPerPage({ content: String(opt), id: opt });
+            this.executedSearch();
+        },
+    },
+    watch: {
+        totalRecords() {
+            if (this.totalRecords <= 0) return;
+            if (!this.filteredOptions.includes(this.value)) {
+                const next = this.filteredOptions[this.filteredOptions.length - 1];
+                this.value = next;
+                this.updateTotalPerPage({ content: String(next), id: next });
+            }
+        },
+    },
+};
+</script>
+
+<style scoped>
+.pagination-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    width: 100%;
+    font-family: inherit;
+}
+
+.pagination-list {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.pagination-pill {
+    width: 31px;
+    height: 31px;
+    border-radius: 50%;
+    background: #f5f5f5;
+    border: none;
+    color: #444;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.2s, color 0.2s, transform 0.1s;
+}
+
+.pagination-pill:hover {
+    background: #e0e0e0;
+}
+
+.pagination-pill.is-selected {
+    background: #D98621;
+    color: #fff;
+}
+
+.pagination-pill:active {
+    transform: scale(0.95);
+}
+</style>

package/src/component/shared/TableTotalRecords.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="row c-div-total">
+    <div class="col-sm-12 text-right">
+      <span class="c-title">
+        Total de
+        <div class="badge">
+          <span class="total-records">{{ totalRecords }}</span>
+        </div>
+        <span class="records">registro(s)</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TableTotalRecords",
+  props: {
+    totalRecords: {
+      type: Number,
+      default: 0,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.c-div-total {
+  padding-bottom: 10px;
+}
+
+.c-title {
+  font-size: 14px;
+}
+
+.total-records {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.records {
+  margin-left: 5px;
+}
+</style>

package/src/component/shared/TableTotalization.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div class="badge-side-by-side text-center" v-for="item in totalization" :key="item.title">
+      <div class="badge-totalization" :class="item.classCss">
+        <i :class="item.classIcon"></i>
+        <span class="title-totalization"> {{ item.title }} </span>
+        <span>{{ item.value | currency }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TableTotalization",
+  props: {
+    totalization: Array,
+  },
+};
+</script>
+
+<style scoped>
+.badge-side-by-side {
+  display: inline-block;
+  margin-right: 8px;
+  margin-bottom: 10px;
+}
+
+.badge-totalization {
+  border: 1px solid #e6e7eb;
+  padding: 3px 8px 3px 8px;
+  border-radius: 30px;
+  font-size: 13px;
+}
+
+.title-totalization{
+  margin-left: 1px;
+}
+
+.revenue {
+  color: darkblue;
+}
+
+.expense {
+  color: red;
+}
+</style>

package/src/component/shared/TimeLine.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <Loading :center="false" v-if="loading" />
+    <div v-else>
+      <ScrollBar :minHeight="200" :maxHeight="300">
+        <Timeline dateLocale="pt-BR" order="desc" :uniqueTimeline="true" :timeline-items="timelineItems"
+          message-when-no-items="Nenhum registro encontrado!" />
+      </ScrollBar>
+    </div>
+  </div>
+</template>
+<script>
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Timeline from "timeline-vuejs";
+
+import { mapGetters, mapActions } from "vuex";
+
+export default {
+  name: "TimeLine",
+  props: {
+    loading: Boolean,
+    timelineItems: Array,
+  },
+  components: {
+    Loading,
+    Timeline,
+    ScrollBar,
+  },
+};
+</script>
+<style>
+.timeline {
+  max-width: 1000px !important;
+}
+
+.timeline-item .date-item {
+  font-size: 14px !important;
+  letter-spacing: 1px !important;
+  font-weight: normal !important;
+}
+</style>

package/src/component/shared/Timer.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <span v-if="play" class="pause" @click="play = false">
+      <i class="fa-solid fa-pause"></i>
+    </span>
+    <span v-else class="play" @click="play = true">
+      <i class="fa-solid fa-play"></i>
+    </span>
+    <span class="title"> {{ title }}</span>
+    <span class="title timer">
+      {{ time }}
+    </span>
+    <span class="title"> segundos...</span>
+  </div>
+</template>
+<script>
+export default {
+  name: "Timer",
+  props: {
+    initialTimer: {
+      type: Number,
+      default: 10,
+    },
+    title: {
+      type: String,
+      default: "Atualizado em",
+    },
+    endTime: Function,
+  },
+  data() {
+    return {
+      time: 10,
+      play: true,
+    };
+  },
+  created() {
+    this.time = this.initialTimer;
+    this.start();
+  },
+  methods: {
+    start() {
+      this.$options.interval = setInterval(this.decrement, 1000);
+    },
+    stop() {
+      clearInterval(this.$options.interval);
+    },
+    decrement() {
+      if (this.play) this.time--;
+    },
+  },
+  watch: {
+    time() {
+      if (this.time == 0) {
+        this.time = this.initialTimer;
+        clearInterval(this.$options.interval);
+        if (this.endTime) this.endTime();
+        this.start();
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.timer {
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.play {
+  color: darkblue;
+  cursor: pointer;
+}
+
+.pause {
+  color: red;
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,69 @@
+<template></template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "Notificacao",
+  computed: {
+    ...mapState("generic", ["toast"]),
+  },
+  watch: {
+    toast: {
+      handler(value) {
+        this.notifica(value);
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    notifica(value) {
+      if (value.type == "postApi" || value.type == "putApi")
+        this.$toasted.show("Salvo com sucesso", {
+          type: "success",
+        });
+      if (value.type == "postApiError" || value.type == "putApiErro") {
+        this.$toasted.show("Não foi possível adicionar/modificar", {
+          type: "error",
+        });
+        this.voltarParaTopo();
+      }
+
+      if (value.type == "removerTodosApiSucesso")
+        this.$toasted.show("Removido com sucesso", {
+          type: "success",
+        });
+      if (value.type == "removerTodosApiErro") {
+        this.$toasted.show("Não foi possível remover", {
+          type: "error",
+        });
+        this.voltarParaTopo();
+      }
+
+      if (value.type == "noPermission") {
+        this.$toasted.show("Usuário sem permissão", {
+          type: "error",
+        });
+        this.voltarParaTopo();
+      }
+
+      if (value.type == "falhaGenerica") {
+        this.$toasted.show("Ops! Falha de servidor", {
+          type: "error",
+        });
+        this.voltarParaTopo();
+      }
+
+      if (value.type == "messageError") {
+        this.$toasted.show("Ops! Algo deu errado", {
+          type: "error",
+        });
+        this.voltarParaTopo();
+      }
+    },
+    voltarParaTopo() {
+      window.scrollTo(0, 0);
+    },
+  },
+};
+</script>

package/src/component/shared/ToggleTheme.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="toggle-container">
+        <label class="switch">
+            <input type="checkbox" v-model="isDarkMode" @change="toggleTheme">
+            <span class="slider round">
+                <div class="icon-theme-light" v-if="themeLabel == 'Dark'">
+                    <i class="fa-solid fa-sun"></i>
+                </div>
+                <div class="icon-theme-dark" v-if="themeLabel == 'Light'">
+                    <i class="fa-solid fa-moon"></i>
+                </div>
+            </span>
+        </label>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            isDarkMode: false,
+        };
+    },
+    computed: {
+        themeLabel() {
+            return this.isDarkMode ? 'Dark' : 'Light';
+        }
+    },
+    methods: {
+        toggleTheme() {
+            if (this.isDarkMode) {
+                document.body.classList.add('dark-theme');
+                document.body.classList.remove('light-theme');
+            } else {
+                document.body.classList.add('light-theme');
+                document.body.classList.remove('dark-theme');
+            }
+        },
+    },
+    mounted() {
+        if (localStorage.getItem('theme') === 'dark') {
+            this.isDarkMode = true;
+            document.body.classList.add('dark-theme');
+            document.body.classList.remove('light-theme');
+        } else {
+            this.isDarkMode = false;
+            document.body.classList.add('light-theme');
+            document.body.classList.remove('dark-theme');
+        }
+    },
+    watch: {
+        isDarkMode(newVal) {
+            localStorage.setItem('theme', newVal ? 'dark' : 'light');
+        }
+    }
+};
+</script>
+
+<style scoped>
+.icon-theme-dark {
+    margin-left: 26px;
+    margin-top: -2px;
+}
+
+.icon-theme-light {
+    margin-left: 6px;
+    margin-top: -3px;
+    color: white;
+}
+
+
+.toggle-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 45px;
+    height: 22px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 14px;
+    width: 14px;
+    border-radius: 50%;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: 0.4s;
+}
+
+input:checked+.slider {
+    background-color: #ccc;
+}
+
+input:checked+.slider:before {
+    transform: translateX(20px);
+}
+
+.theme-indicator {
+    font-size: 12px;
+    font-weight: bold;
+    color: #333;
+}
+</style>

package/src/component/shared/TotalizationReport.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <hr class="hr-report" />
+    <div class="text-right">
+      <b-row>
+        <b-col sm="9">
+          <span class="title-report-header"> Total de Registros .................. </span>
+        </b-col>
+        <b-col sm="3">
+          <span class="title-report-header value-report-header"> {{ totalRecords }} </span>
+        </b-col>
+      </b-row>
+      <!-- Utilizado para calculo do subReport -->
+      <b-row v-if="totalizationCustom">
+        <b-col sm="9">
+          <span class="title-report-header"> {{ totalizationCustom[0].title }} .................. </span>
+        </b-col>
+        <b-col sm="3">
+          <span class="title-report-header value-report-header"> {{ totalizationCustom[0].value | currency }} </span>
+        </b-col>
+      </b-row>
+    </div>
+    <div class="text-right" v-for="item in totalization" :key="item.title">
+      <b-row>
+        <b-col sm="10">
+          <span v-if="convertName(item[0]).type == 'currency'">
+            <span class="title-report-header">
+              {{ convertName(item[0]).title }} ..................
+            </span>
+          </span>
+        </b-col>
+        <b-col sm="2">
+          <span v-if="convertName(item[0]).type == 'currency'">
+            {{ item[1] | currency }}
+          </span>
+          <span v-if="convertName(item[0]).type == 'numeric'">
+            {{ Math.round(item[1]) }}
+          </span>
+        </b-col>
+      </b-row>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "TotalizationReport",
+  props: ["totalization", "totalizationCustom", "totalRecords"],
+  computed: {
+    ...mapState("report", ["finalQueryFormatOData"]),
+  },
+  methods: {
+    convertName(value) {
+      var filter = this.finalQueryFormatOData.totalization.filter((item) => {
+        return item.value == value;
+      });
+      return Object.assign(filter[0]);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.title-report-header {
+  font-size: 15px;
+  font-weight: 400;
+}
+
+.value-report-header {
+  margin-left: 50px;
+}
+
+.hr-report {
+  background: black !important;
+  height: 0px !important;
+}
+
+.receipt {
+  color: darkblue;
+}
+
+.div-title {
+  margin-right: 0px;
+}
+</style>