@freteclick/quasar-financial-ui 1.0.85

package/src/components/invoice/pay/details/InvoiceOrders.vue

@@ -0,0 +1,342 @@
+<template>
+  <q-table
+    :loading="isLoading"
+    :data="data"
+    :columns="settings.columns"
+    :pagination.sync="pagination"
+    @request="onRequest"
+    row-key="id"
+    style="min-height: 90vh"
+    :rows-per-page-options="[5, 10, 15, 20, 25, 50]"
+  >
+    <template v-slot:body="props">
+      <q-tr :props="props">
+        <q-td key="id" :props="props">
+          <q-btn
+            outline
+            dense
+            :to="{
+              name: 'PurchasingOrderDetails',
+              params: { id: props.row.id },
+            }"
+            :label="`#${props.row.id}`"
+            :style="{ color: props.row.color_status }"
+            class="full-width"
+          />
+        </q-td>
+        <q-td key="mainOrder" :props="props">
+          <q-btn
+            v-if="props.row.mainOrder"
+            outline
+            dense
+            :to="{
+              name: 'OrderDetails',
+              params: { id: props.row.mainOrder },
+            }"
+            :label="`#${props.row.mainOrder}`"
+            :style="{ color: 'grey' }"
+            class="full-width"
+          />
+        </q-td>
+        <q-td key="client" :props="props">{{ props.row.client }}</q-td>
+        <q-td key="notaFiscal" :props="props">{{ props.row.notaFiscal }}</q-td>
+        <q-td key="dataPedido" :props="props">{{ props.cols[4].value }}</q-td>
+        <q-td key="ultimaModificacao" :props="props">{{
+          props.cols[5].value
+        }}</q-td>
+        <q-td
+          key="status"
+          :props="props"
+          :style="{ color: props.row.color_status }"
+        >
+          {{ $t(`order.statuses.${props.row.status}`) }}
+        </q-td>
+        <q-td key="preco" :props="props">{{ props.cols[7].value }}</q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</template>
+
+<script>
+import { mapActions, mapGetters } from "vuex";
+import { date } from "quasar";
+import { formatMoney } from "@freteclick/quasar-common-ui/src/utils/formatter";
+
+const SETTINGS = {
+  columns: [
+    {
+      name: "id",
+      field: "id",
+      align: "left",
+      label: "ID",
+    },
+    {
+      name: "mainOrder",
+      field: "mainOrder",
+      align: "left",
+      label: "Pedido Principal",
+    },
+    {
+      name: "client",
+      field: "client",
+      align: "left",
+      label: "Cliente",
+    },
+    {
+      name: "notaFiscal",
+      field: "notaFiscal",
+      align: "left",
+      label: "Nota Fiscal",
+      format: (val, row) => {
+        return val ? "#" + val : "";
+      },
+    },
+    {
+      name: "dataPedido",
+      field: "dataPedido",
+      align: "left",
+      format: (val, row) => {
+        return date.formatDate(val, "DD/MM/YYYY");
+      },
+      label: "Data",
+    },
+    {
+      name: "ultimaModificacao",
+      field: "ultimaModificacao",
+      align: "left",
+      format: (val, row) => {
+        return date.formatDate(val, "DD/MM/YYYY HH:mm:ss");
+      },
+      label: "Ultima alteração",
+    },
+    {
+      name: "status",
+      field: "status",
+      align: "left",
+      label: "Status",
+    },
+    {
+      name: "preco",
+      field: "preco",
+      align: "left",
+      format: (val, row) => {
+        return formatMoney(val, "BRL", "pt-br");
+      },
+      label: "Preço",
+    },
+  ],
+};
+
+Object.freeze(SETTINGS);
+
+export default {
+  props: {
+    search: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    invoiceId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+
+  created() {
+    if (this.myCompany !== null) {
+      this.filters.company = this.myCompany;
+      this.onRequest({
+        pagination: this.pagination,
+        filter: this.filters,
+      });
+    }
+    this.requestStatuses();
+  },
+
+  beforeDestroy() {
+    this.reset();
+  },
+
+  data() {
+    let statuses = [{ label: "Todos", value: -1 }];
+
+    return {
+      settings: SETTINGS,
+      data: [],
+      statuses: statuses,
+      filters: {
+        text: null,
+        status: statuses[0],
+        company: null,
+      },
+      pagination: {
+        sortBy: "ultimaModificacao",
+        descending: false,
+        page: 1,
+        rowsPerPage: 10,
+        rowsNumber: 10,
+      },
+      loadingStatuses: false,
+    };
+  },
+
+  computed: {
+    ...mapGetters({
+      isLoading: "purchasingOrder/isLoading",
+      error: "purchasingOrder/error",
+      violations: "purchasingOrder/violations",
+      items: "purchasingOrder/items",
+      totalItems: "purchasingOrder/totalItems",
+      myCompany: "people/currentCompany",
+    }),
+  },
+
+  watch: {
+    myCompany(company) {
+      if (company !== null) {
+        this.filters.company = company;
+        this.onRequest({
+          pagination: this.pagination,
+          filter: this.filters,
+        });
+      }
+    },
+
+    totalItems(val) {
+      this.pagination.rowsNumber = val;
+    },
+
+    items(items) {
+      if (!items) return;
+
+      let data = [];
+
+      for (let index in items) {
+        let item = items[index];
+
+        var clientName = "--";
+
+        if (item.mainOrder && item.mainOrder.client) {
+          clientName = item.mainOrder.client.name;
+
+          if (!clientName) {
+            clientName = item.mainOrder.client.alias;
+          } else if (
+            clientName.toLowerCase().indexOf(" ltda") == -1 &&
+            clientName.toLowerCase().indexOf(" eireli") == -1 &&
+            clientName.toLowerCase().indexOf(" comercio") == -1 &&
+            clientName.toLowerCase().indexOf(" comércio") == -1 &&
+            clientName.toLowerCase().indexOf(" comercial") == -1 &&
+            clientName.toLowerCase().indexOf(" industria") == -1 &&
+            clientName.toLowerCase().indexOf(" indústria") == -1 &&
+            clientName.toLowerCase().indexOf(" soluções") == -1 &&
+            clientName.toLowerCase().indexOf(" importação") == -1 &&
+            clientName.toLowerCase().indexOf(" solutions") == -1 &&
+            clientName.toLowerCase().indexOf(" me") == -1 &&
+            clientName.toLowerCase().trim() !=
+              item.mainOrder.client.alias.toLowerCase().trim()
+          ) {
+            clientName += " " + item.mainOrder.client.alias;
+          }
+        }
+
+        data.push({
+          "@id": item["@id"],
+          id: item["@id"].match(/^\/purchasing\/orders\/([a-z0-9-]*)$/)[1],
+          mainOrder: item.mainOrderId,
+          client: clientName,
+          notaFiscal:
+            item.invoiceTax.length > 0
+              ? "#" + item.invoiceTax[0].invoiceTax.invoiceNumber
+              : "",
+          dataPedido: item.orderDate,
+          ultimaModificacao: item.alterDate,
+          status: item.status.status,
+          color_status: item.status.color,
+          preco: item.price,
+        });
+      }
+
+      this.data = data;
+    },
+
+    "filters.text"() {
+      this.onRequest({
+        pagination: this.pagination,
+        filter: this.filters,
+      });
+    },
+
+    "filters.status"() {
+      this.onRequest({
+        pagination: this.pagination,
+        filter: this.filters,
+      });
+    },
+  },
+
+  methods: {
+    ...mapActions({
+      getItems: "purchasingOrder/getItems",
+      reset: "purchasingOrder/reset",
+      getStatuses: "purchasingOrder/getStatuses",
+    }),
+
+    requestStatuses() {
+      this.loadingStatuses = true;
+      this.getStatuses({
+        visibility: "public",
+        realStatus: ["open", "pending", "closed"],
+        context:'order'
+      }).then((statuses) => {
+        if (statuses.length) {
+          let data = [];
+          for (let index in statuses) {
+            let item = statuses[index];
+            this.statuses.push({
+              label: this.$t(`order.statuses.${item.status}`),
+              value: item["@id"].match(/^\/statuses\/([a-z0-9-]*)$/)[1],
+            });
+          }
+        }
+        this.loadingStatuses = false;
+      });
+    },
+
+    onRequest(props) {
+      let { page, rowsPerPage, rowsNumber, sortBy, descending } =
+        props.pagination;
+      let filter = props.filter;
+      let params = { itemsPerPage: rowsPerPage, page };
+
+      if (this.filters.text != null && this.filters.text.length > 0) {
+        if (this.filters.text.length < 2) return;
+
+        params["searchBy"] = this.filters.text;
+      }
+
+      if (this.filters.status != null && this.filters.status.value != -1) {
+        params["status"] = this.filters.status.value;
+      }
+
+      if (this.filters.company != null) {
+        params["myCompany"] = this.filters.company.id;
+      }
+
+      if (this.invoiceId !== null) {
+        params["invoice.invoice"] = this.invoiceId;
+      }
+
+      params["order[alterDate]"] = "desc";
+
+      this.getItems(params).then(() => {
+        this.pagination.page = page;
+        this.pagination.rowsPerPage = rowsPerPage;
+        this.pagination.sortBy = sortBy;
+        this.pagination.descending = descending;
+      });
+    },
+  },
+};
+</script>

package/src/components/invoice/receive/InvoiceDetails.vue

@@ -0,0 +1,281 @@
+<template>
+  <q-card style="min-height: 90vh">
+    <q-dialog v-model="confirm" persistent>
+      <q-card>
+        <q-card-section class="row items-center">
+          <q-avatar icon="receipt" color="primary" text-color="white" />
+          <span class="q-ml-sm">Deseja gerar um novo número de fatura?</span>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn flat label="Cancelar" color="primary" v-close-popup />
+          <q-btn flat label="Alterar" color="primary" @click="renew(invoice)" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
+    <q-inner-loading :showing="isLoading">
+      <q-spinner-gears size="50px" color="primary" />
+    </q-inner-loading>
+
+    <transition-group appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
+      <div v-if="invoice !== null" class="row q-pa-sm q-col-gutter-sm" key="status">
+        <div class="col-xs-12">
+          <div class="text-h5 q-pt-sm q-pb-sm">{{ this.payer.name }}</div>
+          <div v-if="this.payer.id != this.client.id" class="text-h5 q-pt-sm q-pb-sm">{{ this.client.name }}</div>
+        </div>
+
+        <div class="col-xs-12 col-sm-5">
+          <div class="row">
+            <div class="col-xs-12">
+              <q-markup-table flat dense square separator="none" class="bg-grey-4">
+                <tbody>
+                  <tr>
+                    <td class="text-left text-bold">Número da fatura</td>
+                    <td class="text-left">
+                      {{
+                          `#${this.invoice["@id"].match(
+                            /^\/finance\/receive\/([a-z0-9-]*)$/
+                          )[1]
+                          }`
+                      }}
+
+                      <q-btn flat round dense color="positive" icon="autorenew" @click="confirm = true" />
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="text-left text-bold">Valor da fatura</td>
+                    <td class="text-left">
+                      {{ formatMoney(this.invoice.price) }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="text-left text-bold">Vencimento</td>
+                    <td class="text-left">
+                      <EditInvoiceDuedate v-if="editDueDate" :dueDate="invoice.dueDate"
+                        :invoiceId="invoice['@id'] || ''" @saved="(data) => (invoice = data)" />
+                      <div v-else>
+                        {{ invoice.dueDate }}
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </q-markup-table>
+            </div>
+            <div class="col-xs-12">
+              <InvoiceEditActions :invoice="invoice" @ready="(invoice) => (invoice = invoice)" />
+            </div>
+          </div>
+        </div>
+
+        <div class="col-xs-12 col-sm-7">
+          <div class="row text-white full-height items-center justify-center"
+            :style="`background-color: ${this.invoice.status.color}`">
+            <div class="col-xs-12 text-h6 text-center">
+              {{ $t(`invoice.statuses.${invoice.status.status}`) }}
+            </div>
+            <InvoiceActions :invoice="invoice" @changed="
+              (newInvoice) => {
+                this.invoice = newInvoice;
+                this.$refs.invoiceBillet.refresh();
+              }
+            " />
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice !== null" class="row" key="order_tabs">
+        <div class="col-12">
+          <q-tabs :horizontal="$q.screen.gt.xs" align="justify" v-model="currentTab" class="bg-white text-primary">
+            <q-tab name="invoice" label="Boleto" />
+            <q-tab name="orders" label="Pedidos" />
+          </q-tabs>
+
+          <q-separator />
+
+          <q-tab-panels v-model="currentTab">
+            <q-tab-panel name="invoice" class="q-pa-none">
+              <InvoiceInvoice ref="invoiceBillet" :invoiceId="invoiceId" :orderId="orderId" @billetStatus="
+                (status) => {
+                  this.editDueDate = status.hasBillet === false;
+                }
+              " />
+            </q-tab-panel>
+
+            <q-tab-panel name="orders" class="q-pa-none">
+              <InvoiceOrders :invoiceId="invoiceId" :invoice="{
+                '@id': invoice ? invoice['@id'] : null,
+                status: invoice ? invoice.status.realStatus : null,
+                billet: editDueDate ? false : true,
+              }" />
+            </q-tab-panel>
+          </q-tab-panels>
+        </div>
+      </div>
+    </transition-group>
+
+    <div v-if="invoice === null && notFound" class="row items-center justify-center" style="min-height: 90vh">
+      <q-banner class="text-white bg-red text-center text-h3" rounded>
+        <template v-slot:avatar>
+          <q-icon name="error" color="white" />
+        </template>
+        A fatura não foi encontrada
+      </q-banner>
+    </div>
+  </q-card>
+</template>
+
+<script>
+import { mapActions, mapGetters } from "vuex";
+import InvoiceInvoice from "./details/InvoiceInvoice";
+import InvoiceOrders from "./details/InvoiceOrders";
+import {
+  formatMoney,
+  formatDateYmdTodmY,
+} from "@freteclick/quasar-common-ui/src/utils/formatter";
+import EditInvoiceDuedate from "@freteclick/quasar-common-ui/src/components/common/EditInvoiceDuedate.vue";
+import InvoiceActions from "@freteclick/quasar-common-ui/src/components/common/InvoiceActions.vue";
+import InvoiceEditActions from "@freteclick/quasar-common-ui/src/components/common/InvoiceEditActions.vue";
+
+export default {
+  components: {
+    InvoiceInvoice,
+    InvoiceOrders,
+    EditInvoiceDuedate,
+    InvoiceActions,
+    InvoiceEditActions,
+  },
+
+  created() {
+    if (this.$route.params.id)
+      this.invoiceId = decodeURIComponent(this.$route.params.id);
+
+    if (this.myCompany !== null && this.invoiceId !== null) {
+      this.requestInvoice(this.invoiceId);
+    }
+  },
+
+  data() {
+    return {
+      confirm: false,
+      currentTab: "orders",
+      invoiceId: null,
+      orderId: null,
+      invoice: null,
+      isLoading: false,
+      editDueDate: false,
+      notFound: false,
+      client: {
+        name: "",
+      },
+      payer: {
+        name: "",
+      }
+    };
+  },
+
+  computed: {
+    ...mapGetters({
+      myCompany: "people/currentCompany",
+    }),
+  },
+
+  watch: {
+    myCompany(company) {
+      if (company !== null) {
+        this.requestInvoice(this.invoiceId);
+      }
+    },
+  },
+
+  methods: {
+    ...mapActions({
+      getInvoice: "receiveInvoice/getInvoice",
+      renewInvoice: "receiveInvoice/renewInvoice",
+    }),
+
+    formatMoney(value) {
+      return formatMoney(value, "BRL", "pt-br");
+    },
+    renew(invoice) {
+      let invoiceId = invoice["@id"].replace(/\D/g, "");
+
+      if (this.isLoading) return;
+
+      let params = {};
+      this.isLoading = true;
+
+      this.renewInvoice({ invoiceId, params })
+        .then((response) => {
+          this.isLoading = false;
+          if (response.data.id) {
+            this.$router.push({
+              name: "ReceiveDetails",
+              params: {
+                id: response.data.id,
+              },
+            });
+            location.reload();
+          }
+        })
+        .catch((error) => {
+          this.client.name = "";
+          this.payer.name = "";
+          this.isLoading = false;
+          this.invoice = null;
+          this.notFound = true;
+        });
+    },
+    requestInvoice(invoiceId) {
+      if (this.isLoading) return;
+
+      let params = {};
+
+      params["myCompany"] = this.myCompany.id;
+
+      this.isLoading = true;
+
+      this.getInvoice({ invoiceId, params })
+        .then((data) => {
+          this.isLoading = false;
+
+          if (data["@id"]) {
+            this.invoice = data;
+            this.notFound = false;
+
+            // format date
+            if (this.invoice.dueDate) {
+              this.invoice.dueDate = formatDateYmdTodmY(this.invoice.dueDate);
+            }
+
+            // set order
+            if (this.invoice.order.length > 0) {
+              this.orderId = this.invoice.order[0].order["@id"].replace(
+                /[^0-9]/g,
+                ""
+              );
+              this.client.name = this.invoice.order[0].order.client.name;
+              this.payer.name = this.invoice.order[0].order.payer.name;
+              this.payer.id = this.invoice.order[0].order.payer["@id"].replace(
+                /[^0-9]/g,
+                ""
+              );
+              this.client.id = this.invoice.order[0].order.client["@id"].replace(
+                /[^0-9]/g,
+                ""
+              );
+
+            }
+          }
+        })
+        .catch((error) => {
+          this.client.name = "";
+          this.payer.name = "";
+          this.isLoading = false;
+          this.invoice = null;
+          this.notFound = true;
+        });
+    },
+  },
+};
+</script>