UnivateProperties/src/components/communication/templatePage.vue

<template>
  <div class="container-fluid" style="margin-top:25px;">
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-10">
        <div class>
          <h3 class="sinse-title">Email Templates</h3>
        </div>
      </div>
      <div class="col-md-12">
        <hr />
      </div>
    </div>
    <div class="row">
      <div :class="listClass">
        <ListView :items="list" @onRowClick="onRowClick" @onNew="onNew" :showNew="true" />
      </div>
      <div class="col-md-6" v-if="showDetailView">
        <DetailView :placeHolders="detailItem ? detailItem.placeHolders : []" :item="detailItem" @onClose="onDetailClose" :editable="clickedNew" />
      </div>
    </div>

    <hr />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import ListView from '../shared/listView.vue';
import DetailView from './templateDetail.vue';

export default {
  data() {
    return {
      detailItem: undefined,
      clickedNew: false,
    };
  },
  components: {
    ListView,
    DetailView,
  },
  mounted() {
    this.getList();
  },
  computed: {
    ...mapState('template', ['list', 'item']),
    showDetailView() {
      return this.detailItem !== undefined && this.detailItem != null;
    },
    listClass() {
      return this.detailItem !== undefined && this.detailItem != null
        ? 'col-md-6'
        : 'col-md-12';
    },
  },
  methods: {
    ...mapActions('template', ['getList']),
    onRowClick(items) {
      if (items.length > 0) {
        const i = items[0];
        const item = this.list[i];
        if (this.detailItem !== item) {
          this.detailItem = item;
        } else this.detailItem = undefined;
        this.clickedNew = false;
      }
    },
    onNew() {
      this.detailItem = {};
      this.clickedNew = true;
    },
    onDetailClose() {
      this.detailItem = undefined;
    },
  },
};
</script>