Prop Edit. & Carousel WIP

src/components/admin/misc/carousel.vue

@@ -0,0 +1 @@
+<!-- Work in Progress -->

src/components/admin/misc/carouselList.vue

@@ -0,0 +1,98 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div>
+    <div class="container">
+      <!-- <section class="intro-single"> -->
+      <div class="container">
+        <br />
+        <br />
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <!-- <div class="title-single-box"> -->
+            <!-- <h1 class="title-single">Property Types</h1> -->
+            <!-- </div> -->
+            <div class="title-box-d">
+              <h1 class="title-d" style="text-align:left; font-size: 250%">Carousel Items</h1>
+            </div>
+            <br />
+          </div>
+        </div>
+      </div>
+      <!-- </section> -->
+    </div>
+    <div class="container">
+      <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
+    </div>
+    <div class="container">
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>Image</th>
+            <th>Header</th>
+            <th>Type</th>
+            <th></th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in carouselList" :key="i">
+            <td>
+              <img :src="item.image" style="height:100px; width:100px; object-fit: cover;" />
+            </td>
+            <td>{{ item.header }}</td>
+            <td v-if="item.propertyId">Property</td>
+            <td v-else>Timeshare Week</td>
+            <td>
+              <button
+                type="button"
+                @click="Edit(item.id)"
+                class="btn"
+                style="margin:2px; color: #60CBEB"
+              >Edit</button>
+            </td>
+            <td>
+              <button
+                type="button"
+                @click="Delete(item.id)"
+                class="btn"
+                style="margin:2px; color: #60CBEB"
+              >Delete</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <br />
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'CarouselList',
+  data() {
+    return {};
+  },
+  methods: {
+    ...mapActions('carousel', ['getCarouselList', 'deleteCarousel']),
+    New() {
+      this.$router.push('/carousel/details/0');
+    },
+    Edit(itemID) {
+      this.$router.push({
+        path: `/carousel/details/${itemID}`,
+      });
+    },
+    Delete(id) {
+      this.deleteCarousel(id);
+    },
+  },
+  mounted() {
+    this.getCarouselList();
+  },
+  computed: {
+    ...mapState('carousel', ['carouselList']),
+  },
+};
+</script>

src/components/home/carouselSection.vue

@@ -98,5 +98,17 @@
   </div>
 </template>
 <script>
-export default {};
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  methods: {
+    ...mapActions('carousel', ['getCarouselList']),
+  },
+  mounted() {
+    this.getCarouselList();
+  },
+  computed: {
+    ...mapState('carousel', ['carouselList']),
+  },
+};
 </script>

src/components/property/propertyCreate.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 CREATE PAGE</h3>
+          <h3 class="sinse-title">List {{ propertyType }} {{ salesType }} Property</h3>
         </div>
       </div>
       <br />
@@ -349,13 +349,6 @@
               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>
@@ -372,7 +365,7 @@ import UserField from './propertyUserField.vue';
 import ImageLoad from './propertyImage.vue';
 
 export default {
-  name: 'PropertyEdit',
+  name: 'PropertyCreate',
   components: {
     UserField,
     ImageLoad,

src/components/property/propertyFieldEditor.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable max-len -->
   <div>
     <div>
       <div v-if="!edit" class="input-group-prepend">
@@ -10,7 +11,7 @@
           v-model="display"
           disabled
         />
-        <span @click="EditClick()" class="input-group-text" style="color: #60CBEB">
+        <span v-if="mayEdit" @click="EditClick()" class="input-group-text" style="color: #60CBEB">
           <eva-icon name="edit-outline" fill="#60CBEB"></eva-icon>
         </span>
       </div>
@@ -22,7 +23,7 @@
           type="text"
           name="currentField.name"
           id="currentField.id"
-          v-model="display"
+          v-model="updatedDisplay"
         />
         <!-- Number -->
         <input
@@ -31,7 +32,7 @@
           type="number"
           name="currentField.name"
           id="currentField.id"
-          v-model="display"
+          v-model="updatedDisplay"
         />
         <!-- Selector -->
         <select
@@ -40,7 +41,7 @@
           v-model="selectorSelection"
           @change="SelectorSelected"
         >
-          <option value="0">Please select type</option>
+          <option value="0"></option>
           <option v-for="item in arrayObject" :value="item.id" :key="item.id">{{ item.description }}</option>
         </select>
         <!-- yesno -->
@@ -49,7 +50,7 @@
           <option value="yes">Yes</option>
           <option value="no">No</option>
         </select>
-        <span @click="Save()" class="input-group-text" style="color: #60CBEB">
+        <span @click="UpdateValue()" 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">
@@ -65,46 +66,63 @@ export default {
   name: 'propertyFieldEdit',
   props: {
     display: String,
-    arrayObject: [],
+    arrayObject: { type: Array, default: () => [] },
     canEdit: Boolean,
     editType: String,
+    propertyName: String,
+    propertyId: Number,
+    userDefinedId: Number,
+    isUDF: Boolean,
+    isPropOverview: Boolean,
+    arrayIndex: Number,
+    arrayItemIndex: Number,
+    mayEdit: Boolean,
   },
   data() {
     return {
       edit: false,
       selectorSelection: Object,
+      updatedDisplay: '',
     };
   },
   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[
+        this.updatedDisplay = 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';
+        this.updatedDisplay = 'Yes';
       }
       if (item.target.options.selectedIndex === 2) {
-        this.display = 'No';
+        this.updatedDisplay = 'No';
       }
     },
+    UpdateValue() {
+      this.edit = false;
+      this.$emit('UpdateValue', {
+        fieldName: this.propertyName,
+        value: this.updatedDisplay,
+        propertyId: this.propertyId,
+        userDefinedId: this.userDefinedId,
+        isUDF: this.isUDF,
+        isPropOverview: this.isPropOverview,
+        arrayIndex: this.arrayIndex,
+        arrayItemIndex: this.arrayItemIndex,
+      });
+    },
+  },
+  mounted() {
+    this.updatedDisplay = this.display;
   },
 };
 </script>

src/components/property/propertyImage.vue

@@ -11,6 +11,7 @@
           name="images[]"
           @change="imagesAdd"
           multiple
+          :disabled="!mayEdit"
         />
       </label>
     </div>
@@ -21,7 +22,9 @@
         <label for="checkbox" style="margin: 10px;">Main Image</label>
         <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
         <br />
-        <a class="fa fa-times del" @click="removeImage(key)" />
+        <span class="input-group-text" align="center" @click="removeImage(key)">
+          <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
+        </span>
       </div>
       <br />
     </div>
@@ -32,6 +35,7 @@
 export default {
   props: {
     loadedImages: Function,
+    mayEdit: { type: Boolean, default: () => true },
   },
   data() {
     return {

src/components/property/propertyUserField.vue

@@ -65,12 +65,5 @@ export default {
       return '';
     },
   },
-  // Testing editing
-  // created() {
-  //   this.setFields = [];
-  //   for (let i = 0; i < this.fields.length; i++) {
-  //     this.setFields[i] = this.fields[i].value;
-  //   }
-  // },
 };
 </script>

src/components/property/propertyeditPage.vue

@@ -53,49 +53,117 @@
                 </div>
               </div>
             </div>
+            <div class="form-group row">
+              <div class="col-md-4">
+                <label>Sale Type</label>
+                <propField
+                  :display="property.isSale ? 'Sale' : 'Rental'"
+                  :editType="'selector'"
+                  :arrayObject="salesTypeArr"
+                  :propertyName="'isSale'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
+              </div>
+            </div>
             <div class="form-group row">
               <div class="col-md-4">
                 <label>Property Type</label>
                 <propField
-                  :display="property.propertyType.description"
-                  :editType="'Selector'"
+                  :display="property.propertyType ? property.propertyType.description : ''"
+                  :editType="'selector'"
                   :arrayObject="propertyTypes"
+                  :propertyName="'propertyType'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
                 />
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Property Name</label>
-                <propField :display="property.proeprtyName" :editType="'text'" />
+                <propField
+                  :display="property.propertyName"
+                  :editType="'text'"
+                  :propertyName="'propertyName'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Unit</label>
-                <propField :label="'Property Type'" :display="property.unit" :editType="'text'" />
+                <propField
+                  :label="'Property Type'"
+                  :display="property.unit"
+                  :editType="'text'"
+                  :propertyName="'unit'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Street Number</label>
-                <propField :display="property.addressLine1" :editType="'text'" />
+                <propField
+                  :display="property.addressLine1"
+                  :editType="'text'"
+                  :propertyName="'addressLine1'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Street Name</label>
-                <propField :display="property.addressLine2" :editType="'text'" />
+                <propField
+                  :display="property.addressLine2"
+                  :editType="'text'"
+                  :propertyName="'addressLine2'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Province</label>
-                <propField :display="property.province.description" :editType="'selector'" />
+                <propField
+                  :display="property.province ? property.province.description : ''"
+                  :editType="'selector'"
+                  :arrayObject="provinces"
+                  :propertyName="'province'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
 
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>City</label>
-                <propField :display="property.city.description" :editType="'selector'" />
+                <propField
+                  :display="property.city ? property.city.description : ''"
+                  :editType="'selector'"
+                  :arrayObject="cities"
+                  :propertyName="'city'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Suburb</label>
-                <propField :display="property.suburb.description" :editType="'selector'" />
+                <propField
+                  :display="property.suburb ? property.suburb.description : ''"
+                  :editType="'selector'"
+                  :arrayObject="suburbs"
+                  :propertyName="'suburb'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Postal Code</label>
-                <propField :display="property.addressLine3" :editType="'text'" />
+                <propField
+                  :display="property.addressLine3"
+                  :editType="'text'"
+                  :propertyName="'addressLine3'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
             </div>
 
@@ -103,11 +171,24 @@
               <div class="col-md-6">
                 <label v-if="salesType === 'Rental'">Rental Price</label>
                 <label v-if="salesType !== 'Rental'">Sales Price</label>
-                <propField :display="property.price" :editType="'number'" />
+                <propField
+                  :display="String(property.price)"
+                  :editType="'number'"
+                  :propertyName="'price'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
               <div class="col-md-6" v-if="salesType === 'Rental'">
                 <label>Per</label>
-                <propField :display="property.pricePer" :editType="'text'" />
+                <propField
+                  :display="property.pricePer"
+                  :editType="'selector'"
+                  :propertyName="'pricePer'"
+                  :arrayObject="pricePerArr"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
             </div>
             <div class="form-group row">
@@ -123,14 +204,24 @@
               class="col-md-6"
               v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
             >
-              <div v-for="item in propertyOverviewFields[0].fields" :key="item.id">
+              <div v-for="(item, i) in propertyOverviewFields[0].fields" :key="item.id">
                 <label>{{ item.name }}</label>
-                <propField :display="item.value" :editType="item.type" />
+                <propField
+                  :display="item.value"
+                  :editType="item.type"
+                  :propertyId="item.itemID"
+                  :userDefinedId="item.id"
+                  :isUDF="Boolean('true')"
+                  :isPropOverview="Boolean('true')"
+                  :mayEdit="mayEdit"
+                  :arrayIndex="i"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
             </div>
 
             <div class="form-group row" />
-            <div v-for="group in propertyFields" :key="group.id">
+            <div v-for="(group, i) in propertyFields" :key="group.id">
               <div class="row">
                 <div class="col-sm-12">
                   <div class="title-box-d">
@@ -138,16 +229,20 @@
                   </div>
                 </div>
               </div>
-              <div v-for="field in group.fields" :key="field.id">
+              <div v-for="(field, ii) in group.fields" :key="field.id">
                 <label>{{ field.name }}</label>
-                <propField :display="field.value" :editType="field.type" />
+                <propField
+                  :display="field.value"
+                  :editType="field.type"
+                  :propertyId="field.itemID"
+                  :userDefinedId="field.id"
+                  :isUDF="Boolean('true')"
+                  :arrayIndex="i"
+                  :arrayItemIndex="ii"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
-              <!-- <UserField
-                :fields="item.fields"
-                :id="item.name"
-                @UpdateUserDefinedFields="UpdateUserDefinedFields"
-                :fieldValues="item.fields"
-              />-->
             </div>
             <div class="form-group row" />
             <div class="row">
@@ -160,13 +255,25 @@
             <div class="form-group row">
               <div class="col-md-12">
                 <label>Virtual Tour (URL)</label>
-                <propField :display="property.virtualTour" :editType="'text'" />
+                <propField
+                  :display="property.virtualTour"
+                  :editType="'text'"
+                  :propertyName="'virtualTour'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-12">
                 <label>Video (URL)</label>
-                <propField :display="property.video" :editType="'text'" />
+                <propField
+                  :display="property.video"
+                  :editType="'text'"
+                  :propertyName="'video'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
             </div>
             <div class="form-group row">
@@ -176,20 +283,46 @@
               </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 class="col-md-2" v-for="(img, i) in propertyImages" :key="i">
+                <input
+                  v-if="mayEdit"
+                  type="checkbox"
+                  id="checkbox"
+                  v-model="img.isDefault"
+                  :disabled="img.isDeleted"
+                />
+                <label v-if="mayEdit" for="checkbox" style="margin: 10px;">Main Image</label>
+                <br />
+                <img
+                  :src="img.image"
+                  style="height:200px; width:150px; object-fit: cover;"
+                  :class="[img.isDeleted ? 'opacity' : '']"
+                />
+                <span
+                  v-if="!img.isDeleted && mayEdit"
+                  class="input-group-text"
+                  align="center"
+                  @click="DeleteImage(img)"
+                >
+                  <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
+                </span>
               </div>
             </div>
-            <ImageLoad :loadedImages="loadedImages" @DefaultImage="UpdateDefaultImage" />
+
+            <ImageLoad
+              :loadedImages="loadedImages"
+              @DefaultImage="UpdateDefaultImage"
+              :mayEdit="mayEdit"
+            />
             <button
               v-if="!wait"
               type="button"
               @click="SubmitData()"
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
+              :disabled="!mayEdit"
             >Save</button>
             <button
-              v-if="isEdit"
               type="button"
               @click="Close()"
               class="btn btn-b-n"
@@ -221,8 +354,6 @@ export default {
     return {
       propertyType: 'Residential',
       salesType: 'Rental',
-      selectedProvince: '',
-      selectedCity: '',
       images: [],
       propertyFieldValues: [],
       defaultImage: 0,
@@ -240,115 +371,198 @@ export default {
         [{ script: 'sub' }, { script: 'super' }],
         [{ indent: '-1' }, { indent: '+1' }],
       ],
-      isEdit: false,
+      salesTypeArr: [
+        { id: 1, description: 'Sale' },
+        { id: 2, description: 'Rental' },
+      ],
+      pricePerArr: [
+        { id: 'Month', description: 'Month' },
+        { id: 'Day', description: 'Day' },
+      ],
     };
   },
   methods: {
-    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
-    ...mapActions('property', [
-      'getPropertyTypes',
-      'getPropertyOverviewFields',
-      'getPropertyFields',
-      'saveProperty',
-      'getProperty',
-      'getPropertyImages',
-      'clearProperty',
-      'clearPropertyImages',
-      'getPropertyEditDisplay',
-      'getPropertySavedOverviewFields',
-      'getPropertySavedFields',
+    ...mapActions('searchTab', [
+      'getProvince',
+      'getCities',
+      'getSuburbs',
+      'getListsForPropertyEdit',
+    ]),
+    ...mapActions('property', ['getPropertyTypes']),
+    ...mapActions('propertyEdit', [
       'getSavedPropertyData',
+      'updateProperty',
+      'mayEditProperty',
     ]),
+    UpdateValue(item) {
+      if (item.isUDF) {
+        if (item.isPropOverview) {
+          this.propertyOverviewFields[0].fields[item.arrayIndex].value =            item.value;
+        } else if (item.isPropOverview === false) {
+          this.propertyFields[item.arrayIndex].fields[
+            item.arrayItemIndex
+          ].value = item.value;
+        }
+      } else if (!item.isUDF) {
+        if (item.fieldName) {
+          if (item.fieldName === 'isSale') {
+            let isSaleValue = false;
+            if (item.value === 'Sale') {
+              isSaleValue = true;
+            } else isSaleValue = false;
+            this.property.isSale = isSaleValue;
+          }
+          if (item.fieldName === 'propertyType') {
+            this.property.propertyType = this.propertyTypes.find(
+              pt => pt.description === item.value,
+            );
+            this.property.propertyTypeId = this.property.propertyType.id;
+          }
+          if (item.fieldName === 'propertyName') {
+            this.property.propertyName = item.value;
+          }
+          if (item.fieldName === 'unit') {
+            this.property.unit = item.value;
+          }
+          if (item.fieldName === 'addressLine1') {
+            this.property.addressLine1 = item.value;
+          }
+          if (item.fieldName === 'addressLine2') {
+            this.property.addressLine2 = item.value;
+          }
+          if (item.fieldName === 'addressLine3') {
+            this.property.addressLine3 = item.value;
+          }
+          if (item.fieldName === 'province') {
+            if (item.value !== '') {
+              this.property.province = this.provinces.find(
+                p => p.description === item.value,
+              );
+              this.property.provinceId = this.property.province.id;
+              this.getCities(Object.assign({}, { province: item.value }));
+              this.property.city = null;
+              this.property.suburb = null;
+              this.property.addressLine3 = '';
+            } else {
+              this.property.province = null;
+              this.property.city = null;
+              this.property.suburb = null;
+              this.property.addressLine3 = '';
+              this.cities = [];
+              this.suburbs = [];
+            }
+          }
+          if (item.fieldName === 'city') {
+            if (item.value !== '') {
+              const newCity = this.cities.find(
+                p => p.description === item.value,
+              );
+              this.property.city = newCity;
+              this.property.cityId = newCity.id;
+              this.getSuburbs(
+                Object.assign(
+                  {},
+                  {
+                    province: this.property.province.description,
+                    city: item.value,
+                  },
+                ),
+              );
+              this.property.suburb = null;
+              this.property.addressLine3 = '';
+            } else {
+              this.property.city = null;
+              this.property.suburb = null;
+              this.property.addressLine3 = '';
+              this.suburbs = [];
+            }
+          }
+          if (item.fieldName === 'suburb') {
+            if (item.value !== '') {
+              const newSuburb = this.suburbs.find(
+                p => p.description === item.value,
+              );
+              this.property.suburb = newSuburb;
+              this.property.suburbId = newSuburb.id;
+              this.property.addressLine3 = this.property.suburb.postalCode;
+            } else {
+              this.property.suburb = null;
+              this.property.addressLine3 = '';
+            }
+          }
+          if (item.fieldName === 'price') {
+            this.property.price = item.value;
+          }
+          if (item.fieldName === 'pricePer') {
+            this.property.pricePer = item.value;
+          }
+          if (item.fieldName === 'virtualTour') {
+            this.property.virtualTour = item.value;
+          }
+          if (item.fieldName === 'video') {
+            this.property.video = item.value;
+          }
+        }
+      }
+    },
     TypeChanged() {
       this.propertyType = this.property.propertyUsageType;
     },
     SubmitData() {
       this.wait = true;
-      if (this.salesType === 'Sale') {
-        this.property.isSale = true;
-      }
+
+      this.newPropertyImages.propertyId = this.property.id;
+      this.newPropertyImages.Images = [];
       // 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({
+        this.newPropertyImages.images.push({
           image: this.images[i],
           isDefault: setAsDefault,
         });
       }
-      this.property.propertyUserFields = this.propertyFieldValues;
 
-      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);
+      this.property.propertyImages = this.propertyImages;
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < this.property.propertyImages.length; i++) {
+        this.property.propertyImages[i].image = '';
       }
+      this.property.propertyOverviewFields = this.propertyOverviewFields;
+      this.property.propertyFields = this.propertyFields;
+      this.updateProperty({
+        property: this.property,
+        images: this.newPropertyImages,
+      });
+
+      // console.log(JSON.stringify(this.newPropertyImages));
+
+      // Need to change to promis.
+      setTimeout(
+        () => this.$router.push({
+            path: '/property/admin/list/my',
+          }),
+        5000,
+      );
     },
     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;
     },
+    DeleteImage(image) {
+      this.propertyImages.find(item => item.id === image.id).isDeleted = true;
+    },
   },
   mounted() {
+    // Need to check this can remove unused code
     this.wait = false;
-    this.clearProperty();
-    this.clearPropertyImages();
     this.images = [];
     this.defaultImage = 0;
 
@@ -369,39 +583,32 @@ export default {
 
     this.getPropertyTypes(this.propertyType);
 
-    this.getProvince();
-    if (this.$route.query.id) {
-      this.getSavedPropertyData(
-        Object.assign({}, { id: this.$route.query.id, type: this.propertyType }),
-      );
-      this.isEdit = true;
-    } else {
-      this.getPropertyOverviewFields();
-      this.getPropertyFields(this.propertyType);
-    }
+    this.getListsForPropertyEdit(this.$route.query.id);
+
+    this.getSavedPropertyData(
+      Object.assign({}, { id: this.$route.query.id, type: this.propertyType }),
+    );
+
+    this.mayEditProperty(this.$route.query.id);
   },
   computed: {
     ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
-    ...mapState('property', [
-      'propertyTypes',
+    ...mapState('property', ['propertyTypes']),
+    ...mapState('propertyEdit', [
       'propertyOverviewFields',
       'propertyFields',
       'property',
       'propertyImages',
+      'mayEdit',
+      'newPropertyImages',
     ]),
     ...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);
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.salesType = this.property.isSale ? 'Sale' : 'Rental';
       }
 
       this.getPropertyTypes(this.propertyType);
@@ -416,3 +623,13 @@ export default {
   },
 };
 </script>
+
+<style>
+span {
+  cursor: pointer;
+}
+.opacity {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+</style>

src/components/shared/navBar.vue

@@ -165,6 +165,7 @@
                   @click="routerGoTo('/searchLog')"
                 >Search Logs</a>
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Offers')">Offers</a>
+                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Carousel')">Carousel</a>
               </div>
             </li>
             <li class="nav-item dropdown" v-if="!isLoggedIn">

src/router/index.js

@@ -48,6 +48,8 @@ import searchLog from '../components/admin/logs/SearchLogs.vue';
 // import store from '../store';
 
 import TemplatePage from '../components/communication/templatePage.vue';
+import CarouselList from '../components/admin/misc/carouselList.vue';
+import CarouselDetail from '../components/admin/misc/carousel.vue';
 
 Vue.use(Router);
 
@@ -262,5 +264,15 @@ export default new Router({
       name: 'SearchLog',
       component: searchLog,
     },
+    {
+      path: '/carousel',
+      name: 'carousel',
+      component: CarouselList,
+    },
+    {
+      path: '/carousel/details/:id',
+      name: 'CarouselDetails',
+      component: CarouselDetail,
+    },
   ],
 });

src/store/index.js

@@ -22,6 +22,8 @@ import PropertySearch from './modules/property/propertySearch';
 import SearchLog from './modules/logs/searchLog';
 import Template from './modules/communication/template';
 import Info from './modules/communication/info';
+import PropertyEdit from './modules/property/propertyEdit';
+import Carousel from './modules/misc/carousel';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
@@ -48,5 +50,7 @@ export default new Vuex.Store({
     searchLog: SearchLog,
     template: Template,
     info: Info,
+    propertyEdit: PropertyEdit,
+    carousel: Carousel,
   },
 });

src/store/modules/misc/carousel.js

@@ -0,0 +1,31 @@
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    carouselList: [],
+  },
+  mutations: {
+    setCarouselList(state, items) {
+      state.carouselList = items;
+    },
+    removeCarousel(state, id) {
+      state.carouselList.pop(state.carouselList.find(p => p.id === id));
+    },
+  },
+  getters: {},
+  actions: {
+    getCarouselList({ commit }) {
+      axios
+        .get('/api/Carousel')
+        .then(result => commit('setCarouselList', result.data))
+        .catch(console.error);
+    },
+    deleteCarousel({ commit }, id) {
+      axios
+        .delete(`/api/Carousel/${id}`)
+        .then(commit('removeCarousel', id))
+        .catch(console.error);
+    },
+  },
+};

src/store/modules/property/property.js

@@ -103,7 +103,7 @@ export default {
     },
     getPropertyImages({ commit }, id) {
       axios
-        .get(`/api/PropertyImage/getPropertyImages/${id}`)
+        .get(`/api/PropertyImage/GetImagesByProperty/${id}`)
         .then(result => commit('setPropertyImages', result.data))
         .catch(console.error);
     },
@@ -164,12 +164,12 @@ export default {
       commit('clearPropertyImages');
 
       axios
-        .get(`/api/Property/getproperty/${item.id}`)
+        .get(`/api/Property/getProperty/${item.id}`)
         .then(result => commit('setProperty', result.data))
         .catch(console.error);
 
       axios
-        .get(`/api/PropertyImage/getPropertyImages/${item.id}`)
+        .get(`/api/PropertyImage/GetProperySavedImages/${item.id}`)
         .then(result => commit('setPropertyImages', result.data))
         .catch(console.error);
 

src/store/modules/property/propertyEdit.js

@@ -0,0 +1,143 @@
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    property: {
+      createdBy: '',
+      propertyTypeId: 0,
+      propertyName: '',
+      unit: '',
+      operationalCosts: 0.0,
+      price: 0,
+      pricePer: '',
+      isSale: false,
+      description: '',
+      shortDescription: '',
+      addressLine1: '',
+      addressLine2: '',
+      addressLine3: '',
+      suburbId: 0,
+      cityId: 0,
+      provinceId: 0,
+      published: false,
+      propertyUserFields: [],
+      propertyImages: [],
+      newImages: [],
+      id: 0,
+      virtualTour: '',
+      video: '',
+      userId: 0,
+    },
+    propertyImages: [],
+    propertyTypes: [],
+    propertyTypesRes: [],
+    propertyTypesCom: [],
+    propertyOverviewFields: [],
+    propertyFields: [],
+    mayEdit: false,
+    newPropertyImages: {
+      propertyId: 0,
+      images: [],
+    },
+  },
+  mutations: {
+    setProperty(state, property) {
+      state.property = property;
+    },
+    setPropertyImages(state, images) {
+      state.propertyImages = images;
+    },
+    setPropertyOverviewFields(state, fields) {
+      state.propertyOverviewFields = fields;
+    },
+    setPropertyFields(state, fields) {
+      state.propertyFields = fields;
+    },
+    setMayEdit(state, data) {
+      state.mayEdit = data;
+    },
+    clearProperty(state) {
+      state.property = {
+        createdBy: '',
+        propertyTypeId: 0,
+        propertyName: '',
+        unit: '',
+        operationalCosts: 0.0,
+        price: 0,
+        pricePer: '',
+        isSale: false,
+        description: '',
+        shortDescription: '',
+        addressLine1: '',
+        addressLine2: '',
+        addressLine3: '',
+        suburbId: 0,
+        cityId: 0,
+        provinceId: 0,
+        published: false,
+        propertyOverviewFields: [],
+        propertyFields: [],
+        propertyImages: [],
+        newImages: [],
+        id: 0,
+        virtualTour: '',
+        video: '',
+        userId: 0,
+      };
+    },
+    clearPropertyImages(state) {
+      state.propertyImages = [];
+    },
+    ClearNewImages(state) {
+      state.newPropertyImages = {
+        propertyId: 0,
+        images: [],
+      };
+    },
+  },
+  getters: {},
+  actions: {
+    getSavedPropertyData({ commit }, item) {
+      commit('clearProperty');
+      commit('clearPropertyImages');
+
+      axios
+        .get(`/api/Property/getProperty/${item.id}`)
+        .then(result => commit('setProperty', result.data))
+        .catch(console.error);
+
+      axios
+        .get(`/api/PropertyImage/GetProperySavedImages/${item.id}`)
+        .then(result => commit('setPropertyImages', result.data))
+        .catch(console.error);
+
+      axios
+        .get(`/api/PropertyFields/GetSavedValues/Residential/Property Overview/${item.id}`)
+        .then(response => commit('setPropertyOverviewFields', response.data))
+        .catch(console.error);
+
+      axios
+        .get(`/api/PropertyFields/GetSavedValues/${item.type}/All/${item.id}`)
+        .then(response => commit('setPropertyFields', response.data))
+        .catch(console.error);
+    },
+    updateProperty({ commit }, item) {
+      axios
+        .post('/api/PropertyImage', item.images)
+        .then(commit('ClearNewImages'))
+        .catch(console.error);
+
+      axios
+        .put('/api/Property', item.property)
+        .then(commit('setProperty', item.property))
+        .catch(console.error);
+    },
+    mayEditProperty({ commit }, id) {
+      axios
+        .get(`/api/property/MayEditProperty/${id}`)
+        .then(response => commit('setMayEdit', response.data))
+        .catch(console.error);
+    },
+  },
+};

src/store/modules/searchTab.js

@@ -36,5 +36,21 @@ export default {
         .get(`/api/Suburb/${item.province}/${item.city}`)
         .then(result => commit('setSuburbs', result.data));
     },
+    getListsForPropertyEdit({ commit }, propertyId) {
+      axios
+        .get('/api/province')
+        .then(result => commit('setProvince', result.data))
+        .catch(console.error);
+
+      axios
+        .get(`/api/City/GetByProperty/${propertyId}`)
+        .then(result => commit('setCities', result.data))
+        .catch(console.error);
+
+      axios
+        .get(`/api/Suburb/GetByProperty/${propertyId}`)
+        .then(result => commit('setSuburbs', result.data))
+        .catch(console.error);
+    },
   },
 };