@freteclick/quasar-financial-ui 1.0.85

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

@@ -0,0 +1,539 @@
+<template>
+  <div>
+    <div class="row q-mb-md q-gutter-sm justify-end">
+      <q-btn
+        label="Cadastrar fornecedor"
+        icon="add"
+        size="sm"
+        color="secondary"
+        @click="dialogs.provider.visible = true"
+      />
+      <q-btn
+        label="Cadastrar categoria"
+        icon="add"
+        size="sm"
+        color="secondary"
+        @click="dialogs.category.visible = true"
+      />
+    </div>
+    <q-form @submit="addExpense">
+      <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>
+
+    <q-dialog v-model="dialogs.category.visible" @before-show="resetCategory">
+      <q-card style="width: 700px; max-width: 80vw">
+        <q-card-section class="row items-center">
+          <div class="text-h6">Cadastro de categoria</div>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
+        </q-card-section>
+        <q-card-section>
+          <q-form @submit="addCategory" class="q-mb-md">
+            <div class="row">
+              <div class="col-xs-12 q-mb-md">
+                <q-select
+                  stack-label
+                  emit-value
+                  map-options
+                  v-model="dialogs.category.expense.parent"
+                  :label="$t('Categoria pai')"
+                  :options="categories"
+                />
+              </div>
+              <div class="col-xs-12 q-mb-md">
+                <q-input
+                  lazy-rules
+                  stack-label
+                  v-model="dialogs.category.expense.name"
+                  type="text"
+                  :label="$t('Nome sub-categoria')"
+                  class="q-mt-md"
+                  :rules="[isInvalid()]"
+                />
+              </div>
+            </div>
+            <div class="row justify-end">
+              <q-btn
+                :loading="dialogs.category.saving"
+                icon="save"
+                type="submit"
+                :label="$t('Salvar')"
+                size="md"
+                color="primary"
+                class="q-mt-md"
+              />
+            </div>
+          </q-form>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+
+    <q-dialog v-model="dialogs.provider.visible">
+      <q-card style="width: 700px; max-width: 80vw">
+        <q-card-section class="row items-center">
+          <div class="text-h6">Cadastro de fornecedor</div>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
+        </q-card-section>
+        <q-card-section>
+          <q-form @submit="addProvider" class="q-mb-md">
+            <div class="row">
+              <div class="col-xs-12 q-mb-md">
+                <div class="row justify-center">
+                  <q-btn-toggle
+                    no-caps
+                    v-model="dialogs.provider.item.type"
+                    toggle-color="primary"
+                    :options="[
+                      { label: 'Pessoa Jurídica', value: 'J' },
+                      { label: 'Pessoa Física', value: 'F' },
+                    ]"
+                  />
+                </div>
+              </div>
+              <div class="col-xs-12">
+                <q-input
+                  stack-label
+                  lazy-rules
+                  unmasked-value
+                  v-model="dialogs.provider.item.document"
+                  type="text"
+                  :label="
+                    dialogs.provider.item.type == 'J' ? $t('CNPJ') : $t('CPF')
+                  "
+                  :mask="
+                    dialogs.provider.item.type == 'J'
+                      ? '##.###.###/####-##'
+                      : '###.###.###-##'
+                  "
+                />
+              </div>
+              <div class="col-xs-12">
+                <q-input
+                  stack-label
+                  lazy-rules
+                  v-model="dialogs.provider.item.name"
+                  type="text"
+                  class="q-mb-sm"
+                  :label="
+                    dialogs.provider.item.type == 'J'
+                      ? $t('Razão social')
+                      : $t('Nome')
+                  "
+                  :rules="[isInvalid('name')]"
+                />
+              </div>
+              <div class="col-xs-12">
+                <q-input
+                  stack-label
+                  lazy-rules
+                  v-model="dialogs.provider.item.alias"
+                  type="text"
+                  class="q-mb-sm"
+                  :label="
+                    dialogs.provider.item.type == 'J'
+                      ? $t('Nome Fantasia')
+                      : $t('Sobrenome')
+                  "
+                  :rules="[isInvalid('alias')]"
+                />
+              </div>
+            </div>
+            <div class="row justify-end">
+              <q-btn
+                :loading="dialogs.provider.saving"
+                icon="save"
+                type="submit"
+                :label="$t('Salvar')"
+                size="md"
+                color="primary"
+                class="q-mt-md"
+              />
+            </div>
+          </q-form>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from "vuex";
+import PeopleAutocomplete from "@freteclick/quasar-common-ui/src/components/common/PeopleAutocomplete";
+
+export default {
+  components: {
+    PeopleAutocomplete,
+  },
+  created() {
+    this.loadSelectableOptions();
+  },
+
+  data() {
+    return {
+      isSearching:false,
+      saving: false,
+      item: {
+        parent: null,
+        category: null,
+        description: null,
+        provider: null,
+        amount: null,
+        parcels: null,
+        dueDate: null,
+        recurrence: "single",
+      },
+      categories: [],
+      providers: [],
+      parcels: [],
+      dialogs: {
+        category: {
+          visible: false,
+          expense: {
+            name: null,
+            context: "expense",
+            parent: null,
+          },
+          saving: false,
+        },
+        provider: {
+          visible: false,
+          saving: false,
+          item: {
+            name: null,
+            alias: null,
+            type: "J",
+            document: null,
+          },
+        },
+      },
+    };
+  },
+
+  computed: {
+    ...mapGetters({
+      myCompany: "people/currentCompany",
+    }),
+  },
+
+  methods: {
+    ...mapActions({
+      getStatuses: "payInvoice/getStatuses",
+      getCategories : 'categories/getCategories',      
+      getProviders: "expense/getProviders",
+      createExpense: "expense/createExpense",
+      createCategory: "expense/createCategory",
+      createProvider: "expense/createProvider",
+      search: "people/searchPeople",
+    }),
+    resetCategory() {
+      this.dialogs.category.expense.name = null;
+      this.dialogs.category.expense.context = "expense";
+      this.dialogs.category.expense.parent = null;
+    },
+
+
+    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 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();
+
+  
+    },
+
+    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;
+        });
+    },
+
+    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;
+        }
+      });
+    },
+
+    addExpense() {
+      this.saving = true;
+
+      this.createExpense({
+        values: {
+          company: this.myCompany.id,
+          category: parseInt(this.item.category.replace(/\D/g, "")),
+          provider: parseInt(this.item.provider),
+          paymentMode:
+            this.item.recurrence == "monthly" ? 0 : this.item.parcels,
+          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,
+        },
+        params: {
+          myCompany: this.myCompany.id,
+        },
+      })
+        .then((data) => {
+          this.$q.notify({
+            message: this.$t("Dados salvos com sucesso!"),
+            position: "bottom",
+            type: "positive",
+          });
+
+          this.$emit("created", data);
+        })
+        .catch((error) => {
+          this.$q.notify({
+            message: this.$t(error.message),
+            position: "bottom",
+            type: "negative",
+          });
+        })
+        .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>