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

src/App.vue

@@ -54,6 +54,22 @@ hr {
   fill: #60cbeb;
   color: #60cbeb;
 }
+.mySuccess {
+  border-color: rgba(2, 184, 117, 0.5);
+  background-color: rgba(2, 184, 117, 0.5);
+}
+.myInfo {
+  border-color: rgba(23, 162, 184, 0.5);
+  background-color: rgba(23, 162, 184, 0.5);
+}
+.myWarning {
+  border-color: rgba(240, 173, 78, 0.5);
+  background-color: rgba(240, 173, 78, 0.5);
+}
+.myError {
+  border-color: rgba(217, 83, 79, 0.5);
+  background-color: rgba(217, 83, 79, 0.5);
+}
 a {
   cursor: pointer;
 }
@@ -70,14 +86,14 @@ a:hover {
 .cursor-pointer {
   cursor: pointer;
 }
-    body,
-    html {
-        font-size: 13.7px !important;
-        color: #666;
-        font-family: "Roboto", sans-serif;
-        height: 100%;
-        margin: 0;
-    }
+body,
+html {
+  font-size: 13.7px !important;
+  color: #666;
+  font-family: "Roboto", sans-serif;
+  height: 100%;
+  margin: 0;
+}
 </style>
 
 <style scoped>

src/components/admin/status/agentsUserManagementPage.vue

@@ -22,7 +22,22 @@
         <button type="button" class="btn btn-b-n">Agents</button>
       </div>
       <div class="col-md-2 offset-2">
-        <button type="button" class="btn btn-b-n">New Agent</button>
+        <button
+          type="button"
+          class="btn btn-b-n"
+          data-toggle="modal"
+          :data-target="'#myModal' + i"
+        >New Agent</button>
+        <div :id="'myModal' + i" class="modal fade" role="dialog">
+          <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+              </div>
+              <Agency name="Agency" :isAddAgent="false" :item="item" />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="container">
@@ -66,8 +81,12 @@
             <th>
               <b>Reset Password</b>
             </th>
-            <th></th>
-            <th></th>
+            <th>
+              <b>Modify</b>
+            </th>
+            <th>
+              <b>Remove</b>
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -80,7 +99,9 @@
             <td>{{ item.email }}</td>
             <td v-if="item.user">{{ item.user.role }}</td>
             <td v-else></td>
-            <td></td>
+            <td>
+              <button type="button" class="btn" style="margin:2px; color: #60CBEB">Reset</button>
+            </td>
             <td>
               <button
                 type="button"

src/components/admin/status/userManagementPage.vue

@@ -63,8 +63,12 @@
             <th>
               <b>Reset Password</b>
             </th>
-            <th></th>
-            <th></th>
+            <th>
+              <b>Modify</b>
+            </th>
+            <th>
+              <b>Remove</b>
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -77,7 +81,9 @@
             <td>{{ item.email }}</td>
             <td v-if="item.user">{{ item.user.role }}</td>
             <td v-else></td>
-            <td></td>
+            <td>
+              <button type="button" class="btn" style="margin:2px; color: #60CBEB">Reset</button>
+            </td>
             <td>
               <button
                 type="button"

src/components/property/propertyCreate.vue

@@ -0,0 +1,567 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div>
+    <div class="container">
+      <div class="col-sm-12">
+        <br />
+        <div class="tobuy-img-box">
+          <img
+            v-if="propertyType === 'Commercial'"
+            src="img/Commercial-Property.jpg"
+            alt="Timeshare To Buy"
+            class="img-fluid"
+            style="width:800px;height:400px; border-radius:10px"
+          />
+          <img
+            v-else
+            src="img/Listing3.2.jpg"
+            alt="Timeshare To Buy"
+            class="img-fluid"
+            style="width:800px;height:400px; border-radius:10px"
+          />
+        </div>
+        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+          <h3 class="sinse-title">List {{ propertyType }} {{ salesType }} Property CREATE PAGE</h3>
+        </div>
+      </div>
+      <br />
+      <div class="row">
+        <div class="container col-md-10">
+          <div class="title-box-d">
+            <h5 class="title-d" style="text-align:left">Property Overview</h5>
+          </div>
+        </div>
+      </div>
+      <div class="row mb-3">
+        <div class="container col-md-10" style="text-align:left">
+          <form id="mainForm">
+            <div class="form-goup row">
+              <div class="col-md-4">
+                <label>Usage Type</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>U</b>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyUsageType"
+                    id="propertyUsageType"
+                    v-model="property.propertyUsageType"
+                    @change="TypeChanged"
+                  >
+                    <option value="Residential">Residential</option>
+                    <option value="Commercial">Commercial</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="form-group row">
+              <div class="col-md-4">
+                <label>Property Type</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>T</b>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="propertyType"
+                    v-model="property.propertyTypeId"
+                  >
+                    <option value="0">Please select type</option>
+                    <option
+                      v-for="item in propertyTypes"
+                      :value="item.id"
+                      :key="item.id"
+                    >{{ item.description }}</option>
+                  </select>
+                </div>
+              </div>
+              <div v-if="propertyType === 'Commercial'" class="col-md-4">
+                <label>Property Name</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>N</b>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="propertyName"
+                    id="propertyName"
+                    v-model="property.propertyName"
+                  />
+                </div>
+              </div>
+              <div v-if="propertyType === 'Commercial'" class="col-md-4">
+                <label>Unit</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>U#</b>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="unit"
+                    id="unit"
+                    v-model="property.unit"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="form-group row">
+              <div class="col-md-6" style="margin-bottom: 1em">
+                <label>Street Number</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="streetnumber"
+                    v-model="property.addressLine1"
+                  />
+                </div>
+              </div>
+              <div class="col-md-6" style="margin-bottom: 1em">
+                <label>Street Name</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="streetname"
+                    id="streetname"
+                    v-model="property.addressLine2"
+                  />
+                </div>
+              </div>
+              <div class="col-md-6" style="margin-bottom: 1em">
+                <label>Province</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="propertyType"
+                    @change="ProvinceSelected"
+                    v-model="property.provinceId"
+                  >
+                    <option value="0">Please select province</option>
+                    <option
+                      v-for="province in provinces"
+                      :value="province.id"
+                      :key="province.id"
+                    >{{ province.description }}</option>
+                  </select>
+                </div>
+              </div>
+
+              <div class="col-md-6" style="margin-bottom: 1em">
+                <label>City</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="propertyType"
+                    @change="CitySelected"
+                    v-model="property.cityId"
+                  >
+                    <option value="0">Please select city</option>
+                    <option
+                      v-for="city in cities"
+                      :value="city.id"
+                      :key="city.id"
+                    >{{ city.description }}</option>
+                  </select>
+                </div>
+              </div>
+              <div class="col-md-6" style="margin-bottom: 1em">
+                <label>Suburb</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="suburbselector"
+                    v-model="property.suburbId"
+                    @change="getPostalCode"
+                  >
+                    <option value="0">Please select suburb</option>
+                    <option
+                      v-for="suburb in suburbs"
+                      :value="suburb.id"
+                      :key="suburb.id"
+                    >{{ suburb.description }}</option>
+                  </select>
+                </div>
+              </div>
+              <div class="col-md-6" style="margin-bottom: 1em">
+                <label>Postal Code</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="postalcode"
+                    v-model="property.addressLine3"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div class="form-group row">
+              <div class="col-md-6">
+                <label v-if="salesType === 'Rental'">Rental Price</label>
+                <label v-if="salesType !== 'Rental'">Sales Price</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>R</b>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="number"
+                    name="price"
+                    id="price"
+                    placeholder="R"
+                    v-model="property.price"
+                  />
+                </div>
+              </div>
+              <div class="col-md-6" v-if="salesType === 'Rental'">
+                <label>Per</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>D/M</b>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="propertyType"
+                    v-model="property.pricePer"
+                  >
+                    <option value>Please select</option>
+                    <option value="Month">Month</option>
+                    <option value="Day">Day</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="form-group row">
+              <div class="col-md-12">
+                <label for="Property Description">Description</label>
+                <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
+                <br />
+                <p>* A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate website</p>
+              </div>
+            </div>
+            <div class="form-group row" />
+            <UserField
+              v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
+              :fields="propertyOverviewFields[0].fields"
+              @UpdateUserDefinedFields="UpdateUserDefinedFields"
+              :id="1"
+            ></UserField>
+            <div class="form-group row" />
+            <div v-for="item in propertyFields" :key="item.id">
+              <div class="row">
+                <div class="col-sm-12">
+                  <div class="title-box-d">
+                    <h5 class="title-d">{{ item.name }}</h5>
+                  </div>
+                </div>
+              </div>
+              <UserField
+                :fields="item.fields"
+                :id="item.name"
+                @UpdateUserDefinedFields="UpdateUserDefinedFields"
+                :fieldValues="item.fields"
+              />
+            </div>
+            <div class="form-group row" />
+            <div class="row">
+              <div class="col-sm-12">
+                <div class="title-box-d">
+                  <h5 class="title-d">Media</h5>
+                </div>
+              </div>
+            </div>
+            <div class="form-group row">
+              <div class="col-md-12">
+                <label>Virtual Tour (URL)</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>VT</b>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="link"
+                    name="vtlink"
+                    id="vtlink"
+                    v-model="property.virtualTour"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="form-group row">
+              <div class="col-md-12">
+                <label>Video (URL)</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>V</b>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="link"
+                    name="vlink"
+                    id="vlink"
+                    v-model="property.video"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="form-group row">
+              <div class="col-md-6">
+                <label>Images</label>
+                <div class="input-group-prepend"></div>
+              </div>
+            </div>
+            <ImageLoad
+              :loadedImages="loadedImages"
+              :savedImages="propertyImages"
+              @DefaultImage="UpdateDefaultImage"
+            />
+            <button
+              v-if="!wait"
+              type="button"
+              @click="SubmitData()"
+              class="btn btn-b-n"
+              style="width: 85px; height:40px;"
+            >Save</button>
+            <button
+              v-if="isEdit"
+              type="button"
+              @click="Close()"
+              class="btn btn-b-n"
+              style="width: 85px; height:40px;"
+            >Close</button>
+            <div v-if="wait" id="preloader"></div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+import { VueEditor } from 'vue2-editor';
+import { setTimeout } from 'timers';
+import UserField from './propertyUserField.vue';
+import ImageLoad from './propertyImage.vue';
+
+export default {
+  name: 'PropertyEdit',
+  components: {
+    UserField,
+    ImageLoad,
+    VueEditor,
+  },
+  data() {
+    return {
+      propertyType: 'Residential',
+      salesType: 'Rental',
+      selectedProvince: '',
+      selectedCity: '',
+      images: [],
+      propertyFieldValues: [],
+      defaultImage: 0,
+      wait: false,
+      customToolbar: [
+        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
+        ['bold', 'italic', 'underline', 'strike'],
+        [
+          { align: '' },
+          { align: 'center' },
+          { align: 'right' },
+          { align: 'justify' },
+        ],
+        [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+        [{ script: 'sub' }, { script: 'super' }],
+        [{ indent: '-1' }, { indent: '+1' }],
+      ],
+    };
+  },
+  methods: {
+    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
+    ...mapActions('property', [
+      'getPropertyTypes',
+      'getPropertyOverviewFields',
+      'getPropertyFields',
+      'saveProperty',
+      'getProperty',
+      'getPropertyImages',
+      'clearProperty',
+      'clearPropertyImages',
+      'getPropertyEditDisplay',
+      'getPropertySavedOverviewFields',
+      'getPropertySavedFields',
+      'getSavedPropertyData',
+    ]),
+    TypeChanged() {
+      this.propertyType = this.property.propertyUsageType;
+    },
+    SubmitData() {
+      this.wait = true;
+      if (this.salesType === 'Sale') {
+        this.property.isSale = true;
+      }
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < this.images.length; i++) {
+        let setAsDefault = false;
+        if (i === this.defaultImage) {
+          setAsDefault = true;
+        }
+        this.property.propertyImages.push({
+          image: this.images[i],
+          isDefault: setAsDefault,
+        });
+      }
+      this.property.propertyUserFields = this.propertyFieldValues;
+
+      this.property.userId = this.user.id;
+      this.saveProperty(this.property);
+      setTimeout(
+        () => this.$router.push({
+            path: '/property/Search',
+            query: {
+              salesType: this.salesType,
+              propertyUsageType: this.propertyType,
+            },
+          }),
+        3000,
+      );
+    },
+    Close() {
+      this.$router.push('/property/admin/list/my');
+    },
+    ProvinceSelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.selectedProvince = this.provinces[
+          item.target.options.selectedIndex - 1
+        ].description;
+        this.getCities(Object.assign({}, { province: this.selectedProvince }));
+      }
+    },
+    CitySelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.selectedCity = this.cities[
+          item.target.options.selectedIndex - 1
+        ].description;
+        this.getSuburbs(
+          Object.assign(
+            {},
+            { province: this.selectedProvince, city: this.selectedCity },
+          ),
+        );
+      }
+    },
+    getPostalCode(item) {
+      this.property.addressLine3 = this.suburbs[
+        item.target.options.selectedIndex - 1
+      ].postalCode;
+    },
+    loadedImages(values) {
+      this.images = values;
+    },
+    UpdateUserDefinedFields(item) {
+      let update = false;
+      this.propertyFieldValues.forEach((element) => {
+        if (element.userDefinedFieldId === item.userDefinedFieldId) {
+          element.value = item.value;
+          update = true;
+        }
+      });
+      if (!update) {
+        this.propertyFieldValues.push(item);
+      }
+    },
+    UpdateDefaultImage(item) {
+      this.defaultImage = item;
+    },
+  },
+  mounted() {
+    this.wait = false;
+    this.clearProperty();
+    this.clearPropertyImages();
+    this.images = [];
+    this.defaultImage = 0;
+
+    if (this.propertyOverviewFields.length > 0) {
+      this.propertyOverviewFields = [];
+    }
+    if (this.propertyFields.length > 0) {
+      this.propertyFields = [];
+    }
+    if (this.property.description !== '') {
+      this.property.description = '';
+    }
+
+    if (this.$route.params.propertyUsageType) {
+      this.propertyType = this.$route.params.propertyUsageType;
+    }
+    this.salesType = this.$route.params.saleType;
+
+    this.getPropertyTypes(this.propertyType);
+
+    this.getProvince();
+    this.getPropertyOverviewFields();
+    this.getPropertyFields(this.propertyType);
+  },
+  computed: {
+    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
+    ...mapState('property', [
+      'propertyTypes',
+      'propertyOverviewFields',
+      'propertyFields',
+      'property',
+      'propertyImages',
+    ]),
+    ...mapState('authentication', ['user']),
+    SalesTypeChanged() {
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      // this.propertyType = this.$route.params.propType;
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.salesType = this.$route.params.saleType;
+      if (this.property && this.property.propertyUsageType) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.propertyType = this.property.propertyUsageType;
+      }
+
+      if (!this.$route.query.id) {
+        this.getPropertyFields(this.propertyType);
+      }
+
+      this.getPropertyTypes(this.propertyType);
+
+      return this.propertyType;
+    },
+  },
+  watch: {
+    SalesTypeChanged() {
+      return null;
+    },
+  },
+};
+</script>

src/components/property/propertyFieldEditor.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div>
+      <div v-if="!edit" class="input-group-prepend">
+        <input
+          class="form-control"
+          type="text"
+          name="currentField.name"
+          id="currentField.id"
+          v-model="display"
+          disabled
+        />
+        <span @click="EditClick()" class="input-group-text" style="color: #60CBEB">
+          <eva-icon name="edit-outline" fill="#60CBEB"></eva-icon>
+        </span>
+      </div>
+      <div v-if="edit" class="input-group-prepend">
+        <!-- Text -->
+        <input
+          v-if="editType === 'text'"
+          class="form-control"
+          type="text"
+          name="currentField.name"
+          id="currentField.id"
+          v-model="display"
+        />
+        <!-- Number -->
+        <input
+          v-if="editType === 'number'"
+          class="form-control"
+          type="number"
+          name="currentField.name"
+          id="currentField.id"
+          v-model="display"
+        />
+        <!-- Selector -->
+        <select
+          v-if="editType === 'selector'"
+          class="form-control"
+          v-model="selectorSelection"
+          @change="SelectorSelected"
+        >
+          <option value="0">Please select type</option>
+          <option v-for="item in arrayObject" :value="item.id" :key="item.id">{{ item.description }}</option>
+        </select>
+        <!-- yesno -->
+        <select v-if="editType === 'yesno'" class="form-control" @change="YesNoSelected">
+          <option></option>
+          <option value="yes">Yes</option>
+          <option value="no">No</option>
+        </select>
+        <span @click="Save()" class="input-group-text" style="color: #60CBEB">
+          <eva-icon name="checkmark-outline" fill="#60CBEB"></eva-icon>
+        </span>
+        <span @click="Close()" class="input-group-text" style="color: #60CBEB">
+          <eva-icon name="close-outline" fill="#60CBEB"></eva-icon>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'propertyFieldEdit',
+  props: {
+    display: String,
+    arrayObject: [],
+    canEdit: Boolean,
+    editType: String,
+  },
+  data() {
+    return {
+      edit: false,
+      selectorSelection: Object,
+    };
+  },
+  methods: {
+    EditClick() {
+      this.edit = true;
+    },
+    Save() {
+      this.edit = false;
+
+      // Need to emit the parent controller
+    },
+    Close() {
+      this.edit = false;
+    },
+    SelectorSelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.display = this.arrayObject[
+          item.target.options.selectedIndex - 1
+        ].description;
+        console.log(
+          this.arrayObject[item.target.options.selectedIndex - 1].description,
+        );
+      }
+    },
+    YesNoSelected(item) {
+      if (item.target.options.selectedIndex === 1) {
+        this.display = 'Yes';
+      }
+      if (item.target.options.selectedIndex === 2) {
+        this.display = 'No';
+      }
+    },
+  },
+};
+</script>

src/components/property/propertyList.vue

@@ -61,7 +61,12 @@
               >Edit</button>
             </td>
             <td>
-              <button type="button" class="btn" style="margin:2px; color: #60CBEB" disabled>Delete</button>
+              <button
+                type="button"
+                @click="Delete(item)"
+                class="btn btn-b-n"
+                style="width: 85px; height:40px;"
+              >Delete</button>
             </td>
           </tr>
         </tbody>
@@ -79,19 +84,21 @@ export default {
   data() {
     return {
       propertyType: '',
-      user: '',
       showAdmin: false,
     };
   },
   methods: {
-    ...mapActions('propertyList', ['getProperties']),
+    ...mapActions('propertyList', ['getProperties', 'deleteProperty']),
     Edit(item) {
       const salesType = item.isSale ? 'Sale' : 'Rental';
       this.$router.push({
-        path: `/property/${this.propertyType}/${salesType}`,
+        path: '/property/edit',
         query: { id: item.id },
       });
     },
+    Delete(item) {
+      this.deleteProperty(item.id);
+    },
   },
   mounted() {
     if (this.$route.params.by === 'my') {
@@ -102,20 +109,21 @@ export default {
       this.showAdmin = true;
     }
 
-    this.user = 28; // user id
+    // this.user = 28; // user id
 
     this.getProperties(
       Object.assign(
         {},
         {
           propertyType: this.showAdmin ? 'Admin' : 'My',
-          user: this.user,
+          user: this.user.id,
         },
       ),
     );
   },
   computed: {
     ...mapState('propertyList', ['properties']),
+    ...mapState('authentication', ['user']),
     UserChanged() {
       if (this.$route.params.by === 'my') {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties

src/components/property/propertyPage.vue

@@ -197,6 +197,54 @@
             </div>
           </div>
         </div>
+        <!-- Tab Control -->
+        <div class="row">
+          <div class="col-sm-12">
+            <div v-if="property.virtualTour" class="row justify-content-between">
+              <div class="col-md-7 col-lg-7 section-md-t3">
+                <div class="row">
+                  <div class="col-sm-12">
+                    <div class="title-box-d">
+                      <h3 class="title-d" style="text-align:left">Virtual Tour</h3>
+                    </div>
+                  </div>
+                </div>
+                <iframe
+                  :src="property.virtualTour"
+                  width="100%"
+                  height="500"
+                  frameborder="0"
+                  webkitallowfullscreen
+                  mozallowfullscreen
+                  allowfullscreen
+                ></iframe>
+              </div>
+            </div>
+            <div class="row">
+              <br />
+            </div>
+            <div v-if="property.video" class="row justify-content-between">
+              <div class="col-md-7 col-lg-7 section-md-t3">
+                <div class="row">
+                  <div class="col-sm-12">
+                    <div class="title-box-d">
+                      <h3 class="title-d" style="text-align:left">Video</h3>
+                    </div>
+                  </div>
+                </div>
+                <iframe
+                  :src="`https://www.youtube.com/embed/${property.video}`"
+                  width="100%"
+                  height="500"
+                  frameborder="0"
+                  style="border:0"
+                  allowfullscreen
+                ></iframe>
+              </div>
+            </div>
+          </div>
+          <!-- End Tab Control -->
+        </div>
       </div>
     </section>
   </div>

src/components/property/propertySearchPage.vue

@@ -180,6 +180,7 @@ export default {
   },
   computed: {
     ...mapState('propertySearch', ['properties']),
+    ...mapState('authentication', ['username']),
     ParamsChanged() {
       if (Object.keys(this.$route.query).length === 0) {
         if (this.propertySearch.propertyUsageType === 'All') {
@@ -210,13 +211,20 @@ export default {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.propertySearch.keyword = 'All';
       }
+      if (this.username) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.propertySearch.userName = this.username;
+      } else {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.propertySearch.userName = 'Unknown';
+      }
       this.searchProperties(this.propertySearch);
       return null;
     },
   },
   watch: {
     ParamsChanged() {
-      console.log(JSON.stringify(this.$route.query));
+      return null;
     },
   },
 };

src/components/property/propertyeditPage.vue

@@ -21,7 +21,7 @@
           />
         </div>
         <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
-          <h3 class="sinse-title">List {{ propertyType }} {{ salesType }} Property</h3>
+          <h3 class="sinse-title">Edit Property: {{ property.shortDescription }}</h3>
         </div>
       </div>
       <br />
@@ -39,185 +39,63 @@
               <div class="col-md-4">
                 <label>Usage Type</label>
                 <div class="input-group-prepend">
-                  <span class="input-group-text" style="color: #60CBEB">
+                  <!-- <span class="input-group-text" style="color: #60CBEB">
                     <b>U</b>
-                  </span>
-                  <select
+                  </span>-->
+                  <input
                     class="form-control"
-                    name="propertyUsageType"
-                    id="propertyUsageType"
-                    v-model="propertyType"
-                    @change="TypeChanged"
-                  >
-                    <option value="Residential">Residential</option>
-                    <option value="Commercial">Commercial</option>
-                  </select>
+                    type="text"
+                    name="unit"
+                    id="unit"
+                    v-model="property.propertyUsageType"
+                    disabled
+                  />
                 </div>
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-4">
                 <label>Property Type</label>
-                <div class="input-group-prepend">
-                  <span class="input-group-text" style="color: #60CBEB">
-                    <b>T</b>
-                  </span>
-                  <select
-                    class="form-control"
-                    name="propertyType"
-                    id="propertyType"
-                    v-model="property.propertyTypeId"
-                  >
-                    <option value="0">Please select type</option>
-                    <option
-                      v-for="item in propertyTypes"
-                      :value="item.id"
-                      :key="item.id"
-                    >{{ item.description }}</option>
-                  </select>
-                </div>
+                <propField
+                  :display="property.propertyType.description"
+                  :editType="'Selector'"
+                  :arrayObject="propertyTypes"
+                />
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Property Name</label>
-                <div class="input-group-prepend">
-                  <span class="input-group-text" style="color: #60CBEB">
-                    <b>N</b>
-                  </span>
-                  <input
-                    class="form-control"
-                    type="text"
-                    name="propertyName"
-                    id="propertyName"
-                    v-model="property.propertyName"
-                  />
-                </div>
+                <propField :display="property.proeprtyName" :editType="'text'" />
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Unit</label>
-                <div class="input-group-prepend">
-                  <span class="input-group-text" style="color: #60CBEB">
-                    <b>U#</b>
-                  </span>
-                  <input
-                    class="form-control"
-                    type="text"
-                    name="unit"
-                    id="unit"
-                    v-model="property.unit"
-                  />
-                </div>
+                <propField :label="'Property Type'" :display="property.unit" :editType="'text'" />
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Street Number</label>
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    type="text"
-                    name="streetnumber"
-                    v-model="property.addressLine1"
-                  />
-                </div>
+                <propField :display="property.addressLine1" :editType="'text'" />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Street Name</label>
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    type="text"
-                    name="streetname"
-                    id="streetname"
-                    v-model="property.addressLine2"
-                  />
-                </div>
+                <propField :display="property.addressLine2" :editType="'text'" />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Province</label>
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <select
-                    class="form-control"
-                    name="propertyType"
-                    id="propertyType"
-                    @change="ProvinceSelected"
-                    v-model="property.provinceId"
-                  >
-                    <option value="0">Please select province</option>
-                    <option
-                      v-for="province in provinces"
-                      :value="province.id"
-                      :key="province.id"
-                    >{{ province.description }}</option>
-                  </select>
-                </div>
+                <propField :display="property.province.description" :editType="'selector'" />
               </div>
 
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>City</label>
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <select
-                    class="form-control"
-                    name="propertyType"
-                    id="propertyType"
-                    @change="CitySelected"
-                    v-model="property.cityId"
-                  >
-                    <option value="0">Please select city</option>
-                    <option
-                      v-for="city in cities"
-                      :value="city.id"
-                      :key="city.id"
-                    >{{ city.description }}</option>
-                  </select>
-                </div>
+                <propField :display="property.city.description" :editType="'selector'" />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Suburb</label>
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <select
-                    class="form-control"
-                    name="propertyType"
-                    id="suburbselector"
-                    v-model="property.suburbId"
-                    @change="getPostalCode"
-                  >
-                    <option value="0">Please select suburb</option>
-                    <option
-                      v-for="suburb in suburbs"
-                      :value="suburb.id"
-                      :key="suburb.id"
-                    >{{ suburb.description }}</option>
-                  </select>
-                </div>
+                <propField :display="property.suburb.description" :editType="'selector'" />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Postal Code</label>
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    type="text"
-                    name="postalcode"
-                    v-model="property.addressLine3"
-                  />
-                </div>
+                <propField :display="property.addressLine3" :editType="'text'" />
               </div>
             </div>
 
@@ -225,37 +103,11 @@
               <div class="col-md-6">
                 <label v-if="salesType === 'Rental'">Rental Price</label>
                 <label v-if="salesType !== 'Rental'">Sales Price</label>
-                <div class="input-group-prepend">
-                  <span class="input-group-text" style="color: #60CBEB">
-                    <b>R</b>
-                  </span>
-                  <input
-                    class="form-control"
-                    type="number"
-                    name="price"
-                    id="price"
-                    placeholder="R"
-                    v-model="property.price"
-                  />
-                </div>
+                <propField :display="property.price" :editType="'number'" />
               </div>
               <div class="col-md-6" v-if="salesType === 'Rental'">
                 <label>Per</label>
-                <div class="input-group-prepend">
-                  <span class="input-group-text" style="color: #60CBEB">
-                    <b>D/M</b>
-                  </span>
-                  <select
-                    class="form-control"
-                    name="propertyType"
-                    id="propertyType"
-                    v-model="property.pricePer"
-                  >
-                    <option value>Please select</option>
-                    <option value="Month">Month</option>
-                    <option value="Day">Day</option>
-                  </select>
-                </div>
+                <propField :display="property.pricePer" :editType="'text'" />
               </div>
             </div>
             <div class="form-group row">
@@ -267,40 +119,68 @@
               </div>
             </div>
             <div class="form-group row" />
-            <UserField
+            <div
+              class="col-md-6"
               v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
-              :fields="propertyOverviewFields[0].fields"
-              @UpdateUserDefinedFields="UpdateUserDefinedFields"
-              :id="1"
-            ></UserField>
+            >
+              <div v-for="item in propertyOverviewFields[0].fields" :key="item.id">
+                <label>{{ item.name }}</label>
+                <propField :display="item.value" :editType="item.type" />
+              </div>
+            </div>
+
             <div class="form-group row" />
-            <div v-for="item in propertyFields" :key="item.id">
+            <div v-for="group in propertyFields" :key="group.id">
               <div class="row">
                 <div class="col-sm-12">
                   <div class="title-box-d">
-                    <h5 class="title-d">{{ item.name }}</h5>
+                    <h5 class="title-d">{{ group.name }}</h5>
                   </div>
                 </div>
               </div>
-              <UserField
+              <div v-for="field in group.fields" :key="field.id">
+                <label>{{ field.name }}</label>
+                <propField :display="field.value" :editType="field.type" />
+              </div>
+              <!-- <UserField
                 :fields="item.fields"
                 :id="item.name"
                 @UpdateUserDefinedFields="UpdateUserDefinedFields"
-              />
+                :fieldValues="item.fields"
+              />-->
             </div>
             <div class="form-group row" />
             <div class="row">
               <div class="col-sm-12">
                 <div class="title-box-d">
-                  <h5 class="title-d">Images</h5>
+                  <h5 class="title-d">Media</h5>
                 </div>
               </div>
             </div>
-            <ImageLoad
-              :loadedImages="loadedImages"
-              :savedImages="propertyImages"
-              @DefaultImage="UpdateDefaultImage"
-            />
+            <div class="form-group row">
+              <div class="col-md-12">
+                <label>Virtual Tour (URL)</label>
+                <propField :display="property.virtualTour" :editType="'text'" />
+              </div>
+            </div>
+            <div class="form-group row">
+              <div class="col-md-12">
+                <label>Video (URL)</label>
+                <propField :display="property.video" :editType="'text'" />
+              </div>
+            </div>
+            <div class="form-group row">
+              <div class="col-md-6">
+                <label>Images</label>
+                <div class="input-group-prepend"></div>
+              </div>
+            </div>
+            <div class="form-group row">
+              <div class="col-md-6" v-for="(img, i) in propertyImages" :key="i">
+                <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
+              </div>
+            </div>
+            <ImageLoad :loadedImages="loadedImages" @DefaultImage="UpdateDefaultImage" />
             <button
               v-if="!wait"
               type="button"
@@ -308,6 +188,13 @@
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
             >Save</button>
+            <button
+              v-if="isEdit"
+              type="button"
+              @click="Close()"
+              class="btn btn-b-n"
+              style="width: 85px; height:40px;"
+            >Close</button>
             <div v-if="wait" id="preloader"></div>
           </form>
         </div>
@@ -320,15 +207,15 @@
 import { mapState, mapActions } from 'vuex';
 import { VueEditor } from 'vue2-editor';
 import { setTimeout } from 'timers';
-import UserField from './propertyUserField.vue';
 import ImageLoad from './propertyImage.vue';
+import propField from './propertyFieldEditor.vue';
 
 export default {
   name: 'PropertyEdit',
   components: {
-    UserField,
     ImageLoad,
     VueEditor,
+    propField,
   },
   data() {
     return {
@@ -353,6 +240,7 @@ export default {
         [{ script: 'sub' }, { script: 'super' }],
         [{ indent: '-1' }, { indent: '+1' }],
       ],
+      isEdit: false,
     };
   },
   methods: {
@@ -371,12 +259,15 @@ export default {
       'getPropertySavedFields',
       'getSavedPropertyData',
     ]),
-    TypeChanged() {},
+    TypeChanged() {
+      this.propertyType = this.property.propertyUsageType;
+    },
     SubmitData() {
       this.wait = true;
       if (this.salesType === 'Sale') {
         this.property.isSale = true;
       }
+      // eslint-disable-next-line no-plusplus
       for (let i = 0; i < this.images.length; i++) {
         let setAsDefault = false;
         if (i === this.defaultImage) {
@@ -389,18 +280,25 @@ export default {
       }
       this.property.propertyUserFields = this.propertyFieldValues;
 
-      this.saveProperty(this.property);
-
-      setTimeout(
-        () => this.$router.push({
-            path: '/property/Search',
-            query: {
-              salesType: this.salesType,
-              propertyUsageType: this.propertyType,
-            },
-          }),
-        3000,
-      );
+      if (this.property.id === 0) {
+        this.property.userId = this.user.id;
+        this.saveProperty(this.property);
+        setTimeout(
+          () => this.$router.push({
+              path: '/property/Search',
+              query: {
+                salesType: this.salesType,
+                propertyUsageType: this.propertyType,
+              },
+            }),
+          3000,
+        );
+      } else {
+        setTimeout(() => this.$router.push('/property/admin/list/my'), 3000);
+      }
+    },
+    Close() {
+      this.$router.push('/property/admin/list/my');
     },
     ProvinceSelected(item) {
       if (item.target.options.selectedIndex > 0) {
@@ -473,36 +371,14 @@ export default {
 
     this.getProvince();
     if (this.$route.query.id) {
-      // this.getCities(Object.assign({}, { province: this.selectedProvince }));
       this.getSavedPropertyData(
         Object.assign({}, { id: this.$route.query.id, type: this.propertyType }),
       );
+      this.isEdit = true;
     } else {
       this.getPropertyOverviewFields();
       this.getPropertyFields(this.propertyType);
     }
-    // if (this.$route.params.id) {
-    //   this.getPropertyEditDisplay(4); // (this.$route.params.id);
-    //   this.propertyType = 'Residential'; // this.propertyEditDisplay.propertyType;
-    //   this.salesType = 'Rental'; // this.propertyEditDisplay.saleType;
-
-    //   this.getProvince();
-    //   this.getPropertyTypes('Residential');
-    //   this.getPropertySavedOverviewFields(4);
-    //   this.getPropertySavedFields(
-    //     Object.assign(
-    //       {},
-    //       {
-    //         type: 'Residential',
-    //         id: 4,
-    //       },
-    //     ),
-    //   );
-
-    //   this.getProperty(this.$route.params.id);
-    // } else {
-
-    // }
   },
   computed: {
     ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
@@ -513,22 +389,29 @@ export default {
       'property',
       'propertyImages',
     ]),
+    ...mapState('authentication', ['user']),
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       // this.propertyType = this.$route.params.propType;
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       this.salesType = this.$route.params.saleType;
+      if (this.property && this.property.propertyUsageType) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.propertyType = this.property.propertyUsageType;
+      }
+
       if (!this.$route.query.id) {
-        this.getPropertyTypes(this.propertyType);
         this.getPropertyFields(this.propertyType);
       }
 
+      this.getPropertyTypes(this.propertyType);
+
       return this.propertyType;
     },
   },
   watch: {
     SalesTypeChanged() {
-      console.log(this.salesType);
+      return null;
     },
   },
 };

src/components/shared/alert.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="container">
     <!-- eslint-disable max-len -->
-    <div class="alert alert-success" v-if="type === 'SUCCESS'">
-      <eva-icon name="checkmark-outline"></eva-icon>
-      <strong>{{ text }}</strong>
+    <div class="alert mySuccess" v-if="type === 'SUCCESS'">
+      <eva-icon name="checkmark-outline" style="margin: 0px 20px"></eva-icon>
+      <strong class="color-black">{{ text }}</strong>
     </div>
-    <div class="alert alert-info" v-if="type === 'INFO'">
-      <eva-icon name="info-outline"></eva-icon>
-      <strong>{{ text }}</strong>
+    <div class="alert myInfo" v-if="type === 'INFO'">
+      <eva-icon name="info-outline" style="margin: 0px 20px"></eva-icon>
+      <strong class="color-black">{{ text }}</strong>
     </div>
-    <div class="alert alert-warning" v-if="type === 'WARNING'">
-      <eva-icon name="alert-circle-outline"></eva-icon>
+    <div class="alert myWarning" v-if="type === 'WARNING'">
+      <eva-icon name="alert-circle-outline" style="margin: 0px 20px"></eva-icon>
       <strong class="color-black">{{ text }}</strong>
     </div>
-    <div class="alert alert-danger" v-if="type === 'ERROR'">
-      <eva-icon name="slash-outline"></eva-icon>
-      <strong>{{ text }}</strong>
+    <div class="alert myError" v-if="type === 'ERROR'">
+      <eva-icon name="slash-outline" style="margin: 0px 20px"></eva-icon>
+      <strong class="color-black">{{ text }}</strong>
     </div>
   </div>
 </template>

src/components/user/loginPage.vue

@@ -129,9 +129,18 @@ export default {
       } else this.troubleToggle = true;
     },
     Login() {
+      console.log(this.$store.state.authentication);
+
       this.login().then(() => {
+        console.log('this');
+        console.log(this);
+        console.log(this.$store.state.authentication.status);
+
         if (this.$store.state.authentication.status === 'error') {
           this.$router.push('/user/login');
+        } else {
+          console.log('yippy tequila');
+          this.$router.push('/about/us');
         }
       });
     },

src/components/user/updateProfileInfo.vue

@@ -36,10 +36,23 @@
             <td>
               <button
                 type="button"
-                @click="Edit(item)"
+                data-toggle="modal"
+                :data-target="'#myModal' + i"
                 class="btn"
                 style="margin:2px; color: #60CBEB"
               >Edit</button>
+              <div :id="'myModal' + i" class="modal fade" role="dialog">
+                <div class="modal-dialog modal-lg">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+                    <div padding-left="20px">
+                      <Individual name="PrivateIndividual" :isAddIndividual="false" :item="item" />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </td>
           </tr>
         </tbody>
@@ -51,12 +64,17 @@
 
 <script>
 import { mapState, mapActions } from 'vuex';
-// import axios from 'axios';
+import Individual from './registerPage.vue';
 
 export default {
   name: 'UpdateInfo',
+  components: {
+    Individual,
+  },
   data() {
-    return {};
+    return {
+      item: {},
+    };
   },
   methods: {
     ...mapActions('register', ['getIndividuals']),

src/router/index.js

@@ -18,6 +18,7 @@ import UpdateInfo from '../components/user/updateProfileInfo.vue';
 import PropertySearch from '../components/property/propertySearchPage.vue';
 import PropertyPage from '../components/property/propertyPage.vue';
 import PropertyEdit from '../components/property/propertyeditPage.vue';
+import PropertyCreate from '../components/property/propertyCreate.vue';
 import PropertyList from '../components/property/propertyList.vue';
 import PropertyTypeList from '../components/admin/property/propertyTypeList.vue';
 import PropertyType from '../components/admin/property/propertyTypeEdit.vue';
@@ -58,207 +59,208 @@ export default new Router({
       y: 0,
     };
   },
-  routes: [{
-    path: '/',
-    name: 'Home',
-    component: HomePage,
-  },
-  {
-    path: '/about/us',
-    name: 'aboutus',
-    component: AboutUs,
-  },
-  {
-    path: '/about/timeshare',
-    name: 'abouttimeshare',
-    component: AboutTimeshare,
-  },
-  {
-    path: '/communication/template',
-    name: 'template',
-    component: TemplatePage,
-  },
-  {
-    path: '/timeshare/sell',
-    name: 'TimeshareSell',
-    component: TimeshareSell,
-  },
-  {
-    path: '/timeshare/buy',
-    name: 'TimeshareBuy',
-    component: TimeshareBuy,
-  },
-  {
-    path: '/timeshare/faq',
-    name: 'TimeshareFAQ',
-    component: TimeshareFAQ,
-  },
-  {
-    path: '/timeshare/myWeeks',
-    name: 'MyWeeks',
-    component: MyWeeksPage,
-  },
-  {
-    path: ' ',
-    name: 'Login',
-    component: Login,
-  },
-  {
-    path: '/user/updateProfileInfo',
-    name: 'UpdateInfo',
-    component: UpdateInfo,
-  },
-  {
-    path: '/user/register',
-    name: 'PrivateIndividual',
-    component: PrivateIndividual,
-  },
-  {
-    path: '/user/registeragency',
-    name: 'Agency',
-    component: Agency,
-  },
-  {
-    path: '/property/property/:id',
-    name: 'PropertyPage',
-    component: PropertyPage,
-  },
-  {
-    path: '/property/:propertyUsageType/search',
-    name: 'PropertySearch',
-    component: PropertySearch,
-  },
-  {
-    path: '/property/search',
-    name: 'PropertySearchTab',
-    component: PropertySearch,
-  },
-  {
-    path: '/property/new/:saleType',
-    name: 'PropertyNew',
-    component: PropertyEdit,
-  },
-  {
-    path: '/property/new/:propertyUsageType/:saleType',
-    name: 'PropertyNewFromSearch',
-    component: PropertyEdit,
-  },
-  {
-    path: '/property/edit/:id/:propType/:saleType',
-    name: 'PropertyEdit',
-    component: PropertyEdit,
-  },
-  {
-    path: '/property/admin/list/:by',
-    name: 'PropertyListAdmin',
-    component: PropertyList,
-  },
-  {
-    path: '/propertyTypes/list',
-    name: 'PropertyTypeList',
-    component: PropertyTypeList,
-  },
-  {
-    path: '/propertyType/new',
-    name: 'PropertyTypeNew',
-    component: PropertyType,
-  },
-  {
-    path: '/propertyType/:id',
-    name: 'PropertyTypeEdit',
-    component: PropertyType,
-  },
-  {
-    path: '/userDefinedGroups/list',
-    name: 'UserDefinedGroupsList',
-    component: UserDefinedGroups,
-  },
-  {
-    path: '/userDefinedGroups/userDefinedGroup/:id',
-    name: 'UserDefinedGroupEdit',
-    component: UserDefinedGroup,
-  },
-  {
-    path: '/userDefinedGroups/userDefinedGroup',
-    name: 'UserDefinedGroupNew',
-    component: UserDefinedGroup,
-  },
-  {
-    path: '/status/list',
-    name: 'StatusList',
-    component: Status,
-  },
-  {
-    path: '/status/timeshareAdmin',
-    name: 'TimeshareAdmin',
-    component: timeshareAdminPage,
-  },
-  {
-    path: '/status/tenderWeekAdmin',
-    name: 'TenderWeekAdmin',
-    component: tenderWeekAdminPage,
-  },
-  {
-    path: '/status/userManagementPage',
-    name: 'userManagementPage',
-    component: userManagementPage,
-  },
-  {
-    path: '/status/agentUserManagementPage',
-    name: 'agentManagementPage',
-    component: agentManagementPage,
-  },
-  {
-    path: '/status/changeLogPage',
-    name: 'changeLogPage',
-    component: changeLogPage,
-  },
-  {
-    path: '/unitConfiguration/list',
-    name: 'UnitConfiguration',
-    component: UnitConfiguration,
-  },
-  {
-    path: '/contactus',
-    name: 'ContactUs',
-    component: ContactUs,
-  },
-  {
-    path: '/privacypolicy',
-    name: 'PrivacyPolicy',
-    component: PrivacyPolicy,
-  },
-  {
-    path: '/resort/:resortCode',
-    name: 'ResortPage',
-    component: ResortPage,
-    props: true,
-  },
-  {
-    path: '/resort/:resortCode/:weekId',
-    name: 'UnitPage',
-    component: UnitPage,
-    props: true,
-  },
-  {
-    path: '/MakeOffer',
-    name: 'MakeOffer',
-    component: MakeOffer,
-  },
-  {
-    path: '/Offers',
-    name: 'Offers',
-    component: Offer,
-  },
-  {
-    path: '/timeshare/search',
-    name: 'TimeshareSearch',
-    component: TimeshareSearch,
-  },
-  {
-    path: '/searchLog',
-    name: 'SearchLog',
-    component: searchLog,
-  },
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: HomePage,
+    },
+    {
+      path: '/about/us',
+      name: 'aboutus',
+      component: AboutUs,
+    },
+    {
+      path: '/about/timeshare',
+      name: 'abouttimeshare',
+      component: AboutTimeshare,
+    },
+    {
+      path: '/communication/template',
+      name: 'template',
+      component: TemplatePage,
+    },
+    {
+      path: '/timeshare/sell',
+      name: 'TimeshareSell',
+      component: TimeshareSell,
+    },
+    {
+      path: '/timeshare/buy',
+      name: 'TimeshareBuy',
+      component: TimeshareBuy,
+    },
+    {
+      path: '/timeshare/faq',
+      name: 'TimeshareFAQ',
+      component: TimeshareFAQ,
+    },
+    {
+      path: '/timeshare/myWeeks',
+      name: 'MyWeeks',
+      component: MyWeeksPage,
+    },
+    {
+      path: '/user/login',
+      name: 'Login',
+      component: Login,
+    },
+    {
+      path: '/user/updateProfileInfo',
+      name: 'UpdateInfo',
+      component: UpdateInfo,
+    },
+    {
+      path: '/user/register',
+      name: 'PrivateIndividual',
+      component: PrivateIndividual,
+    },
+    {
+      path: '/user/registeragency',
+      name: 'Agency',
+      component: Agency,
+    },
+    {
+      path: '/property/property/:id',
+      name: 'PropertyPage',
+      component: PropertyPage,
+    },
+    {
+      path: '/property/:propertyUsageType/search',
+      name: 'PropertySearch',
+      component: PropertySearch,
+    },
+    {
+      path: '/property/search',
+      name: 'PropertySearchTab',
+      component: PropertySearch,
+    },
+    {
+      path: '/property/new/:saleType',
+      name: 'PropertyNew',
+      component: PropertyCreate,
+    },
+    {
+      path: '/property/new/:propertyUsageType/:saleType',
+      name: 'PropertyNewFromSearch',
+      component: PropertyCreate,
+    },
+    {
+      path: '/property/edit',
+      name: 'PropertyEdit',
+      component: PropertyEdit,
+    },
+    {
+      path: '/property/admin/list/:by',
+      name: 'PropertyListAdmin',
+      component: PropertyList,
+    },
+    {
+      path: '/propertyTypes/list',
+      name: 'PropertyTypeList',
+      component: PropertyTypeList,
+    },
+    {
+      path: '/propertyType/new',
+      name: 'PropertyTypeNew',
+      component: PropertyType,
+    },
+    {
+      path: '/propertyType/:id',
+      name: 'PropertyTypeEdit',
+      component: PropertyType,
+    },
+    {
+      path: '/userDefinedGroups/list',
+      name: 'UserDefinedGroupsList',
+      component: UserDefinedGroups,
+    },
+    {
+      path: '/userDefinedGroups/userDefinedGroup/:id',
+      name: 'UserDefinedGroupEdit',
+      component: UserDefinedGroup,
+    },
+    {
+      path: '/userDefinedGroups/userDefinedGroup',
+      name: 'UserDefinedGroupNew',
+      component: UserDefinedGroup,
+    },
+    {
+      path: '/status/list',
+      name: 'StatusList',
+      component: Status,
+    },
+    {
+      path: '/status/timeshareAdmin',
+      name: 'TimeshareAdmin',
+      component: timeshareAdminPage,
+    },
+    {
+      path: '/status/tenderWeekAdmin',
+      name: 'TenderWeekAdmin',
+      component: tenderWeekAdminPage,
+    },
+    {
+      path: '/status/userManagementPage',
+      name: 'userManagementPage',
+      component: userManagementPage,
+    },
+    {
+      path: '/status/agentUserManagementPage',
+      name: 'agentManagementPage',
+      component: agentManagementPage,
+    },
+    {
+      path: '/status/changeLogPage',
+      name: 'changeLogPage',
+      component: changeLogPage,
+    },
+    {
+      path: '/unitConfiguration/list',
+      name: 'UnitConfiguration',
+      component: UnitConfiguration,
+    },
+    {
+      path: '/contactus',
+      name: 'ContactUs',
+      component: ContactUs,
+    },
+    {
+      path: '/privacypolicy',
+      name: 'PrivacyPolicy',
+      component: PrivacyPolicy,
+    },
+    {
+      path: '/resort/:resortCode',
+      name: 'ResortPage',
+      component: ResortPage,
+      props: true,
+    },
+    {
+      path: '/resort/:resortCode/:weekId',
+      name: 'UnitPage',
+      component: UnitPage,
+      props: true,
+    },
+    {
+      path: '/MakeOffer',
+      name: 'MakeOffer',
+      component: MakeOffer,
+    },
+    {
+      path: '/Offers',
+      name: 'Offers',
+      component: Offer,
+    },
+    {
+      path: '/timeshare/search',
+      name: 'TimeshareSearch',
+      component: TimeshareSearch,
+    },
+    {
+      path: '/searchLog',
+      name: 'SearchLog',
+      component: searchLog,
+    },
   ],
 });

src/store/modules/property/property.js

@@ -24,6 +24,9 @@ export default {
       propertyUserFields: [],
       propertyImages: [],
       id: 0,
+      virtualTour: '',
+      video: '',
+      userId: 0,
     },
     propertyImages: [],
     propertyTypes: [],
@@ -81,6 +84,9 @@ export default {
         propertyUserFields: [],
         propertyImages: [],
         id: 0,
+        virtualTour: '',
+        video: '',
+        userId: 0,
       };
     },
     clearPropertyImages(state) {
@@ -91,7 +97,7 @@ export default {
   actions: {
     getProperty({ commit }, id) {
       axios
-        .get(`/api/Property/${id}`)
+        .get(`/api/Property/getDetailed/${id}`)
         .then(result => commit('setProperty', result.data))
         .catch(console.error);
     },
@@ -158,7 +164,7 @@ export default {
       commit('clearPropertyImages');
 
       axios
-        .get(`/api/Property/${item.id}`)
+        .get(`/api/Property/getproperty/${item.id}`)
         .then(result => commit('setProperty', result.data))
         .catch(console.error);
 

src/store/modules/property/propertyLists.js

@@ -9,6 +9,9 @@ export default {
     setProperties(state, properties) {
       state.properties = properties;
     },
+    removeProperties(state, id) {
+      state.properties.pop(state.properties.find(item => item.id === id));
+    },
   },
   getters: {},
   actions: {
@@ -19,5 +22,11 @@ export default {
         .then(result => commit('setProperties', result.data))
         .catch(console.error);
     },
+    deleteProperty({ commit }, id) {
+      axios
+        .delete(`/api/property/${id}`)
+        .then(commit('removeProperties', id))
+        .catch(console.error);
+    },
   },
 };

src/store/modules/user/authentication.js

@@ -53,9 +53,7 @@ export default {
     authStatus: state => state.status,
   },
   actions: {
-    init({
-      commit,
-    }) {
+    init({ commit }) {
       if (!log.isLoggedIn() && log.tokenExpired) {
         log.clearValues();
       } else log.updateTokenExpiry();
@@ -66,37 +64,31 @@ export default {
         agency: log.getJSONObject('agency'),
       });
     },
-    login({
-      commit,
-      state,
-    }) {
-      return new Promise((reject) => {
-        commit('auth_request');
-        const user = {
+    login({ commit, state }) {
+      axios({
+        url: '/api/register/authenticate',
+        data: {
           username: state.username,
           password: state.password,
-        };
-        axios({
-          url: '/api/register/authenticate',
-          data: user,
-          method: 'POST',
+        },
+        method: 'POST',
+      })
+        .then((resp) => {
+          log.clearValues();
+          log.setValues(resp.data);
+          console.log(resp.data);
+
+          commit('auth_success', resp.data);
         })
-          .then((resp) => {
-            log.clearValues();
-            log.setValues(resp.data);
-            commit('auth_success', resp.data);
-          })
-          .catch((err) => {
-            commit('auth_error');
-            log.clearValues();
-            reject(err);
-            commit('auth_error', err.data);
-          });
-      });
+        .catch((err) => {
+          commit('auth_error');
+          log.clearValues();
+          // reject(err);
+          commit('auth_error', err.data);
+        });
+      /* }); */
     },
-    logout({
-      commit,
-    }) {
+    logout({ commit }) {
       return new Promise(() => {
         commit('logout');
         log.clearValues();