@nixweb/nixloc-ui 0.0.271 → 0.0.273

package/src/components/modules/billing/history-billet/HistoryBillet.vue

@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <Timeline :timelineItems="timelineItems" :loading="loading" />
+    </div>
+</template>
+<script>
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Timeline from "@nixweb/nixloc-ui/src/component/shared/TimeLine.vue";
+
+import { mapGetters, mapActions } from "vuex";
+
+export default {
+    name: "HistoryMoviment",
+    components: {
+        Loading,
+        Timeline,
+        ScrollBar,
+    },
+    data() {
+        return {
+            urlGet: "/api/v1/billing/billet/get-all-history",
+            item: {},
+            content: {},
+            loading: false,
+            timelineItems: [],
+        };
+    },
+    computed: {
+        ...mapGetters("generic", ["event"]),
+    },
+    methods: {
+        ...mapActions("generic", ["getApi"]),
+        getAll() {
+            let params = {
+                url: this.urlGet,
+                obj: {
+                    any: this.item.id,
+                },
+            };
+            this.getApi(params).then((response) => {
+                this.timelineItems = [];
+                let self = this;
+                response.content.data.map(function (item, key) {
+                    let date = new Date(item.year, item.month - 1, item.day);
+                    let obj = {
+                        from: date,
+                        title: `${item.statusName}`,
+                        description: item.description,
+                        color: item.color,
+                        showDayAndMonth: true,
+                    };
+                    self.timelineItems.push(obj);
+                });
+                setTimeout(function () {
+                    self.loading = false;
+                }, 300);
+            });
+        },
+    },
+    watch: {
+        event: {
+            handler(event) {
+                if (event.name == "historyBillet") {
+                    this.loading = true;
+                    this.item = event.data;
+                    this.getAll();
+                }
+            },
+            deep: true,
+        },
+    },
+};
+</script>
+<style>
+.timeline {
+    max-width: 1000px !important;
+}
+
+.timeline-item .date-item {
+    font-size: 14px !important;
+    letter-spacing: 1px !important;
+    font-weight: normal !important;
+}
+</style>

package/src/components/modules/billing/invoice/DropdownOptionsInvoice.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="side-by-side">
+    <Dropdown title="Opções" type="primary" size="small" classIcon="fa-solid fa-chevron-down" right="50"
+      :items="optionsConditional" />
+    <Modal :title="modalOptions.title" :width="modalOptions.width" v-if="showModal('optionsRent')"
+      :onHideModal="closeModal">
+      <div v-if="modalOptions.name == 'generateInvoice'">
+        <Alert type="warning">
+          <span>
+            Atenção, certifique-se que está gerando a Fatura correta, após
+            gerada não será permitido alterações!
+          </span>
+        </Alert>
+        <Confirmation :isModal="false" title="Você tem certeza?" type="primary" :confirmed="generate" />
+      </div>
+      <div v-if="modalOptions.name == 'cancelInvoice'">
+        <Alert type="warning">
+          <span>
+            Atenção, ao cancelar uma Fatura alguns processos (se houver) serão executados, certifique-se que está
+            cancelando
+            a Fatura correta, esta ação é irreversível...
+          </span>
+        </Alert>
+        <div>
+          <i class="fa-solid fa-circle-xmark icon-close"></i> <span class="title">Fatura ficará com status de
+            Cancelada</span>
+        </div>
+        <div>
+          <i class="fa-solid fa-circle-xmark icon-close"></i><span class="title">Pagamentos vinculados serão
+            excluídos</span>
+        </div>
+        <div>
+          <i class="fa-solid fa-triangle-exclamation icon-warning"></i><span class="title">Produtos da Locação
+            serão liberados para novo Faturamento
+          </span>
+        </div>
+        <Confirmation :isModal="false" title="Você tem certeza?" type="danger" :confirmed="cancel" />
+      </div>
+      <div class="select-document" v-show="modalOptions.name == 'selectDocument'"></div>
+    </Modal>
+    <PrintPreview v-if="showModal('print')" module="Billing" :invoiceId="invoice.id" />
+  </div>
+</template>
+<script>
+import Dropdown from "@nixweb/nixloc-ui/src/component/forms/Dropdown.vue";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import Select from "@nixweb/nixloc-ui/src/component/forms/Select";
+import Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation.vue";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import PrintPreview from "../../adm/document/PrintPreview.vue";
+
+import { mapGetters, mapMutations, mapActions, mapState } from "vuex";
+
+export default {
+  name: "DropdownOptionsInvoice",
+  props: {
+    invoice: Object,
+  },
+  components: {
+    Dropdown,
+    Modal,
+    Select,
+    Confirmation,
+    Alert,
+    PrintPreview,
+  },
+  data() {
+    return {
+      documentId: "",
+      urlGenerateAllApi: "/api/v1/billing/invoice/generate",
+      urlCancelAllApi: "/api/v1/billing/invoice/cancel",
+      modalOptions: {
+        name: "",
+        title: "",
+        width: 0,
+      },
+      options: [
+        {
+          showByStatus: [3],
+          title: "Gerar",
+          classIcon: "fa-solid fa-retweet",
+          eventName: "generateInvoice",
+          style: "color:#007BFF;",
+          hr: true,
+        },
+        {
+          showByStatus: [1, 2],
+          title: "Compartilhar",
+          classIcon: "fa-sharp fa-regular fa-share-nodes",
+          eventName: "printInvoice",
+          hr: true,
+        },
+        {
+          showByStatus: [1],
+          key: "cancel",
+          title: "Cancelar",
+          classIcon: "fa-solid fa-ban",
+          style: "color:red;",
+          eventName: "cancelInvoice",
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal", "event"]),
+    ...mapState("user", ["userLogged"]),
+    ...mapGetters("user", ["hasRule"]),
+    optionsConditional() {
+      let options = [];
+      this.options.forEach((option) => {
+        if (option.showByStatus.includes(this.invoice.status))
+          options.push(option);
+      });
+
+      return options;
+    },
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "addEvent",
+      "openModal",
+      "hideModal",
+      "removeLoading",
+    ]),
+    ...mapActions("generic", ["putAllApi", "deleteAllApi"]),
+    generate() {
+      let params = {
+        url: this.urlGenerateAllApi,
+        selected: [this.invoice.id],
+      };
+      this.putAllApi(params).then((response) => {
+        if (response.success) {
+          this.hideModal("generateInvoice");
+          this.addEvent({
+            name: "updateInvoice",
+          });
+        }
+        this.removeLoading(["confirm"]);
+      });
+    },
+    cancel() {
+      let params = {
+        url: this.urlCancelAllApi,
+        selected: [this.invoice.id],
+      };
+
+      this.deleteAllApi(params).then((response) => {
+        if (response.success) {
+          this.addEvent({
+            name: "updateInvoice",
+          });
+          this.hideModal("cancelInvoice");
+        }
+        this.removeLoading(["confirm"]);
+      });
+    },
+    nextStep() {
+      this.modalOptions = {
+        name: "printRent",
+        title: "Impressão",
+        width: 1200,
+      };
+    },
+    closeModal() {
+      this.modalOptions = { name: "", title: "", width: 0 };
+    },
+    back() {
+      this.modalOptions = {
+        name: "selectDocument",
+        title: "Selecione o Documento",
+        width: 600,
+      };
+      this.removeLoading(["back"]);
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "generateInvoice") {
+          this.modalOptions = {
+            name: "generateInvoice",
+            title: "Tem certeza que deseja gerar?",
+            width: 500,
+          };
+          this.openModal("optionsRent");
+        }
+
+        if (event.name == "cancelInvoice") {
+          this.modalOptions = {
+            name: "cancelInvoice",
+            title: "Tem certeza que deseja cancelar?",
+            width: 600,
+          };
+          this.openModal("optionsRent");
+        }
+
+        if (event.name == "printInvoice") {
+          this.openModal("print");
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style  scoped>
+.select-document {
+  min-height: 100px;
+}
+
+.icon-close {
+  color: red;
+}
+
+.icon-warning {
+  color: darkorange;
+}
+</style>

package/src/components/modules/billing/invoice/Invoice.js

@@ -0,0 +1,18 @@
+export default class Invoice {
+    constructor() {
+        this.id = "";
+        this.number = 0;
+        this.customer = { id: "", content: "" };
+        this.observation = "";
+        this.status = 1;
+        this.rent = "";
+    }
+    update(data) {
+        this.id = data.id;
+        this.number = data.number;
+        this.customer = { id: data.customerSupplierId, content: data.customerSupplier.person.companyName };
+        this.observation = data.observation;
+        this.status = data.status;
+        this.rent = data.rent;
+    }
+}

package/src/components/modules/billing/invoice/InvoiceCreateUpdate.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="margin">
+    <br />
+    <Button v-if="id" _key="btnInvoiceCreate" title="Fatura" classIcon="fas fa-plus-circle" type="primary" size="small"
+      eventName="rentCreate" :clicked="newInvoice" />
+    <DropdownOptionsInvoice v-if="id" :invoice="invoice" />
+    <br />
+    <div v-if="id">
+      <br />
+      <b-row>
+        <b-col sm="5">
+          <Badge v-if="invoice.number > 0" :title="'Nº' + invoice.number.toString()" type="primary" size="medium" />
+          <Badge :title="titleStatus" :type="typeStatus" size="small" />
+        </b-col>
+      </b-row>
+      <br />
+      <InvoiceTotalization :invoiceId="id" />
+      <Alert type="info" v-if="invoice.rent">
+        <span>
+          Fatura vinculada a Locação <b>Nº {{ invoice.rent.number }}</b>
+        </span>
+      </Alert>
+    </div>
+    <b-tabs>
+      <b-tab title="Dados">
+        <CustomerWithCreate :formName="formName" :disabled="disabled" v-model="invoice.customer" />
+      </b-tab>
+      <b-tab title="Observações">
+        <EditorHtml title="Observações" field="observation" :required="false" :disabled="disabled"
+          :markFormDirty="false" v-model="invoice.observation" />
+      </b-tab>
+    </b-tabs>
+    <br />
+    <Molded v-if="invoice.id">
+      <ItemsInvoiceList :invoiceId="invoice.id" :status="invoice.status" />
+    </Molded>
+    <br />
+  </div>
+</template>
+
+<script>
+import InvoiceTotalization from "./InvoiceTotalization.vue";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded.vue";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Badge from "@nixweb/nixloc-ui/src/component/layout/Badge.vue";
+import EditorHtml from "@nixweb/nixloc-ui/src/component/forms/EditorHtml";
+import DropdownOptionsInvoice from "./DropdownOptionsInvoice.vue";
+
+import CustomerWithCreate from "../../rental/shared/CustomerWithCreate.vue";
+import ItemsInvoiceList from "../items-invoice/ItemsInvoiceList.vue";
+
+import Invoice from "@/components/modules/billing/invoice/Invoice.js";
+
+import { mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "InvoiceCreateUpdate",
+  components: {
+    EditorHtml,
+    CustomerWithCreate,
+    Molded,
+    Button,
+    Badge,
+    Alert,
+    CustomerWithCreate,
+    ItemsInvoiceList,
+    InvoiceTotalization,
+    DropdownOptionsInvoice,
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      formName: "invoiceCreateUpdate",
+      invoice: new Invoice(),
+      urlCreate: "/api/v1/billing/invoice/create",
+      urlUpdate: "/api/v1/billing/invoice/update",
+      urlGetById: "/api/v1/billing/invoice/get-by-id",
+      tabIndex: 0,
+    };
+  },
+  created() {
+    if (this.id) this.getById();
+  },
+  computed: {
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapGetters("generic", ["event", "isLoading"]),
+    titleStatus() {
+      if (this.invoice.status == 1) return "Gerada";
+      if (this.invoice.status == 2) return "Cancelada";
+      if (this.invoice.status == 3) return "Pendente";
+    },
+    typeStatus() {
+      if (this.invoice.status == 1) return "blue";
+      if (this.invoice.status == 2) return "danger";
+      if (this.invoice.status == 3) return "warning";
+    },
+    disabled() {
+      if (this.invoice.status == 2) return true;
+
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "putApi", "getApi"]),
+    ...mapMutations("generic", ["removeLoading", "hideVodal"]),
+    ...mapMutations("validation", ["resetValidation", "removeFormDirty"]),
+    create() {
+      let params = { url: this.urlCreate, obj: this.invoice };
+      this.postApi(params).then((response) => {
+        if (response.success) {
+          this.$router.replace({
+            name: "invoiceUpdate",
+            params: { id: response.content.id },
+          });
+        }
+        this.removeLoading(["saveSaveCancel"]);
+      });
+    },
+    update() {
+      let params = { url: this.urlUpdate, obj: this.invoice };
+      this.putApi(params).then(() => {
+        this.removeLoading(["saveSaveCancel"]);
+      });
+    },
+    getById() {
+      let params = { url: this.urlGetById, obj: { id: this.id } };
+      this.getApi(params).then((response) => {
+        this.invoice.update(response.content);
+        let self = this;
+        setTimeout(function () {
+          self.removeLoading(["panel"]);
+          self.removeFormDirty();
+        }, 100);
+      });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "saveSaveCancel" && !this.registerInSelect) {
+          if (!this.id) this.create();
+          if (this.id) this.update();
+        }
+
+        if (event.name == "customerOnRent") {
+          if (!this.id) this.create();
+          if (this.id) this.update();
+        }
+
+        if (event.name == "updateInvoice") {
+          this.getById();
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.margin {
+  margin-right: 10px;
+}
+</style>

package/src/components/modules/billing/invoice/InvoiceTotalization.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <DisplayTotalization title="Sub-Total" :value="totalization.totalValue" />
+    <DisplayTotalization
+      v-if="totalization.totalDiscount > 0"
+      title="Desconto"
+      :value="totalization.totalDiscount"
+      _style="color: red"
+    />
+    <DisplayTotalization
+      title="TOTAL GERAL"
+      :value="totalization.totalGeneral"
+      _style="color: #1b3a55;font-size:19px"
+    />
+  </div>
+</template>
+<script>
+import DisplayTotalization from "@nixweb/nixloc-ui/src/component/rental/DisplayTotalization";
+
+import { mapActions, mapState } from "vuex";
+
+export default {
+  name: "InvoiceTotalization",
+  components: { DisplayTotalization },
+  props: {
+    invoiceId: String,
+  },
+  data() {
+    return {
+      urlGetTotalization: "/api/v1/billing/invoice/totalization",
+      totalization: {},
+    };
+  },
+  created() {
+    this.getTotalization();
+  },
+  computed: {
+    ...mapState("generic", ["event"]),
+  },
+  methods: {
+    ...mapActions("generic", ["getApi"]),
+    getTotalization() {
+      let params = {
+        url: this.urlGetTotalization,
+        obj: { invoiceId: this.invoiceId },
+      };
+      this.getApi(params).then((response) => {
+        this.totalization = response.content;
+      });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "updateTotalizationInvoice") this.getTotalization();
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped></style>

package/src/components/modules/billing/items-invoice/ItemsInvoice.js

@@ -0,0 +1,20 @@
+export default class ItemsInvoice {
+    constructor() {
+        this.id = "";
+        this.description = "";
+        this.quantity = 1;
+        this.unitValue = 0;
+        this.discount = { discountByPercentage: false, discount: 0 };
+        this.discountByPercentage = false;
+        this.unitDiscount = 0;
+        this.invoiceId = "";
+    }
+    update(data) {
+        this.id = data.id;
+        this.description = data.description;
+        this.quantity = data.quantity;
+        this.unitValue = data.unitValue;
+        this.discount = { discountByPercentage: false, discount: data.unitDiscount };
+        this.invoiceId = data.invoiceId;
+    }
+}