UnivateProperties/src/components/user/timeshareIndividual.vue

<template>
  <!-- eslint-disable max-len -->
  <div class="reg-page">
    <hr />
    <div class="form-group row"></div>
    <div class="col-md-12" style="text-align:centre">
      <h4>Detailed Individual Information</h4>
      <div class="form-group row"></div>
      <div class="row" style="text-align:left">
        <div class="col-md-6">
          <label>Name</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="name" v-model="registerIndividual.name" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Surname</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input
              class="form-control"
              type="text"
              name="surname"
              v-model="registerIndividual.surname"
            />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>ID Number</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="archive" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="idnumber" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Company Reg Number</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="npm-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="companyregnumber" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Marital Status</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="maritalstatus" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Email Address</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="email" v-model="registerIndividual.email" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Cell Number</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="smartphone-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input
              class="form-control"
              type="text"
              name="cellnumber"
              v-model="registerIndividual.cellNumber"
            />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Landline Number</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input
              class="form-control"
              type="text"
              name="landline"
              v-model="registerIndividual.telephone"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  props: {
    RegisterHeader: { type: String, default: undefined }
  },
  name: "PrivateIndividual",
  data() {
    return {
      user: null,
      isPasswordShown: "password",
      selectItems: [{ text: "password", value: 0 }],
      selectErrors: "Some error with the field",
      select: null,
      textErrors: "Some error with the field",
      text: "",
      showPassword: false
    };
  },
  computed: {
    ...mapState("registerIndividual", ["registerIndividual"]),

    Header() {
      return this.RegisterHeader
        ? "Agency Administrator Details"
        : "Private Individual";
    }
  },
  methods: {
    ...mapActions("registerIndividual", [
      "getIndividual",
      "saveIndividual",
      "updateIndividual",
      "clearIndividual"
    ]),

    togglePassword() {
      this.showPassword = true;
      this.isPasswordShown = "text";
    },
    passwordToggled() {
      this.showPassword = false;
      this.isPasswordShown = "password";
    },
    SubmitData() {
      this.saveIndividual(this.registerIndividual);

      this.$router.push("/registerIndividual/");
    },
    Close() {
      this.$router.push("/registerIndividual/");
    }
  }
};
</script>

<style>
.goDown {
  margin-top: 150px;
}
</style>