@nixweb/nixloc-ui 0.0.271 → 0.0.273

package/src/components/modules/rental/payment-rent/PaymentRentCreateUpdate.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <b-row>
+      <b-col sm="9">
+        <Select title="Tipo de Pagamento" field="typePayment" :required="true" :markFormDirty="false"
+          :propsParams="{ any: 'Rental' }" v-model="paymentRent.typePayment" url="/api/v1/finance/type-payment/select-all"
+          :showNewRegister="hasRule('Rental')" nameNewRegister="typePaymentCreateUpdate"
+          titleNewRegister="Tipo de Pagamento" :widthNewRegister="500" :heightNewRegister="250">
+          <TypePaymentCreateUpdate :registerInSelect="true" v-model="paymentRent.typePayment" />
+        </Select>
+      </b-col>
+      <b-col sm="3">
+        <InputDecimal title="Valor" field="value" :formName="formName" :required="true" :markFormDirty="false"
+          :maxLength="5" type="float" v-model="paymentRent.value" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col sm="3">
+        <DateTime title="Vencimento" field="dueDate" format="DD/MM/YYYY" type="date" placeholder :formName="formName"
+          :required="true" v-model="paymentRent.dueDate" />
+      </b-col>
+      <b-col sm="9">
+        <InputText title="Descrição" field="name" :formName="formName" :required="false" :maxLength="50"
+          v-model="paymentRent.description" :markFormDirty="false" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col sm="12">
+        <div class="text-right">
+          <Button _key="btnSavePaymentRent" type="success" title="Salvar" :disabled="!isFormValid(formName)"
+            classIcon="fas fa-save" size="medium" :clicked="savePaymentRent" />
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
+import Select from "@nixweb/nixloc-ui/src/component/forms/Select";
+import PaymentRent from "@/components/modules/rental/payment-rent/PaymentRent.js";
+import TypePaymentCreateUpdate from "../../finance/type-payment/TypePaymentCreateUpdate.vue";
+
+import { mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "PaymentRentCreateUpdate",
+  components: {
+    InputText,
+    InputDecimal,
+    DateTime,
+    Select,
+    Button,
+    CheckboxGroup,
+    TypePaymentCreateUpdate,
+  },
+  props: {
+    rentId: String,
+  },
+  data() {
+    return {
+      formName: "paymentRentCreateUpdate",
+      paymentRent: new PaymentRent(),
+      urlCreate: "/api/v1/rental/payment-rent/create",
+      urlUpdate: "/api/v1/rental/payment-rent/update",
+    };
+  },
+  computed: {
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapGetters("generic", ["event"]),
+    ...mapGetters("user", ["hasRule"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "putApi"]),
+    ...mapMutations("generic", [
+      "removeLoading",
+      "removeEvent",
+      "hideModal",
+      "hideVodal",
+    ]),
+    ...mapMutations("validation", ["resetValidation"]),
+    savePaymentRent() {
+      this.paymentRent.rentId = this.rentId;
+
+      if (this.paymentRent.id) {
+        let params = { url: this.urlUpdate, obj: this.paymentRent };
+        this.putApi(params).then((response) => {
+          if (response.success) this.hideModal();
+          this.removeLoading(["btnSavePaymentRent"]);
+        });
+      } else {
+        let params = { url: this.urlCreate, obj: this.paymentRent };
+        this.postApi(params).then((response) => {
+          if (response.success) this.hideModal();
+          this.removeLoading(["btnSavePaymentRent"]);
+        });
+      }
+    },
+    update(data) {
+      this.paymentRent = new PaymentRent();
+      this.paymentRent.update(data);
+      this.removeLoading([data.id]);
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "paymentRentCreate") {
+          this.resetValidation(this.formName);
+          this.paymentRent = new PaymentRent();
+        }
+        if (event.name == "paymentRentUpdate") this.update(event.data);
+      },
+      deep: true,
+    },
+  },
+};
+</script>

package/src/components/modules/rental/payment-rent/PaymentRentList.vue

@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <ViewTemplateConfiguration :templateList="templateList" :showSearch="false" :showHorizontalFilter="false"
+      :propsParam="propsParam">
+      <div slot="content-buttons">
+        <div class="div-btn-paymentRent-create">
+          <Button v-if="showBtnCreate" _key="btnPaymentRentCreate" title="Pagamento" classIcon="fas fa-plus-circle"
+            type="primary" size="small" :clicked="create" />
+        </div>
+      </div>
+      <div slot="content-buttons-table-header">
+        <Button v-if="showBtnLaunchFinance" _key="btnGenerateFinance" :title="'Lançar no Financeiro ' + selected.length"
+          type="primary" size="small" :clicked="confirmGenerate" />
+      </div>
+    </ViewTemplateConfiguration>
+    <Modal title="Tem certeza que deseja lançar?" :width="500" v-show="showModal('generateFinance')">
+      <Alert type="warning">
+        <span>
+          Atenção, certifique-se que está lançando o valor correto, após lançado
+          somente o Financeiro poderá alterar
+        </span>
+      </Alert>
+      <Confirmation :isModal="false" title="Você tem certeza?" type="primary"
+        :confirmed="createPaymentsAccountsReceivable" />
+    </Modal>
+  </div>
+</template>
+
+<script>
+import ViewTemplateConfiguration from "@nixweb/nixloc-ui/src/component/template/ViewTemplateConfiguration";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation.vue";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+
+import { mapMutations, mapState, mapGetters, mapActions } from "vuex";
+
+export default {
+  name: "PaymentRentList",
+  components: {
+    ViewTemplateConfiguration,
+    Button, Confirmation,
+    Alert, Modal
+  },
+  props: {
+    rentId: String,
+    showBtnCreate: {
+      type: Boolean,
+      default: true,
+    },
+    showBtnLaunchFinance: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      templateList: {
+        urlGetApi: "/api/v1/rental/payment-rent/get-all",
+        urlGenerateAllApi: "/api/v1/rental/payment-rent/create-payments-accounts-receivable",
+        urlDeleteAllApi: "/api/v1/rental/payment-rent/delete",
+        headerTable: [
+          {
+            field: "typePaymentName",
+            title: "Tipo de Pagamento",
+            type: "link",
+            eventName: "paymentRentUpdate",
+          },
+          {
+            field: "dueDate",
+            title: "Vencimento",
+            type: "text",
+            classCssTitle: "text-center",
+            classCssBody: "text-center",
+          },
+          {
+            field: "value",
+            title: "Valor",
+            type: "currency",
+            classCssTitle: "text-center",
+            classCssBody: "text-center",
+          },
+          {
+            field: "description",
+            title: "Descrição",
+            type: "text",
+          },
+          {
+            title: "Financeiro",
+            field: "status",
+            type: "html",
+            classCssTitle: "text-center",
+            classCssBody: "text-center",
+          },
+          {
+            title: "",
+            field: "iconTokenBillet",
+            type: "html",
+            classCssTitle: "text-center",
+            classCssBody: "text-center",
+          },
+          {
+            type: "button",
+            typeButton: "default",
+            classCssTitle: "text-center",
+            classCssBody: "text-center",
+            fieldComparison: "hasBillet",
+            classCssBody: [
+              {
+                classCss: "hide-link",
+                fieldComparison: "Não",
+              },
+            ],
+            button: {
+              classIcon: "fa-regular fa-copy",
+              type: "default",
+              size: "small",
+              eventName: "copyLink",
+            },
+          },
+        ],
+      },
+      propsParam: {
+        any: this.rentId,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal", "event"]),
+    ...mapState("generic", ["selected"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["openModal", "hideModal", "addEvent", "removeLoading"]),
+    ...mapActions("generic", ["putAllApi"]),
+    create() {
+      this.addEvent({ name: "paymentRentCreate" });
+      this.removeLoading(["btnPaymentRentCreate"]);
+    },
+    confirmGenerate() {
+      this.removeLoading(["btnGenerateFinance"]);
+      this.openModal("generateFinance");
+    },
+    createPaymentsAccountsReceivable() {
+      let params = {
+        url: this.templateList.urlGenerateAllApi,
+        selected: this.selected,
+      };
+      this.putAllApi(params).then((response) => {
+        if (response.success) {
+          this.hideModal("generateInvoice");
+        }
+        this.removeLoading(["confirm"]);
+      });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "copyLink") {
+          const url = `https://app.boletocloud.com/boleto/2via/${event.data.tokenBillet}`;
+          navigator.clipboard.writeText(url);
+          this.$toasted.show("Link copiado...", { type: "info" });
+        }
+      },
+      deep: true,
+    },
+  },
+
+};
+</script>
+<style>
+.badge-default {
+  background-color: #eeeeee;
+  font-size: 13px !important;
+}
+
+.box-finance {
+  width: 10px;
+  height: 10px;
+  border-radius: 20px;
+  margin-right: 8px;
+}
+
+.finance-delay {
+  background-color: red;
+}
+
+.finance-paid {
+  background-color: #009183;
+}
+
+.finance-today {
+  background-color: #ff8a1b;
+}
+
+.finance-scheduled {
+  background-color: #3d4eae;
+}
+
+.payable {
+  color: red;
+}
+
+.receivable {
+  color: darkblue;
+}
+
+.div-btn-paymentRent-create {
+  margin-bottom: 15px;
+}
+
+.hide-link {
+  display: none;
+}
+</style>

package/src/components/modules/rental/period-rental/GeneratePeriodRent.js

@@ -0,0 +1,8 @@
+export default class GeneratePeriodRent {
+    constructor() {
+        this.id = "";
+        this.typePerid = 0;
+        this.multiplier = 1;
+        this.startDateHour = "";
+    }
+}

package/src/components/modules/rental/period-rental/GeneratePeriodRent.vue

@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <b-row>
+      <b-col sm="12">
+        <SelectOption title="Informe o Período" :titleSize="14" :showButtonNext="false" size="small" :width="125"
+          :height="45" :options="optionsWithByRules" v-model="generatePeriodRental.typePerid" />
+      </b-col>
+    </b-row>
+    <Alert type="warning" v-if="optionsWithByRules.length == 0">
+      <span>
+        É necessário configurar o Display (Calculo de Período) em Adm >
+        Parâmetro > Locação!
+      </span>
+    </Alert>
+    <div class="div-increment-decrement">
+      <b-row v-if="generatePeriodRental.typePerid != 0">
+        <b-col sm="12" md="4" lg="4" :xl="isShowStartDateHour ? 3 : 4"></b-col>
+        <b-col sm="12" md="4" lg="4" :xl="isShowStartDateHour ? 2 : 3">
+          <div class="increment-decrement">
+            <IncrementDecrement :min="1" v-model="generatePeriodRental.multiplier" />
+          </div>
+        </b-col>
+        <b-col sm="12" md="4" lg="4" xl="3" v-if="isShowStartDateHour">
+          <DateTime title="Iniciar em (opcional)" field="purchaseDate" format="DD/MM/YYYY HH:mm" type="dateTime"
+            placeholder :required="false" :markFormDirty="false" v-model="generatePeriodRental.startDateHour" />
+        </b-col>
+        <b-col sm="12" md="4" lg="4" xl="3">
+          <div class="div-btn-generate">
+            <Button _key="btnGeneratePeriodRent" title="Gerar" classIcon="fa-solid fa-arrows-rotate"
+              :disabled="btnGenerateDisabled" type="info" size="medium" :clicked="generate" />
+          </div>
+        </b-col>
+      </b-row>
+    </div>
+    <div class="div-period-rent" v-show="showPeriodRent">
+      <PeriodRentItem />
+    </div>
+  </div>
+</template>
+
+<script>
+import SelectOption from "@nixweb/nixloc-ui/src/component/shared/SelectOption.vue";
+import IncrementDecrement from "@nixweb/nixloc-ui/src/component/forms/IncrementDecrement.vue";
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+
+import GeneratePeriodRental from "./GeneratePeriodRent.js";
+import PeriodRentItem from "./PeriodRentItem.vue";
+
+import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "GeneratePeriodRent",
+  props: ["formName", "value", "startDateHour", "isShowStartDateHour"],
+  components: {
+    SelectOption,
+    IncrementDecrement,
+    DateTime,
+    Button,
+    Alert,
+    PeriodRentItem,
+  },
+  data() {
+    return {
+      generatePeriodRental: new GeneratePeriodRental(),
+      showPeriodRent: false,
+      btnGenerateDisabled: true,
+      urlGenerate: "/api/v1/rental/period-rent/generate",
+      options: [
+        {
+          title: "Minuto",
+          titleSize: "14",
+          icon: "fa-solid fa-clock-eight",
+          value: 1,
+        },
+        {
+          title: "Hora",
+          titleSize: "14",
+          icon: "fa-solid fa-hourglass",
+          value: 2,
+        },
+        {
+          title: "Dia",
+          titleSize: "14",
+          icon: "fa-solid fa-calendar-day",
+          value: 3,
+        },
+        {
+          title: "Semana",
+          titleSize: "14",
+          icon: "fa-solid fa-calendar-week",
+          value: 4,
+        },
+        {
+          title: "Quinzena",
+          titleSize: "14",
+          icon: "fa-solid fa-calendar-lines",
+          value: 5,
+        },
+        {
+          title: "Mês",
+          titleSize: "14",
+          icon: "fa-solid fa-calendar-range",
+          value: 6,
+        },
+        {
+          title: "Ano",
+          titleSize: "14",
+          icon: "fa-solid fa-calendar-days",
+          value: 7,
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapState("user", ["userLogged"]),
+    ...mapGetters("generic", ["event"]),
+    optionsWithByRules() {
+      let displayPeriod = this.userLogged.parameterRental.displayPeriod;
+      let options = [];
+      this.options.forEach((item) => {
+        if (!displayPeriod.includes("1") && item.value == 1) return;
+        if (!displayPeriod.includes("2") && item.value == 2) return;
+        if (!displayPeriod.includes("3") && item.value == 3) return;
+        if (!displayPeriod.includes("4") && item.value == 4) return;
+        if (!displayPeriod.includes("5") && item.value == 5) return;
+        if (!displayPeriod.includes("6") && item.value == 6) return;
+        if (!displayPeriod.includes("7") && item.value == 7) return;
+        options.push(item);
+      });
+
+      return options;
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["postApi"]),
+    ...mapMutations("generic", ["addEvent", "removeLoading"]),
+    generate() {
+      if (this.startDateHour)
+        this.generatePeriodRental.startDateHour = this.startDateHour;
+
+      let params = {
+        url: this.urlGenerate,
+        obj: this.generatePeriodRental,
+        notNotifyToast: true,
+        notRemoveFormDirty: true,
+      };
+      this.postApi(params).then((response) => {
+        this.addEvent({ name: "generatePeriodRent", data: response.content });
+        this.$emit("input", response.content);
+        this.showPeriodRent = true;
+        this.btnGenerateDisabled = true;
+        this.removeLoading(["btnGeneratePeriodRent"]);
+      });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "periodRentCreateUpdate") {
+          this.generatePeriodRental.multiplier = 1;
+          this.showPeriodRent = false;
+          this.btnGenerateDisabled = false;
+        }
+
+        if (event.name == "cleanGeneratePeriodRent") {
+          this.generatePeriodRental = new GeneratePeriodRental();
+          this.showPeriodRent = false;
+        }
+      },
+      deep: true,
+    },
+    generatePeriodRental: {
+      handler() {
+        this.btnGenerateDisabled = false;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.div-increment-decrement {
+  margin: auto;
+}
+
+.increment-decrement {
+  margin-top: 36px;
+  max-width: 120px;
+}
+
+.div-btn-generate {
+  margin-top: 33px;
+}
+
+.div-period-rent {
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
+</style>

package/src/components/modules/rental/period-rental/PeriodRent.js

@@ -0,0 +1,20 @@
+export default class PeriodRent {
+    constructor() {
+        this.id = "";
+        this.deliveryDateHour = "";
+        this.startDateHour = "";
+        this.endDateHour = "";
+        this.devolutionDateHour = "";
+        this.description = "";
+        this.rentId = "";
+    }
+    update(data) {
+        this.id = data.id;
+        this.deliveryDateHour = data.deliveryDateHour;
+        this.startDateHour = data.startDateHour;
+        this.endDateHour = data.endDateHour;
+        this.devolutionDateHour = data.devolutionDateHour;
+        this.description = data.description;
+        this.rentId = data.rentId;
+    }
+}