UnivateProperties/src/components/communication/templateDetailNew.vue

<template>
  <!-- eslint-disable max-len -->
  <div style="padding:10px;">
    <div
      class="container"
      style="border:silver solid thin;border-radius:10px;background-color:rgba(235,235,235,0.75);padding:20px;"
    >
      <div class="row">
        <div class="col-md-12">
          <div class="d-flex">
            <div class="p-2 mr-auto">
              <h2>Template - Detail</h2>
            </div>
            <div class="p-2">
              <div class="btn btn-primary myBackground" v-if="!editable" @click="onEdit()">
                Edit
              </div>
            </div>
            <div class="p-2">
              <div class="btn btn-primary myBackground" @click="onClose()">Save/Close</div>
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <hr />
        </div>
        <div class="col-md-12 text-left">
          <div class="input-group mb-3">
            <label v-if="!item.name" for="name" class="uniSelectLabel">
              Name
            </label>
            <input
              class="form-control uniInput"
              type="text"
              step="any"
              name="name"
              v-model="item.name"
              :disabled="!CanEdit"
            />
          </div>
        </div>
        <div class="col-md-12">
          <hr />
        </div>
        <div class="col-md-12 text-left">
          <div class="input-group mb-3">
            <label for="subject" class="uniSelectLabel">Subject</label>
            <input
              class="form-control uniInput"
              type="text"
              step="any"
              name="subject"
              v-model="item.subject"
              :disabled="!CanEdit"
            />
          </div>
        </div>
        <div class="col-md-12">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
              <a
                class="nav-link active"
                id="directions-tab"
                data-toggle="tab"
                href="#directions"
                role="tab"
                aria-controls="directions"
                aria-selected="false"
                >Html</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                id="resort-layout-tab"
                data-toggle="tab"
                href="#resort-layout"
                role="tab"
                aria-controls="resort-layout"
                aria-selected="true"
                >Preview</a
              >
            </li>
          </ul>
          <div
            class="tab-content"
            id="myTabContent"
            style="background-color:rgba(255,255,255,0.75);padding:10px;border:silver solid thin;border-radius:10px;"
          >
            <div
              class="tab-pane fade show active"
              style="background-color:rgba(255,255,255,0.75);padding:10px;"
              id="directions"
              role="tabpanel"
              aria-labelledby="directions-tab"
            >
              <div class="text-left">
                <label for="Sleeps maximum">Body</label>
                <div class="input-group mb-3">
                  <textarea
                    class="form-control uniInput"
                    id="bodyInput"
                    ref="bodyInput"
                    type="text"
                    rows="10"
                    step="any"
                    name="body"
                    v-model="item.body"
                    :disabled="!CanEdit"
                  />
                </div>
              </div>
            </div>
            <div
              class="tab-pane fade"
              id="resort-layout"
              role="tabpanel"
              aria-labelledby="resort-layout-tab"
            >
              <div class="no-style" v-html="item.body"></div>
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <hr />
        </div>
        <div class="col-md-12">
          <div class="d-flex">
            <div class="p-2 mr-auto">
              <h2>Coded Fields</h2>
            </div>
            <!-- <div class="p-2">
              <div class="btn btn-primary myBackground" @click="addClose()" v-if="CanEdit">
                {{ btnCaption }}
              </div>
            </div> -->
          </div>
        </div>
        <div class="col-md-12">
          <TemplateInnerItem @onItemAdd="onItemAdd" />
        </div>
        <!-- <div class="col-md-12">
          <hr />
        </div>
        <div class="col-md-12">
          <ListView
            :items="PlaceHolders"
            :hideSearch="true"
            :showNew="false"
            :deleteable="CanEdit"
            :allowMultipleSelect="true"
            @onDelete="onItemDelete"
          />
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import ListView from "../shared/listView.vue";
import TemplateInnerItem from "./templateInnerItem.vue";

export default {
  data() {
    return {
      showNew: false,
      openFields: false
    };
  },
  created() {
    this.item.body =
      '<HTML> <BODY style="font-family: Poppins, sans-serif; color: #555555;"> <div> [Name] </div> <br/> <div> Please note that a timeshare week has been loaded for sale. </div> <br /> <div> <table class="table table-striped"> <thead> <tr> <th scope="col">Resort</th> <th scope="col">Unit</th> <th scope="col">Module</th> </tr> </thead> <tbody> <tr> <td>[Resort]</td> <td>[UnitNumber]</td> <td>[Module]</td> </tr> </tbody> </table> <div> <br /> <div> Regards, <br/> <img src="http://training.provision-sa.com:89/images/test/uvprop.png" /> </div> </BODY> </HTML>';
  },
  components: {
    ListView,
    TemplateInnerItem
  },
  props: {
    item: {},
    placeHolders: [],
    editable: {
      default: false
    }
  },
  computed: {
    CanEdit() {
      return this.editable || this.item.id === 0 || this.openFields;
    },
    btnCaption() {
      return this.showNew ? "Close" : "New";
    },
    ItemList() {
      return this.item.placeHolders;
    },
    PlaceHolders() {
      return this.placeHolders;
    }
  },
  methods: {
    ...mapActions("template", ["addItem", "editItem"]),
    addClose() {
      if (this.showNew) {
        this.showNew = false;
      } else this.showNew = true;
    },
    onClose() {
      if (this.item.id > 0) {
        // edit
        this.editItem(this.item);
      } else {
        // add.
        this.addItem(this.item);
      }
      this.$emit("onClose");
    },
    onItemDelete(item) {
      this.item.placeHolders = _.remove(this.item.placeHolders, x => x !== item);
    },
    onEdit() {
      this.openFields = true;
    },
    onItemAdd(item) {
      //   const myList = this.item.placeHolders ? this.item.placeHolders : [];
      //   myList.push({
      //     name: item.name,
      //     boundTo: item.property,
      //     boundToClassDisplay: item.class.name,
      //     boundToClass: item.class.fullName
      //   });
      //   this.placeHolders = myList;
      //   this.item.placeHolders = this.placeHolders;
      var placeHolder = "[" + item.property + "]";
      console.log(placeHolder);
      // 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>
.no-style {
  background: #fff;
  border: none;
  color: #000;
  display: block;
  font: initial;
  height: auto;
  letter-spacing: normal;
  line-height: normal;
  margin: 0;
  padding: 0;
  text-transform: none;
  visibility: visible;
  width: auto;
  word-spacing: normal;
  z-index: auto;
  text-align: left;
}
</style>