@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/rental/new-items-rent/SearchProductsToolbar.vue

@@ -0,0 +1,323 @@
+<template>
+    <div class="st-root">
+        <div class="st-card">
+            <div class="st-grid">
+                <div class="st-field">
+                    <label class="st-label-search title">Pesquisar</label>
+                    <div class="st-inputwrap">
+                        <i class="fa-solid fa-magnifying-glass title"></i>
+                        <input class="st-input" type="text" v-model="draft.query" placeholder="Pesquisa e enter..."
+                            @keyup.enter="onSearch" />
+                    </div>
+                    <button v-if="showClearButton" class="st-btn-clear" @click="onClear">
+                        Limpar pesquisa 
+                    </button>
+                </div>
+
+                <div class="st-field st-div-select" :class="{ 'st-field-with-clear': showClearButton }">
+                    <label class="st-label title">Categoria</label>
+                    <Select url="/api/v1/stock/category-product/select-all" :showNewRegister="false"
+                        v-model="draft.category" :cleaned="() => cleaned('category')">
+                    </Select>
+                </div>
+
+                <div class="st-field st-div-select" :class="{ 'st-field-with-clear': showClearButton }">
+                    <label class="st-label title">Fabricante</label>
+                    <Select url="/api/v1/stock/manufacturer/select-all" :showNewRegister="false"
+                        v-model="draft.manufacturer" :cleaned="() => cleaned('manufacturer')">
+                    </Select>
+                </div>
+
+                <div class="st-actions" :class="{ 'st-field-with-clear': showClearButton }">
+                    <button class="st-btn st-btn-primary" @click="onSearch">
+                        <i class="fa-solid fa-magnifying-glass"></i>
+                    </button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Select from "@nixweb/nixloc-ui/src/component/forms/Select";
+
+export default {
+    name: "SearchToolbarClean",
+    components: { Select },
+    props: {
+        value: {
+            type: Object,
+            default: () => ({
+                query: "",
+                category: null,
+                manufacturer: null,
+            }),
+        },
+    },
+    data() {
+        return {
+            draft: { ...this.value },
+        };
+    },
+    computed: {
+        showClearButton() {
+            const query = (this.draft.query || "").trim();
+            const hasCategory = this.hasSelection(this.draft.category);
+            const hasManufacturer = this.hasSelection(this.draft.manufacturer);
+
+            return query !== "" || hasCategory || hasManufacturer;
+        },
+    },
+    methods: {
+        hasSelection(value) {
+            if (!value) {
+                return false;
+            }
+
+            const id = String(value.id || "").trim();
+            const content = String(value.content || "").trim();
+            return id !== "" || content !== "";
+        },
+        emitAll() {
+            this.$emit("input", this.draft);
+            this.$emit("search", this.draft);
+        },
+        onSearch() {
+            this.emitAll();
+        },
+        onClear() {
+            this.draft = {
+                query: "",
+                category: { id: "", content: "" },
+                manufacturer: { id: "", content: "" },
+            };
+            this.emitAll();
+        },
+        cleaned(field) {
+            if (field === "query") {
+                this.draft.query = "";
+            }
+
+            if (field === "category") {
+                this.$set(this.draft, "category", { id: "", content: "" });
+            }
+
+            if (field === "manufacturer") {
+                this.$set(this.draft, "manufacturer", { id: "", content: "" });
+            }
+
+            this.emitAll();
+        }
+    },
+    watch: {
+        'draft.query'(newValue, oldValue) {
+            const nextQuery = (newValue || "").trim();
+            const previousQuery = (oldValue || "").trim();
+
+            if (nextQuery === "" && previousQuery !== "") {
+                setTimeout(() => {
+                    if ((this.draft.query || "").trim() === "") {
+                        this.onClear();
+                    }
+                }, 1000);
+            }
+        },
+        value: {
+            deep: true,
+            handler(v) {
+                this.draft = { ...v };
+            },
+        }
+    }
+};
+</script>
+
+<style scoped>
+.st-root {
+    color: #1e293b;
+    font-size: 13px;
+    padding: 0px 10px 20px 0px;
+}
+
+.st-card {
+    border: 1px solid #e2e8f0;
+    border-radius: 14px;
+    padding: 14px;
+}
+
+.st-grid {
+    display: grid;
+    grid-template-columns: 1.2fr 1fr 1fr auto;
+    gap: 14px;
+    align-items: end;
+}
+
+.st-div-select {
+    margin-bottom: -7px;
+}
+
+@media (max-width: 900px) {
+    .st-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media (max-width: 600px) {
+    .st-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.st-field {
+    display: flex;
+    flex-direction: column;
+}
+
+.st-field-with-clear {
+    padding-bottom: 38px;
+}
+
+.st-label-search {
+    color: #475569;
+    font-weight: 500;
+    font-size: 13px;
+}
+
+.st-label {
+    color: #475569;
+    font-weight: 500;
+    font-size: 13px;
+    margin-bottom: -17px;
+}
+
+.st-inputwrap {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 1px;
+    align-items: center;
+    border-radius: 6px;
+    padding: 4px 7px;
+    margin-bottom: 3px;
+    border: 1px solid #dadadb;
+}
+
+.st-icon {
+    color: #64748b;
+}
+
+.st-input {
+    border: none;
+    outline: none;
+    background: transparent;
+    height: 28px;
+    font-size: 14px;
+    color: #0f172a;
+}
+
+.st-selectwrap {
+    position: relative;
+}
+
+.st-select {
+    width: 100%;
+    background: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    padding: 10px 34px 10px 12px;
+    font-size: 14px;
+    color: #0f172a;
+    outline: none;
+    appearance: none;
+}
+
+.st-select:focus {
+    border-color: #60a5fa;
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, .25);
+}
+
+.st-caret {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    margin-top: -7px;
+    color: #94a3b8;
+    pointer-events: none;
+}
+
+.st-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-bottom: 5px;
+}
+
+.st-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    font-weight: 600;
+    padding: 9px 11px;
+    border-radius: 50px;
+    cursor: pointer;
+    border: 1px solid transparent;
+    background: #fff;
+    transition: all .18s ease;
+    height: 36px;
+}
+
+.st-btnicon {
+    font-size: 14px;
+    opacity: .75;
+}
+
+.st-btn-primary {
+    color: white;
+    background: #4ab4e2;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
+}
+
+.st-btn-primary:active {
+    background: #f1f5f9;
+    transform: translateY(1px);
+}
+
+.st-btn-ghost {
+    color: #475569;
+    background: #f1f5f9;
+    border-color: #e2e8f0;
+}
+
+.st-btn-ghost:hover {
+    background: #e2e8f0;
+    border-color: #cbd5e1;
+}
+
+.st-btn-ghost:active {
+    background: #cbd5e1;
+    transform: translateY(1px);
+}
+
+.st-btn-clear {
+    height: 30px;
+    border-radius: 999px;
+    background-color: #F1BC31;
+    border: 0px;
+    color: #ffffff;
+    padding: 0 10px;
+    font-size: 12px;
+    font-weight: 400;
+    cursor: pointer;
+    width: fit-content;
+    margin-top: 8px;
+}
+
+.st-dot {
+    width: 5px;
+    height: 5px;
+    background: #cbd5e1;
+    border-radius: 50%;
+}
+</style>

package/src/components/modules/rental/nfse/NfseList.vue

@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <div>
+      <Loading
+        type="line"
+        :center="false"
+        v-show="loading"
+      />
+      <b-row>
+        <b-col sm="12">
+          <TableTotalRecords :totalRecords="content.totalRecords" />
+        </b-col>
+      </b-row>
+    </div>
+    <div class="table-items-nfse">
+      <table class="table table-responsive-xs">
+        <thead>
+          <tr>
+            <th>
+              <span class="title-header">NUMERO</span>
+            </th>
+            <th class="text-center">
+              <span class="title-header">EMISSAO</span>
+            </th>
+            <th>
+              <span class="title-header">CLIENTE</span>
+            </th>
+            <th class="text-center">
+              <span class="title-header">STATUS</span>
+            </th>
+            <th class="text-center">
+              <span class="title-header">VALOR</span>
+            </th>
+            <th></th>
+          </tr>
+        </thead>
+
+        <NfseListItem
+          v-for="item in content.data"
+          :key="item.id || item.numero || item.registeredDate"
+          :item="item"
+        />
+
+        <tbody v-show="content.totalRecords == 0">
+          <tr>
+            <td colspan="8">
+              <span class="title">Nenhum registro encontrado!</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import ButtonSub from "@nixweb/nixloc-ui/src/component/forms/ButtonSub.vue";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import TableTotalRecords from "@nixweb/nixloc-ui/src/component/shared/TableTotalRecords.vue";
+
+import NfseListItem from "./NfseListItem.vue";
+
+import { mapActions, mapState } from "vuex";
+
+export default {
+  name: "ItemsLista",
+  components: {
+    Loading,
+    ScrollBar,
+    TableTotalRecords,
+    ButtonSub,
+    NfseListItem,
+  },
+  props: {
+    rent: Object,
+  },
+  data() {
+    return {
+      urlGetApi: "/api/v1/tax-document/nfse-shared/get-all",
+      data: [],
+      loading: true,
+      content: {
+        data: [],
+        totalRecords: 0,
+      },
+    };
+  },
+  mounted() {
+    this.getAll();
+  },
+  computed: {
+    ...mapState("generic", ["event"]),
+  },
+  methods: {
+    ...mapActions("generic", ["getApi"]),
+    getAll() {
+      this.loading = true;
+      const params = {
+        url: this.urlGetApi,
+        obj: {
+          locacaoId: this.rent.id,
+        },
+      };
+
+      this.getApi(params)
+        .then((response) => {
+          const content = response?.content;
+          const data = Array.isArray(content) ? content : content?.data || [];
+
+          this.content.data = data.map((item) => ({
+            id: item.id || item.Id || "",
+            cliente: item.cliente || item.Cliente || "",
+            numero: item.numero || item.Numero || "",
+            origem: item.origem || item.Origem || "",
+            status: item.status || item.Status || 0,
+            statusNome: item.statusNome || item.StatusNome || "",
+            registeredDate: item.registeredDate || item.RegisteredDate || "",
+            valorNota: item.valorNota || item.ValorNota || 0,
+            locacaoId: item.locacaoId || item.LocacaoId || "",
+            urlPdf: item.urlPdf || item.UrlPdf || "",
+            urlXml: item.urlXml || item.UrlXml || "",
+          }));
+
+          this.content.totalRecords =
+            content?.totalRecords || this.content.data.length;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "canceledNfse" || event.name == "refreshNfse") {
+          this.getAll();
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.table th {
+  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: 0 !important;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.table-items-nfse {
+  min-height: 300px;
+}
+</style>

package/src/components/modules/rental/nfse/NfseListItem.vue

@@ -0,0 +1,195 @@
+<template>
+  <tbody>
+    <tr>
+      <td>
+        <span v-if="item.numero">{{ item.numero }}</span>
+        <span v-else>Pendente</span>
+      </td>
+      <td class="text-center">
+        {{ item.registeredDate | moment("DD/MM/YYYY HH:mm") }}
+      </td>
+      <td class="td-limit">
+        <a
+          v-if="item.id"
+          href="#"
+          class="link-master title"
+          @click.prevent="editNfse"
+        >
+          {{ item.cliente }}
+        </a>
+        <span v-else>{{ item.cliente }}</span>
+      </td>
+      <td class="text-center">
+        <div
+          class="badge badge-warning td-margin"
+          v-if="item.statusNome == 'Em processamento'"
+        >
+          Em processamento
+        </div>
+        <div
+          class="badge badge-primary td-margin"
+          v-if="item.statusNome == 'Autorizada'"
+        >
+          Autorizada
+        </div>
+        <div
+          class="badge badge-success td-margin"
+          v-if="item.statusNome == 'Concluida'"
+        >
+          Concluida
+        </div>
+        <div
+          class="badge badge-danger td-margin"
+          v-if="item.statusNome == 'Rejeitada'"
+        >
+          Rejeitada
+        </div>
+        <div
+          class="badge badge-danger td-margin"
+          v-if="item.statusNome == 'Falha'"
+        >
+          Falha
+        </div>
+        <div
+          class="badge badge-danger td-margin"
+          v-if="item.statusNome == 'Cancelada'"
+        >
+          Cancelada
+        </div>
+      </td>
+      <td class="text-center td-margin">{{ item.valorNota | currency }}</td>
+      <td class="text-right td-dropdown">
+        <div class="side-by-side td-dropdown">
+          <button
+            type="button"
+            class="icon-action-btn title"
+            :class="{ 'icon-pdf-missing': !item.urlPdf }"
+            :title="item.urlPdf ? 'Imprimir PDF' : 'PDF nao disponivel'"
+            @click="printPdf"
+          >
+            <i class="fa-solid fa-file-pdf"></i>
+          </button>
+          <button
+            type="button"
+            class="icon-action-btn title"
+            :class="{ 'icon-xml-missing': !item.urlXml }"
+            :title="item.urlXml ? 'Baixar XML' : 'XML nao disponivel'"
+            @click="downloadXml"
+          >
+            <i class="fa-solid fa-file-code"></i>
+          </button>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</template>
+
+<script>
+export default {
+  name: "NfseListItem",
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    printPdf() {
+      if (!this.item?.urlPdf) return;
+
+      const link = document.createElement("a");
+      link.href = this.item.urlPdf;
+      link.target = "_blank";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+    downloadXml() {
+      if (!this.item?.urlXml) return;
+
+      const link = document.createElement("a");
+      link.href = this.item.urlXml;
+      link.target = "_blank";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+    editNfse() {
+      if (!this.item?.id) return;
+
+      const routeName =
+        this.item.origem === "Prefeitura"
+          ? "nfsePrefeituraUpdate"
+          : "nfseNacionalUpdate";
+
+      this.$router.push({
+        name: routeName,
+        params: { id: this.item.id },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.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: 0 !important;
+}
+
+.td-dropdown {
+  overflow: visible;
+}
+
+.icon-action-btn {
+  border: 0;
+  background: transparent;
+  color: #577696;
+  padding: 4px 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-action-btn:hover {
+  color: #335374;
+}
+
+.icon-action-btn i {
+  font-size: 22px;
+}
+
+.icon-pdf-missing {
+  color: #dc3545;
+}
+
+.icon-xml-missing {
+  color: #dc3545;
+}
+
+.link-master {
+  color: #3f529b;
+  cursor: pointer;
+}
+
+.link-master:hover {
+  color: #3f529b;
+  text-decoration: underline;
+}
+
+.td-margin {
+  margin-top: 3px;
+}
+
+.td-limit {
+  max-width: 400px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

package/src/components/modules/rental/payment-rent/PaymentRent.js

@@ -0,0 +1,20 @@
+export default class PaymentRent {
+    constructor() {
+        this.id = "";
+        this.typePayment = { id: "", content: "" };
+        this.dueDate = "";
+        this.value = 0;
+        this.description = "";
+        this.payableReceivable = {};
+        this.status = 0;
+        this.registerInFinance = false;
+    }
+    update(data) {
+        this.id = data.id;
+        this.typePayment = { id: data.typePaymentId, content: data.typePaymentName };
+        this.dueDate = data.dueDate;
+        this.value = data.value;
+        this.description = data.description;
+        this.payableReceivable = data.payableReceivable;
+    }
+}