@nixweb/nixloc-ui 0.0.271 → 0.0.273

package/src/components/modules/shared/customer-supplier/CustomerSupplierCreate.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="margin">
+    <b-tabs>
+      <b-tab title="Principal">
+        <b-row>
+          <b-col xs="12" sm="12" md="12" lg="12" xl="12">
+            <CheckboxGroup field="options" :formName="formName" :initialValue="customerSupplier.options"
+              :markFormDirty="false" :options="[
+              { text: 'Cliente', value: 'isCustomer' },
+              { text: 'Fornecedor', value: 'isSupplier' },
+            ]" v-model="customerSupplier.options" />
+          </b-col>
+        </b-row>
+        <Person :formName="formName" :markFormDirty="false" v-model="customerSupplier.personRequest" />
+      </b-tab>
+      <b-tab title="Endereço">
+        <AddressValueObject :formName="formName" :required="false" :markFormDirty="false"
+          v-model="customerSupplier.addressValueObject" />
+      </b-tab>
+      <b-tab title="Telefone, Site e E-mail">
+        <Contact :formName="formName" :markFormDirty="false" v-model="customerSupplier.contactRequest" />
+      </b-tab>
+      <b-tab title="Contato">
+        <ContactCreateUpdate :markFormDirty="false" :showButtonSave="false" :required="false"
+          v-model="customerSupplier.contact" />
+      </b-tab>
+      <b-tab title="Categoria">
+        <b-row>
+          <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+            <Select title="Categoria" field="category" :formName="formName" :required="false" :markFormDirty="false"
+              url="/api/v1/crm/category-customer/select-all" v-model="customerSupplier.categoryCustomer"
+              nameNewRegister="categoryCustomerCreateUpdate" titleNewRegister="Categoria Cliente"
+              :widthNewRegister="500" :heightNewRegister="250">
+              <CategoryCustomerCreateUpdate :registerInSelect="true" v-model="customerSupplier.categoryCustomer" />
+            </Select>
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+            <Select title="Origem" field="origin" :formName="formName" :required="false" :markFormDirty="false"
+              url="/api/v1/crm/origin-customer/select-all" v-model="customerSupplier.originCustomer"
+              nameNewRegister="originCustomerCreateUpdate" titleNewRegister="Origem" :widthNewRegister="500"
+              :heightNewRegister="250">
+              <OriginCustomerCreateUpdate :registerInSelect="true" v-model="customerSupplier.originCustomer" />
+            </Select>
+          </b-col>
+        </b-row>
+      </b-tab>
+      <!-- <b-tab title="Limite">
+        <b-row>
+          <b-col xs="12" sm="12" md="12" lg="2" xl="2">
+            <InputDecimal title="Lt de Crédito" field="number" :formName="formName" :markFormDirty="false"
+              :required="false" v-model="customerSupplier.creditLimit" />
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="2" xl="2">
+            <InputDecimal title="Lt de Patrimônio" field="number" :markFormDirty="false" :formName="formName"
+              :required="false" v-model="customerSupplier.patrimonyLimit" />
+          </b-col>
+        </b-row>
+      </b-tab> -->
+      <b-tab title="Observações">
+        <TextArea title="Observações" field="observation" :required="false" :maxLength="800"
+          v-model="customerSupplier.observation" :markFormDirty="false" />
+      </b-tab>
+    </b-tabs>
+    <br />
+    <Button _key="cancelCustomer" title="Cancelar" type="danger" size="small" :clicked="cancel" />
+    <Button _key="saveCustomer" type="success" title="Salvar" :disabled="!isFormValid(formName)" classIcon="fas fa-save"
+      size="medium" :clicked="create" />
+  </div>
+</template>
+
+<script>
+import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
+import TextArea from "@nixweb/nixloc-ui/src/component/forms/TextArea";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup.vue";
+import Select from "@nixweb/nixloc-ui/src/component/forms/Select";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import SaveCancel from "@nixweb/nixloc-ui/src/component/shared/SaveCancel";
+
+import AddressValueObject from "@nixweb/nixloc-ui/src/component/value-objects/Address.vue";
+import ContactCreateUpdate from "../contact/ContactCreateUpdate.vue";
+
+import OriginCustomerCreateUpdate from "../../crm/category-customer/OriginCustomerCreateUpdate.vue";
+import CategoryCustomerCreateUpdate from "../../crm/category-customer/CategoryCustomerCreateUpdate.vue";
+
+import Contact from "@nixweb/nixloc-ui/src/component/value-objects/Contact.vue";
+import Person from "@nixweb/nixloc-ui/src/component/value-objects/Person.vue";
+
+import CustomerSupplier from "@/components/modules/shared/customer-supplier/CustomerSupplier.js";
+
+import { mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "CustomerSupplierCreate",
+  props: {
+    _hideSideBar: {
+      type: Boolean,
+      default: true,
+    },
+    value: Object,
+  },
+  components: {
+    InputText,
+    InputDecimal,
+    Select,
+    RadioGroup,
+    TextArea,
+    CheckboxGroup,
+    Person,
+    Contact,
+    Button,
+    SaveCancel,
+    CategoryCustomerCreateUpdate,
+    OriginCustomerCreateUpdate,
+    AddressValueObject,
+    ContactCreateUpdate,
+  },
+  data() {
+    return {
+      formName: "customerSupplierCreate",
+      customerSupplier: new CustomerSupplier(),
+      urlCreate: "/api/v1/crm/customer/create",
+    };
+  },
+  computed: {
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapGetters("generic", ["event", "isLoading"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi"]),
+    ...mapMutations("generic", ["removeLoading", "hideVodal", "hideSideBar"]),
+    create() {
+      this.customerSupplier.addressValueObject.state =
+        this.customerSupplier.addressValueObject.state.content;
+
+      let params = { url: this.urlCreate, obj: this.customerSupplier };
+      this.postApi(params).then((response) => {
+        if (response.success) {
+          this.hideVodal(this.formName);
+          this.hideVodal("customerSupplierOrCollaboratorCreate");
+
+          if (this._hideSideBar) this.hideSideBar();
+          this.$emit("input", {
+            id: response.content.id,
+            content: response.content.person.companyName,
+          });
+        }
+        this.removeLoading(["saveCustomer"]);
+      });
+    },
+    cancel() {
+      if (this._hideSideBar) this.hideSideBar();
+      this.hideVodal(this.formName);
+      this.hideVodal("customerSupplierOrCollaboratorCreate");
+      this.removeLoading(["cancelCustomer"]);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.margin {
+  margin-right: 10px;
+}
+</style>

package/src/components/modules/shared/customer-supplier/CustomerSupplierCreateUpdate.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="margin">
+    <b-row>
+      <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+        <CheckboxGroup field="options" :formName="formName" :initialValue="customerSupplier.options" :options="[
+          { text: 'Cliente', value: 'isCustomer' },
+          { text: 'Fornecedor', value: 'isSupplier' },
+        ]" v-model="customerSupplier.options" />
+      </b-col>
+    </b-row>
+    <Molded>
+      <Person :formName="formName" v-model="customerSupplier.personRequest" />
+      <b-row>
+        <b-col sm="12">
+          <RadioGroup title="Status" field="status" :formName="formName" :options="[
+          { text: 'Ativo', value: 1 },
+          { text: 'Inativo', value: 2 },
+        ]" v-model="customerSupplier.status" />
+        </b-col>
+      </b-row>
+    </Molded>
+    <br />
+    <Molded>
+      <b-row>
+        <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+          <Select title="Categoria" field="category" :formName="formName" :required="false"
+            url="/api/v1/crm/category-customer/select-all" v-model="customerSupplier.categoryCustomer"
+            nameNewRegister="categoryCustomerCreateUpdate" titleNewRegister="Categoria Cliente" :widthNewRegister="500"
+            :heightNewRegister="250">
+            <CategoryCustomerCreateUpdate :registerInSelect="true" v-model="customerSupplier.categoryCustomer" />
+          </Select>
+        </b-col>
+        <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+          <Select title="Origem" field="origin" :formName="formName" :required="false"
+            url="/api/v1/crm/origin-customer/select-all" v-model="customerSupplier.originCustomer"
+            nameNewRegister="originCustomerCreateUpdate" titleNewRegister="Origem" :widthNewRegister="500"
+            :heightNewRegister="250">
+            <OriginCustomerCreateUpdate :registerInSelect="true" v-model="customerSupplier.originCustomer" />
+          </Select>
+        </b-col>
+        <b-col xs="12" sm="12" md="12" lg="2" xl="2">
+          <InputNumber title="Faturamento em Dia(s)" field="dayToBilling" :formName="formName" :maxLength="5"
+            type="float" v-model="customerSupplier.dayToBilling" />
+        </b-col>
+        <!-- <b-col xs="12" sm="12" md="12" lg="2" xl="2">
+          <InputDecimal title="Lt de Crédito" field="number" :formName="formName" :required="false"
+            v-model="customerSupplier.creditLimit" />
+        </b-col>
+        <b-col xs="12" sm="12" md="12" lg="2" xl="2">
+          <InputDecimal title="Lt de Patrimônio" field="number" :formName="formName" :required="false"
+            v-model="customerSupplier.patrimonyLimit" />
+        </b-col> -->
+      </b-row>
+    </Molded>
+    <br />
+    <Molded>
+      <Contact :formName="formName" v-model="customerSupplier.contactRequest" />
+    </Molded>
+    <div v-if="id && !isLoading('panel')">
+      <br />
+      <b-tabs v-model="tabIndex">
+        <b-tab title="Endereço">
+          <AddressList v-if="tabIndex == 0" :genericId="id" />
+        </b-tab>
+        <b-tab title="Contato">
+          <ContactList v-if="tabIndex == 1" :customerSupplierId="id" />
+        </b-tab>
+        <b-tab title="Anexo">
+          <br>
+          <FileManager :showInModal="true" source="customerSupplier" :genericId="id" />
+        </b-tab>
+      </b-tabs>
+    </div>
+    <br />
+    <Molded>
+      <TextArea title="Observações" field="observation" :required="false" :maxLength="800"
+        v-model="customerSupplier.observation" :markFormDirty="!registerInSelect" />
+    </Molded>
+    <br />
+  </div>
+</template>
+
+<script>
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded.vue";
+import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
+import TextArea from "@nixweb/nixloc-ui/src/component/forms/TextArea";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup.vue";
+import Select from "@nixweb/nixloc-ui/src/component/forms/Select";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import InputNumber from "@nixweb/nixloc-ui/src/component/forms/InputNumber";
+import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import FileManager from "@nixweb/nixloc-ui/src/component/shared/file-manager/FileManager";
+
+import OriginCustomerCreateUpdate from "../../crm/category-customer/OriginCustomerCreateUpdate.vue";
+import CategoryCustomerCreateUpdate from "../../crm/category-customer/CategoryCustomerCreateUpdate.vue";
+import ContactList from "../contact/ContactList.vue";
+import AddressList from "../address/AddressList.vue";
+
+import Contact from "@nixweb/nixloc-ui/src/component/value-objects/Contact.vue";
+import Person from "@nixweb/nixloc-ui/src/component/value-objects/Person.vue";
+
+import CustomerSupplier from "@/components/modules/shared/customer-supplier/CustomerSupplier.js";
+
+import { mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "CustomerSupplierCreateUpdate",
+  props: {
+    registerInSelect: Boolean,
+    value: Object,
+  },
+  components: {
+    InputText,
+    InputDecimal,
+    InputNumber,
+    Select,
+    RadioGroup,
+    TextArea,
+    CheckboxGroup,
+    Person,
+    Contact,
+    Molded,
+    Button,
+    CategoryCustomerCreateUpdate,
+    AddressList,
+    ContactList,
+    OriginCustomerCreateUpdate,
+    FileManager
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      formName: "customerSupplierCreateUpdate",
+      customerSupplier: new CustomerSupplier(),
+      urlCreate: "/api/v1/crm/customer/create",
+      urlUpdate: "/api/v1/crm/customer/update",
+      urlGetById: "/api/v1/crm/customer/get-by-id",
+      tabIndex: 0,
+    };
+  },
+  created() {
+    if (this.id && !this.registerInSelect) this.getById();
+    if (this.registerInSelect) this.id = "";
+  },
+  computed: {
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapGetters("generic", ["event", "isLoading"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "putApi", "getApi"]),
+    ...mapMutations("generic", ["removeLoading", "hideVodal", "hideSideBar"]),
+    ...mapMutations("validation", ["resetValidation", "removeFormDirty"]),
+    create() {
+      this.customerSupplier.addressValueObject.state = "";
+      let params = { url: this.urlCreate, obj: this.customerSupplier };
+      this.postApi(params).then((response) => {
+        if (response.success && this.registerInSelect) {
+          this.$emit("input", {
+            id: response.content.id,
+            content: `${response.content.person.companyName} (${response.content.person.tradeName})`,
+          });
+          this.hideVodal(this.formName);
+        }
+        this.hideSideBar();
+        if (response.success && !this.registerInSelect) {
+          this.$router.replace({
+            name: "customerUpdate",
+            params: { id: response.content.id },
+          });
+        }
+        this.removeLoading(["saveSaveCancel", "customerOnRent"]);
+      });
+    },
+    update() {
+      this.customerSupplier.addressValueObject.state = "";
+      let params = { url: this.urlUpdate, obj: this.customerSupplier };
+      this.putApi(params).then(() => {
+        this.removeLoading(["saveSaveCancel"]);
+      });
+    },
+    getById() {
+      let params = { url: this.urlGetById, obj: { id: this.id } };
+      this.getApi(params).then((response) => {
+        this.customerSupplier.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();
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.margin {
+  margin-right: 10px;
+}
+</style>

package/src/components/modules/shared/job/Job.js

@@ -0,0 +1,33 @@
+export default class Job {
+    constructor() {
+        this.id = "";
+        this.subject = "";
+        this.description = "";
+        this.location = "";
+        this.dateStart = "";
+        this.timeStart = "";
+        this.dateEnd = "";
+        this.timeEnd = "";
+        this.allDay = false;
+        this.done = false;
+        this.userId = "";
+        this.guest = [];
+        this.organizerName = "";
+        this.organizerEmail = "";
+        this.notify = false;
+    }
+    update(data) {
+        this.id = data.id;
+        this.subject = data.subject;
+        this.description = data.description;
+        this.location = data.location;
+        this.dateStart = data.dateStart;
+        this.timeStart = data.timeStart;
+        this.dateEnd = data.dateEnd;
+        this.timeEnd = data.timeEnd;
+        this.allDay = data.allDay;
+        this.done = data.done;
+        this.userId = data.userId;
+        this.guest = data.listGuest;
+    }
+}

package/src/components/modules/shared/job/JobCreateUpdate.vue

@@ -0,0 +1,219 @@
+<template>
+  <div>
+    <div v-if="loading">
+      <Loading :center="false" />
+    </div>
+    <div v-else>
+      <b-row>
+        <b-col sm="5">
+          <InputText title="Assunto" field="subject" :formName="formName" :required="true" :maxLength="100"
+            v-model="job.subject" />
+        </b-col>
+        <b-col sm="7">
+          <InputAddressGoogle v-if="isGoogleMaps" title="Local" field="address" :maxLength="200"
+            v-model="job.location" />
+          <InputText v-else title="Local" field="address" :maxLength="200" v-model="job.location" />
+          <RadioGroup field="group" :options="[
+      { text: 'Google Maps', value: true },
+      { text: 'Livre', value: false },
+    ]" :markFormDirty="false" v-model="isGoogleMaps" />
+        </b-col>
+      </b-row>
+      <CheckboxSimple title="Dia Inteiro" v-model="job.allDay" />
+      <b-row>
+        <b-col sm="3">
+          <DateTime title="Data Inicio" field="birthDate" format="DD/MM/YYYY" type="date" :required="true" placeholder
+            :formName="formName" v-model="job.dateStart" />
+        </b-col>
+        <b-col sm="2" v-if="!job.allDay">
+          <DateTime title="Hora" field="birthDate" format="HH:mm" type="time" placeholder :formName="formName"
+            v-model="job.timeStart" />
+        </b-col>
+        <b-col sm="3">
+          <DateTime title="Data Fim" field="birthDate" format="DD/MM/YYYY" type="date" :required="true" placeholder
+            :formName="formName" v-model="job.dateEnd" />
+        </b-col>
+        <b-col sm="2" v-if="!job.allDay">
+          <DateTime title="Hora" field="birthDate" format="HH:mm" type="time" placeholder :formName="formName"
+            v-model="job.timeEnd" />
+        </b-col>
+      </b-row>
+      <b-tabs>
+        <b-tab title="Descrição">
+          <span class="title">Descrição</span>
+          <ScrollBar :minHeight="150" :maxHeight="250">
+            <EditorHtml field="description" :maxLength="5000" v-model="job.description" />
+            <br>
+          </ScrollBar>
+        </b-tab>
+        <b-tab title="Convidados">
+          <b-row>
+            <b-col sm="6">
+              <Select title="Usuário Interno" :showNewRegister="false" field="user" url="/api/v1/adm/user/select-all"
+                v-model="selectUser" />
+            </b-col>
+            <b-col sm="4">
+              <div class="btn-add">
+                <Button _key="btnAddUser" type="primary" :disabled="!selectUser.id" classIcon="fa-solid fa-plus"
+                  size="small" :clicked="addUser" />
+              </div>
+            </b-col>
+          </b-row>
+          <InputTag title="Convidados" placeholder="Digite um e-mail e pressione Enter" :initialValue="job.guest"
+            v-model="job.guest" />
+        </b-tab>
+        <b-tab title="Anexo">
+          <FileManager :showInModal="false" source="job" :genericId="job.id" />
+        </b-tab>
+      </b-tabs>
+      <div class="div-done">
+        <CheckboxSimple title="Marcar como concluída" v-model="job.done" />
+      </div>
+      <b-row>
+        <b-col sm="12">
+          <div class="text-right">
+            <Button _key="create" type="success" title="Salvar" :disabled="!isFormValid(formName) || loadingBtn"
+              classIcon="fas fa-save" size="medium" :clicked="create" />
+            <Button v-if="job.id && job.guest.length > 0" _key="updateNotify" type="info" title="Salvar e Notificar"
+              :disabled="!isFormValid(formName) || loadingBtn" classIcon="fa-solid fa-floppy-disk-circle-arrow-right"
+              size="medium" :clicked="updateNotify" />
+          </div>
+        </b-col>
+      </b-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import EditorHtml from "@nixweb/nixloc-ui/src/component/forms/EditorHtml";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import InputAddressGoogle from "@nixweb/nixloc-ui/src/component/forms/InputAddressGoogle";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+import CheckboxSimple from "@nixweb/nixloc-ui/src/component/forms/CheckboxSimple.vue";
+import Toggle from "@nixweb/nixloc-ui/src/component/forms/Toggle";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import InputTag from "@nixweb/nixloc-ui/src/component/forms/InputTag";
+import Select from "@nixweb/nixloc-ui/src/component/forms/Select";
+import FileManager from "@nixweb/nixloc-ui/src/component/shared/file-manager/FileManager";
+
+import Job from "@/components/modules/shared/job/Job.js";
+
+import { mapGetters, mapActions, mapMutations, mapState } from "vuex";
+
+export default {
+  name: "JobCreateUpdate",
+  components: {
+    Button, InputText, Toggle, DateTime, EditorHtml,
+    ScrollBar, InputAddressGoogle, RadioGroup, CheckboxSimple, Loading, InputTag, Select, FileManager
+  },
+  data() {
+    return {
+      formName: "jobCreateUpdate",
+      job: new Job(),
+      urlCreate: "/api/v1/shared/job/create",
+      urlUpdate: "/api/v1/shared/job/update",
+      selectUser: {},
+      isGoogleMaps: true,
+      loading: true,
+      loadingBtn: false,
+    };
+  },
+  computed: {
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapGetters("generic", ["event"]),
+    ...mapState("user", ["userLogged"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "putApi"]),
+    ...mapMutations("validation", ["resetValidation"]),
+    ...mapMutations("generic", [
+      "addEvent",
+      "removeLoading",
+      "removeEvent",
+      "hideModal",
+    ]),
+    ...mapMutations("validation", ["resetValidation"]),
+    create() {
+      this.loadingBtn = true;
+      this.job.userId = this.userLogged.user.id;
+      this.job.organizerName = this.userLogged.user.name;
+      this.job.organizerEmail = this.userLogged.user.email;
+
+      if (this.job.id) {
+        let params = { url: this.urlUpdate, obj: this.job };
+        this.putApi(params).then((response) => {
+          if (response.success) this.hideModal();
+          this.addEvent({ name: "updatedJob" });
+          this.removeLoading(["create", "updateNotify"]);
+          this.loadingBtn = false;
+        });
+      } else {
+        let params = { url: this.urlCreate, obj: this.job };
+        this.postApi(params).then((response) => {
+          if (response.success) this.hideModal();
+          this.addEvent({ name: "updatedJob" });
+          this.removeLoading(["create"]);
+          this.loadingBtn = false;
+        });
+      }
+    },
+    updateNotify() {
+      this.job.notify = true;
+      this.create();
+    },
+    update(data) {
+      this.job = new Job();
+      this.job.update(data);
+      this.removeLoading([data.id]);
+    },
+    addUser() {
+      if (!this.job.guest.includes(this.selectUser.content)) {
+        this.job.guest.push(this.selectUser.content);
+        this.selectUser = {};
+      }
+      this.removeLoading(["btnAddUser"]);
+    },
+    removerDuplicados(array) {
+      return array.filter((element, index) => array.indexOf(element) === index);
+    }
+
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "jobUpdate") {
+          this.update(event.data);
+          this.loading = false;
+        }
+
+        if (event.name == "jobCreate") {
+          this.job = new Job();
+          this.resetValidation(this.formName);
+          this.loading = false;
+          this.job.allDay = true;
+          this.job.dateStart = event.data;
+          this.job.dateEnd = event.data;
+        }
+
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.div-done {
+  margin-top: 10px;
+}
+
+.btn-add {
+  margin-top: 38px;
+}
+
+.div-notify {
+  margin-top: 10px;
+}
+</style>

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;
+    }
+}