Template - Communication

src/components/communication/templateDetail.vue

         <div class="col-md-12">
           <div class="d-flex">
             <div class="p-2 mr-auto">
-              <h2>Detailed Item</h2>
+              <h2>Template - Detail</h2>
             </div>
             <div class="p-2">
-              <div class="btn btn-primary myBackground">Add New</div>
+              <div class="btn btn-primary myBackground" v-if="!editable" @click="onEdit()">Edit</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 class="btn btn-primary myBackground" @click="onClose()">Save/Close</div>
             </div>
           </div>
         </div>
                 <b>I</b>
               </span>
             </div>
-            <input class="form-control" type="number" step="any" name="levy" v-model="item.id" />
+            <input
+              class="form-control"
+              type="number"
+              step="any"
+              name="levy"
+              v-model="item.id"
+              disabled
+            />
           </div>
         </div>
         <div class="col-md-8 text-left">
                 <b>N</b>
               </span>
             </div>
-            <input class="form-control" type="text" step="any" name="levy" v-model="item.name" />
+            <input
+              class="form-control"
+              type="text"
+              step="any"
+              name="levy"
+              v-model="item.name"
+              :disabled="!editable"
+            />
           </div>
         </div>
         <div class="col-md-12">
                 <b>S</b>
               </span>
             </div>
-            <input class="form-control" type="text" step="any" name="levy" v-model="item.subject" />
+            <input
+              class="form-control"
+              type="text"
+              step="any"
+              name="levy"
+              v-model="item.subject"
+              :disabled="!editable"
+            />
           </div>
         </div>
         <div class="col-md-12">
                     step="any"
                     name="levy"
                     v-model="item.body"
+                    :disabled="!editable"
                   />
                 </div>
               </div>
               <h2>Coded Fields</h2>
             </div>
             <div class="p-2">
-              <div class="btn btn-primary myBackground" @click="addClose()">{{btnCaption}}</div>
+              <div
+                class="btn btn-primary myBackground"
+                @click="addClose()"
+                v-if="editable"
+              >{{btnCaption}}</div>
             </div>
           </div>
         </div>
-        <div
-          class="col-md-12"
-          v-if="showNew"
-          style="background-color:rgba(255,255,255,0.75); border:silver solid thin;border-radius:10px;padding:10px;padding:10px 30px;"
-        >
-          <TemplateInnerItem />
+        <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="item.placeHolders" :hideSearch="true" />
+          <ListView
+            :items="item.placeHolders"
+            :hideSearch="true"
+            :showNew="false"
+            :deleteable="editable"
+            @onDelete="onItemDelete"
+          />
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import { mapActions } from 'vuex';
 import ListView from '../shared/listView.vue';
 import TemplateInnerItem from './templateInnerItem.vue';
 
   },
   props: {
     item: {},
+    editable: {
+      default: false,
+    },
   },
   computed: {
     btnCaption() {
       return this.showNew ? 'Close' : 'New';
     },
+    ItemList() {
+      return this.item.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);
+      }
+      console.log(JSON.stringify(this.item));
+      this.$emit('onClose');
+    },
+    onItemDelete(item) {
+      this.item.placeHolders = _.remove(
+        this.item.placeHolders,
+        x => x !== item,
+      );
+    },
+    onEdit() {
+      this.editable = 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.item.placeHolders = myList;
+    },
   },
 };
 </script>

src/components/communication/templateInnerItem.vue

 <template>
   <div class="row">
+    <div class="col-md-12" v-if="message !== undefined">
+      <Alert :text="message" :type="'ERROR'" />
+    </div>
     <div class="col-md-3">
       <input
         class="form-control"
       </select>
     </div>
     <div class="col-md-3">
-      <div class="btn btn-primary myBackground w-100">Add</div>
+      <div class="btn btn-primary myBackground w-100" @click="onItemAdd()">Add</div>
     </div>
   </div>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import Alert from '../shared/alert.vue';
 
 export default {
+  components: {
+    Alert,
+  },
   mounted() {
     this.init();
   },
   data() {
     return {
+      message: undefined,
       item: {
         name: undefined,
         class: undefined,
     onClassChanged() {
       this.getProperties(this.item.class);
     },
+    onItemAdd() {
+      let msg = '';
+      if (this.item.name === undefined) {
+        msg += 'Please give a name...';
+      }
+      if (this.item.class == undefined) {
+        msg += 'Please choose a class...';
+      }
+      if (this.item.property == undefined) {
+        msg += 'Please choose a property...';
+      }
+      if (msg.length > 0) {
+        this.message = msg;
+      } else {
+        this.$emit('onItemAdd', this.item);
+      }
+    },
   },
 };
 </script>

src/components/communication/templatePage.vue

     </div>
     <div class="row">
       <div :class="listClass">
-        <ListView :items="list" @onRowClick="onRowClick" />
+        <ListView :items="list" @onRowClick="onRowClick" @onNew="onNew" :showNew="true" />
       </div>
       <div class="col-md-6" v-if="showDetailView">
-        <DetailView :item="detailItem" />
+        <DetailView :item="detailItem" @onClose="onDetailClose" :editable="clickedNew" />
       </div>
     </div>
 
   data() {
     return {
       detailItem: undefined,
+      clickedNew: false,
     };
   },
   components: {
   methods: {
     ...mapActions('template', ['getList']),
     onRowClick(item) {
-      console.log(item);
       this.detailItem = item;
+      this.clickedNew = false;
+    },
+    onNew() {
+      this.detailItem = {};
+      this.clickedNew = true;
+    },
+    onDetailClose() {
+      this.detailItem = undefined;
     },
   },
 };

src/components/shared/listView.vue

 /* eslint-disable guard-for-in */
 <template>
   <div>
-    <div class="d-flex justify-content-between" v-if="!hideSearch">
-      <div class="p-2">
+    <div class="d-flex justify-content-between">
+      <div class="p-2" v-if="!hideSearch">
         <input v-model="searchItem" class="form-control" placeholder="Search ..." />
       </div>
+      <div class="p-2" v-if="showNew">
+        <div class="btn btn-primary myBackground" @click="onNew()">New</div>
+      </div>
     </div>
     <div v-if="items && items.length > 0">
       <table id="table" class="table table-bordered table-hover">
     hideSearch: {
       default: false,
     },
+    showNew: {
+      default: true,
+    },
     items: undefined,
     editable: {
       default: false,
     };
   },
   methods: {
+    onNew() {
+      this.$emit('onNew');
+    },
     isObject(item) {
       return !!item && item.constructor === Object;
     },

src/components/timeshare/sell/sellPage.vue

                 </div>
               </div>
             </div>
-            <DetailIndividual :currentUser="sellItem.owner" :showBank="true" />
+            <DetailIndividual :currentUser="sellItem.owner" :showBank="true" :showAddress="true" />
             <hr />
           </div>
           <br />

src/store/modules/communication/template.js

   state: {
     list: [],
     item: {},
+    message: undefined,
   },
   mutations: {
     setList(state, list) {
         .then(result => commit('setList', result.data))
         .catch(console.error);
     },
+    addItem({
+      dispatch,
+    }, item) {
+      axios
+        .post('/api/template', item)
+        .then(() => dispatch('getList'))
+        .catch(console.error);
+    },
+    editItem({
+      dispatch,
+    }, item) {
+      axios
+        .put(`/api/template/${item.id}`, item)
+        .then(() => dispatch('getList'))
+        .catch(console.error);
+    },
   },
 };