@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/billing/generate-billing/GenerateBilling.vue

@@ -0,0 +1,371 @@
+<template>
+  <div class="main">
+    <div v-show="loading">
+      <br />
+      <Loading
+        type="line"
+        :center="true"
+      />
+      <div>Aguarde, estamos gerando o faturamento...</div>
+    </div>
+    <div v-show="!loading">
+      <div v-if="!success">
+        <SelectOptionPeriodRent
+          v-show="isStepOne"
+          :rentId="rentId"
+          :showPeriodAll="true"
+        />
+        <DisplayTotalization
+          title="TOTAL GERAL"
+          :value="totalSelected"
+          _style="color: #1b3a55;font-size:19px"
+        />
+        <Molded v-show="isStepOne">
+          <ItemsRentForInvoice
+            :rentId="rentId"
+            :periodRentId="periodRentId"
+          />
+        </Molded>
+        <div class="div-alert">
+          <Alert
+            type="warning"
+            v-if="hasDifference && isStepTwo"
+          >
+            <span>
+              Restante
+              {{ difference | currency }}
+            </span>
+          </Alert>
+        </div>
+        <Molded v-if="isStepTwo">
+          <PaymentCreate
+            module="Rental"
+            :totalValue="totalSelected"
+          />
+          <br />
+          <PaymentsList />
+        </Molded>
+        <InvoiceOrTaxDocument
+          v-show="isStepThree"
+          v-model="invoiceOrTaxDocument"
+        />
+        <div v-show="isStepFour">
+          <GenerateInvoice
+            v-if="isInvoice"
+            v-model="generateInvoice"
+          />
+          <NewGenerateNfse
+            v-if="isNfse"
+            :customerId="customerId"
+            v-model="generateNfse"
+          />
+        </div>
+        <br />
+        <div class="text-center">
+          <Button
+            _key="btnClickedBack"
+            v-if="showBackButton"
+            type="info"
+            title="Voltar"
+            classIcon="title fa-solid fa-circle-arrow-left"
+            size="small"
+            :clicked="back"
+          />
+          <Button
+            v-if="showNextButton"
+            _key="btnClickedNext"
+            type="info"
+            title="Avançar"
+            classIcon="title fas fa-arrow-circle-right"
+            :disabled="disabled"
+            size="medium"
+            :clicked="next"
+          />
+          <Button
+            v-if="showGenerateButton"
+            _key="btnGenerateBilling"
+            type="success"
+            title="Gerar Faturamento"
+            size="large"
+            :clicked="generateBilling"
+          />
+        </div>
+      </div>
+      <div v-else>
+        <SuccessBilling
+          :typeDocument="typeDocument"
+          :document="document"
+          :rentId="rentId"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import DisplayTotalization from "@nixweb/nixloc-ui/src/component/rental/DisplayTotalization";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+
+import GenerateInvoice from "./GenerateInvoice.vue";
+import InvoiceOrTaxDocument from "./InvoiceOrTaxDocument.vue";
+import ItemsRentForInvoice from "./ItemsRentForInvoice.vue";
+import NewGenerateNfse from "./NewGenerateNfse.vue";
+import PaymentCreate from "../../shared/payment-items/PaymentCreate.vue";
+import PaymentsList from "../../shared/payment-items/PaymentsList.vue";
+import SelectOptionPeriodRent from "../../rental/period-rental/SelectOptionPeriodRent.vue";
+import SuccessBilling from "./SuccessBilling.vue";
+
+import { mapGetters, mapMutations, mapActions, mapState } from "vuex";
+
+const DOCUMENT_TYPE_INVOICE = 1;
+const DOCUMENT_TYPE_NFSE = 2;
+
+export default {
+  name: "GenerateBilling",
+  components: {
+    ItemsRentForInvoice,
+    Molded,
+    Button,
+    Alert,
+    Loading,
+    SelectOptionPeriodRent,
+    DisplayTotalization,
+    PaymentCreate,
+    PaymentsList,
+    InvoiceOrTaxDocument,
+    GenerateInvoice,
+    SuccessBilling,
+    NewGenerateNfse,
+  },
+  data() {
+    return {
+      document: {},
+      rentId: this.$route.params.rentId,
+      customerId: this.$route.params.customerId,
+      periodRentId: "",
+      selected: [],
+      invoiceOrTaxDocument: 0,
+      generateInvoice: {
+        otherCustomer: false,
+        customer: {},
+        isAddProductRent: false,
+        isAddPeriodRent: false,
+        isAddPayment: false,
+        description: "",
+        observation: "",
+      },
+      generateNfse: {
+        otherCustomer: false,
+        customer: {},
+        emails: [],
+        taxation: {},
+        nacional: true,
+        nfsePrefeitura: { valorNota: 0 },
+        nfseNacional: { valorNota: 0 },
+      },
+      step: 1,
+      urlGenerate: "/api/v1/billing/generate-billing",
+      urlGetAllWithoutLinkedFinance:
+        "/api/v1/rental/payment-rent/get-all-without-linked-finance",
+      success: false,
+      loading: false,
+    };
+  },
+  mounted() {
+    this.getAllWithoutLinkedFinance();
+  },
+  beforeDestroy() {
+    this.resetPayment();
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+    ...mapGetters("paymentShared", ["sumPayment"]),
+    ...mapState("paymentShared", ["paymentsRent"]),
+    isStepOne() {
+      return this.step === 1;
+    },
+    isStepTwo() {
+      return this.step === 2;
+    },
+    isStepThree() {
+      return this.step === 3;
+    },
+    isStepFour() {
+      return this.step === 4;
+    },
+    isInvoice() {
+      return this.invoiceOrTaxDocument === DOCUMENT_TYPE_INVOICE;
+    },
+    isNfse() {
+      return this.invoiceOrTaxDocument === DOCUMENT_TYPE_NFSE;
+    },
+    hasDifference() {
+      return this.difference !== 0;
+    },
+    showBackButton() {
+      return this.step > 1;
+    },
+    showNextButton() {
+      return this.step !== 4;
+    },
+    showGenerateButton() {
+      return this.step === 4;
+    },
+    typeDocument() {
+      return this.isInvoice ? "fatura" : "nota";
+    },
+    difference() {
+      const totalSelected = Number(this.totalSelected || 0);
+      const sumPayment = Number(this.sumPayment || 0);
+      return Number((totalSelected - sumPayment).toFixed(2));
+    },
+    totalSelected() {
+      return this.selected.reduce((accumulator, item) => {
+        return accumulator + (item.totalUnitValue + item.totalUnitInsurance);
+      }, 0);
+    },
+    disabled() {
+      if (this.isStepOne) {
+        return this.selected.length === 0;
+      }
+
+      if (this.isStepTwo) {
+        return this.difference !== 0;
+      }
+
+      if (this.isStepThree) {
+        return (
+          this.invoiceOrTaxDocument !== DOCUMENT_TYPE_INVOICE &&
+          this.invoiceOrTaxDocument !== DOCUMENT_TYPE_NFSE
+        );
+      }
+
+      return true;
+    },
+    idsItemsRent() {
+      return this.selected.map((item) => item.id);
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    ...mapMutations("paymentShared", ["addPayment", "resetPayment"]),
+    ...mapActions("generic", ["getApi", "postApi"]),
+
+    next() {
+      this.step++;
+      this.removeLoading(["btnClickedNext"]);
+    },
+
+    back() {
+      this.step--;
+      this.removeLoading(["btnClickedBack"]);
+    },
+
+    generateBilling() {
+      this.loading = true;
+
+      const params = {
+        url: this.urlGenerate,
+        obj: this.isInvoice ? this.createObjInvoice() : this.createObjNfse(),
+      };
+
+      this.postApi(params).then((response) => {
+        if (response.success) {
+          this.success = true;
+          this.document = response.content;
+        }
+
+        this.loading = false;
+        this.removeLoading(["btnGenerateBilling"]);
+      });
+    },
+
+    mapPaymentRent(item) {
+      return {
+        id: item.id,
+        typePayment: { id: item.typePaymentId, content: item.typePaymentName },
+        dueDate: item.dueDate,
+        value: item.value,
+      };
+    },
+
+    getAllWithoutLinkedFinance() {
+      const params = {
+        url: this.urlGetAllWithoutLinkedFinance,
+        obj: { any: this.rentId },
+      };
+
+      this.getApi(params).then((response) => {
+        response.content.forEach((item) => {
+          this.addPayment(this.mapPaymentRent(item));
+        });
+      });
+    },
+
+    createObjInvoice() {
+      return {
+        invoiceOrTaxDocument: this.invoiceOrTaxDocument,
+        rentId: this.rentId,
+        otherCustomer: this.generateInvoice.otherCustomer,
+        customerId: this.generateInvoice.customer?.id || "",
+        isAddProductRent: this.generateInvoice.isAddProductRent,
+        isAddPeriodRent: this.generateInvoice.isAddPeriodRent,
+        isAddPayment: this.generateInvoice.isAddPayment,
+        description: this.generateInvoice.description,
+        observation: this.generateInvoice.observation,
+        paymentsRent: this.paymentsRent,
+        idsItemsRent: this.idsItemsRent,
+        taxation: this.generateNfse.taxation,
+        value: this.totalSelected,
+      };
+    },
+
+    createObjNfse() {
+      this.generateNfse.nfsePrefeitura.valorNota = this.totalSelected;
+      this.generateNfse.nfseNacional.valorNota = this.totalSelected;
+
+      return {
+        invoiceOrTaxDocument: this.invoiceOrTaxDocument,
+        rentId: this.rentId,
+        otherCustomer: this.generateNfse.otherCustomer,
+        customerId: this.generateNfse.customer?.id || "",
+        paymentsRent: this.paymentsRent,
+        idsItemsRent: this.idsItemsRent,
+        emails: this.generateNfse.emails,
+        nacional: this.generateNfse.nacional,
+        nfsePrefeitura: this.generateNfse.nfsePrefeitura,
+        nfseNacional: this.generateNfse.nfseNacional,
+        value: this.totalSelected,
+      };
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name === "selectedPeriodRent") {
+          if (event.data.showAll) this.periodRentId = "";
+          if (!event.data.showAll) this.periodRentId = event.data.period.id;
+        }
+
+        if (event.name === "itemsSelectedForInvoice") {
+          this.selected = event.data;
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.main {
+  margin-top: 20px;
+}
+
+.div-alert {
+  margin-bottom: 20px;
+}
+</style>

package/src/components/modules/billing/generate-billing/GenerateInvoice.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div class="div-title">
+      <span class="title"> Fatura de Locação</span>
+    </div>
+    <Molded>
+      <b-row>
+        <b-col xs="12" sm="12" md="12" lg="3" xl="3">
+          <RadioGroup title="Faturar para outro Cliente?" :options="[
+            { text: 'Sim', value: true },
+            { text: 'Não', value: false },
+          ]" v-model="generateInvoice.otherCustomer" />
+        </b-col>
+        <b-col xs="12" sm="12" md="12" lg="9" xl="9" v-if="generateInvoice.otherCustomer">
+          <CustomerWithCreate v-model="generateInvoice.customer" />
+        </b-col>
+      </b-row>
+    </Molded>
+    <br />
+    <Molded>
+      <b-row>
+        <b-col xs="12" sm="12" md="12" lg="12" xl="3">
+          <RadioGroup title="Incluir Produto da Locação?" :options="[
+            { text: 'Sim', value: true },
+            { text: 'Não', value: false },
+          ]" v-model="generateInvoice.isAddProductRent" />
+        </b-col>
+        <b-col xs="12" sm="12" md="12" lg="12" xl="3">
+          <RadioGroup title="Incluir Período da Locação?" :options="[
+            { text: 'Sim', value: true },
+            { text: 'Não', value: false },
+          ]" v-model="generateInvoice.isAddPeriodRent" />
+        </b-col>
+        <b-col xs="12" sm="12" md="12" lg="12" xl="3">
+          <RadioGroup title="Incluir Condição de Pagamento?" :options="[
+            { text: 'Sim', value: true },
+            { text: 'Não', value: false },
+          ]" v-model="generateInvoice.isAddPayment" />
+        </b-col>
+      </b-row>
+      <EditorHtml v-if="!generateInvoice.isAddProductRent" title="Descrição" field="description" :required="false"
+        :disabled="disabled" :markFormDirty="false" :maxLength="2000" v-model="generateInvoice.description" />
+    </Molded>
+    <br />
+    <Molded>
+      <EditorHtml title="Observações" field="observation" :required="false" :disabled="disabled" :markFormDirty="false"
+        :maxLength="5000" v-model="generateInvoice.observation" />
+    </Molded>
+  </div>
+</template>
+<script>
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+import EditorHtml from "@nixweb/nixloc-ui/src/component/forms/EditorHtml";
+
+import CustomerWithCreate from "../../rental/shared/CustomerWithCreate.vue";
+
+export default {
+  name: "GenerateInvoice",
+  components: {
+    Molded,
+    RadioGroup,
+    EditorHtml,
+    CustomerWithCreate,
+  },
+  data() {
+    return {
+      generateInvoice: {
+        otherCustomer: false,
+        customer: {},
+        description: "",
+        observation: "",
+        isAddProductRent: true,
+        isAddPeriodRent: true,
+        isAddPayment: true,
+      },
+    };
+  },
+  mounted() {
+    this.$emit("input", this.generateInvoice);
+  },
+  watch: {
+    generateInvoice: {
+      handler(generateInvoice) {
+        this.$emit("input", generateInvoice);
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.div-title {
+  font-size: 16px;
+  margin-left: 5px;
+  margin-bottom: 20px;
+}
+</style>

package/src/components/modules/billing/generate-billing/GenerateTaxDocument.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <div class="div-title">
+      Nota Fiscal de Serviço
+    </div>
+    <Molded>
+      <b-row>
+        <b-col xs="12" sm="12" md="12" lg="3" xl="3">
+          <RadioGroup title="Faturar para outro Cliente?" :options="[
+            { text: 'Sim', value: true },
+            { text: 'Não', value: false },
+          ]" v-model="generateNfse.otherCustomer" />
+        </b-col>
+        <b-col xs="12" sm="12" md="12" lg="9" xl="9" v-if="generateNfse.otherCustomer">
+          <CustomerWithCreate v-model="generateNfse.customer" />
+        </b-col>
+      </b-row>
+    </Molded>
+    <br />
+    <Molded>
+      <b-row>
+        <b-col sm="12">
+          <Select title="Serviço" field="type" :required="true" url="/api/v1/tax-document/taxation/select-all"
+            v-model="generateNfse.taxation" :showNewRegister="false" :heightNewRegister="250">
+          </Select>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col sm="12">
+          <Loading type="line" :center="false" v-if="loading" />
+          <TextArea title="Descrição" field="description" :required="true" :maxLength="2000"
+            v-model="generateNfse.description" />
+        </b-col>
+      </b-row>
+      <InputTagEmail v-model="generateNfse.emails" :customerId="customerId" />
+      <br>
+      <b-tabs>
+        <b-tab title="Tributação">
+          <Tributacao :disabled="false" :nfse="generateNfse" :nacional="configCompany.nacional"
+            v-model="generateNfse.tributacao" />
+        </b-tab>
+        <b-tab v-show="configCompany.nacional" title="Local do Evento">
+          <LocalEvento :rentId="$route.params.rentId" v-model="generateNfse.localEvento" />
+        </b-tab>
+      </b-tabs>
+
+    </Molded>
+    <br />
+  </div>
+</template>
+
+<script>
+
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+import EditorHtml from "@nixweb/nixloc-ui/src/component/forms/EditorHtml";
+import Select from "@nixweb/nixloc-ui/src/component/forms/Select";
+import TextArea from "@nixweb/nixloc-ui/src/component/forms/TextArea";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+
+import CustomerWithCreate from "../../rental/shared/CustomerWithCreate.vue";
+import InputTagEmail from '../../tax-document/notification/InputTagEmail.vue'
+import Tributacao from '../../tax-document/nfse/Tributacao.vue'
+import LocalEvento from '../../tax-document/nfse/LocalEvento.vue'
+
+import Nfse from "@/components/modules/tax-document/nfse/Nfse.js";
+
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "GenerateInvoice",
+  props: ["customerId"],
+  components: {
+    Molded,
+    RadioGroup,
+    EditorHtml,
+    CustomerWithCreate,
+    Select,
+    TextArea, Tributacao, InputTagEmail, Loading, LocalEvento
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      urlGetParameter: "/api/v1/tax-document/taxation/get-parameter",
+      urlGetConfigCompanyById: "/api/v1/tax-document/config-company/get-by-id",
+      loading: false,
+      configCompany: {},
+      generateNfse: {
+        otherCustomer: false,
+        customer: {},
+        description: "",
+        taxation: { id: "", content: "" },
+        emails: [],
+        localEvento: {
+          codigoEvento: "",
+          nomeEvento: "",
+          dataInicioEvento: "",
+          dataFimEvento: "",
+          cepEvento: "",
+          logradouroEvento: "",
+          numeroEvento: "",
+          complementoEvento: "",
+          bairroEvento: ""
+        },
+        tributacao: new Nfse().tributacao,
+      },
+    };
+  },
+  mounted() {
+    this.$emit("input", this.generateNfse);
+    this.getConfigCompany();
+  },
+  computed: {
+    ...mapState("paymentShared", ["paymentsRent"]),
+  },
+  methods: {
+    ...mapActions("generic", ["getApi", "postApi"]),
+    getParameter() {
+      this.loading = true;
+      let params = {
+        url: this.urlGetParameter,
+        obj: {
+          taxationId: this.generateNfse.taxation.id,
+          rentId: this.$route.params.rentId,
+          paymentsRent: this.paymentsRent,
+        },
+        notNotifyToast: true
+      };
+      this.postApi(params).then((response) => {
+        this.generateNfse.description = response.content;
+        this.loading = false;
+      });
+    },
+    getConfigCompany() {
+      let params = { url: this.urlGetConfigCompanyById, obj: {} };
+      this.getApi(params).then((response) => {
+        if (response.success) {
+          this.configCompany = response.content;
+        }
+      });
+    },
+  },
+  watch: {
+    generateNfse: {
+      handler(generateNfse) {
+        this.$emit("input", generateNfse);
+      },
+      deep: true,
+    },
+    'generateNfse.taxation': {
+      handler(taxation) {
+        this.getParameter();
+        this.generateNfse.tributacao.tipoTributacao.id = taxation.tipoTributacao.toString();
+        this.generateNfse.tributacao.aliquota = taxation.aliquota;
+      },
+      deep: true,
+    },
+    'generateNfse.otherCustomer': {
+      handler(otherCustomer) {
+        if (!otherCustomer) this.customerId = this.$route.params.customerId;
+      },
+      deep: true,
+    },
+    'generateNfse.customer': {
+      handler(customer) {
+        this.customerId = customer.id;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.div-title {
+  font-size: 16px;
+  margin-left: 5px;
+  margin-bottom: 20px;
+}
+</style>

package/src/components/modules/billing/generate-billing/InvoiceOrTaxDocument.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <SelectOption buttonSize="large" buttonClassIcon="fas fa-arrow-circle-right" :width="180" :height="190"
+      :options="optionsByRule" :showButtonNext="false" v-model="selectedOption" :clickedNext="clickedNext" />
+  </div>
+</template>
+<script>
+import SelectOption from "@nixweb/nixloc-ui/src/component/shared/SelectOption.vue";
+
+import { mapGetters } from "vuex";
+
+export default {
+  name: "InvoiceOrTaxDocument",
+  components: {
+    SelectOption,
+  },
+  props: ["value"],
+  data() {
+    return {
+      options: [
+        {
+          title: "Fatura",
+          titleSize: "17",
+          icon: "fa-solid fa-file-invoice",
+          iconSize: 40,
+          value: 1,
+        },
+        {
+          title: "NFSe",
+          titleSize: "17",
+          icon: "fa-solid fa-receipt",
+          iconSize: 40,
+          value: 2,
+        },
+      ],
+      selectedOption: 0,
+    };
+  },
+  computed: {
+    ...mapGetters("user", ["hasRule"]),
+    optionsByRule() {
+      let options = [];
+      this.options.forEach((option) => {
+        var isRuleTaxDocument = this.hasRule("TaxDocument");
+        var isRuleBilling = this.hasRule("Billing");
+        if (option.title == "NFSe" && isRuleTaxDocument) options.push(option);
+        if (option.title == "Fatura" && isRuleBilling) options.push(option);
+      });
+      return options;
+    },
+  },
+  watch: {
+    selectedOption: {
+      handler(selectedOption) {
+        this.$emit("input", selectedOption);
+      },
+      deep: true,
+    },
+  },
+};
+</script>