UnivateProperties/src/components/communication/emailRecipientEdit.vue

<template>
  <main id="main" style="margin-top:200px; padding-bottom:50px">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="section-header">
            <h2>Edit Recipient</h2>
          </div>
        </div>
      </div>
      <div class="row mb-5">
        <div class="col">
          <alert :text="alertMessage" :type="alertState" />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <float-label>
            <input
              v-model="recipient.recipientName"
              type="text"
              class="form-control uniInput"
              placeholder="RECIPIENT NAME"
            />
          </float-label>
        </div>
        <div class="col">
          <float-label>
            <input
              v-model="recipient.recipientMail"
              type="text"
              class="form-control uniInput"
              placeholder="RECIPIENT EMAIL"
            />
          </float-label>
        </div>
        <div class="col">
          <float-label fixed label="USAGE">
            <select v-model="recipient.recipientUsage" class="form-control uniSelect">
              <option value="ContactUs">Contact Us</option>
              <option value="EnquireNow">Enquire Now</option>
              <option value="WeekOfferMade-User">Timeshare Week Offer Made (User)</option>
              <option value="WeekOfferMade-Owner">Timeshare Week Offer Made (Admin)</option>
              <option value="WeekLoaded-Agent">Timeshare Week Listed (Agent)</option>
              <option value="WeekLoaded-Owner">Timeshare Week Listed (Owner)</option>
            </select>
          </float-label>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col">
          <button class="btn-solid-blue" @click="sendToApi()">UPDATE</button>
        </div>
        <div class="col">
          <router-link class="btn-solid-blue" to="/emailRecipient">CANCEL</router-link>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
/* eslint-disable */
import { mapActions, mapState } from "vuex";
import alert from "../shared/alert";

export default {
  components: {
    alert
  },
  created() {
    this.getMailRecipientById(this.$route.params.id).then(() => {
      console.log(this.recipient);
    });
  },
  computed: {
    ...mapState("template", ["recipient"])
  },
  methods: {
    ...mapActions("template", ["getMailRecipientById", "updateMailRecipient"]),
    sendToApi() {
      if (this.checkEmail(this.recipient.recipientMail)) {
        if (this.recipient.recipientUsage != "") {
          this.updateMailRecipient(this.recipient).then(() => {
            this.$router.push("/emailRecipient");
          });
        } else {
          this.alertMessage = "Please select a usage type";
          this.alertState = "ERROR";
        }
      } else {
        this.alertMessage = "Invalid Email";
        this.alertState = "ERROR";
      }
    },
    checkEmail(email) {
      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(String(email).toLowerCase());
    }
  }
};
</script>

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