@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/shared/parameters/locacaoParameters.js

@@ -0,0 +1,56 @@
+export default [
+  { key: "{{d.comum.dataAtual}}", description: "Data atual (curta)" },
+  { key: "{{d.comum.dataAtualExtenso}}", description: "Data atual por extenso" },
+  { key: "{{d.comum.horaAtual}}", description: "Hora atual" },
+
+  { key: "{{d.locacao.numero}}", description: "Numero da locacao" },
+  { key: "{{d.locacao.dataEfetivacao}}", description: "Data de efetivacao" },
+  { key: "{{d.locacao.dataCadastro}}", description: "Data de cadastro" },
+  { key: "{{d.locacao.horaCadastro}}", description: "Hora do cadastro" },
+  { key: "{{d.locacao.identificacao}}", description: "Identificacao da locacao" },
+  { key: "{{d.locacao.tipoLocacao}}", description: "Tipo da locacao" },
+  { key: "{{d.locacao.obsLocacao}}", description: "Observacoes da locacao" },
+  { key: "{{d.locacao.obsOs}}", description: "Observacoes da OS" },
+  { key: "{{d.locacao.motivoReprovacao}}", description: "Motivo da reprovação" },
+  { key: "{{d.locacao.total}}", description: "Total da locacao" },
+  { key: "{{d.locacao.totalExtenso}}", description: "Total por extenso" },
+  { key: "{{d.locacao.totalCusto}}", description: "Total de custo" },
+  { key: "{{d.locacao.totalCustoExtenso}}", description: "Total custo por extenso" },
+  { key: "{{d.locacao.totalReposicao}}", description: "Total de reposicao" },
+  { key: "{{d.locacao.totalReposicaoExtenso}}", description: "Total de reposicao por extenso" },
+  { key: "{{d.locacao.totalDesconto}}", description: "Total de desconto" },
+  { key: "{{d.locacao.totalDescontoExtenso}}", description: "Total de desconto por extenso" },
+
+  { key: "{{d.locacao.cliente.razaoSocialNome}}", description: "Razao social / Nome" },
+  { key: "{{d.locacao.cliente.fantasiaApelido}}", description: "Nome fantasia / Apelido" },
+  { key: "{{d.locacao.cliente.cnpjCpfTitulo}}", description: "Titulo CNPJ/CPF" },
+  { key: "{{d.locacao.cliente.cnpjCpf}}", description: "CNPJ/CPF" },
+  { key: "{{d.locacao.cliente.irTitulo}}", description: "Titulo IE" },
+  { key: "{{d.locacao.cliente.ir}}", description: "Inscricao Estadual" },
+  { key: "{{d.locacao.cliente.im}}", description: "Inscricao Municipal" },
+  { key: "{{d.locacao.cliente.cep}}", description: "CEP" },
+  { key: "{{d.locacao.cliente.rua}}", description: "Rua" },
+  { key: "{{d.locacao.cliente.numero}}", description: "Numero" },
+  { key: "{{d.locacao.cliente.complemento}}", description: "Complemento" },
+  { key: "{{d.locacao.cliente.bairro}}", description: "Bairro" },
+  { key: "{{d.locacao.cliente.cidade}}", description: "Cidade" },
+  { key: "{{d.locacao.cliente.estado}}", description: "Estado" },
+  { key: "{{d.locacao.cliente.telefone}}", description: "Telefone" },
+  { key: "{{d.locacao.cliente.site}}", description: "Site" },
+  { key: "{{d.locacao.cliente.email}}", description: "E-mail" },
+
+  { key: "{{d.locacao.colaborador.nome}}", description: "Nome do colaborador" },
+  { key: "{{d.locacao.colaborador.apelido}}", description: "Apelido" },
+  { key: "{{d.locacao.colaborador.celular}}", description: "Celular" },
+  { key: "{{d.locacao.colaborador.email}}", description: "E-mail do colaborador" },
+
+  { key: "{{d.locacao.contato.nome}}", description: "Nome do contato" },
+  { key: "{{d.locacao.contato.celular}}", description: "Celular do contato" },
+  { key: "{{d.locacao.contato.email}}", description: "E-mail do contato" },
+
+  { key: "{{d.periodo.inicioFim}}", description: "Periodo de inicio e fim" },
+  { key: "{{d.periodo.entregaRetirada}}", description: "Periodo de entrega e retirada" },
+
+  { key: "{{d.pagamentoLocacao}}", description: "Forma de pagamento (locacao)" },
+  { key: "{{d.pagamentoFaturar}}", description: "Forma de pagamento (faturar)" }
+];

package/src/components/modules/shared/parameters/taxationParameters.js

@@ -0,0 +1,49 @@
+export default [
+  { key: "{{d.comum.dataAtual}}", description: "Data atual (curta)" },
+  { key: "{{d.comum.dataAtualExtenso}}", description: "Data atual por extenso" },
+  { key: "{{d.comum.horaAtual}}", description: "Hora atual" },
+  { key: "{{d.locacao.numero}}", description: "Número da locação" },
+  { key: "{{d.locacao.dataEfetivacao}}", description: "Data de efetivação" },
+  { key: "{{d.locacao.dataCadastro}}", description: "Data de cadastro" },
+  { key: "{{d.locacao.horaCadastro}}", description: "Hora do cadastro" },
+  { key: "{{d.locacao.identificacao}}", description: "Identificação da locação" },
+  { key: "{{d.locacao.tipoLocacao}}", description: "Tipo da locação" },
+  { key: "{{d.locacao.obsLocacao}}", description: "Observações da locação" },
+  { key: "{{d.locacao.obsOs}}", description: "Observações da OS" },
+  { key: "{{d.locacao.total}}", description: "Total da locação" },
+  { key: "{{d.locacao.totalExtenso}}", description: "Total por extenso" },
+  { key: "{{d.locacao.totalCusto}}", description: "Total de custo" },
+  { key: "{{d.locacao.totalCustoExtenso}}", description: "Total de custo por extenso" },
+  { key: "{{d.locacao.totalReposicao}}", description: "Total de reposição" },
+  { key: "{{d.locacao.totalReposicaoExtenso}}", description: "Total de reposição por extenso" },
+  { key: "{{d.locacao.totalDesconto}}", description: "Total de desconto" },
+  { key: "{{d.locacao.totalDescontoExtenso}}", description: "Total de desconto por extenso" },
+  { key: "{{d.locacao.cliente.razaoSocialNome}}", description: "Razão social / Nome" },
+  { key: "{{d.locacao.cliente.fantasiaApelido}}", description: "Nome fantasia / Apelido" },
+  { key: "{{d.locacao.cliente.cnpjCpfTitulo}}", description: "Título CNPJ/CPF" },
+  { key: "{{d.locacao.cliente.cnpjCpf}}", description: "CNPJ/CPF" },
+  { key: "{{d.locacao.cliente.irTitulo}}", description: "Título IE" },
+  { key: "{{d.locacao.cliente.ir}}", description: "Inscrição estadual" },
+  { key: "{{d.locacao.cliente.im}}", description: "Inscrição municipal" },
+  { key: "{{d.locacao.cliente.cep}}", description: "CEP" },
+  { key: "{{d.locacao.cliente.rua}}", description: "Rua" },
+  { key: "{{d.locacao.cliente.numero}}", description: "Número" },
+  { key: "{{d.locacao.cliente.complemento}}", description: "Complemento" },
+  { key: "{{d.locacao.cliente.bairro}}", description: "Bairro" },
+  { key: "{{d.locacao.cliente.cidade}}", description: "Cidade" },
+  { key: "{{d.locacao.cliente.estado}}", description: "Estado" },
+  { key: "{{d.locacao.cliente.telefone}}", description: "Telefone" },
+  { key: "{{d.locacao.cliente.site}}", description: "Site" },
+  { key: "{{d.locacao.cliente.email}}", description: "E-mail" },
+  { key: "{{d.locacao.colaborador.nome}}", description: "Nome do colaborador" },
+  { key: "{{d.locacao.colaborador.apelido}}", description: "Apelido do colaborador" },
+  { key: "{{d.locacao.colaborador.celular}}", description: "Celular do colaborador" },
+  { key: "{{d.locacao.colaborador.email}}", description: "E-mail do colaborador" },
+  { key: "{{d.locacao.contato.nome}}", description: "Nome do contato" },
+  { key: "{{d.locacao.contato.celular}}", description: "Celular do contato" },
+  { key: "{{d.locacao.contato.email}}", description: "E-mail do contato" },
+  { key: "{{d.periodo.inicioFim}}", description: "Período de início e fim" },
+  { key: "{{d.periodo.entregaRetirada}}", description: "Período de entrega e retirada" },
+  { key: "{{d.pagamentoLocacao}}", description: "Forma de pagamento da locação" },
+  { key: "{{d.pagamentoFaturar}}", description: "Forma de pagamento do faturamento" }
+];

package/src/components/modules/shared/payment-items/Payment.js

@@ -0,0 +1,18 @@
+export default class PaymentRent {
+    constructor() {
+        this.id = "";
+        this.typePayment = { id: "", content: "" };
+        this.bankAccount = { id: "", content: "" };
+        this.dueDate = "";
+        this.value = 0;
+        this.description = "";
+    }
+    update(data) {
+        this.id = data.id;
+        this.typePayment = { id: data.typePaymentId, content: data.typePaymentName };
+        this.bankAccount = { id: data.bankAccountId, content: data.bankAccountName };
+        this.dueDate = data.dueDate;
+        this.value = data.value;
+        this.description = data.description;
+    }
+}

package/src/components/modules/shared/payment-items/PaymentCreate.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <b-row>
+      <b-col xs="12" sm="12" md="12" lg="12" :xl="payment.typePayment.isBankSlip ? 4 : 8">
+        <div class="div-select">
+          <Select title="Tipo de Pagamento" field="typePayment" :required="true" :markFormDirty="false"
+            :propsParams="{ any: module }" v-model="payment.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="payment.typePayment" />
+          </Select>
+        </div>
+      </b-col>
+      <b-col xs="12" sm="12" md="12" lg="12" xl="4" v-if="payment.typePayment.isBankSlip">
+        <Select title="Conta Boleto" field="bankAccount" :required="true" :showNewRegister="false"
+          url="api/v1/billing/billet-config/select-all" v-model="payment.bankAccount" />
+      </b-col>
+      <b-col xs="12" sm="12" md="12" lg="12" xl="2">
+        <InputDecimal title="Valor" field="value" :formName="formName" :required="true" :markFormDirty="false"
+          :maxLength="5" type="float" v-model="payment.value" />
+      </b-col>
+      <b-col xs="12" sm="12" md="12" lg="6" xl="2">
+        <DateTime title="Vencimento" field="dueDate" format="DD/MM/YYYY" type="date" placeholder :formName="formName"
+          :required="true" v-model="payment.dueDate" />
+      </b-col>
+    </b-row>
+    <RepeatPayment :payment="payment" v-model="reapeter" />
+    <div class="div-btn-add">
+      <Button _key="btnAddPaymentRent" type="primary" title="Adicionar" :disabled="!isFormValid(formName)"
+        classIcon="fas fa-plus" size="small" :clicked="add" />
+    </div>
+  </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 Payment from "@/components/modules/shared/payment-items/Payment.js";
+
+import RepeatPayment from "@/components/modules/shared/payment-items/RepeatPayment";
+import TypePaymentCreateUpdate from "../../finance/type-payment/TypePaymentCreateUpdate.vue";
+
+import { mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "PaymentCreate",
+  components: {
+    InputText,
+    InputDecimal,
+    DateTime,
+    Select,
+    Button,
+    CheckboxGroup,
+    TypePaymentCreateUpdate,
+    RepeatPayment,
+  },
+  props: {
+    module: String,
+    totalValue: Number,
+  },
+  data() {
+    return {
+      formName: "paymentCreateUpdate",
+      payment: new Payment(),
+      reapeter: [],
+    };
+  },
+  mounted() {
+    this.payment.value = this.totalValue;
+  },
+  computed: {
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapGetters("generic", ["event"]),
+    ...mapGetters("user", ["hasRule"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "putApi"]),
+    ...mapMutations("generic", ["removeLoading"]),
+    ...mapMutations("validation", ["resetValidation"]),
+    ...mapMutations("paymentShared", ["addPayment", "teste"]),
+    add() {
+      if (this.reapeter.length == 0) {
+        this.addPayment(this.payment);
+        this.payment = new Payment();
+      } else {
+        var typePayment = this.payment.typePayment;
+        var bankAccount = this.payment.bankAccount;
+
+        this.reapeter.forEach(item => {
+          this.payment.typePayment = typePayment;
+          this.payment.bankAccount = bankAccount;
+          this.payment.dueDate = item.dueDate;
+          this.payment.value = item.value;
+          this.addPayment(this.payment);
+          this.payment = new Payment();
+        });
+      }
+
+      this.resetValidation(this.formName);
+      this.removeLoading(["btnAddPaymentRent"]);
+    },
+    update(data) {
+      this.payment = new Payment();
+      this.payment.update(data);
+      this.removeLoading([data.id]);
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "paymentRentUpdate") this.update(event.data);
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.div-btn-add {
+  margin-top: 20px;
+}
+</style>

package/src/components/modules/shared/payment-items/PaymentUpdate.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <b-row>
+      <b-col sm="3">
+        <InputDecimal title="Valor" field="value" :formName="formName" :required="true" :markFormDirty="false"
+          :maxLength="5" type="float" v-model="paymentLocal.value" />
+      </b-col>
+      <b-col sm="3">
+        <DateTime title="Vencimento" field="dueDate" format="DD/MM/YYYY" type="date" placeholder :formName="formName"
+          :required="true" v-model="paymentLocal.dueDate" />
+      </b-col>
+      <b-col md="2">
+        <div class="div-btn text-center">
+          <Button _key="btnUpdatePayment" type="success" :disabled="!isFormValid(formName)" classIcon="fas fa-save"
+            size="small" :clicked="update" />
+          <Button _key="btnCancelPayment" type="danger" classIcon="fas fa-ban" size="small" :clicked="cancel" />
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+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 { mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "PaymentRentUpdate",
+  components: {
+    InputDecimal,
+    DateTime,
+    Button,
+  },
+  props: {
+    payment: Object,
+  },
+  data() {
+    return {
+      formName: "paymentRentUpdate",
+      paymentLocal: {},
+    };
+  },
+  mounted() {
+    this.paymentLocal = JSON.parse(JSON.stringify(this.payment)); // remove observable
+  },
+  computed: {
+    ...mapGetters("validation", ["isFormValid"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    ...mapMutations("paymentShared", ["updatePayment"]),
+    update() {
+      this.updatePayment(this.paymentLocal);
+      this.addEvent({ name: "paymentRentCancelUpdate" });
+    },
+    cancel() {
+      this.addEvent({ name: "paymentRentCancelUpdate" });
+    },
+  },
+};
+</script>
+<style scoped>
+.div-btn {
+  padding-top: 38px;
+}
+</style>

package/src/components/modules/shared/payment-items/PaymentsList.vue

@@ -0,0 +1,170 @@
+<template>
+  <div>
+      <div>
+        <br />
+        <table class="table table-responsive-xs">
+          <thead>
+            <tr>
+              <th class="title-header text-center">Seq</th>
+              <th class="title-header">Tipo</th>
+              <th class="title-header text-center">Valor</th>
+              <th class="title-header text-center">Vencimento</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody v-for="payment in paymentsRent" :key="payment.seq">
+            <tr>
+              <td class="text-center">
+                <span class="seq"> {{ payment.seq }}</span>
+              </td>
+              <td class="tabela-principal tabela-descricao" @click="update(payment)">
+                <span> {{ payment.typePayment.content }}</span>
+                <span v-if="payment.bankAccount">
+                  <span v-if="payment.bankAccount.content">
+                    ({{ payment.bankAccount.content }})
+                  </span>
+                </span>
+              </td>
+              <td class="editavel tabela-principal text-center" @click="update(payment)">
+                <span> {{ payment.value | currency }} </span>
+              </td>
+              <td class="editavel tabela-principal tabela-descricao text-center" @click="update(payment)">
+                <span>{{ payment.dueDate }}</span>
+              </td>
+              <td class="text-center" @click="remove(payment)">
+                <span class="icone">
+                  <i class="fas fa-times-circle"></i>
+                </span>
+              </td>
+            </tr>
+            <tr v-show="seq == payment.seq">
+              <td colspan="7">
+                <PaymentUpdate :payment="payment" />
+              </td>
+            </tr>
+          </tbody>
+          <tbody v-show="paymentsRent.length == 0">
+            <tr>
+              <td colspan="12">
+                <span>Nenhum pagamento adicionado!</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+  </div>
+</template>
+
+<script>
+
+import PaymentUpdate from "./PaymentUpdate.vue";
+
+import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
+
+export default {
+  components: {
+    PaymentUpdate,
+  },
+  name: "PaymentsList",
+  data() {
+    return {
+      seq: 0,
+      urlDeleteAllApi: "/api/v1/rental/payment-rent/delete"
+    };
+  },
+  computed: {
+    ...mapState("paymentShared", ["paymentsRent"]),
+    ...mapGetters("generic", ["event"]),
+  },
+  methods: {
+    ...mapActions("generic", ["deleteAllApi"]),
+    ...mapMutations("generic", ["addEvent", "removeLoading"]),
+    ...mapMutations("paymentShared", ["removePayment"]),
+    update(payment) {
+      this.seq = payment.seq;
+    },
+    remove(payment) {
+      let self = this;
+      setTimeout(function () {
+        self.seq = 0;
+      }, 300);
+      this.removePayment(payment.seq);
+      this.delete(payment.id);
+    },
+    delete(id) {
+      let params = {
+        url: this.urlDeleteAllApi,
+        selected: [id],
+      };
+      this.deleteAllApi(params).then(() => { });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "paymentRentCancelUpdate") {
+          this.seq = 0;
+          this.removeLoading(["btnUpdatePayment", "btnCancelPayment"]);
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 5px !important;
+  padding-top: 7px !important;
+  padding-bottom: 5px !important;
+  padding-right: 5px !important;
+  padding-left: 10px !important;
+  border-bottom: 0px !important;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.tabela-principal {
+  font-size: 14px;
+  max-width: 200px;
+}
+
+.tabela-descricao {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
+.descricao {
+  font-size: 13px;
+  color: darkgray;
+}
+
+.seq {
+  margin-right: 5px;
+  font-size: 15px;
+}
+
+.icone {
+  font-size: 20px;
+  color: #f0134d;
+  cursor: pointer;
+}
+
+.icone:hover {
+  color: #c70f40;
+}
+
+.editavel {
+  cursor: pointer;
+  background-color: #f1f4f9;
+}
+</style>

package/src/components/modules/shared/payment-items/RepeatPayment.vue

@@ -0,0 +1,108 @@
+<template>
+    <div>
+        <div class="repeater">
+            <Toggle title="Repetir lançamento" :color="'#577696'" v-model="isRepeater" />
+        </div>
+        <Molded v-if="isRepeater">
+            <b-row>
+                <b-col sm="6">
+                    <SelectStatic title="Intervalo" fieldTarget="timeZone" :data="[
+                        { content: 'Diariamente', id: 'daily' },
+                        { content: 'Quinzenal', id: 'quaweekly' },
+                        { content: 'Mensalmente', id: 'monthly' },
+                        { content: 'Anualmente', id: 'annually' },
+                    ]" :markFormDirty="false" v-model="repeatPayment.repeater" />
+                </b-col>
+                <b-col sm="2">
+                    <InputNumber title="Vezes" field="number" :required="false" :maxLength="2" type="int"
+                        v-model="repeatPayment.recurrence" />
+                </b-col>
+            </b-row>
+            <b-row v-if="repeatPayment.recurrence > 1">
+                <span>Total de <b> {{ repeatPayment.recurrence }} </b> parcelas no valor de</span>
+                <b-col sm="12">
+                    <RadioGroup :options="[
+                        { text: titleTotal, value: false },
+                        { text: titleInstallment, value: true },
+                    ]" v-model="repeatPayment.totalValue" />
+                </b-col>
+            </b-row>
+        </Molded>
+        <br v-if="isRepeater" />
+    </div>
+</template>
+
+<script>
+
+import InputNumber from "@nixweb/nixloc-ui/src/component/forms/InputNumber";
+import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded.vue";
+import Toggle from "@nixweb/nixloc-ui/src/component/forms/Toggle";
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup.vue";
+
+import { mapActions, mapGetters } from "vuex";
+
+export default {
+    name: "RepeatPayment",
+    props: ["payment", "value"],
+    components: {
+        InputNumber, InputDecimal, Molded, Toggle, SelectStatic, RadioGroup
+    },
+    data() {
+        return {
+            urlRepeat: "/api/v1/rental/payment-rent/create-repeater",
+            isRepeater: false,
+            repeatPayment: {
+                repeater: "",
+                recurrence: 1,
+                totalValue: false,
+            }
+        }
+    },
+    computed: {
+        ...mapGetters("generic", ["event"]),
+        titleTotal() {
+            return `${this.payment.value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })} cada`;
+        },
+        titleInstallment() {
+            let value = this.payment.value / this.repeatPayment.recurrence;
+            return `${value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })} cada`;
+        }
+    },
+    methods: {
+        ...mapActions("generic", ["postApi"]),
+        createRepearter() {
+            let params = {
+                url: this.urlRepeat,
+                obj: { ...this.payment, ...this.repeatPayment },
+                notNotifyToast: true
+            };
+            this.postApi(params).then((response) => {
+                this.$emit("input", response.content);
+            });
+        }
+    },
+    watch: {
+        repeatPayment: {
+            handler(value) {
+                this.createRepearter();
+            },
+            deep: true,
+        },
+        event: {
+            handler(event) {
+                if (event.name == "paymentRentCreate") {
+                    this.isRepeater = false;
+                }
+            },
+            deep: true,
+        },
+    },
+}
+</script>
+<style scoped>
+.div-radio {
+    margin-top: 20px;
+}
+</style>

package/src/components/modules/shared/tag/Tag.js

@@ -0,0 +1,13 @@
+export default class Tag {
+    constructor() {
+        this.id = "";
+        this.name = "";
+        this.color = "";
+        this.module = "";
+    }
+    update(data) {
+        this.id = data.id;
+        this.name = data.name;
+        this.color = data.color;
+    }
+}