@freteclick/quasar-financial-ui 1.0.85

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@freteclick/quasar-financial-ui",
+  "version": "1.0.85",
+  "author": "FreteClick",
+  "description": "FreteClick financial Quasar UI Component",
+  "license": "MIT",
+  "main": "src/index.js",
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Frete-Click/fclick-quasar-ui"
+  },
+  "bugs": "",
+  "homepage": "https://www.freteclick.com/devs/plugins",
+  "browserslist": [
+    "last 1 version, not dead, ie >= 11"
+  ]
+}

package/src/components/common/Filters.vue

@@ -0,0 +1,141 @@
+<template>
+  <q-card class="row q-pa-md">
+    <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>
+    <div class="col-6">
+      <q-select stack-label label="Tipo de Fatura" v-model="filters.orderType" :options="orderType" class="full-width"
+        :loading="loadingOrderType">
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> Sem resultados </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
+    <div class="col-6">
+      <DataFilter :fromDate="filters.date.from" :toDate="filters.date.to" :showButton="false"
+        @dateChanged="dateChanged" />
+    </div>
+  </q-card>
+</template>      
+<script>
+import { mapActions, mapGetters } from "vuex";
+import {
+  formatMoney,
+  formatDateYmdTodmY,
+} from "@freteclick/quasar-common-ui/src/utils/formatter";
+import DataFilter from "@freteclick/quasar-common-ui/src/components/common/DataFilter.vue";
+import { date } from "quasar";
+
+export default {
+  components: {
+    DataFilter,
+  },
+  props: {
+    filters: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  created() {
+    this.requestStatuses();
+  },
+
+  data() {
+    let statuses = [{ label: "Selecione um status", value: -1 }];
+
+    return {
+      statuses: statuses,
+      loadingStatuses: false,
+      loadingOrderType: false,
+      orderType: [
+        {
+          label: "Todos",
+          value: null,
+        },
+        {
+          label: "Comissão",
+          value: "comission",
+        },
+        {
+          label: "Compra",
+          value: "purchase",
+        },
+        {
+          label: "Royalties",
+          value: "royalties",
+        },
+        {
+          label: "Venda",
+          value: "sale",
+        },
+      ],
+    };
+  },
+
+  computed: {},
+
+  watch: {
+    "filters.text"() {
+      this.$emit("onRequest");
+    },
+    "filters.orderType"() {
+      this.$emit("onRequest");
+    },
+    "filters.status"() {
+      this.$emit("onRequest");
+    },
+  },
+
+  methods: {
+    ...mapActions({
+      getStatuses: "receiveInvoice/getStatuses",
+    }),
+
+    requestStatuses() {
+      this.loadingStatuses = true;
+      this.getStatuses({
+        visibility: "public",
+        context: "invoice",
+        realStatus: ["open", "pending", "canceled", "closed"],
+      }).then((statuses) => {
+        if (statuses.length) {
+          let data = [];
+
+          data.push({
+            label: "Todos",
+            value: null,
+          });
+
+          for (let index in statuses) {
+            data.push({
+              label: this.$t(`invoice.statuses.${statuses[index].status}`),
+              value: statuses[index]["@id"].replace(/[^0-9]/g, ""),
+            });
+          }
+
+          this.statuses = data;
+        }
+        this.loadingStatuses = false;
+      });
+    },
+    dateChanged(item) {
+      this.filters.date = item;
+      this.$emit("onRequest");
+    },
+  },
+};
+</script>

package/src/components/expense/FormExpense.vue

@@ -0,0 +1,309 @@
+<template>
+  <q-form @submit="onSubmit">
+    <div class="row items-center q-mb-md">
+      <div class="text-h6">
+        {{ item.id === null ? $t('Nova despesa') : $t('Edição despesa') }}
+      </div>
+    </div>
+    <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">
+          <PeopleAutocomplete
+            :source="searchPeople"
+            :isLoading="isSearching"
+            label="Definir o fornecedor"
+            @selected="onSelectClient"
+            placeholder="Pesquisar..."
+          />
+      </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 text-center">
+        <q-radio v-model="item.recurrence" val="single"  :label="$t('Pagamento único')" />
+        <q-radio v-model="item.recurrence" val="monthly" :label="$t('Pagamento recorrente')" />
+      </div>
+      <div v-if="item.recurrence == 'single'"
+        class="col-xs-12 q-mb-md"
+      >
+        <q-select stack-label emit-value map-options lazy-rules
+          v-model ="item.parcels"
+          :label  ="$t('Número de parcelas')"
+          :options="parcels"
+          class   ="q-mb-sm"
+          :rules  ="[val => val !== null || 'Selecione um número']"
+        />
+      </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>
+    <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>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import { formatDateYmdTodmY }     from '@freteclick/quasar-common-ui/src/utils/formatter';
+import Api                        from '@freteclick/quasar-common-ui/src/utils/api';
+
+export default {
+  props: {
+    id : {
+      required: false,
+      default : null
+    },
+    api: {
+      type    : Api,
+      required: true
+    },
+    context:{
+      type: String,
+      required: true
+    }
+  },
+
+  created() {
+    this.loadSelectableOptions();
+
+    if (this.id !== null) {
+      this.getItem(this.id)
+        .then(item => {
+          this.item.category    = item.category['@id'];
+          this.item.description = item.description;
+          this.item.provider    = item.provider['@id'];
+          this.item.amount      = (parseFloat(item.amount) + 0.001).toFixed(2);
+          this.item.parcels     = item.parcels;
+          this.item.dueDate     = formatDateYmdTodmY(item.dueDate);
+          this.item.recurrence  = item.parcels == null ? 'monthly' : 'single';
+        });
+    }
+  },
+
+  data() {
+    return {
+      saving: false,
+      item  : {
+        "id"         : this.id,
+        "category"   : null,
+        "description": null,
+        "provider"   : null,
+        "amount"     : null,
+        "parcels"    : null,
+        "dueDate"    : null,
+        "recurrence" : 'single',
+      },
+      categories: [],
+      providers : [],
+      parcels   : [],
+    }
+  },
+
+  computed: {
+    ...mapGetters({
+      myCompany: 'people/currentCompany',
+    }),
+  },
+
+  methods: {
+    ...mapActions({
+      getStatuses  : 'payInvoice/getStatuses',
+      getCategories : 'categories/getCategories',      
+      getProviders : 'expense/getProviders',
+    }),
+
+    // store method
+    getItem(id) {
+      return this.api.private(`company_expenses/${id}`)
+        .then(response => response.json())
+        .then(response => {
+          return response;
+        });
+    },
+
+    // store method
+    save(values, params = {}) {
+      let options = {
+        method : this.id === null ? 'POST' : 'PUT',
+        headers: new Headers({ 'Content-Type': 'application/ld+json' }),
+        body   : JSON.stringify(values),
+        params : params,
+      };
+
+      let endpoint = this.id === null ?
+        'company_expenses' : `company_expenses/${this.id}`;
+
+      return this.api.private(endpoint, options)
+        .then(response => response.json())
+        .then(data => {
+          this.$q.notify({
+            message : this.$t('Dados salvos com sucesso!'),
+            position: 'bottom',
+            type    : 'positive',
+          });
+
+          return data;
+        })
+        .catch(error => {
+          this.$q.notify({
+            message : this.$t(error.message),
+            position: 'bottom',
+            type    : 'negative',
+          });
+        });
+    },
+
+    loadProviders() {
+      this.getProviders({
+        params: {
+          'myCompany': this.myCompany.id
+        }
+      }).then(members => {
+        if (members.length) {
+          let items = [];
+          members.forEach((item, i) => {
+            items.push({
+              label: item.name,
+              value: item['@id']
+            });
+          });
+          this.providers = items;
+        }
+      });
+    },
+
+    loadSelectableOptions() {
+      // load parcels
+      for (let num = 1; num <= 12; num++) {
+        this.parcels.push({
+          label: `${num}x`,
+          value: num,
+        });
+      }
+      this.item.parcels = this.parcels[0].value;
+
+      // load categories
+      this.loadCategories();
+
+      // load providers
+      this.loadProviders();
+    },
+
+    loadCategories() {
+      this.getCategories({
+        params: {
+          'context': this.context,
+          '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;
+        }
+      });
+    },
+
+    onSubmit() {
+      this.saving = true;
+
+      this.save(
+        {
+          "company"    : `/people/${this.myCompany.id}`,
+          "category"   : this.item.category,
+          "description": this.item.description,
+          "provider"   : this.item.provider,
+          "amount"     : parseFloat(this.item.amount.replace(',', '.')),
+          "parcels"    : this.item.recurrence == 'monthly' ? null : this.item.parcels,
+          "dueDate"    : this.item.dueDate ? this.item.dueDate.replace(/^(\d{2})\/(\d{2})\/(\d{4})$/g, "\$3\-\$2\-\$1") : null,
+          "paymentDay" : parseInt(this.item.dueDate.replace(/^(\d{2})\/(\d{2})\/(\d{4})$/g, "\$1")),
+        },
+        {
+          "myCompany"  : this.myCompany.id
+        }
+      )
+      .finally(() => {
+        this.saving = 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>