UnivateProperties/src/components/user/updateAgentProfile.vue

<template>
  <main id="main">
    <section id="contact2">
      <div class="container">
        <div class="form">
          <div class="row">
            <div class="section-header">
              <h2>Update Agent Info</h2>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <float-label>
                <input
                  type="text"
                  name="name"
                  class="form-control uniInput"
                  id="name"
                  placeholder="USERNAME"
                  data-rule="minlen:4"
                  data-msg="Please enter your name"
                  v-model="agent.user.username"
                />
              </float-label>
            </div>
            <div class="col">
              <float-label>
                <input
                  type="text"
                  name="name"
                  class="form-control uniInput"
                  id="name"
                  placeholder="NAME"
                  data-rule="minlen:4"
                  data-msg="Please enter your name"
                  v-model="agent.name"
                />
              </float-label>
            </div>
          </div>
          <div class="row mt-4">
            <div class="col-md-6">
              <float-label>
                <input
                  type="text"
                  class="form-control uniInput"
                  name="surname"
                  id="surname"
                  placeholder="SURNAME"
                  data-msg="Please enter your surname"
                  v-model="agent.surname"
                />
              </float-label>
            </div>
            <div class="col">
              <float-label>
                <input
                  type="text"
                  class="form-control uniInput"
                  name="email"
                  id="email"
                  placeholder="EMAIL ADDRESS"
                  data-msg="Please enter your email address"
                  v-model="agent.email"
                />
              </float-label>
            </div>
            <!-- <div class="col">
            <float-label>
              <input
                type="text"
                name="idnum"
                class="form-control uniInput"
                id="idnum"
                placeholder="ID NUMBER"
                data-rule="minlen:4"
                data-msg="Please enter your ID number"
              />
            </float-label>
          </div> -->
          </div>
          <!-- <div class="row mt-4">
          <div class="col-md-6">
            <float-label>
              <input
                type="text"
                class="form-control uniInput"
                name="company"
                id="company"
                placeholder="COMPANY REG NUMBER"
                data-rule="minlen:4"
                data-msg="Please enter your company reg number"
              />
            </float-label>
          </div>
        </div> -->
          <div class="row mt-4">
            <div class="col">
              <float-label>
                <input
                  type="text"
                  name="cell"
                  class="form-control uniInput"
                  id="cell"
                  placeholder="CELL NUMBER"
                  data-rule="minlen:4"
                  data-msg="Please enter your cell number"
                  v-model="agent.cellNumber"
                />
              </float-label>
            </div>
            <div class="col">
              <float-label>
                <input
                  type="text"
                  class="form-control uniInput"
                  name="landline"
                  id="landline"
                  placeholder="TELEPHONE NUMBER"
                  data-msg="Please enter your Telephone number"
                  v-model="agent.telephone"
                />
              </float-label>
            </div>
          </div>
          <div class="row mt-4">
            <div class="col">
              <float-label fixed label="AGENCY">
                <select
                  v-model="agent.agencyId"
                  class="form-control uniSelect"
                  name=""
                  id=""
                >
                  <option
                    v-for="agency in agencies"
                    :key="agency.id"
                    :value="agency.id"
                  >
                    {{ agency.agencyName }}
                  </option>
                </select>
              </float-label>
            </div>
          </div>
          <div v-if="pullUserRole === 'Super Admin'">
            <div class="row">
              <div class="col">
                <div class="section-header">
                  <h2>Access Control</h2>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <float-label label="User Role" style="width: 100%;">
                  <select
                    class="form-control uniSelect"
                    id="howMarried"
                    v-model="agent.user.role"
                  >
                    <option
                      v-for="role in getRoles"
                      :key="role.id"
                      :value="role.roleName"
                    >
                      {{ role.roleName }}
                    </option>
                  </select>
                </float-label>
              </div>
              <div class="col-md-6">
                <input
                  class="mr-2 mt-3"
                  name="changePass"
                  type="checkbox"
                  v-model="agent.user.loginPasswordChange"
                />
                <label for="changePass">Change Password on Next Login</label>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <Alert :text="errorMessage" :type="errorOccurred" />
            </div>
          </div>
          <div class="row mt-5 mb-5">
            <div class="col">
              <button class="btn-solid-blue" @click="sendToApi()">SAVE</button>
            </div>
            <div class="col">
              <button class="btn-solid-blue" @click="$router.go(-1)">
                CLOSE
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions, mapGetters } from 'vuex'
import Log from '../../assets/Log'
import Alert from '../shared/alert'

export default {
  props: {
    agent: {},
  },
  components: {
    Alert,
  },
  data() {
    return {
      errorOccurred: '',
      errorMessage: '',
      boolError: false,
    }
  },
  created() {
    this.retrieveUserRoles()
    this.getAgencies()
  },
  computed: {
    ...mapGetters('role', ['getRoles']),
    ...mapState('timeshare', ['agencies']),
    pullUserRole() {
      return Log.getUser().role
    },
  },
  methods: {
    ...mapActions('role', ['retrieveUserRoles']),
    ...mapActions('timeshare', ['getAgencies', 'updateAgent']),
    ...mapActions('register', ['saveAgent']),
    validPhoneNumber(number) {
      const rx = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im
      return rx.test(String(number))
    },
    sendToApi() {
      this.boolError = false
      this.agent.fullName = this.agent.name + ' ' + this.agent.surname
      if (this.agent.telephone !== '') {
        if (this.agent.telephone !== null) {
          if (!this.validPhoneNumber(this.agent.telephone)) {
            this.boolError = true
            this.errorOccurred = 'ERROR'
            this.errorMessage =
              'The telephone number is not in the correct format.'
          }
        }
      } else {
        this.agent.telephone = null
      }
      if (this.agent.cellNumber !== '') {
        if (this.agent.cellNumber !== null) {
          if (!this.validPhoneNumber(this.agent.cellNumber)) {
            this.boolError = true
            this.errorOccurred = 'ERROR'
            this.errorMessage =
              'The cellphone number is not in the correct format.'
          }
        }
      } else {
        this.agent.cellNumber = null
      }

      if (!this.boolError) {
        if (
          this.agent.user.role === 'Agent' ||
          this.agent.user.role === 'Agency' ||
          this.agent.user.role === 'Managing Agent'
        ) {
          this.updateAgent(this.agent).then(() => {
            var newPerson = {
              id: JSON.parse(localStorage.getItem('person')).id,
              email: this.agent.email,
              fullname: this.agent.name + ' ' + this.agent.surname,
              name: this.agent.name,
              surname: this.agent.surnmame,
            }
            localStorage.setItem('person', JSON.stringify(newPerson))
            console.log(newPerson)
            this.$router.push('/')
          })
        } else {
          this.saveAgent(this.agent)
            .then(() => {
              if (Log.getUser().role === 'Super Admin') {
                this.$router.push('/status/userManagementPage')
              } else {
                this.$router.push('/')
              }
            })
            .catch((ex) => {
              console.log(ex)
            })
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>