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

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/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';
@@ -137,15 +138,15 @@ export default new Router({
     {
       path: '/property/new/:saleType',
       name: 'PropertyNew',
-      component: PropertyEdit,
+      component: PropertyCreate,
     },
     {
       path: '/property/new/:propertyUsageType/:saleType',
       name: 'PropertyNewFromSearch',
-      component: PropertyEdit,
+      component: PropertyCreate,
     },
     {
-      path: '/property/edit/:id/:propType/:saleType',
+      path: '/property/edit',
       name: 'PropertyEdit',
       component: PropertyEdit,
     },

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