@nixweb/nixloc-ui 0.0.273 → 0.0.274

package/src/component/signature/Payment.vue

@@ -0,0 +1,161 @@
+<template>
+    <div>
+        <table class="table table-responsive-xs">
+            <thead>
+                <tr>
+                    <th>
+                        <span class="title-header">Descrição</span>
+                    </th>
+                    <th class="text-center">
+                        <span class="title-header">
+                            <span>Vencimento</span>
+                        </span>
+                    </th>
+                    <th class="text-center">
+                        <span class="title-header">
+                            <span>Status</span>
+                        </span>
+                    </th>
+                    <th class="text-center">
+                        <span class="title-header">Valor</span>
+                    </th>
+                    <th class="text-center">
+                        <span class="title-header">2º via Boleto</span>
+                    </th>
+                    <th class="text-center">
+                        <span class="title-header">Nota Fiscal</span>
+                    </th>
+                </tr>
+            </thead>
+            <tbody v-for="billet in billets">
+                <tr>
+                    <td>{{ billet.description }}</td>
+                    <td class="text-center">{{ billet._DueDate | moment("DD/MM/YYYY") }}</td>
+                    <td class="text-center">
+                        <span class="badge badge-primary" v-if="billet.statusName == 'Agendada'">A vencer</span>
+                        <span class="badge badge-success" v-if="billet.statusName == 'Pago'">Pago</span>
+                        <span class="badge badge-warning" v-if="billet.statusName == 'Pendente'">Pendente</span>
+                        <span class="badge badge-danger" v-if="billet.statusName == 'Em atraso'">Em atraso</span>
+                    </td>
+                    <td class="text-center">{{ billet.value | currency }}</td>
+                    <td class="text-center">
+                        <span class="link" @click="openLink(billet)">Visualizar</span>
+                    </td>
+                    <td class="text-center">
+                        <span class="link" v-if="billet.idIntegracao" @click="getPdf(billet)">Baixar PDF</span>
+                    </td>
+                </tr>
+            </tbody>
+            <tbody v-show="billets.length == 0">
+                <tr>
+                    <td colspan="12">
+                        <span>Nenhum produto encontrado!</span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+  
+<script>
+
+import axios from 'axios';
+
+export default {
+    name: "Payment",
+    props: {
+        companyId: Number,
+    },
+    data() {
+        return {
+            urlGetAll: "/api/v1/billing/billet/client-get-all",
+            urlGetPdf: `/api/v1/billing/billet/get-pdf`,
+            billets: [],
+        };
+    },
+    mounted() {
+        this.getAll();
+    },
+    methods: {
+
+        getAll() {
+            const apiUrl = `https://backend-adm-prod.azurewebsites.net${this.urlGetAll}?Any=${this.companyId}`;
+
+            //   const apiUrl = `https://localhost:44347${this.urlGetAll}?Any=${this.companyId}`;
+
+            axios.get(apiUrl)
+                .then(response => {
+                    this.billets = response.data.content.data;
+                })
+                .catch(error => {
+                    console.error('Erro ao fazer a solicitação:', error);
+                });
+        },
+        getPdf(billet) {
+            const apiUrl = `https://backend-adm-prod.azurewebsites.net${this.urlGetPdf}?Any=${this.companyId}`;
+
+            let params = {
+                obj: {
+                    idIntegracao: billet.idIntegracao,
+                    fileName: `nota_fiscal`,
+                    fileType: "pdf"
+                },
+            };
+            return axios.get(apiUrl, {
+                params: params.obj,
+                responseType: "arraybuffer",
+            })
+                .then((response) => {
+
+                    let blob = new Blob([response.data], { type: "application/pdf" });
+                    let url = window.URL.createObjectURL(blob);
+
+                    let downloadLink = document.createElement("a");
+                    downloadLink.href = url;
+                    downloadLink.download = `${params.obj.fileName}`;
+
+                    document.body.appendChild(downloadLink);
+                    downloadLink.click();
+
+                    document.body.removeChild(downloadLink);
+
+                }, (err) => {
+                    return false;
+                })
+        },
+        openLink(billet) {
+            window.open(billet.link, '_blank');
+        }
+    },
+};
+</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;
+}
+
+.link {
+    color: #3f529b;
+    font-size: 14px;
+    font-weight: 400;
+    cursor: pointer;
+}
+
+.link:hover {
+    text-decoration: underline;
+}
+</style>

package/src/component/signature/Warning.vue

@@ -0,0 +1,76 @@
+<template>
+    <div>
+        <div class="div-main" v-if="data.listBillet.length > 0">
+            <Alert type="danger">
+                <span>
+                    ATENÇÃO, existe(m) <b>{{ data.listBillet.length }}</b> boleto(s) em atraso, regularize e evite suspensão
+                    do
+                    serviço!
+                </span>
+                <div class="div-billet">
+                    <div v-for="billet in data.listBillet">
+                        Boleto vencido em <b>{{ billet.dueDate | moment("DD/MM/YYYY") }}</b>
+                        no valor de <b> {{ billet.value | currency }}</b>!
+                        <span class="title-payment" @click="openBillet(billet)">Efetuar pagamento...</span>
+                    </div>
+                </div>
+            </Alert>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+
+import axios from 'axios';
+
+export default {
+    name: "Warning",
+    props: ["companyId"],
+    components: {
+        Alert
+    },
+    data() {
+        return {
+            data: [],
+            showBillet: false,
+        }
+    },
+    mounted() {
+        this.getAll();
+    },
+    methods: {
+        getAll() {
+            const apiUrl = `https://backend-adm-prod.azurewebsites.net/api/v1/billing/billet/warning-billet-delayed?Any=${this.companyId}`;
+
+            axios.get(apiUrl)
+                .then(response => {
+                    this.data = response.data;
+                })
+                .catch(error => {
+                    console.error('Erro ao fazer a solicitação:', error);
+                });
+        },
+        openBillet(billet) {
+            const link = `https://app.boletocloud.com/boleto/2via/${billet.tokenBillet}`;
+            window.open(link, '_blank');
+        }
+    },
+}
+</script>
+
+<style scoped>
+.div-main {
+    margin-top: 50px;
+}
+
+.div-billet {
+    margin-top: 10px;
+}
+
+.title-payment {
+    color: darkblue;
+    cursor: pointer;
+}
+</style>

package/src/component/template/ListViewWithDataHandler.vue

@@ -0,0 +1,424 @@
+<template>
+  <div>
+    <div :class="{ 'g-div-molded': showMolded }">
+      <b-row>
+        <b-col sm="12">
+          <div>
+            <HorizontalFilter v-if="showHorizontalFilter">
+              <div slot="content-filter-horizontal">
+                <slot name="content-filter-horizontal"></slot>
+              </div>
+            </HorizontalFilter>
+          </div>
+        </b-col>
+      </b-row>
+      <br>
+      <b-row>
+        <b-col sm="8">
+          <div v-if="templateList.dragAndDrop">
+            <i class="fa-regular fa-maximize"></i> Clique e arraste para ordenar
+          </div>
+          <TableTotalization :totalization="content.totalization" />
+        </b-col>
+        <b-col sm="4">
+          <TableTotalRecords :totalRecords="content.totalRecords" />
+        </b-col>
+      </b-row>
+      <Loading type="line" :center="false" v-show="isLoading('loadingLine')" />
+      <BarFloating>
+        <div class="fixed-bar-options" v-show="selected.length > 0">
+          <div class="side-by-side">
+            <Button v-if="buttonRemove" key="remove" :title="`Remover  ${selected.length}`" type="danger" size="small"
+              :clicked="confirmRemoved" />
+          </div>
+          <div class="side-by-side">
+            <slot name="content-buttons-table-header"></slot>
+          </div>
+        </div>
+      </BarFloating>
+      <Table :header="templateList.headerTable" :data="content.data" :showChecks="templateList.showChecks"
+        :dragAndDrop="templateList.dragAndDrop">
+        <div slot="content-buttons-table">
+          <slot name="content-buttons-table"></slot>
+        </div>
+      </Table>
+    </div>
+    <br />
+    <Pagination _key="templateList" :totalRecords="content.totalRecords" />
+    <Modal title="Tem certeza que deseja remover?" :width="500" v-show="showModal('confirmRemoved')">
+      <Alert type="warning">
+        <span>
+          ATENÇÃO, todos os registros relacionados também serão excluídos/cancelados, esta ação é irreversível...
+        </span>
+      </Alert>
+      <InputText title="Digite Remover para confirmar" :maxLength="7" :required="false" v-model="confirmRemove" />
+      <Confirmation :isModal="false" :disabled="confirmRemove != 'Remover'" title="Você tem certeza?" type="danger"
+        :confirmed="removeSelected" />
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Pagination from "@nixweb/nixloc-ui/src/component/shared/Pagination.vue";
+import Table from "../shared/Table.vue";
+import Button from "../forms/Button.vue";
+import FixedBar from "../layout/FixedBar.vue";
+import BarFloating from "@nixweb/nixloc-ui/src/component/layout/BarFloating.vue";
+import TableTotalRecords from "../shared/TableTotalRecords.vue";
+import TableTotalization from "../shared/TableTotalization.vue";
+import HorizontalFilter from "../shared/HorizontalFilter.vue";
+import Loading from "../shared/Loading.vue";
+import Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation.vue";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ListViewWithDataHandler",
+  props: {
+    templateList: Object,
+    propsParam: Object,
+    showMolded: {
+      type: Boolean,
+      default: true,
+    },
+    showHorizontalFilter: {
+      type: Boolean,
+      default: true,
+    },
+    buttonRemove: {
+      type: Boolean,
+      default: true,
+    },
+    isFilterStorage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    HorizontalFilter,
+    TableTotalization,
+    TableTotalRecords,
+    Confirmation,
+    BarFloating,
+    Alert,
+    Modal,
+    Loading,
+    FixedBar,
+    Button,
+    Table,
+    InputText,
+    Pagination,
+  },
+  data() {
+    return {
+      content: {
+        data: [],
+        totalRecords: 0,
+      },
+      baseParams: {
+        search: "",
+        filter: "contains",
+        currentPage: 1,
+        totalPerPage: 10,
+      },
+      paramsFilter: [],
+      dynamicFilter: {},
+      confirmRemove: "",
+    };
+  },
+  created() {
+    var filter = this.getFilterStorage(this.$route.name);
+    if (filter) {
+      this.updateCurrentPage(filter.baseParams.currentPage);
+    }
+    this.getAll();
+  },
+  beforeDestroy() {
+    let search = { content: "", filter: { content: "Contém", id: "contains" } };
+    this.updateSearch(search);
+    this.cleanTags();
+  },
+  computed: {
+    ...mapState("generic", [
+      "selected",
+      "methodExecutedApi",
+      "search",
+      "executedSearch",
+      "clearedSearch",
+      "totalPerPage",
+      "selectStatic",
+      "paginations",
+      "filterStorage",
+      "tags"
+    ]),
+    ...mapGetters("generic", ["isLoading", "getFilterStorage", "event", "showModal"]),
+  },
+  methods: {
+    ...mapActions("generic", ["getApi", "orderAllApi", "deleteAllApi"]),
+    ...mapMutations("generic", [
+      "addEvent",
+      "addLoading",
+      "removeLoading",
+      "addSelected",
+      "updateSearch",
+      "updateCurrentPage",
+      "addTag",
+      "removeTag",
+      "cleanTags",
+      "openModal",
+      "hideModal",
+      "addFilterStorage",
+      "removeFilterStorage"
+    ]),
+    getAll() {
+      this.addLoading("loadingLine");
+      var filter = this.getFilterStorage(this.$route.name);
+
+      let self = this;
+      if (filter) {
+        this.baseParams = filter.baseParams;
+        this.dynamicFilter = filter.dynamicFilter;
+        this.propsParam = filter.propsParam;
+        this.paramsFilter = filter.paramsFilter;
+
+        setTimeout(function () {
+          let search = { content: filter.baseParams.search, filter: { content: "Contém", id: "contains" } };
+          self.updateSearch(search);
+          self.updateCurrentPage(filter.baseParams.currentPage);
+          self.generateDynamicFilter();
+        }, 200);
+      }
+
+      setTimeout(function () {
+        let obj = {
+          ...self.baseParams,
+          ...self.dynamicFilter,
+          ...self.propsParam,
+        };
+
+        let params = { url: self.templateList.urlGetApi, obj: obj };
+        self.getApi(params).then((response) => {
+          self.content = response.content;
+          setTimeout(function () {
+            self.removeLoading(["panel", "loadingLine", "btnSearch", "btnClean"]);
+          }, 350);
+        });
+      }, 250);
+    },
+    orderAll(data) {
+      if (this.templateList.urlOrderAllApi) {
+        let obj = { listIds: data.listIds };
+
+        let params = {
+          url: this.templateList.urlOrderAllApi,
+          obj: obj,
+          notNotifyToast: true,
+        };
+
+        this.orderAllApi(params).then((response) => { });
+      }
+    },
+    selectFilter(value) {
+
+      let fieldTarget = value.fieldTarget;
+
+      if (fieldTarget != "totalPerPage") {
+        let obj = { tag: value.tag, key: fieldTarget, value: value.value };
+
+        if (obj.value !== "") {
+          const existingIndex = this.paramsFilter.findIndex(item => item.key === obj.key);
+          if (existingIndex !== -1) {
+            // Se já existe, atualiza o valor
+            this.paramsFilter[existingIndex] = obj;
+          } else {
+            // Se não existe, adiciona ao paramsFilter
+            this.paramsFilter.push(obj);
+          }
+        }
+      } else { this.baseParams.currentPage = 1; }
+      this.convertToObjectAndGetAll();
+    },
+    convertToObjectAndGetAll() {
+      this.generateDynamicFilter();
+      this.getAll();
+    },
+    generateDynamicFilter() {
+      var result = {};
+      for (var i = 0; i < this.paramsFilter.length; i++) {
+        let key = this.paramsFilter[i].key;
+        let value = this.paramsFilter[i].value;
+        let tag = this.paramsFilter[i].tag;
+
+        if (key == "period") {
+          result["start"] = value.start;
+          result["end"] = value.end;
+
+          if (value.start)
+            tag = `Período: ${value.start}-${value.end}`;
+
+        } else {
+          result[key] = value;
+        }
+
+        result["tag"] = tag;
+
+        if (tag) {
+          this.removeTag(key); // para não duplicar
+          this.addTag({ tag: tag, key: key });
+        } else {
+          this.removeTag(key);
+        }
+      }
+
+      this.dynamicFilter = result;
+    },
+    confirmRemoved() {
+      this.removeLoading(["remove"]);
+      this.openModal("confirmRemoved");
+    },
+    removeSelected() {
+      let params = {
+        url: this.templateList.urlDeleteAllApi,
+        selected: this.selected,
+      };
+      this.deleteAllApi(params).then(() => {
+        this.hideModal("confirmRemoved");
+        this.removeLoading(["confirm"]);
+        this.addSelected([]);
+      });
+    },
+    cleanParams() {
+      this.baseParams.currentPage = 1;
+    },
+    addStorage() {
+      let obj =
+      {
+        key: this.$route.name,
+        baseParams: this.baseParams,
+        dynamicFilter: this.dynamicFilter,
+        propsParam: this.propsParam,
+        paramsFilter: this.paramsFilter
+      };
+
+      if (this.isFilterStorage)
+        this.addFilterStorage(obj);
+    }
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "tableDragAndDrop") this.orderAll(event.data);
+
+        if (event.name == "stringFilter") {
+          this.getAll();
+        }
+
+        if (event.name == "tagRemoved") {
+
+          this.removeTag(event.data);
+
+          let filter = this.paramsFilter.filter(x => x.key != event.data);
+          this.paramsFilter = filter;
+
+          this.addStorage();
+          this.getAll();
+        }
+
+        if (event.name == "filterStorageRemoved") {
+
+          let self = this;
+          this.tags.forEach(tag => {
+            self.removeTag(tag.key);
+            self.addEvent({ name: "tagRemoved", data: tag.key });
+          });
+
+          this.paramsFilter = [];
+
+          this.baseParams.search = "";
+          this.baseParams.filter = "contains";
+          this.baseParams.currentPage = 1;
+          this.baseParams.totalPerPage = 10;
+          this.propsParam = {};
+
+
+
+          this.addStorage();
+          this.getAll();
+        }
+
+
+
+        if (event.name == "getAllListViewWithDataHandler") {
+          this.addSelected([]);
+          this.getAll();
+        }
+
+        if (event.name == "page-click") {
+          this.baseParams.currentPage = event.data;
+          this.addStorage();
+          this.getAll();
+        }
+      },
+      deep: true,
+    },
+    methodExecutedApi: function (value) {
+      if (
+        value === "postApi" ||
+        value === "putApi" ||
+        value === "deleteAllApi" ||
+        value === "deleteAllApiErro"
+      ) {
+        this.getAll();
+      }
+    },
+    executedSearch: function () {
+      this.addStorage();
+
+      this.baseParams.search = this.search.content;
+      if (this.search.filter.id) this.baseParams.filter = this.search.filter.id;
+      this.cleanParams();
+      this.getAll();
+    },
+    clearedSearch: function () {
+      this.baseParams.search = "";
+      this.baseParams.filter = "";
+      this.cleanParams();
+      this.getAll();
+    },
+    selectStatic: {
+      handler(value) {
+        this.selectFilter(value);
+      },
+      deep: true,
+    },
+    dynamicFilter: {
+      handler(value) {
+        this.addStorage();
+      },
+      deep: true,
+    },
+    propsParam: {
+      handler(value) {
+        this.addStorage();
+      },
+      deep: true,
+    },
+    paginations: {
+      handler(value) {
+        this.baseParams.totalPerPage = value.totalPerPage;
+        this.addStorage();
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.div-button-excluir {
+  padding-bottom: 10px;
+}
+</style>