@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/dashboard/rent/_RankingCollaborator.vue

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <div class="div-bar">
+      <HideShow :iconSize="30">
+        <Loading type="line" :center="false" v-show="loading" />
+        <Bar :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
+          :plugins="plugins" :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
+      </HideShow>
+    </div>
+  </div>
+</template>
+
+<script>
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import HideShow from "@nixweb/nixloc-ui/src/component/layout/HideShow.vue";
+import { Bar } from "vue-chartjs/legacy";
+
+import { mapGetters, mapActions } from "vuex";
+
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+} from "chart.js";
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+);
+
+export default {
+  name: "BarChart",
+  components: {
+    Bar,
+    Loading,
+    HideShow,
+  },
+  props: {
+    filterSelected: {
+      type: String,
+      default: "year",
+    },
+    chartId: {
+      type: String,
+      default: "bar-chart",
+    },
+    datasetIdKey: {
+      type: String,
+      default: "label",
+    },
+    width: {
+      type: Number,
+      default: 400,
+    },
+    height: {
+      type: Number,
+      default: 200,
+    },
+    cssClasses: {
+      default: "",
+      type: String,
+    },
+    styles: {
+      type: Object,
+      default: () => { },
+    },
+    plugins: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      urlGet: "/api/v1/rental/rent/ranking-collaborator-dashboard",
+      chartData: {
+        labels: [],
+        datasets: [],
+      },
+      chartOptions: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          y: {
+            ticks: {
+              callback: (value, index, values) => {
+                return `R$ ${this.formatMoney(value)}`;
+              },
+              font: {
+                size: 14,
+              },
+              color: '#787878',
+            },
+          },
+          x: {
+            ticks: {
+              font: {
+                size: 15,
+              },
+              color: '#787878',
+            },
+          },
+        },
+        plugins: {
+          legend: {
+            display: false,
+          },
+          tooltip: {
+            enabled: true,
+            callbacks: {
+              label: (tooltipItems) => {
+                return `R$ ${this.formatMoney(tooltipItems.raw)}`;
+              },
+            },
+          },
+        },
+      },
+      loading: true,
+    };
+  },
+  mounted() {
+    this.getAll();
+  },
+  computed: {
+    ...mapGetters("util", ["formatMoney"]),
+  },
+  methods: {
+    ...mapActions("generic", ["getApi"]),
+    getAll() {
+      this.loading = true;
+      let params = {
+        url: this.urlGet,
+        obj: { filterSelected: this.filterSelected },
+      };
+      this.getApi(params).then((response) => {
+        this.chartData.labels = response.content.labels;
+        this.chartData.datasets = response.content.datasets;
+        this.loading = false;
+      });
+    },
+  },
+  watch: {
+    filterSelected: {
+      handler() {
+        this.getAll();
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.div-bar {
+  padding: 8px;
+  height: 215px;
+}
+
+.div-title {
+  font-weight: 400;
+  font-size: 16px;
+}
+
+.div-title-top {
+  margin-bottom: 15px;
+}
+</style>

package/src/components/modules/dashboard/rent/_TotalRent.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <div class="div-total">
+      <Loading type="line" :center="false" v-show="loading" />
+      <div class="text-center">
+        <b-row>
+          <b-col sm="6">
+            <div class="text-left">
+              <span class="title-total-rent progress-rent">
+                <i class="fa-sharp fa-solid fa-file-invoice"></i>
+                <span class="title">Orçamento</span>
+              </span>
+            </div>
+          </b-col>
+          <b-col sm="6" class="text-left">
+            <HideShow :iconSize="18">
+              <span class="title-total-rent progress-rent">
+                {{ datasets[0] | currency }}
+              </span>
+            </HideShow>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col sm="6">
+            <div class="text-left">
+              <span class="title-total-rent accepted">
+                <i class="fa-solid fa-circle-check"></i>
+                <span class="title">Aprovada</span>
+              </span>
+            </div>
+          </b-col>
+          <b-col sm="6" class="text-left">
+            <HideShow :iconSize="18">
+              <span class="title-total-rent accepted">
+                {{ datasets[1] | currency }}
+              </span>
+            </HideShow>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col sm="6">
+            <div class="text-left">
+              <span class="title-total-rent rejected">
+                <i class="fa-solid fa-do-not-enter"></i>
+                <span class="title">Reprovada</span>
+              </span>
+            </div>
+          </b-col>
+          <b-col sm="6" class="text-left">
+            <HideShow :iconSize="18">
+              <span class="title-total-rent rejected">
+                {{ datasets[2] | currency }}
+              </span>
+            </HideShow>
+          </b-col>
+        </b-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import HideShow from "@nixweb/nixloc-ui/src/component/layout/HideShow.vue";
+
+import { mapActions, mapGetters } from "vuex";
+
+export default {
+  name: "TotalRent",
+  components: {
+    Loading,
+    HideShow,
+  },
+  props: {
+    filterSelected: {
+      type: String,
+      default: "year",
+    },
+  },
+  data() {
+    return {
+      urlGet: "/api/v1/rental/rent/total-rent-dashboard",
+      filter: { content: "Hoje", id: "today" },
+      loading: true,
+      datasets: [],
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
+  mounted() {
+    this.getAll();
+  },
+  methods: {
+    ...mapActions("generic", ["getApi"]),
+    getAll() {
+      this.loading = true;
+      let params = {
+        url: this.urlGet,
+        obj: { filter: this.filter.id },
+      };
+      this.getApi(params).then((response) => {
+        this.datasets = response.content;
+        this.loading = false;
+      });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "filterDashboard") {
+          this.filter = event.data;
+          this.getAll();
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.progress-rent {
+  color: #4bb4e2;
+}
+
+.accepted {
+  color: #38a169;
+}
+
+.rejected {
+  color: #f0134d;
+}
+
+.title-total-rent {
+  font-size: 18px;
+}
+
+.div-total {
+  padding: 2px;
+  margin: auto;
+  margin: 0;
+}
+
+.div-title {
+  margin-bottom: 15px;
+  font-weight: 400;
+  font-size: 16px;
+}
+
+.title {
+  font-size: 14px;
+  margin-left: 10px;
+}
+</style>

package/src/components/modules/dashboard/shared/SelectFilter.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="container-main">
+    <div class="container-icon side-by-side">
+      <i class="fa-duotone fa-solid fa-filters title"></i>
+    </div>
+    <div class="container-select side-by-side">
+      <SelectStatic :initialValue="{ content: 'Hoje', id: 'today' }" :data="options" v-model="filter" />
+    </div>
+    <div class="container-icon icon-eye side-by-side">
+      <i class="fa-solid fa-eye fa-eye icon-filter-dash title" v-if="isVisible" @click="handleIsVisible(false)"></i>
+      <i class="fa-solid fa-eye-slash icon-filter-dash title" v-else @click="handleIsVisible(true)"></i>
+    </div>
+    <div class="container-icon icon-refresh side-by-side">
+      <i v-if="!isLoading" class="fa-sharp fa-solid fa-arrows-rotate icon-filter-dash title" @click="refresh"></i>
+      <i v-else class="fa-sharp fa-solid fa-arrows-rotate loading icon-filter-dash title"></i>
+    </div>
+  </div>
+</template>
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+
+import { mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "SelectFilter",
+  components: {
+    Button,
+    SelectStatic,
+  },
+  data() {
+    return {
+      filter: {},
+      options: [
+        { content: "Hoje", id: "today" },
+        { content: "Semana Atual", id: "week" },
+        { content: "Mês Atual", id: "month" },
+        { content: "Ano Atual", id: "year" },
+      ],
+      isVisible: false,
+      isLoading: false
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    handleIsVisible(value) {
+      this.isVisible = value;
+      this.addEvent({ name: "hideShow", data: value });
+    },
+    refresh() {
+      this.isLoading = true;
+      this.addEvent({ name: "filterDashboard", data: this.filter });
+      setTimeout(() => {
+        this.isLoading = false;
+      }, 1000);
+    }
+  },
+  watch: {
+    filter: {
+      handler() {
+        this.addEvent({ name: "filterDashboard", data: this.filter });
+      },
+      deep: true,
+    },
+    event: {
+      handler(event) {
+        if (event.name == "filterInitialDashboard") {
+          if (event.data == "today") this.filter = this.options[0];
+          if (event.data == "week") this.filter = this.options[1];
+          if (event.data == "month") this.filter = this.options[2];
+          if (event.data == "year") this.filter = this.options[3];
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.container-main {
+  margin-top: 14px;
+  margin-bottom: -20px;
+  margin-left: 10px;
+}
+
+.container-icon {
+  margin-right: 20px;
+}
+
+.container-select {
+  width: 250px;
+}
+
+.icon-filter {
+  margin-top: 12px;
+  font-size: 16px;
+}
+
+.icon-eye {
+  margin-left: 20px;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.icon-refresh {
+  margin-left: -10px;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.refresh-btn:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+
+.loading {
+  animation: spin 0.8s linear infinite;
+}
+
+.icon-filter-dash {
+  font-size: 19px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/modules/dashboard/signature/PanelSignature.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="operational-main">
+        <b-row>
+            <b-col sm="9">
+                <div class="div-title text-left">
+                    <br />
+                    <span class="title-main">Assinatura Digital</span>
+                </div>
+            </b-col>
+        </b-row>
+        <b-row>
+            <b-col xs="12" sm="12" md="12" lg="12" xl="12">
+                <b-row>
+                    <b-col xs="12" sm="12" md="12" lg="6" xl="3">
+                        <div class="panel-signature text-center" @click="navegateTo('signatureList', 'signed')">
+                            <div class="div-signature-icon icon-signature-success side-by-side">
+                                <i class="fa-solid fa-circle-check"></i>
+                            </div>
+                            <div class="div-signature-subtitle side-by-side">
+                                {{ data.signed }}
+                                <span>Assinados</span>
+                            </div>
+                        </div>
+                    </b-col>
+                    <b-col xs="12" sm="12" md="12" lg="6" xl="3">
+                        <div class="panel-signature text-center" @click="navegateTo('signatureList', 'pending')">
+                            <div class="div-signature-icon icon-signature-peding side-by-side">
+                                <i class="fa-duotone fa-loader"></i>
+                            </div>
+                            <div class="div-signature-subtitle side-by-side">
+                                {{ data.pending }}
+                                <span>Pendente</span>
+                            </div>
+                        </div>
+                    </b-col>
+                    <b-col xs="12" sm="12" md="12" lg="6" xl="3">
+                        <div class="panel-signature text-center" @click="navegateTo('signatureList', 'refused')">
+                            <div class="div-signature-icon icon-signature-danger side-by-side">
+                                <i class="fa-solid fa-xmark-large"></i>
+                            </div>
+                            <div class="div-signature-subtitle side-by-side">
+                                {{ data.refused }}
+                                <span>Recusados</span>
+                            </div>
+                        </div>
+                    </b-col>
+                </b-row>
+            </b-col>
+        </b-row>
+    </div>
+</template>
+
+<script>
+import HideShow from "@nixweb/nixloc-ui/src/component/layout/HideShow.vue";
+
+import { mapGetters, mapActions } from "vuex";
+
+export default {
+    name: "PanelSignature",
+    components: {
+        HideShow,
+    },
+    data() {
+        return {
+            urlGet: "/api/v1/signature-file/total-dashboard",
+            data: {},
+            filter: { content: "Hoje", id: "today" },
+        };
+    },
+    mounted() {
+        this.getAll();
+    },
+    computed: {
+        ...mapGetters("generic", ["event"]),
+    },
+    methods: {
+        ...mapActions("generic", ["getApi"]),
+        getAll() {
+            this.loading = true;
+            let params = { url: this.urlGet, obj: { any: this.filter.id } };
+            this.getApi(params).then((response) => {
+                this.data = response.content;
+            });
+        },
+        navegateTo(routeName, status) {
+            this.$router.push({
+                name: routeName,
+                params: {
+                    filter: this.filter.id, status: status
+                }
+            });
+        },
+    },
+    watch: {
+        event: {
+            handler(event) {
+                if (event.name == "filterDashboard") {
+                    this.filter = event.data;
+                    this.getAll();
+                }
+            },
+            deep: true,
+        },
+    },
+};
+</script>
+
+<style scoped>
+.title-main {
+    font-size: 20px;
+    margin-left: 10px;
+}
+
+.panel-signature {
+    background-color: white;
+    border: 1px solid #e8eaed;
+    border-radius: 20px;
+    height: 100px;
+    margin-top: 15px;
+    margin-left: 3px;
+    cursor: pointer;
+}
+
+.div-signature-icon {
+    font-size: 20px;
+
+}
+
+.div-signature-subtitle {
+    font-size: 18px;
+    margin: 30px;
+}
+
+.icon-signature-success {
+    color: #38A169;
+}
+
+.icon-signature-peding {
+    color: #FFC106;
+}
+
+.icon-signature-danger {
+    color: red;
+}
+</style>