UnivateProperties/src/components/communication/templateDetail.vue

<template>
  <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-4 text-left">
          <label>Id</label>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" style="color: #60CBEB">
                <b>I</b>
              </span>
            </div>
            <input
              class="form-control"
              type="number"
              step="any"
              name="levy"
              v-model="item.id"
              disabled
            />
          </div>
        </div>
        <div class="col-md-8 text-left">
          <label for="Sleeps maximum">Name</label>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" style="color: #60CBEB">
                <b>N</b>
              </span>
            </div>
            <input
              class="form-control"
              type="text"
              step="any"
              name="levy"
              v-model="item.name"
              :disabled="!CanEdit"
            />
          </div>
        </div>
        <div class="col-md-12">
          <hr />
        </div>
        <div class="col-md-12 text-left">
          <label for="Sleeps maximum">Subject</label>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" style="color: #60CBEB">
                <b>S</b>
              </span>
            </div>
            <input
              class="form-control"
              type="text"
              step="any"
              name="levy"
              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">
                  <div class="input-group-prepend">
                    <span class="input-group-text" style="color: #60CBEB">
                      <b>B</b>
                    </span>
                  </div>
                  <textarea
                    class="form-control"
                    type="text"
                    rows="10"
                    step="any"
                    name="levy"
                    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" v-if="showNew">
          <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,
    };
  },
  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;
    },
  },
};
</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>