@nixweb/nixloc-ui 1.16.0 → 1.17.0

package/src/component/shared/TableDraggable.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <div class="margin">
+      <Button _key="btnCancelTableDraggable" title="Cancelar" type="danger" size="small" :clicked="cancel" />
+      <Button _key="btnCheckMoveTableDraggable" title="Confirmar" type="success" size="small" :clicked="checkMove" />
+    </div>
+    <i class="fa-regular fa-maximize icon-order"></i>
+    <span class="title">
+      Clique e arraste para ordenar
+    </span>
+    <table class="table table-responsive-xs">
+      <thead>
+        <tr>
+          <th>
+            <span class="title-header">Nome</span>
+          </th>
+        </tr>
+      </thead>
+      <draggable v-model="dataLocal" tag="tbody">
+        <tr v-for="item in dataLocal">
+          <td class="item-draggable">
+            <i class="fa-solid fa-grip-lines icon-order"></i>
+            <span v-if="item.name"> {{ item.name }}</span>
+            <span class="without-group" v-else> Sem grupo</span>
+          </td>
+        </tr>
+      </draggable>
+      <tbody v-show="dataLocal.length == 0">
+        <tr>
+          <td colspan="12">
+            <span>Nenhum registro encontrado!</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import draggable from "vuedraggable";
+
+import { mapMutations, mapActions } from "vuex";
+
+export default {
+  name: "TableDraggable",
+  components: { Button, draggable },
+  props: {
+    data: Array,
+    propsParam: Object,
+    urlOrderAllApi: String,
+  },
+  data() {
+    return {
+      dataLocal: [],
+    };
+  },
+  mounted() {
+    this.dataLocal = this.data;
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent", "removeLoading"]),
+    ...mapActions("generic", ["orderAllApi"]),
+    checkMove() {
+      let listIds = [];
+
+      this.dataLocal.forEach((item) => {
+        listIds.push(item.id);
+      });
+
+      let obj = { ...this.propsParam, listIds: listIds };
+      let params = { url: this.urlOrderAllApi, obj: obj };
+
+      this.orderAllApi(params).then((response) => {
+        this.removeLoading(["btnCheckMoveTableDraggable"]);
+        this.addEvent({ name: "confirmedTableDraggable" });
+      });
+    },
+    cancel() {
+      this.addEvent({ name: "cancelTableDraggable" });
+      this.removeLoading(["btnCancelTableDraggable"]);
+    },
+  },
+};
+</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;
+  text-transform: uppercase;
+}
+
+.item-draggable {
+  cursor: move;
+}
+
+.without-group {
+  font-size: 13px;
+  font-style: italic;
+  color: grey;
+}
+
+.margin {
+  margin-bottom: 10px;
+}
+</style>

package/src/component/shared/TableImport.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div class="div-main">
+      <br />
+      <table class="table table-responsive-xs">
+        <thead>
+          <tr>
+            <th v-for="(obj, ind) in headerTableMap" :key="ind" class="title-header">
+              <div class="div-select">           
+                <SelectStatic :title="obj.title" :data="select" :markFormDirty="false" :initialValue="obj.target"
+                  v-model="obj.target" />
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, index) in data" :key="index">
+            <td v-for="(obj, ind) in headerTable" :key="ind">
+              <div>{{ row[obj.field] }}</div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+
+export default {
+  components: {
+    SelectStatic,
+  },
+  props: {
+    select: Array,
+    headerTable: Array,
+    data: Array,
+  },
+  name: "TableImport",
+  data() {
+    return {};
+  },
+  computed: {
+    headerTableMap() {
+      var i = 0;
+      this.headerTable.forEach((item) => {
+        item.target = this.select[i];
+        i++;
+      });
+
+      return this.headerTable;
+    },
+  },
+  methods: {},
+};
+</script>
+<style scoped>
+.div-main {
+  overflow: auto;
+  white-space: nowrap;
+  min-height: 450px;
+}
+
+.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;
+  width: 200px !important;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+}
+
+.tabela-description {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
+.div-select {
+  width: 310px;
+}
+</style>

package/src/component/shared/TableItem.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="item-main">
+    <div v-if="obj.type === 'period-rent'" class="period-rent" @click="navegateTo(obj, row)" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      <DisplayPeriodRent :periodRent="row[obj.field]" :fontSize="14" :showDeliveryDevolution="true" />
+    </div>
+    <div v-if="obj.type === 'text'" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      {{ row[obj.field] }}
+      <div>{{ row[obj.fieldSecond] }}</div>
+    </div>
+    <div v-if="obj.type === 'image'" :style="obj.styleBody">
+      <img :class="convertClass(row[obj.fieldComparison], obj.classCssBody)" class="img"
+        :src="urlImage + obj.container + '/' + row[obj.field]" />
+    </div>
+    <div v-if="obj.type === 'class'" class="text-center">
+      <div :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+        {{ row[obj.field] }}
+      </div>
+    </div>
+    <div class="item-align-center" v-if="obj.type === 'html' && row[obj.field]" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      <div v-if="row[obj.field]" v-html="row[obj.field]"></div>
+      <div v-else v-html="obj.html"></div>
+      <div v-html="row[obj.fieldSecond]"></div>
+    </div>
+    <div v-if="obj.type === 'select'" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      {{ row[obj.field].content }}
+    </div>
+    <div v-if="obj.type === 'date'" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      {{ row[obj.field] | moment("DD/MM/YYYY") }}
+    </div>
+    <div v-if="obj.type === 'dateTime'" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      {{ row[obj.field] | moment("DD/MM/YYYY HH:mm") }}
+    </div>
+    <div v-if="obj.type === 'currency'" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      {{ row[obj.field] | currency }}
+    </div>
+    <div class="hide-print" v-if="obj.type === 'button'" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+      <TableButton v-if="obj.ifFieldEqual == row[obj.field]" :obj="obj" :row="row" />
+    </div>
+    <div v-if="obj.type === 'link'" :style="obj.styleBody"
+      :class="convertClass(row[obj.fieldComparison], obj.classCssBody)" @click="navegateTo(obj, row)">
+      <div class="div-progress" v-if="idSelected == row.id">
+        <ProgressBar bgColor="orange" bColor="#CCCCCC" size="4" :value="loadingProgress" :max="100" />
+      </div>
+      <div class="link" v-else>
+        <span> {{ row[obj.field] }}</span>
+        <div class="field-second">{{ row[obj.fieldSecond] }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import TableButton from "@nixweb/nixloc-ui/src/component/shared/TableButton.vue";
+import DisplayPeriodRent from "@nixweb/nixloc-ui/src/component/rental/DisplayPeriodRent";
+import ProgressBar from "@nixweb/nixloc-ui/src/component/shared/ProgressBar";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "TableItem",
+  components: { TableButton, DisplayPeriodRent, ProgressBar },
+  props: {
+    obj: Object,
+    row: Object,
+  },
+  data() {
+    return {
+      idSelected: "",
+      loadingProgress: 0,
+    };
+  },
+  computed: {
+    urlImage() {
+      return "https://espaco.blob.core.windows.net/";
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["addSelected", "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;
+      }
+    },
+    isVisible(conditionVisibility, row) {
+      // se for undefined, quer dizer que não tem condicional, então pode mostrar
+      // if (conditionVisibility == undefined) return true;
+
+      return eval(conditionVisibility);
+    },
+    navegateTo(obj, row) {
+      this.idSelected = row.id;
+      this.startLoading(obj, row);
+    },
+    startLoading(obj, row) {
+      let self = this;
+      const interval = setInterval(() => {
+        if (self.loadingProgress < 100) {
+          self.loadingProgress += 10;
+        } else {
+          clearInterval(interval);
+        }
+      }, 50);
+    }
+  },
+  watch: {
+    loadingProgress: {
+      handler(loadingProgress) {
+        if (loadingProgress == 100) {
+          if (this.obj.routeName) {
+            this.$router.push({
+              name: this.obj.routeName,
+              params: { id: this.row.id, type: this.row.type },
+            });
+          } else {
+            this.addEvent({
+              name: this.obj.eventName,
+              data: this.row,
+            });
+
+            let self = this;
+            setTimeout(function () {
+              self.idSelected = "";
+              self.loadingProgress = 0;
+            }, 200);
+          }
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.field-second {
+  color: rgb(83, 82, 82);
+  font-size: 13px;
+}
+
+.table-currency {
+  font-size: 14px;
+  min-width: 100px;
+}
+
+.link {
+  color: #3f529b;
+  font-size: 14px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.link:hover {
+  text-decoration: underline;
+  transition: 0.1s;
+}
+
+.icon-link:hover {
+  font-size: 12.5px;
+}
+
+.center-vertical {
+  padding-top: 5px;
+}
+
+.center-vertical-bank {
+  padding-top: 6px;
+}
+
+.badge-center {
+  margin: auto !important;
+}
+
+.img {
+  width: 50px;
+  height: 50px;
+}
+
+.img-round {
+  border-radius: 30px;
+}
+
+.img-bank {
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+}
+
+.img-user {
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+}
+
+.period-rent {
+  cursor: pointer;
+}
+
+.div-progress {
+  margin-top: 11px;
+  width: 200px;
+}
+
+.item-main {
+  display: table;
+  height: 100%;
+  width: 100%;
+}
+
+.item-main>* {
+  display: table-cell;
+  vertical-align: middle;
+}
+</style>

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>