bug.vue

bug.vue

<template>
  <v-container>

    <v-row>
      <v-col>
        <v-card>
          <v-card-title>
            Lista de Faturas
          </v-card-title>
          <v-data-table
            v-model="selected"
            :headers="invoiceHeaders"
            :single-select="disableSelect"
            :items="invoices"
            show-select
            hide-default-footer
          >
            <template v-slot:item.data-table-select="{ item, isSelected, select }">
              <v-tooltip :disabled="!disableSelect" top>
                <template v-slot:activator="{ on }">
                  <div v-on="on">
                    <v-simple-checkbox
                      :value="isSelected"
                      :readonly="disableSelect"
                      :disabled="disableSelect"
                      @input="select($event)"
                    ></v-simple-checkbox>
                  </div>
                </template>
                <span>
                  Não é possível alterar uma oferta aplicada.<br />
                  Desabilite a oferta caso você queira fazer alterações.
                </span>
              </v-tooltip>
            </template>

            <template v-slot:item.startDate="{ item }">
              <span>{{ item.startDate | toLocaleDateTimeString }}</span>
            </template>
            <template v-slot:item.amount="{ item }">
              <span>{{ item.amount | asCurrency }}</span>
            </template>
            <template v-slot:item.supplierDiscount="{ item }">
              <span>{{ item.discount | asCurrency }}</span>
            </template>
            <template v-slot:item.supplierDiscountedAmount="{ item }">
              <span>{{ item.discountedAmount | asCurrency }}</span>
            </template>
            <template v-slot:item.dueDate="{ item }">
              <span>{{ item.dueDate | toLocaleDateString }}</span>
            </template>

            <template v-slot:body.append>
              <tr>
                <td class="text-end" colspan="3">
                  <b>Totais:</b>
                </td>
                <td class="text-end">
                  <b>{{ totalOriginalAmount | asCurrency }}</b>
                </td>
                <td class="text-end">
                  <b>{{ totalDiscount | asCurrency }}</b>
                </td>
                <td class="text-end">
                  <b>{{ totalDiscountedAmount | asCurrency }}</b>
                </td>
                <td colspan="4"></td>
              </tr>
            </template>
          </v-data-table>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator"
import { SupplierInvoice } from "@/api/types"
import { CompanyStore } from "@/store/company"
import Discount from "@/components/Discount.vue"
import { client } from "@/api/client"
import sumBy from "lodash/sumBy"
import keyBy from "lodash/keyBy"
import at from "lodash/at"
import map from "lodash/map"

@Component({
  components: { Discount },
})
export default class SupplierMain extends Vue {
  private dataLoaded = false
  private negotiationEnabled = false

  private invoiceHeaders = [
    { text: "Nº da Nota", value: "identifier", align: "start" },
    { text: "Cliente", value: "clientName", align: "start" },
    { text: "Valor original (R$)", value: "amount", align: "end" },
    { text: "Desconto (R$)", value: "supplierDiscount", align: "end" },
    { text: "Novo valor (R$)", value: "supplierDiscountedAmount", align: "end" },
    { text: "Vencimento", value: "dueDate", align: "end" },
    { text: "Status", value: "status", align: "end" },
  ]

  private selected: SupplierInvoice[] = []
  private invoices: SupplierInvoice[] = []

  get disableSelect(): boolean {
    return this.negotiationEnabled
  }

  get applyOfferDisabled(): boolean {
    return this.selected.length === 0
  }

  get selectedOfferedAmount(): number {
    return sumBy(this.selected, "discountedAmount")
  }

  get selectedOriginalAmount(): number {
    return sumBy(this.selected, "amount")
  }

  get totalDiscountedAmount(): number {
    return sumBy(this.invoices, "discountedAmount")
  }

  get totalDiscount(): number {
    return sumBy(this.invoices, "discount")
  }

  get totalOriginalAmount(): number {
    return sumBy(this.invoices, "amount")
  }

  private async discountSaved(): Promise<void> {
    await this.refresh()
  }

  private async refresh(): Promise<void> {
    this.negotiationEnabled = CompanyStore.supplierData.negotiationEnabled
    this.invoices = await client.listSupplierInvoices(CompanyStore.activeCompany.id)
    this.selected = at(keyBy(this.invoices, "id"), CompanyStore.supplierData.supplierOffer)
  }

  @Watch("negotiationEnabled")
  private async onNegotiationEnabled(newValue: boolean) {
    if (!this.dataLoaded) return

    if (newValue) {
      await client.createSupplierOffer(CompanyStore.activeCompany.id, { invoices: map(this.selected, "id") })
    } else {
      await client.deleteSupplierOffer(CompanyStore.activeCompany.id)
    }
  }

  private async created(): Promise<void> {
    await this.refresh()
    this.dataLoaded = true
  }
}
</script>

<style lang="sass" scoped>

.apply-offer-avatar
  border-right: 1px solid #ccc
  padding-right: 10px

.apply-offer-input
  margin-top: 0 !important

  ::v-deep
    .v-input__slot
      display: flex
      flex-direction: column-reverse

      > *
        margin-bottom: 10px
</style>