Merge branch 'master' of http://provision-sa.co.za:3000/Provision/UnivateProperties

src/App.vue

   name: "app",
   data() {
     return {
-      isLandingPage: false
+      isLandingPage: false,
     };
   },
   components: {
     NavBar,
-    FooterSection
+    FooterSection,
   },
 
   methods: {
     },
     setLandingPage(item) {
       this.isLandingPage = item;
-    }
-  }
+    },
+  },
 };
 </script>
 
   width: 100px;
 }
 .top-left {
-  position: absolute;
-  top: 8px;
-  width: 350px;
+  position: centre;
+  top: 5px;
+  width: 380px;
   color: white;
 }
 .normalText {
   background-color: #60cbeb;
+  color: white;
 }
 .pendingOffer {
   background-color: #ff8344;
+  color: white;
 }
 .noWeeks {
   background-color: #ff4444;

src/components/admin/status/editTimeShareAdminPage.vue

                   <select
                     id="weekInfoRegionSelect"
                     class="form-control uniSelect"
-                    v-model="sellItem.region"
-                    @change="regionChange()"
+                    v-model="week.region"
                     style="font-size: 15px"
                   >
                     <option v-for="(region, r) in regions" :key="r" :value="region">{{
               </div>
             </div>
             <div class="text-center col-12" v-if="CanSave">
-              <button class="btn-solid-blue" v-if="!sellItem.id" @click="submitSale()">
+              <button class="btn-solid-blue">
                 Save
               </button>
             </div>
             <div class="text-center col-12">
-              <button class="btn-solid-blue" @click="paygateRedirect()">Back</button>
+              <button class="btn-solid-blue" v-on:click="backToListView()">Back</button>
             </div>
             <br />
             <br />
     return {
       wait: false,
       userLoggedIn: Log.isLoggedIn(),
-      listedWeekId: this.$route.params.id
+      listedWeekId: this.$route.params.id,
+      selectedItems: [],
     };
   },
   components: {
     this.initTimeshare(0);
     this.getIndividual(Log.getUser().id);
     this.getBanks();
+    this.getWeek(this.$route.params.id)
   },
   created() {
     this.initTimeshare(this.weekId);
     ]),
     ...mapState("individual", ["indiv"]),
     ...mapState("authentication", ["isLoggedIn"]),
+    ...mapState("myWeeks", ["items", "week"]),
     ...mapGetters({
       user: "authentication/getUser",
       person: "authentication/getPerson"
     ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek", "getBlankWeek"]),
     ...mapActions("payment", ["addPayment"]),
     ...mapActions("bank", ["getBanks"]),
+    ...mapActions("myWeeks", ["getItems", "getWeek"]),
     newSale() {
       this.weekId = 0;
       this.getBlankWeek();
       } else {
         this.sellItem.mandateDate = undefined;
       }
+    },
+    backToListView() {
+      this.$router.push("/status/timeshareAdmin");
     }
   }
 };

src/components/property/commercial/latestListings.vue

         <div class="row">
           <div class="col">
             <propertyCard
-              v-if="properties.length > 0"
+              v-if="latestProperties.length > 0"
               name="propertyholder"
-              :properties="properties"
+              :properties="latestProperties"
               :showSort="false"
             />
           </div>
 import propertyCard from "../propertyCard";
 export default {
   components: {
-    propertyCard
+    propertyCard,
   },
   methods: {
-    ...mapActions("propertySearch", ["searchProperties"])
+    ...mapActions("propertySearch", ["searchLatestPropertiesType"]),
   },
   mounted() {
-    this.propertySearch.propertyUsageType = "Commercial";
-
-    this.searchProperties(this.propertySearch);
+    this.searchLatestPropertiesType("Commercial");
   },
   computed: {
-    ...mapState("propertySearch", ["properties", "propertySearch"])
-  }
+    ...mapState("propertySearch", ["latestProperties"]),
+  },
 };
 </script>
 

src/components/property/editProperty/editProperty.vue

                     class="form-control uniSelect"
                     v-model="property.propertyUsageType"
                     @change="UpdateUsageType"
+                    :disabled="!canEdit"
                   >
                     <option>Commercial</option>
                     <option>Residential</option>
                   </select>
                 </div>
                 <div class="col-md-6">
-                  <select class="form-control uniSelect" v-model="property.statusString">
+                  <select
+                    class="form-control uniSelect"
+                    v-model="property.statusString"
+                    @change="StatusChanged"
+                  >
                     <option v-for="(item, i) in statuses" :key="i">{{ item }}</option>
                   </select>
                 </div>
                     type="text"
                     name="propertyName"
                     v-model="property.propertyName"
+                    :disabled="!canEdit"
                   />
                 </div>
                 <div class="col-md-6">
                     type="text"
                     name="propertyRef"
                     v-model="property.propertyRef"
+                    :disabled="!canEdit"
                   />
                 </div>
               </div>
                     name="propertyType"
                     id="propertyType"
                     v-model="property.propertyTypeId"
+                    :disabled="!canEdit"
                   >
                     <option value="0">Please select type *</option>
                     <option
                     name="unit"
                     id="unit"
                     v-model="property.unit"
+                    :disabled="!canEdit"
                   />
                 </div>
               </div>
                   <mapSection
                     v-on:map-location="updateLocation"
                     :savedCoords="property.propertCoords"
+                    :canEdit="canEdit"
                   />
                   <input
                     type="checkbox"
                     v-model="property.showAddress"
                     style="margin-right: 10px; margin-top: 10px;"
+                    :disabled="!canEdit"
                   />
                   <label>Show address on listing</label>
                 </div>
                         name="price"
                         id="price"
                         v-model="property.price"
+                        :disabled="!canEdit"
                       />
                     </div>
-                    <div v-if="property.salesTypeString === 'Rental'" class="col-md-6">
+                    <div v-if="!property.isSale" class="col-md-6">
                       <select
                         class="form-control uniSelect"
                         name="propertyType"
                         id="propertyType"
                         v-model="property.pricePer"
+                        :disabled="!canEdit"
                       >
                         <option value>Please select</option>
                         <option value="Month">Month</option>
                         type="date"
                         class="form-control uniInput"
                         name="date"
-                        v-model="property.dateAvailable"
+                        v-model="property.dateAvailableString"
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>
               <div class="row">
                 <div class="col-md-12">
                   <label for="Property Description" style="font-family:'muli'">Description:</label>
-                  <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
+                  <vue-editor
+                    v-model="property.description"
+                    :editor-toolbar="customToolbar"
+                    :disabled="!canEdit"
+                  />
                   <br />
                   <p>
                     * A listing fee of R380 including VAT is payable to list your Property on the
                         type="number"
                         class="form-control uniInput"
                         v-model="field.value"
+                        :disabled="!canEdit"
                       />
                     </div>
                     <div v-else class="display:none"></div>
                     <div v-if="field.type === 'yesno'">
                       {{ field.name }}
-                      <input type="checkbox" v-model="field.value" />
+                      <input
+                        type="checkbox"
+                        v-model="field.value"
+                        :disabled="!canEdit"
+                      />
                     </div>
                   </div>
                 </div>
                       name="vtlink"
                       id="vtlink"
                       v-model="property.virtualTour"
+                      :disabled="!canEdit"
                     />
                   </div>
                 </div>
                       name="vlink"
                       id="vlink"
                       v-model="property.video"
+                      :disabled="!canEdit"
                     />
                   </div>
                 </div>
                 </div>
               </div>
               <ImageLoad
-                :savedImaged="propertyImages"
+                :savedImages="propertyImages"
                 :loadedImages="loadedImages"
                 @DefaultImage="UpdateDefaultImage"
+                @DeleteImage="DeleteImage"
+                :mayEdit="canEdit"
               />
               <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">Save</button>
               <button v-if="!wait" type="button" @click="Close()" class="btn-solid-blue">Close</button>
 import _ from "lodash";
 
 export default {
+  name: "PropertyEditPage",
   components: {
     mapSection,
     ImageLoad,
       defaultImage: 0,
       images: [],
       wait: false,
+      canEdit: true,
     };
   },
   methods: {
       "getPropertyFields",
       "updateProperty",
     ]),
+    StatusChanged(item) {
+      if (
+        item.target.value === "Offer Pending" ||
+        item.target.value === "Sold" ||
+        item.target.value === "Rented Out"
+      ) {
+        this.canEdit = false;
+      } else {
+        this.canEdit = true;
+      }
+      if (item.target.value === "For Rent") {
+        this.property.isSale = false;
+      }
+      if (item.target.value === "For Sale") {
+        this.property.isSale = true;
+      }
+    },
     clearAddress() {
       this.addressSet = false;
       this.property.streetNumber = undefined;
     },
     UpdateDefaultImage(item) {
       this.defaultImage = item;
+      for (let i = 0; i < this.propertyImages.length; i++) {
+        if (i === item) {
+          this.propertyImages[i].isDefault = true;
+        } else {
+          this.propertyImages[i].isDefault = false;
+        }
+      }
     },
     loadedImages(values) {
       this.images = values;
         });
       }
 
+      this.property.propertyImages = this.propertyImages;
+
+      //console.log(JSON.stringify(this.property));
+
       this.updateProperty(this.property).then((fulfilled) => {
         this.$router.push("/PropertyAdmin");
       });
       this.property.addressUrl = place.url;
       this.property.propertCoords = place.coords;
     },
+    DeleteImage(item) {
+      this.propertyImages[item].isDeleted = true;
+    },
   },
   mounted() {
-    this.wait = false;
-    this.getProperty(this.$route.params.id);
+    this.getProperty(this.$route.params.id).then((fulfilled) => {
+      this.wait = false;
+      if (
+        this.property.statusString === "Offer Pending" ||
+        this.property.statusString === "Sold" ||
+        this.property.statusString === "Rented Out"
+      ) {
+        this.canEdit = false;
+      } else {
+        this.canEdit = true;
+      }
+    });
   },
   computed: {
     ...mapState("property", [
       "propertyFields",
       "statuses",
     ]),
+    savedImages() {
+      const list = [];
+      for (let i = 0; i < this.propertyImages.length; i++) {
+        list.push(this.proeprtyImages[i].image);
+      }
+      return list;
+    },
   },
 };
 </script>

src/components/property/mapSection.vue

 <template>
   <div>
-    <gmap-autocomplete class="form-control mb-3 uniInput" @place_changed="setPlace"
-      >*</gmap-autocomplete
-    >
+    <gmap-autocomplete
+      class="form-control mb-3 uniInput"
+      @place_changed="setPlace"
+      :disabled="!canEdit"
+    >*</gmap-autocomplete>
     <GmapMap
       :center="mapCenter"
       :zoom="mapZoom"
       style="width: 100%; height: 500px"
       ref="map"
     >
-      <GmapMarker v-if="this.place" :position="mapCenter" :clickable="true" :draggable="false" />
+      <GmapMarker
+        v-if="this.place"
+        :position="mapCenter"
+        :clickable="true"
+        :draggable="false"
+        :disabled="!canEdit"
+      />
     </GmapMap>
   </div>
 </template>
 import { gmapApi } from "vue2-google-maps";
 export default {
   computed: {
-    google: gmapApi
+    google: gmapApi,
   },
   props: {
-    savedCoords: { default: "" }
+    savedCoords: { default: "" },
+    canEdit: { default: true },
   },
   data() {
     return {
       country: "",
       postalCode: "",
       url: "",
-      coords: {}
+      coords: {},
     };
   },
 
         if (place.address_components[i].types[0] === "locality") {
           this.city = place.address_components[i].long_name;
         }
-        if (place.address_components[i].types[0] === "administrative_area_level_1") {
+        if (
+          place.address_components[i].types[0] === "administrative_area_level_1"
+        ) {
           this.province = place.address_components[i].long_name;
         }
         if (place.address_components[i].types[0] === "country") {
         province: this.province,
         country: this.country,
         postalCode: this.postalCode,
-        url: this.url
+        url: this.url,
       });
-    }
+    },
   },
   watch: {
     savedCoords: {
           var array = val.split(",");
           this.mapCenter = {
             lat: Number(array[0]),
-            lng: Number(array[1])
+            lng: Number(array[1]),
           };
           this.mapZoom = 17;
         }
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>
 

src/components/property/propertyCard.vue

                   <img
                     style="max-height:165px; object-fit: cover;"
                     :src="currentProperty.displayImage"
-                    alt=""
+                    alt
                   />
                 </div>
                 <h1>{{ currentProperty.suburb }}</h1>
-                <p><strong>Property Reference</strong> #{{ currentProperty.id }}</p>
+                <p>
+                  <strong>Property Reference</strong>
+                  {{ currentProperty.propertyReference }}
+                </p>
+                <p
+                  v-if="!currentProperty.isSale"
+                  :class="[currentProperty.hasPendingOffer ? 'pendingOffer' : 'normalText']"
+                >
+                  <strong>{{ currentProperty.available }}</strong>
+                </p>
+                <p
+                  v-if="currentProperty.isSale  && currentProperty.hasPendingOffer"
+                  class="pendingOffer"
+                >
+                  <strong>{{ currentProperty.available }}</strong>
+                </p>
               </div>
             </router-link>
           </div>
                   <img
                     style="max-height:165px; object-fit: cover;"
                     :src="currentProperty.displayImage"
-                    alt=""
+                    alt
                   />
                 </div>
                 <h1>{{ currentProperty.suburb }}</h1>
-                <p><strong>Property Reference</strong> #{{ currentProperty.id }}</p>
+                <p>
+                  <strong>Property Reference</strong>
+                  {{ currentProperty.propertyReference }}
+                </p>
               </div>
             </router-link>
           </div>
   props: {
     properties: { type: Array, default: () => [] },
     showSort: { type: Boolean, default: true },
-    salesType: { type: String, default: "Rent" }
+    salesType: { type: String, default: "Rent" },
   },
   methods: {
     sortHighPrice() {
       }
 
       return this.properties.sort(compare);
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/property/propertyImage.vue

           id="checkbox"
           v-model="imagesDefault[i]"
           @change="updateList(i)"
+          :disabled="!mayEdit"
         />
         <label v-if="allowMultiple" for="checkbox" style="margin: 10px;">Main Image</label>
         <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
         <!-- <span class="input-group-text" align="center" style="width:150px" @click="removeImage(key)">
           <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
         </span>-->
-        <button align="center" class="imageDeleteButton" @click="removeImage(i)">
+        <button v-if="mayEdit" class="imageDeleteButton" @click="removeImage(i)">
           <i class="fa fa-trash"></i>
         </button>
       </div>
     loadedImages: Function,
     mayEdit: { type: Boolean, default: () => true },
     allowMultiple: { type: Boolean, default: () => true },
-    savedImaged: { type: Array, default: () => [] },
+    savedImages: { type: Array, default: () => [] },
   },
   data() {
     return {
       images: {},
       image: [],
       imagesDefault: [],
+      maxSavedIndex: 0,
     };
   },
   // Commented out for now.
     },
 
     removeImage(key) {
+      this.$emit("DeleteImage", key);
       this.image.splice(key, 1);
       this.images.splice(key, 1);
 
       if (!this.image.length) {
         this.$refs.im.value = "";
       }
+
+      // if (key <= this.maxSavedIndex) {
+      //   this.$emit("DeleteImage", key);
+      // }
     },
 
     updateList(index) {
     },
   },
   watch: {
-    savedImaged: {
+    savedImages: {
       immediate: true,
       handler(val, oldVal) {
         if (val) {
-          this.image = val;
+          this.image = [];
+          this.imagesDefault = [];
+          for (let i = 0; i < val.length; i++) {
+            this.image.push(val[i].image);
+            this.imagesDefault.push(val[i].isDefault);
+            this.maxSavedIndex = i;
+          }
         }
       },
     },

src/components/property/residential/latestListings.vue

           <div class="row">
             <div class="col">
               <propertyCard
-                v-if="properties.length > 0"
+                v-if="latestProperties.length > 0"
                 name="propertyholder"
-                :properties="properties"
+                :properties="latestProperties"
                 :showSort="false"
               />
             </div>
 import propertyCard from "../propertyCard";
 export default {
   components: {
-    propertyCard
+    propertyCard,
   },
   methods: {
-    ...mapActions("propertySearch", ["searchProperties"])
+    ...mapActions("propertySearch", ["searchLatestPropertiesType"]),
   },
   async mounted() {
-    this.propertySearch.propertyUsageType = "Residential";
-    await this.searchProperties(this.propertySearch);
+    await this.searchLatestPropertiesType("Residential");
   },
   computed: {
-    ...mapState("propertySearch", ["properties", "propertySearch"])
-  }
+    ...mapState("propertySearch", ["latestProperties"]),
+  },
 };
 </script>
 

src/components/shared/navBar.vue

                         <router-link to="/property/list">List My Property</router-link>
                       </li>
 
-                      <li>
+                      <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/status/timeshareAdmin">Timeshare Week Admin</router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">

src/components/timeshare/myWeeksPage.vue

       <div class="offset-1 col-md-10">
         <ListView
           :items="items"
-          :editable="true"
           @onNew="onNew"
           @onRowClick="onRowClick"
           @onClearSelected="onClearSelected"

src/store/modules/property/property.js

     },
     setPropertyImages(state, images) {
       state.propertyImages = images;
+      state.propertyImageList = [];
+      for (let i = 0; i < images.length; i++) {
+        state.propertyImageList.push(images[i].image);
+      }
     },
     setPropertyTypes(state, types) {
       state.propertyTypes = types;
           .then(result => {
             commit("setProperty", result.data);
             dispatch("getPropertyTypes", result.data.propertyUsageType);
-            dispatch("getPropertyImages", result.data.id);
+            dispatch("getSavedPropertyImages", result.data.id);
             dispatch("getSavedPropertyFields", result.data.id);
             dispatch("getStatuses");
             resolve();
         .then(result => commit("setPropertyImages", result.data))
         .catch(console.error);
     },
+    getSavedPropertyImages({ commit }, id) {
+      axios
+        .get(`/api/PropertyImage/GetProperySavedImages/${id}`)
+        .then(result => commit("setPropertyImages", result.data))
+        .catch(console.error);
+    },
     getPropertyTypes({ commit }, propertyType) {
       axios
         .get(`/api/PropertyType/type/${propertyType}`)

src/store/modules/property/propertySearch.js

         .then(response => commit("setLatestProperties", response.data))
         .catch(console.error);
     },
+    searchLatestPropertiesType({ commit }, type) {
+      axios
+        .get(`/api/property/latestProperties/${type}`)
+        .then(response => commit("setLatestProperties", response.data))
+        .catch(console.error);
+    },
     applyFilter({ commit }, value) {
       commit("setFilter", { value });
     },

src/store/modules/timeshare/myWeeks.js

     setItems(state, list) {
       state.items = list;
     },
+    setItem(state, item) {
+      state.week = item;
+    }
   },
   getters: {
     getNeedsVerify(state) {
     //   .then(result => commit('removeListing', id))
     //   .catch(console.error);
     // }
+    getWeek({ commit }, id) {
+      axios
+      .get(`/api/timeshareweek/${id}`)
+      .then(r => {
+        console.log(JSON.stringify(r));
+        commit('setItem', r.data);
+      })
+      .catch(console.error);
+    },
   },
 };