@freteclick/quasar-financial-ui 1.0.85

package/src/components/invoice/expense/DetailExpense.vue

@@ -0,0 +1,393 @@
+<template>
+  <div>
+    <div class="row q-mb-md q-gutter-sm justify-end">
+      <q-btn :label="$t('Cancelar despesa')" icon="cancel" color="negative" @click="removeExpense"
+        :loading="deleting" />
+    </div>
+    <q-form @submit="editExpense">
+      <div class="row">
+        <div class="col-xs-12 q-mb-md">
+          <q-select stack-label emit-value map-options lazy-rules v-model="item.category"
+            :label="$t('Categoria da despesa')" :options="categories"
+            :rules="[(val) => val !== null || 'Selecione uma categoria']" />
+        </div>
+        <div class="col-xs-12 q-mb-md">
+          <q-input lazy-rules stack-label v-model="item.description" type="text" :label="$t('Descrição da despesa')"
+            class="q-mt-md" :rules="[isInvalid()]" />
+        </div>
+        <div class="col-xs-12 q-mb-md">
+          <q-select v-if="item.provider" stack-label emit-value map-options lazy-rules v-model="item.provider"
+            :label="$t('Fornecedor')" :options="providers"
+            :rules="[(val) => val !== null || 'Selecione um fornecedor']" />
+          <PeopleAutocomplete v-else :source="searchPeople" option-value="optionValue" :isLoading="isSearching"
+            label="Definir o fornecedor" @selected="onSelectClient" placeholder="Pesquisar..." />
+
+          <q-btn v-if="item.provider" @click="item.provider = null" align="right">
+            Alterar
+          </q-btn>
+        </div>
+        <div class="col-xs-12 q-mb-md">
+          <q-input lazy-rules stack-label reverse-fill-mask v-model="item.amount" prefix="R$" type="text"
+            :label="$t('Valor')" class="q-mt-md" :rules="[isInvalid()]" mask="#,##" fill-mask="0" />
+        </div>
+        <div class="col-xs-12 q-mb-md">
+          <q-input stack-label v-model="item.dueDate" :label="$t('Data primeiro vencimento')" mask="##/##/####"
+            class="q-mb-sm" :rules="[isInvalid('date')]">
+            <template v-slot:append>
+              <q-icon name="event" class="cursor-pointer">
+                <q-popup-proxy ref="qDateProxy1" transition-show="scale" transition-hide="scale">
+                  <q-date v-model="item.dueDate" mask="DD/MM/YYYY" @input="() => $refs.qDateProxy1.hide()" />
+                </q-popup-proxy>
+              </q-icon>
+            </template>
+          </q-input>
+        </div>
+        <div class="col-xs-12 q-mb-md">
+          <q-select stack-label emit-value map-options lazy-rules v-model="item.status" :label="$t('Status')"
+            :options="statuses" :rules="[(val) => val !== null || 'Selecione um status']" />
+        </div>
+      </div>
+      <div class="row justify-end">
+        <q-btn :loading="saving" icon="save" type="submit" :label="$t('Salvar')" size="md" color="primary"
+          class="q-mt-md" />
+      </div>
+    </q-form>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from "vuex";
+import { formatDateYmdTodmY } from "@freteclick/quasar-common-ui/src/utils/formatter";
+
+import PeopleAutocomplete from "@freteclick/quasar-common-ui/src/components/common/PeopleAutocomplete";
+
+export default {
+  components: {
+    PeopleAutocomplete,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+
+  created() {
+    this.loadSelectableOptions();
+    this.loadInvoice();
+  },
+
+  data() {
+    return {
+      isSearching: false,
+      saving: false,
+      isLoading: false,
+      deleting: false,
+      item: {
+        category: null,
+        description: null,
+        provider: null,
+        amount: null,
+        dueDate: null,
+        status: null,
+      },
+      categories: [],
+      providers: [],
+      statuses: [],
+    };
+  },
+
+  computed: {
+    ...mapGetters({
+      myCompany: "people/currentCompany",
+    }),
+  },
+
+  methods: {
+    ...mapActions({
+      getStatuses: "payInvoice/getStatuses",
+      getCategories: 'categories/getCategories',
+      getInvoice: "payInvoice/getInvoice",
+      createCategory: "expense/createCategory",
+      createProvider: "expense/createProvider",
+      updateExpense: "expense/updateExpense",
+      deleteExpense: "expense/deleteExpense",
+      search: "people/searchPeople",
+    }),
+    onSelectClient(item) {
+      this.item.provider = item.id;
+    },
+
+    searchPeople(input) {
+      this.isSearching = true;
+
+      return this.search(input).then((result) => {
+        this.isSearching = false;
+
+        if (result && result.success) {
+          let items = [];
+          for (let i = 0; i < result.data.length; i++) {
+            items.push({
+              label:
+                result.data[i].id +
+                " - " +
+                result.data[i].name +
+                " - " +
+                result.data[i].alias,
+              value: result.data[i],
+            });
+          }
+          return items;
+        } else {
+          this.isSearching = false;
+          this.$q.notify({
+            message: this.$t("messages.gmapsReqNoData"),
+            position: "bottom",
+            type: "negative",
+          });
+        }
+      });
+    },
+    loadSelectableOptions() {
+      // load categories
+      this.loadCategories();
+
+      // load statuses
+      this.loadStatuses();
+    },
+    loadCategories() {
+      this.getCategories({
+        params: {
+          context: "expense",
+          company: this.myCompany.id,
+        },
+      }).then((members) => {
+        if (members.length) {
+          let items = [];
+
+          items.push({
+            label: null,
+            value: null,
+          });
+
+          members.forEach((item, i) => {
+            items.push({
+              label: item.name,
+              value: item["@id"],
+            });
+          });
+          this.categories = items;
+        }
+      });
+    },
+
+    loadStatuses() {
+      this.getStatuses({
+        visibility: "public",
+        context: "invoice",
+        realStatus: ["open", "pending", "canceled", "closed"],
+      }).then((statuses) => {
+        if (statuses.length) {
+          let data = [];
+          for (let index in statuses) {
+            let item = statuses[index];
+            data.push({
+              label: this.$t(`invoice.statuses.${item.status}`),
+              value: item.status,
+            });
+          }
+          this.statuses = data;
+        }
+      });
+    },
+
+    addCategory() {
+      this.dialogs.category.saving = true;
+
+      this.createCategory({
+        values: {
+          name: this.dialogs.category.expense.name,
+          context: this.dialogs.category.expense.context,
+          parent: this.dialogs.category.expense.parent,
+          company: `/people/${this.myCompany.id}`,
+        },
+      })
+        .then((response) => {
+          this.$q.notify({
+            message: this.$t("Dados salvos com sucesso!"),
+            position: "bottom",
+            type: "positive",
+          });
+
+          this.loadCategories();
+        })
+        .finally(() => {
+          this.dialogs.category.saving = false;
+        });
+    },
+
+    addProvider() {
+      this.dialogs.provider.saving = true;
+
+      this.createProvider({
+        values: {
+          name: this.dialogs.provider.item.name,
+          alias: this.dialogs.provider.item.alias,
+          peopleType: this.dialogs.provider.item.type,
+          document: this.dialogs.provider.item.document,
+        },
+        params: {
+          myCompany: this.myCompany.id,
+        },
+      })
+        .then((response) => {
+          this.$q.notify({
+            message: this.$t("Dados salvos com sucesso!"),
+            position: "bottom",
+            type: "positive",
+          });
+        })
+        .catch((error) => {
+          this.$q.notify({
+            message: this.$t(error.message),
+            position: "bottom",
+            type: "negative",
+          });
+        })
+        .finally(() => {
+          this.dialogs.provider.saving = false;
+        });
+    },
+
+    editExpense() {
+      this.saving = true;
+
+      this.updateExpense({
+        id: this.id,
+        values: {
+          company: this.myCompany.id,
+          category: parseInt(this.item.category.replace(/\D/g, "")),
+          provider: parseInt(this.item.provider.replace(/\D/g, "")),
+          amount: parseFloat(this.item.amount.replace(",", ".")),
+          dueDate: this.item.dueDate
+            ? this.item.dueDate.replace(
+              /^(\d{2})\/(\d{2})\/(\d{4})$/g,
+              "$3-$2-$1"
+            )
+            : null,
+          description: this.item.description,
+          status: this.item.status,
+        },
+        params: {
+          myCompany: this.myCompany.id,
+        },
+      })
+        .then((data) => {
+          this.$q.notify({
+            message: this.$t("Dados salvos com sucesso!"),
+            position: "bottom",
+            type: "positive",
+          });
+
+          this.$emit("updated", data);
+        })
+        .catch((error) => {
+          this.$q.notify({
+            message: this.$t(error.message),
+            position: "bottom",
+            type: "negative",
+          });
+        })
+        .finally(() => {
+          this.saving = false;
+        });
+    },
+
+    removeExpense() {
+      if (window.confirm(this.$t("Realmente deseja cancelar esta despesa?"))) {
+        this.deleting = true;
+
+        this.deleteExpense({
+          id: this.id,
+          values: {
+            company: this.myCompany.id,
+          },
+        })
+          .then((data) => {
+            this.$q.notify({
+              message: this.$t("Despesa cancelada com sucesso!"),
+              position: "bottom",
+              type: "positive",
+            });
+
+            this.loadInvoice();
+
+            this.$emit("updated", data);
+          })
+          .catch((error) => {
+            this.$q.notify({
+              message: this.$t(error.message),
+              position: "bottom",
+              type: "negative",
+            });
+          })
+          .finally(() => {
+            this.deleting = false;
+          });
+      }
+    },
+
+    loadInvoice() {
+      let params = {};
+
+      this.isLoading = true;
+
+      this.getInvoice({
+        invoiceId: this.id,
+        params: {
+          myCompany: this.myCompany.id,
+        },
+      })
+        .then((data) => {
+          if (data["@id"]) {
+            this.item.category = data.category;
+            this.item.description = data.description;
+            this.item.provider = data.order[0].order.provider["@id"].replace(
+              /people/g,
+              "providers"
+            );
+
+            this.providers.push({
+              label:
+                data.order[0].order.provider.name ||
+                data.order[0].order.provider.alias,
+              value: this.item.provider,
+            });
+
+            this.item.amount = (parseFloat(data.price) + 0.001).toFixed(2);
+            this.item.dueDate = formatDateYmdTodmY(data.dueDate);
+            this.item.status = data.status.status;
+          }
+        })
+        .catch((error) => { })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+
+    isInvalid(field) {
+      return (val) => {
+        if (field == "date") {
+          if (!/^\d{2}\/\d{2}\/\d{4}$/g.test(val))
+            return this.$t("A data não é válida");
+        }
+
+        if (!(val && val.length > 0))
+          return this.$t("Este campo é obrigatório");
+
+        return true;
+      };
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,210 @@
+<template>
+  <q-card style="min-height: 90vh;">
+    <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.provider.name }}</div>
+      </div>
+      <div class="col-xs-12 col-sm-4">
+        <q-markup-table flat dense
+          separator="none"
+          class    ="bg-grey-4 full-height"
+        >
+          <tbody>
+            <tr>
+              <td class="text-left text-bold">Número da fatura</td>
+              <td class="text-left">
+                {{ `#${this.invoice['@id'].match(/^\/finance\/pay\/([a-z0-9-]*)$/)[1]}` }}
+              </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">
+                {{ this.invoice.dueDate }}
+              </td>
+            </tr>
+          </tbody>
+        </q-markup-table>
+      </div>
+      <div class ="col-xs-12 col-sm-8">
+        <div
+          class ="row items-center justify-center full-height rounded-borders"
+          :style="`background-color: ${this.invoice.status.color}`"
+        >
+          <div class="text-white text-h6">
+            {{ $t(`invoice.statuses.${invoice.status.status}`) }}
+          </div>
+        </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 ="details"
+            label="Detalhes"
+          />
+          <q-tab
+            name ="orders"
+            label="Despesa"
+          />
+        </q-tabs>
+
+        <q-separator />
+
+        <q-tab-panels
+          v-model="currentTab"
+        >
+          <q-tab-panel name="details" class="q-pa-none">
+            <InvoiceInvoice
+              :invoiceId="invoiceId"
+              @updated  ="requestInvoice(invoiceId)"
+            />
+          </q-tab-panel>
+          <q-tab-panel name="orders" class="q-pa-none">
+            <InvoiceOrders
+              :invoiceId="invoiceId"
+            />
+          </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 InvoiceOrders                       from './details/InvoiceOrders';
+import InvoiceInvoice                      from './details/InvoiceInvoice';
+import { formatMoney, formatDateYmdTodmY } from '@freteclick/quasar-common-ui/src/utils/formatter';
+
+export default {
+  components: {
+    InvoiceInvoice,
+    InvoiceOrders ,
+  },
+
+  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 {
+      currentTab: 'details',
+      invoiceId : null,
+      orderId   : null,
+      invoice   : null,
+      isLoading : false,
+      notFound  : false,
+      provider     : {
+        name: '',
+      },
+    };
+  },
+
+  computed: {
+    ...mapGetters({
+      myCompany: 'people/currentCompany',
+    }),
+  },
+
+  watch: {
+    myCompany(company) {
+      if (company !== null) {
+        this.requestInvoice(this.invoiceId);
+      }
+    },
+  },
+
+  methods: {
+    ...mapActions({
+      getInvoice: 'payInvoice/getInvoice',
+    }),
+
+    formatMoney(value) {
+      return formatMoney(value, 'BRL', 'pt-br');
+    },
+
+    requestInvoice(invoiceId) {
+      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.provider.name = `${this.invoice.order[0].order.provider.name} ${this.invoice.order[0].order.provider.alias}`;
+            }
+          }
+        })
+        .catch(error => {
+          this.provider.name = '';
+          this.isLoading = false;
+          this.invoice   = null;
+          this.notFound  = true;
+        });
+    },
+  },
+};
+</script>