@freteclick/quasar-financial-ui 1.0.85

package/src/components/invoice/client/InvoiceSearching.vue

@@ -0,0 +1,383 @@
+<template>
+  <div>
+    <q-table
+        :loading        ="isLoading"
+        :data           ="data"
+        :columns        ="settings.columns"
+        :pagination.sync="pagination"
+        @request        ="onRequest"
+        row-key         ="id"
+        :visible-columns="settings.visibleColumns"
+        style           ="min-height: 90vh;"
+    >
+      <template v-slot:top v-if="search === true">
+        <div class="col-xs-12 q-pb-md text-h6">
+          Faturas
+        </div>
+        <div class="col-sm-6 col-xs-12 q-pa-md">
+          <q-input stack-label
+              label   ="Buscar por"
+              debounce="1000"
+              v-model ="filters.text"
+              class   ="full-width"
+          />
+        </div>
+        <div class="col-sm-6 col-xs-12 q-pa-md">
+          <q-select stack-label
+              label   ="Status da fatura"
+              v-model ="filters.status"
+              :options="statuses"
+              class   ="full-width"
+              :loading="loadingStatuses"
+          >
+            <template v-slot:no-option>
+                <q-item>
+                    <q-item-section class="text-grey">
+                    Sem resultados
+                    </q-item-section>
+                </q-item>
+            </template>
+          </q-select>
+        </div>
+      </template>
+
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td key="id"             :props="props">
+            <q-btn outline dense
+              :to   ="{ name: 'ClientInvoiceDetails', params: { id: props.row.id } }"
+              :label="props.cols[0].value"
+              :style="{color:props.row.color_status}"              
+              class ="full-width"
+            />
+          </q-td>
+          <q-td key="pedidos"        :props="props">
+            <q-btn outline dense
+              :label="props.row.pedidos.length > 1 ? `${props.row.pedidos.length} Pedidos` : '1 Pedido'"
+              color ="primary"
+              @click="seeOrdersList(props.row.pedidos, props.row.id)"
+              class ="full-width"
+            />
+          </q-td>
+          <q-td key="dataVencimento" :props="props">{{ props.cols[2].value }}</q-td>
+          <q-td key="fornecedor"     :props="props">{{ props.cols[3].value }}</q-td>
+          <q-td key="status"         :props="props" :style="{color:props.row.color_status}">
+            {{ $t(`invoice.statuses.${props.row.status}`) }}
+          </q-td>
+          <q-td key="preco"          :props="props">{{ props.cols[5].value }}</q-td>
+        </q-tr>
+      </template>
+    </q-table>
+
+    <q-dialog v-model="dialogs.orders.visible" transition-show="scale" transition-hide="scale">
+      <q-card class="text-white" style="background-color: #00519b; width: 300px">
+        <q-card-section>
+          <div class="row items-center">
+            <div class="text-h6">Pedidos da Fatura #{{ dialogs.orders.invoice }}</div>
+            <q-space />
+            <q-btn icon="close" color="white" flat round dense v-close-popup />
+          </div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none">
+          <q-markup-table>
+            <tbody>
+              <tr
+                v-for="(orderId, index) in dialogs.orders.items"
+                :key ="index"
+              >
+                <td class="text-center">
+                  <q-btn flat
+                    color ="primary"
+                    :label="`Ver pedido #${orderId}`"
+                    :to   ="{ name: 'ClientOrderDetails', params: { id: orderId } }"
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </q-markup-table>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import { formatMoney  }           from '@freteclick/quasar-common-ui/src/utils/formatter';
+import { date }                   from 'quasar';
+
+const SETTINGS = {
+  visibleColumns: [
+    'id'            ,
+    'pedidos'       ,
+    'dataVencimento',
+    'fornecedor'    ,
+    'status'        ,
+    'preco'         ,
+  ],
+  columns       : [
+    {
+      name  : 'id',
+      field : 'id',
+      align : 'left',
+      format: (val, row) => {
+        return `#${val}`;
+      },
+      label : 'ID'
+    },
+    {
+      name : 'pedidos',
+      align: 'left',
+      field: 'pedidos',
+      label: 'Pedidos'
+    },
+    {
+      name  : 'dataVencimento',
+      field : 'dataVencimento',
+      align : 'left',
+      format: (val, row) => {
+        return date.formatDate(val + 'T23:59:00', 'DD/MM/YYYY')
+      },
+      label : 'Data vencimento'
+    },
+    {
+      name : 'fornecedor',
+      field: 'fornecedor',
+      align: 'left',
+      label: 'Fornecedor'
+    },
+    {
+      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,
+    },
+    orderId: {
+      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,
+      statuses       : statuses,
+      loadingStatuses: false,
+      dialogs        : {
+        orders: {
+          visible: false,
+          items  : [],
+          invoice: null,
+        },
+      },
+      data           : [],
+      filters        : {
+        text   : null,
+        status : statuses[0],
+        company: null,
+      },
+      pagination     : {
+        sortBy     : 'dataVencimento',
+        descending : false,
+        page       : 1,
+        rowsPerPage: 10,
+        rowsNumber : 10,
+      },
+    }
+  },
+
+  computed: {
+    ...mapGetters({
+      isLoading : 'payInvoice/isLoading' ,
+      error     : 'payInvoice/error'     ,
+      violations: 'payInvoice/violations',
+      items     : 'payInvoice/items'     ,
+      totalItems: 'payInvoice/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 i in items) {
+        let item   = items[i];
+        let orders = [];
+
+        for (let o in item.order) {
+          orders.push(
+            item.order[o].order['@id'].match(/^\/purchasing\/orders\/([a-z0-9-]*)$/)[1]
+          );
+        }
+
+        data.push({
+          '@id'           : item['@id'],
+          'id'            : item['@id'].match(/^\/finance\/pay\/([a-z0-9-]*)$/)[1],
+          'pedidos'       : orders,
+          'color_status'  : item.status.color,
+          'dataVencimento': item.dueDate,
+          'fornecedor'    : item.order[0].order.provider.alias,
+          'status'        : item.status.status,
+          '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   : 'payInvoice/getItems'   ,
+      reset      : 'payInvoice/reset'      ,
+      getStatuses: 'payInvoice/getStatuses',
+    }),
+
+    seeOrdersList(ordersId, invoiceId) {
+      this.dialogs.orders.items   = ordersId;
+      this.dialogs.orders.invoice = invoiceId;
+      this.dialogs.orders.visible = true;
+    },
+
+    requestStatuses() {
+      this.loadingStatuses = true;
+      this.getStatuses({
+        context: "invoice",
+        'visibility': 'public',
+        'realStatus': ['open', 'pending', 'canceled', 'closed'],
+      })
+        .then(statuses => {
+          if (statuses.length) {
+            let data = [];
+            for (let index in statuses) {
+              let item = statuses[index];
+              this.statuses.push({
+                'label': this.$t(`invoice.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;
+      }
+      else {
+        params['status.realStatus'] = ['open', 'pending'];
+      }
+
+      if (this.filters.company != null) {
+        params['myCompany'] = this.filters.company.id;
+      }
+
+      if (this.orderId !== null) {
+        params['order.order'] = this.orderId;
+      }
+
+      params['invoice[dueDate]'] = '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/client/details/InvoiceInvoice.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="row items-center justify-center">
+    <div class="flex flex-center" v-if="isLoading">
+      <q-circular-progress :indeterminate="isLoading"
+        size ="sm"
+        color="primary"
+        class="q-ma-md"
+      />
+      Carregando...
+    </div>
+
+    <!-- BILLET VIEWER -->
+
+    <div :class="showBillet ? 'full-width q-pa-lg' : 'hidden'">
+      <q-form
+        ref    ="myForm"
+        :action="payment !== null ? payment.invoiceUrl : ''"
+        method ="post"
+        class  ="q-mt-sm row justify-center items-center"
+        target ="BILLET"
+      >
+        <input type="hidden" name="DC" :value="itauHash" />
+      </q-form>
+
+      <div style="height: 1200px">
+        <iframe name="BILLET" width="100%" height="100%" frameBorder="0">
+          <p>This browser does not support IFrame.</p>
+        </iframe>
+      </div>
+    </div>
+
+    <!-- BILLET GENERATOR TRIGGER -->
+
+    <div class="col-12 q-pt-lg" v-if="paymentIsPending && billetMustBeCreated">
+      <div
+        style="min-height: 80vh;"
+        class="row justify-center items-center"
+      >
+        <q-form
+          :action="payment ? payment.invoiceUrl : ''"
+          method ="post"
+          target ="_blank"
+        >
+          <input type="hidden" name="DC" :value="itauHash" />
+          <q-btn
+            type    ="submit"
+            icon    ="money"
+            size    ="lg"
+            color   ="primary"
+            label   ="Gerar boleto"
+            @click  ="loadOnFocus = true"
+            :disable="isPaid"
+          />
+        </q-form>
+      </div>
+    </div>
+
+    <!-- PAID MESSAGE -->
+
+    <div class="col-12" v-if="payment !== null && isPaid">
+      <div 
+        class="row items-center justify-center"
+        style="min-height: 90vh;"
+      >
+        <q-banner class="text-white bg-positive text-center text-h3" rounded>
+          <template v-slot:avatar>
+            <q-icon name="thumb_up" color="white" />
+          </template>
+          O boleto foi pago
+        </q-banner>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { date, extend }           from 'quasar';
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  props: {
+    invoiceId: {
+      type    : String,
+      required: true,
+    },
+    orderId  : {
+      type    : String,
+      required: true,
+    },
+  },
+
+  mounted() {
+    window.addEventListener   ('focus', this.loadItauDataOnFocus);
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('focus', this.loadItauDataOnFocus);
+  },
+
+  created() {
+    this.getPaymentStatus();
+  },
+
+  data() {
+    return {
+      isLoading  : false,
+      payment    : null,
+      isPaid     : false,
+      itauHash   : null,
+      showBillet : false,
+      loadOnFocus: false,
+    };
+  },
+
+  computed: {
+    ...mapGetters({
+      myCompany: 'people/currentCompany',
+    }),
+
+    paymentIsPending() {
+      if (this.payment === null)
+        return false;
+
+      return ['waiting payment', 'outdated billing']
+        .includes(this.payment.status);
+    },
+
+    billetMustBeCreated() {
+      if (this.payment === null)
+        return false;
+
+      return this.payment.paymentType == 'choose_pending';
+    },
+  },
+
+  watch: {
+    myCompany(company) {
+      if (company !== null) {
+        this.getPaymentStatus();
+      }
+    },
+
+    payment(data) {
+      if (!data)
+        return;
+
+      if (data.paymentType == 'choose_pending' || data.paymentStatus == 'no_finished') {
+        this.isPaid = false;        
+        this.getItauHash();
+      }
+      else {
+        if (data.paymentType == 'billet') {
+          if (data.paymentStatus == 'paid')
+            this.isPaid = true;
+          else {
+            this.isPaid = false;
+
+            if (data.paymentStatus == 'created')
+              this.getItauHash()
+                .then(hash => {
+                  if (hash !== null)
+                    this.showBillet = true;
+                });
+            else
+              this.showBillet = false;
+          }
+        }
+      }
+    },
+
+    showBillet(show) {
+      if (show == true) {
+        this.$refs.myForm.$el.submit();
+      }
+    },
+  },
+
+  methods: {
+    ...mapActions({
+      getItauData: 'payInvoice/bankItau',
+    }),
+
+    loadItauDataOnFocus() {
+      if (this.loadOnFocus) {
+        this.getPaymentStatus()
+          .then(data => {
+            this.loadOnFocus = false;
+          });
+      }
+    },
+
+    getItauHash() {
+      let params = {};
+
+      this.isLoading = true;
+
+      if (this.myCompany !== null)
+        params['myCompany'] = this.myCompany.id;
+
+      return this.getItauData({
+        invoiceId: this.invoiceId,
+        operation: 'itauhash',
+        params   : params
+      })
+        .then(data => {
+          if (data !== null) {
+            return this.itauHash = data;
+          }
+
+          return null;
+        })
+        .catch(error => {
+          
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+
+    getPaymentStatus() {
+      let params = {};
+
+      this.isLoading = true;
+
+      if (this.myCompany !== null)
+        params['myCompany'] = this.myCompany.id;
+
+      return this.getItauData({
+        invoiceId: this.invoiceId,
+        operation: 'payment',
+        params   : params
+      })
+        .then(data => {
+          if (data !== null) {
+            return this.payment = data;
+          }
+
+          return null;
+        })
+        .catch(error => {
+          
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+  },
+};
+</script>