UnivateProperties/src/components/communication/editEmailTemplate.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 Template</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <float-label fixed label="USAGE">
            <select v-model="singleTemp.name" class="form-control uniSelect" name="" id="">
              <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>
              <option value="ContactUs">Contact Us (Admin)</option>
              <option value="EnquireNow">Enquire Now (Admin)</option>
            </select>
          </float-label>
        </div>
        <div class="col">
          <float-label fixed label="SUBJECT">
            <input type="text" class="form-control uniInput" v-model="singleTemp.subject" />
          </float-label>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col-md-12">
          <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
            <li class="nav-item">
              <a
                class="nav-link active"
                id="html-tab"
                data-toggle="tab"
                href="#html"
                role="tab"
                aria-controls="html"
                aria-selected="false"
                ><h2>
                  html
                </h2></a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                id="preview-tab"
                data-toggle="tab"
                href="#preview"
                role="tab"
                aria-controls="preview"
                aria-selected="true"
                ><h2>
                  Preview
                </h2></a
              >
            </li>
          </ul>
          <div class="tab-content" id="myTabContent">
            <div class="row mt-5">
              <div class="col-md-10 mt-3">
                <float-label fixed label="DYNAMIC FIELD">
                  <select v-model="selectedProperty" class="form-control uniSelect" name="" id="">
                    <optgroup label="Resort Fields">
                      <option value="[RESORTNAME]">Resort Name</option>
                      <option value="[UNITNUMBER]">Unit Number</option>
                      <option value="[MODULE]">Module</option>
                      <option value="[RESORTPRICE]">Resort Price</option>
                      <option value="[RESORTSEASON]">Resort Season</option>
                      <option value="[RESORTLEVY]">Resort Levy</option>
                      <option value="[OFFERMADE]">Offer Made</option>
                      <option value="[OWNER]">OWNER</option>
                    </optgroup>
                    <optgroup label="Property Fields">
                      <option value="[PROPERTYREF]">Property Ref</option>
                      <option value="[PROPERTYNAME]">Property Name</option>
                      <option value="[PROPERTYPRICE]">Property Price</option>
                      <option value="[PROPERTYID]">Property ID</option>
                    </optgroup>
                    <optgroup label="User Fields">
                      <option value="[FULLNAME]">Fullname</option>
                      <option value="[USEREMAIL]">User Email</option>
                      <option value="[USERCELLPHONE]">User Cellphone Number</option>
                      <option value="[USERTELEPHONE]">User Telephone Number</option>
                      <option value="[USERCOMMENT]">User Comment</option>
                      <option value="[USERMESSAGE]">User Message</option>
                    </optgroup>
                  </select>
                </float-label>
              </div>
              <div class="col">
                <button class="btn-solid-blue" @click="onItemAdd">INSERT</button>
              </div>
            </div>
            <div
              class="tab-pane fade show active mt-4"
              style="background-color:rgba(255,255,255,0.75);padding:10px;"
              id="html"
              role="tabpanel"
              aria-labelledby="directions-tab"
            >
              <div class="text-left">
                <div class="input-group mb-3">
                  <textarea
                    id="bodyInput"
                    class="form-control"
                    type="text"
                    rows="40"
                    step="any"
                    name="levy"
                    v-model="singleTemp.body"
                  />
                </div>
              </div>
            </div>
            <div
              class="tab-pane fade mt-4"
              id="preview"
              role="tabpanel"
              aria-labelledby="resort-layout-tab"
            >
              <div class="no-style" v-html="singleTemp.body"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col">
          <button class="btn-solid-blue" @click="sendToApi()">UPDATE</button>
        </div>
        <div class="col">
          <button class="btn-solid-blue" @click="$router.go(-1)">CANCEL</button>
        </div>
      </div>
    </div>
  </main>
</template>

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

import alert from "../shared/alert";
export default {
  data() {
    return {
      selectedProperty: ""
    };
  },
  components: {
    alert
  },
  created() {
    this.getSingleTemplate(this.$route.params.id).then(() => {
      console.log(this.recipient);
    });
  },
  computed: {
    ...mapState("template", ["singleTemp"])
  },
  methods: {
    ...mapActions("template", ["getSingleTemplate", "editItem"]),
    sendToApi() {
      this.editItem(this.singleTemp)
        .then(() => this.$router.go(-1))
        .catch(ex => console.log(ex));
    },
    onItemAdd() {
      var placeHolder = this.selectedProperty;
      // will give the current postion of the cursor
      var curPos = document.getElementById("bodyInput").selectionStart;

      // will get the value of the text area
      let x = $("#bodyInput").val();

      // will get the value of the input box
      let text_to_insert = placeHolder;

      // setting the updated value in the text area
      $("#bodyInput").val(x.slice(0, curPos) + text_to_insert + x.slice(curPos));
    }
  }
};
</script>

<style lang="scss" scoped>
.nav-tabs li a {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-color: rgb(221, 221, 221);
}

.nav-tabs li :hover {
  background-color: rgb(27, 117, 187);
}

.nav-tabs li a.active {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-color: rgb(221, 221, 221);
}

.nav-tabs li a :hover {
  background-color: transparent;
  color: white;
}
</style>