Merge branch 'master' of http://192.168.6.188:3000/Provision/UnivateProperties

src/components/admin/status/timeshareAdminPage.vue

 <template>
-  <!-- <section class="intro-single"> -->
-  <div class="container">
+  <div>
+    <br />
     <br />
     <br />
     <br />
     <br />
     <div class="row">
-      <div class="col-md-12 col-lg-8">
-        <!-- <div class="title-single-box"> -->
-        <!-- <h1 class="title-single" style="text-align:left;">Timeshare Admin</h1> -->
-        <!-- </div> -->
-        <div class="title-box-d">
-          <h1 class="title-d" style="text-align:left; font-size: 250%">Timeshare Admin</h1>
-        </div>
-        <br />
+      <div class="offset-1 col-md-3">
+        <button
+          type="button"
+          :class="{'form-control btn btn-primary ': (1===1), 'my-disable': (!selectedItems || selectedItems.length === 0)}"
+          value="Verify Week(s)"
+          :disabled="selectedItems.length > 0"
+        >{{ButtonMessage}}</button>
+        <div>{{Message}}</div>
+      </div>
+      <div class="offset-1 col-md-10">
+        <ListView
+          :items="items"
+          :allowMultipleSelect="true"
+          @onRowClick="onRowClick"
+          @onClearSelected="onClearSelected"
+          :columnsCount="15"
+          :title="'Pending Weeks'"
+        />
       </div>
-    </div>
-    <div id="table" class="col-xs-12 table-responsive">
-      <datatable :columns="columns" :data="rows"></datatable>
     </div>
   </div>
-  <!-- </section> -->
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import Log from '../../../assets/Log';
+import ListView from '../../shared/listView.vue';
 
 export default {
   name: 'TimeshareAdmin',
-  created() {
-    this.gettimeshareAdmin();
+  components: {
+    ListView,
+  },
+  data() {
+    return {
+      user: Log.getUser(),
+      selectedItems: [],
+      showMessage: false,
+    };
+  },
+  mounted() {
+    console.log(this.user.id);
+    this.getItems(this.user.id);
   },
   computed: {
-    ...mapState('status', ['timeshareAdmin']),
+    SelectedItems() {
+      const selectedArray = [];
+      this.selectedItems.forEach(x => selectedArray.push(this.items[x]));
+      return selectedArray;
+    },
+    ButtonMessage() {
+      let msg = '';
+      if (!(this.selectedItems.length > 0)) {
+        msg = 'No Items selected';
+      } else {
+        msg = 'Verify item';
+        if (this.selectedItems.length > 1) {
+          msg += 's';
+        }
+      }
+      return msg;
+    },
+    Message() {
+      let msg = '';
+      if (!(this.selectedItems.length > 0)) {
+        msg = 'Please select the item(s) to verify.';
+      } else {
+        msg = `${this.selectedItems.length}`;
+        if (this.selectedItems.length === 1) {
+          msg += ' item ';
+        } else msg += ' items ';
+        msg += 'selected. Click to verify or select more...';
+      }
+      return msg;
+    },
+    ...mapState('myWeeks', ['items']),
   },
   methods: {
-    ...mapActions('status', ['gettimeshareAdmin']),
+    ...mapActions('myWeeks', ['getItems']),
+    onRowClick(items) {
+      this.selectedItems = items;
+    },
+    onEdit(item) {
+      this.$router.push(`/timeshare/${item.id}`);
+    },
+    onClearSelected() {
+      this.selectedItems = [];
+    },
   },
 };
 </script>
 
 
 <style>
+.my-disable {
+  background-color: silver;
+  border-color: silver;
+}
+.my-disable:hover {
+  background-color: lightgray;
+  border-color: lightgray;
+}
 </style>

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="!CanEdit"
+            />
           </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="!CanEdit"
+            />
           </div>
         </div>
         <div class="col-md-12">
                     step="any"
                     name="levy"
                     v-model="item.body"
+                    :disabled="!CanEdit"
                   />
                 </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="CanEdit"
+              >{{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="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';
 
   data() {
     return {
       showNew: false,
+      openFields: false,
     };
   },
   components: {
   },
   props: {
     item: {},
+    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;
+    },
   },
   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.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.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;
+      if (this.detailItem !== item) {
+        this.detailItem = item;
+      } else this.detailItem = undefined;
+      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 style="height:5px"></div>
+    <div class="d-flex justify-content-between table-title">
+      <div class="p-2" v-if="!hideSearch">
+        <input v-model="searchItem" class="form-control" :placeholder="currentPage" />
+      </div>
+      <div class="p-2" v-if="title">
+        <h2>{{title}}</h2>
+      </div>
       <div class="p-2">
-        <input v-model="searchItem" class="form-control" placeholder="Search ..." />
+        <div class="d-flex flex-row">
+          <div class="p2" v-if="selectedItems.length > 0">
+            <div
+              class="btn btn-primary myBackground btn-width"
+              @click="onClearSelected()"
+            >Clear Selected</div>
+          </div>
+          <div class="p2" v-if="showNew">
+            <div class="btn btn-primary myBackground btn-width" @click="onNew()">New</div>
+          </div>
+        </div>
       </div>
     </div>
-    <div v-if="items && items.length > 0">
-      <table id="table" class="table table-bordered table-hover">
-        <thead>
+    <div style="height:5px"></div>
+    <div v-if="items && items.length > 0" class="table-responsive">
+      <table
+        id="table"
+        :class="{'table table-bordered table-hover': (1 === 1), 'table-sm': compact}"
+      >
+        <thead class="my-table table-header">
           <tr class="dnd-moved">
             <th v-for="(column, c) in Columns" :key="c">
               <div @click="sortBy(column)">{{ column }}</div>
             <th v-if="deleteable"></th>
           </tr>
         </thead>
-        <tbody>
+        <tbody class="my-table">
           <tr
             v-for="(item, i) in DisplayItems"
             :key="i"
-            class="text-left dnd-moved"
-            @click="onRowClick(item)"
+            @click="onRowClick(item, i)"
+            :class="{'selected': isSelected(i), 'cursor-pointer': allowSelect}"
           >
             <td
               v-for="(column, c) in Columns"
           </tr>
         </tbody>
       </table>
-      <div class="d-flex justify-content-between">
+      <div class="d-flex justify-content-between" v-if="showPager">
         <div class="p-1">{{ currentPage + ' / ' + PageCount }}</div>
         <div class="p-1">
           <BasePagination
     }
   },
   props: {
+    compact: {
+      default: true,
+    },
+    allowSelect: {
+      default: true,
+    },
+    allowMultipleSelect: {
+      default: false,
+    },
     hideSearch: {
       default: false,
     },
+    showNew: {
+      default: true,
+    },
     items: undefined,
     editable: {
       default: false,
     columnsCount: {
       default: 6,
     },
+    showPager: {
+      default: true,
+    },
+    title: {
+      default: undefined,
+    },
   },
   data() {
     return {
+      selectedItems: [],
       showControl: false,
       sortKey: '',
       reverse: false,
     };
   },
   methods: {
+    onClearSelected() {
+      this.selectedItems = [];
+      this.$emit('onClearSelected');
+    },
+    isSelected(i) {
+      const ind = this.getActualIndex(i);
+      return _.some(this.selectedItems, x => x === ind);
+    },
+    onNew() {
+      this.$emit('onNew');
+    },
     isObject(item) {
       return !!item && item.constructor === Object;
     },
     onDelete(item) {
       this.$emit('onDelete', item);
     },
-    onRowClick(item) {
-      this.$emit('onRowClick', item);
+    onRowClick(item, i) {
+      const ind = this.getActualIndex(i);
+      if (_.some(this.selectedItems, x => x === ind)) {
+        this.selectedItems = this.selectedItems.filter(x => x !== ind);
+      } else {
+        if (!this.allowMultipleSelect) {
+          this.selectedItems = [];
+        }
+        this.selectedItems.push(ind);
+      }
+      this.$emit('onRowClick', this.selectedItems);
+    },
+    getActualIndex(index) {
+      return (this.currentPage - 1) * this.visibleItemsPerPageCount + index;
     },
     changeColumn(title, checked) {
       if (checked) {
 .over {
   background-color: rgba(0, 0, 255, 0.35);
 }
+.my-border {
+  border: solid 3px silver;
+}
+.selected {
+  background-color: rgba(96, 203, 235, 0.5);
+  border: white 2px double;
+}
+.selected:hover {
+  background-color: rgba(96, 203, 235, 0.85);
+}
+.btn-width {
+  width: 125px;
+}
+.table-title {
+  padding: 5px;
+  border: rgba(200, 200, 200, 0.66) double 2px;
+  border-radius: 5px;
+  background-color: rgba(96, 203, 235, 0.25);
+}
+.table-title:hover {
+  background-color: rgba(96, 203, 235, 0.4);
+}
+.table-header {
+  background-color: rgba(200, 200, 200, 0.66);
+}
+.my-table {
+  border: rgba(150, 150, 150, 0.75) 3px double;
+}
 </style>

src/components/shared/navBar.vue

                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/unitConfiguration/list')"
                 >Unit Configuration</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/communication/template')"
+                >Templates</a>
+                <hr />
                 <a
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/status/userManagementPage')"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/propertyTypes/list')"
                 >Property Types</a>
+                <hr />
                 <a
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/searchLog')"

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);
+    },
   },
 };