Added template and info

src/App.vue

@@ -46,6 +46,10 @@ hr {
   border: white solid 3px;
   border-radius: 15px;
 }
+.myBackground {
+  border-color: #60cbeb;
+  background-color: #60cbeb;
+}
 .myFill {
   fill: #60cbeb;
   color: #60cbeb;

src/components/communication/templateDetail.vue

@@ -0,0 +1,206 @@
+<template>
+  <div style="padding:10px;">
+    <div class="container" style="background-color:rgba(215,215,215,0.75);padding:20px;">
+      <div class="row">
+        <div class="col-md-12">
+          <div class="d-flex">
+            <div class="p-2 mr-auto">
+              <h2>Detailed Item</h2>
+            </div>
+            <div class="p-2">
+              <div class="btn btn-primary myBackground">Add New</div>
+            </div>
+            <div class="p-2">
+              <div class="btn btn-primary myBackground">Edit</div>
+            </div>
+            <div class="p-2">
+              <div class="btn btn-primary myBackground">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" />
+          </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" />
+          </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" />
+          </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;"
+          >
+            <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"
+                  />
+                </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()">{{btnCaption}}</div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="col-md-12"
+          v-if="showNew"
+          style="background-color:rgba(255,255,255,1); border-radius:5px;padding:10px;"
+        >
+          <TemplateInnerItem />
+        </div>
+        <div class="col-md-12">
+          <hr />
+        </div>
+        <div class="col-md-12">
+          <ListView :items="item.placeHolders" :hideSearch="true" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ListView from '../shared/listView.vue';
+import TemplateInnerItem from './templateInnerItem.vue';
+
+export default {
+  data() {
+    return {
+      showNew: false,
+    };
+  },
+  components: {
+    ListView,
+    TemplateInnerItem,
+  },
+  props: {
+    item: {},
+  },
+  computed: {
+    btnCaption() {
+      return this.showNew ? 'Close' : 'New';
+    },
+  },
+  methods: {
+    addClose() {
+      if (this.showNew) {
+        this.showNew = false;
+      } else this.showNew = true;
+    },
+  },
+};
+</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>

src/components/communication/templateInnerItem.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="row">
+    <div class="col-md-3">
+      <input
+        class="form-control"
+        type="text"
+        step="any"
+        name="levy"
+        placeholder="Name"
+        v-model="item.name"
+      />
+    </div>
+    <div class="col-md-3">
+      <select class="form-control" v-model="item.class" @change="onClassChanged()">
+        <option v-for="(item, i) in classes" :key="i" :value="item">{{item.name}}</option>
+      </select>
+    </div>
+    <div class="col-md-3">
+      <select class="form-control" v-model="item.property">
+        <option v-for="(item, i) in properties" :key="i">{{item}}</option>
+      </select>
+    </div>
+    <div class="col-md-3">
+      <div class="btn btn-primary myBackground w-100">Add</div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  mounted() {
+    this.init();
+  },
+  data() {
+    return {
+      item: {
+        name: undefined,
+        class: undefined,
+        property: undefined,
+      },
+    };
+  },
+  computed: {
+    ...mapState('info', ['classes', 'properties']),
+  },
+  methods: {
+    ...mapActions('info', ['init', 'getClasses', 'getProperties']),
+    onClassChanged() {
+      this.getProperties(this.item.class);
+    },
+  },
+};
+</script>

src/components/communication/templatePage.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <br />
+    <hr />
+    <hr />
+    <hr />
+    <hr />
+    <hr />
+    <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>

src/components/shared/listView.vue

@@ -3,7 +3,7 @@
 <template>
   <div>
     <div class="container">
-      <div class="d-flex justify-content-between">
+      <div class="d-flex justify-content-between" v-if="!hideSearch">
         <div class="p-2">
           <input v-model="searchItem" class="form-control" placeholder="Search ..." />
         </div>
@@ -18,7 +18,12 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(item, i) in DisplayItems" :key="i" class="text-left dnd-moved">
+        <tr
+          v-for="(item, i) in DisplayItems"
+          :key="i"
+          class="text-left dnd-moved"
+          @click="onRowClick(item)"
+        >
           <td v-for="(column, c) in Columns" :key="c">{{ item[column] }}</td>
         </tr>
       </tbody>
@@ -72,6 +77,9 @@ export default {
     }
   },
   props: {
+    hideSearch: {
+      default: false,
+    },
     items: undefined,
   },
   data() {
@@ -86,6 +94,9 @@ export default {
     };
   },
   methods: {
+    onRowClick(item) {
+      this.$emit('onRowClick', item);
+    },
     changeColumn(title, checked) {
       if (checked) {
         this.myColumns.push(title);

src/router/index.js

@@ -44,6 +44,8 @@ import Offer from '../components/processFlow/offers.vue';
 import searchLog from '../components/admin/logs/SearchLogs.vue';
 // import store from '../store';
 
+import TemplatePage from '../components/communication/templatePage.vue';
+
 Vue.use(Router);
 
 
@@ -69,6 +71,11 @@ export default new Router({
     name: 'abouttimeshare',
     component: AboutTimeshare,
   },
+  {
+    path: '/communication/template',
+    name: 'template',
+    component: TemplatePage,
+  },
   {
     path: '/timeshare/sell',
     name: 'TimeshareSell',

src/store/index.js

@@ -20,6 +20,8 @@ import Bid from './modules/processFlow/bid';
 import Authentication from './modules/user/authentication';
 import PropertySearch from './modules/property/propertySearch';
 import SearchLog from './modules/logs/searchLog';
+import Template from './modules/communication/template';
+import Info from './modules/communication/info';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
@@ -45,5 +47,7 @@ export default new Vuex.Store({
     authentication: Authentication,
     propertySearch: PropertySearch,
     searchLog: SearchLog,
+    template: Template,
+    info: Info,
   },
 });

src/store/modules/communication/info.js

@@ -0,0 +1,46 @@
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    classes: [],
+    properties: [],
+  },
+  mutations: {
+    setClasses(state, list) {
+      state.classes = list;
+    },
+    setProperties(state, list) {
+      state.properties = list;
+    },
+    clearAll(state) {
+      state.classes = [];
+      state.properties = [];
+    },
+  },
+  getters: {},
+  actions: {
+    init({
+      dispatch,
+    }) {
+      dispatch('clearAll');
+      dispatch('getClasses');
+    },
+    getClasses({
+      commit,
+    }) {
+      axios
+        .get('api/info/getAllClasses')
+        .then(result => commit('setClasses', result.data))
+        .catch(console.error);
+    },
+    getProperties({
+      commit,
+    }, obj) {
+      axios
+        .get(`api/info/${obj.fullName}`)
+        .then(result => commit('setProperties', result.data))
+        .catch(console.error);
+    },
+  },
+};

src/store/modules/communication/template.js

@@ -0,0 +1,25 @@
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    list: [],
+    item: {},
+  },
+  mutations: {
+    setList(state, list) {
+      state.list = list;
+    },
+  },
+  getters: {},
+  actions: {
+    getList({
+      commit,
+    }) {
+      axios
+        .get('/api/template/getSimple')
+        .then(result => commit('setList', result.data))
+        .catch(console.error);
+    },
+  },
+};