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" />
      </div>
      <div class="col-md-6" v-if="showDetailView">
        <DetailView :item="detailItem" />
      </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,
    };
  },
  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(item) {
      console.log(item);
      this.detailItem = item;
    },
  },
};
</script>