Property fixes & Search

src/components/property/propertyCreate.vue

                     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>
+                    <option v-for="item in propertyTypes" :value="item.id" :key="item.id">{{
+                      item.description
+                    }}</option>
                   </select>
                 </div>
               </div>
                     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>
+                    <option v-for="province in provinces" :value="province.id" :key="province.id">{{
+                      province.description
+                    }}</option>
                   </select>
                 </div>
               </div>
                     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>
+                    <option v-for="city in cities" :value="city.id" :key="city.id">{{
+                      city.description
+                    }}</option>
                   </select>
                 </div>
               </div>
                     @change="getPostalCode"
                   >
                     <option value="0">Please select suburb</option>
-                    <option
-                      v-for="suburb in suburbs"
-                      :value="suburb.id"
-                      :key="suburb.id"
-                    >{{ suburb.description }}</option>
+                    <option v-for="suburb in suburbs" :value="suburb.id" :key="suburb.id">{{
+                      suburb.description
+                    }}</option>
                   </select>
                 </div>
               </div>
                 <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>
+                <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"
+              v-if="(propertyType === 'Residential') & (propertyOverviewFields.length > 0)"
               :fields="propertyOverviewFields[0].fields"
               @UpdateUserDefinedFields="UpdateUserDefinedFields"
               :id="1"
               @click="SubmitData()"
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
-            >Save</button>
+            >
+              Save
+            </button>
             <div v-if="wait" id="preloader"></div>
           </form>
         </div>
 <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';
 
       customToolbar: [
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
         ['bold', 'italic', 'underline', 'strike'],
-        [
-          { align: '' },
-          { align: 'center' },
-          { align: 'right' },
-          { align: 'justify' },
-        ],
+        [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
         [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
         [{ script: 'sub' }, { script: 'super' }],
         [{ indent: '-1' }, { indent: '+1' }],
       ],
+      error: '',
     };
   },
   methods: {
       }
       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,
-      );
+      if (this.user) {
+        this.property.userId = this.user.id;
+      }
+
+      this.saveProperty(this.property)
+        .then((fulfilled) => {
+          this.$router.push(`/property/property/${fulfilled.data.id}`);
+        })
+        .catch((error) => {
+          console.log(error.message);
+        });
     },
     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.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.selectedCity = this.cities[item.target.options.selectedIndex - 1].description;
         this.getSuburbs(
-          Object.assign(
-            {},
-            { province: this.selectedProvince, city: this.selectedCity },
-          ),
+          Object.assign({}, { province: this.selectedProvince, city: this.selectedCity }),
         );
       }
     },
     getPostalCode(item) {
-      this.property.addressLine3 = this.suburbs[
-        item.target.options.selectedIndex - 1
-      ].postalCode;
+      this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
     },
     loadedImages(values) {
       this.images = values;

src/components/property/propertyList.vue

   <!-- eslint-disable max-len -->
   <div>
     <div class="container">
-      <!-- <section class="intro-single"> -->
       <div class="container">
-        <br />
-        <br />
         <br />
         <br />
         <div class="row">
           <div class="col-md-12 col-lg-8">
             <div class="title-box-d">
-              <h1
-                v-if="showAdmin"
-                class="title-d"
-                style="text-align:left; font-size: 250%"
-              >Admin Properties</h1>
-              <h1 v-else class="title-d" style="text-align:left; font-size: 250%">My Properties</h1>
+              <h1 class="title-d" style="text-align:left; font-size: 250%">Properties</h1>
             </div>
           </div>
         </div>
       </div>
-      <!-- </section> -->
     </div>
     <div class="container">
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Property ID</th>
-            <th>Size</th>
-            <th>Price</th>
-            <th>Usage Type</th>
-            <th>Type</th>
-            <th>Sale Type</th>
-            <th>Publish</th>
-            <th>Status</th>
-            <th></th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, i) in properties" :key="i">
-            <td>{{ item.name }}</td>
-            <td>{{ item.id }}</td>
-            <td v-html="item.size" />
-            <td>{{ item.price }}</td>
-            <td>{{ item.usageType }}</td>
-            <td>{{ item.type }}</td>
-            <td>{{ item.saleType }}</td>
-            <!-- <td>{{ item.publish }}</td> -->
-            <td></td>
-            <td>{{ item.status }}</td>
-            <td>
-              <button
-                type="button"
-                @click="Edit(item)"
-                class="btn"
-                style="margin:2px; color: #60CBEB"
-              >Edit</button>
-            </td>
-            <td>
-              <button
-                type="button"
-                @click="Delete(item)"
-                class="btn btn-b-n"
-                style="width: 85px; height:40px;"
-              >Delete</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <listView
+        :items="properties"
+        :showNew="false"
+        :editable="true"
+        :deleteable="true"
+        @onEdit="Edit"
+        @onDelete="Delete"
+      />
     </div>
     <br />
   </div>
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import listView from '../shared/listView.vue';
 
 export default {
   name: 'PropertyList',
+  components: {
+    listView,
+  },
   data() {
     return {
       propertyType: '',
-      showAdmin: false,
+      role: 'MY',
     };
   },
   methods: {
     },
   },
   mounted() {
-    if (this.$route.params.by === 'my') {
-      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      this.showAdmin = false;
-    } else {
-      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      this.showAdmin = true;
+    if (this.user.role === 'Super Admin') {
+      this.role = 'SUPERADMIN';
+    }
+    if (this.user.role === 'Agency') {
+      this.user.role = 'ADMIN';
     }
-
-    // this.user = 28; // user id
 
     this.getProperties(
-      Object.assign(
-        {},
-        {
-          propertyType: this.showAdmin ? 'Admin' : 'My',
-          user: this.user.id,
-        },
-      ),
+      Object.assign({
+        propertyType: this.role,
+        user: this.user.id,
+      }),
     );
   },
   computed: {
     ...mapState('propertyList', ['properties']),
     ...mapState('authentication', ['user']),
     UserChanged() {
-      if (this.$route.params.by === 'my') {
+      if (this.user.role === 'Super Admin') {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.showAdmin = false;
-      } else {
+        this.role = 'SUPERADMIN';
+      }
+      if (this.user.role === 'Agency') {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.showAdmin = true;
+        this.user.role = 'ADMIN';
       }
+
       this.getProperties(
-        Object.assign(
-          {},
-          {
-            propertyType: this.showAdmin ? 'Admin' : 'My',
-            user: this.user,
-          },
-        ),
+        Object.assign({
+          propertyType: this.role,
+          user: this.user.id,
+        }),
       );
       return this.user;
     },

src/components/property/propertyPage.vue

   <!-- eslint-disable max-len -->
   <div v-if="property">
     <div class="container">
-      <br />
-      <br />
-      <br />
       <br />
       <div class="row">
         <div class="col-md-12 col-lg-8">

src/components/property/propertySearchFields.vue

           </div>
           <select class="form-control" v-model="resType" @change="PropertyTypeSelected">
             <option>All</option>
-            <option
-              v-for="(propertyType, i) in propertyTypesRes"
-              :key="i"
-            >{{ propertyType.description }}</option>
+            <option v-for="(propertyType, i) in propertyTypesRes" :key="i">{{
+              propertyType.description
+            }}</option>
           </select>
           <div class="input-group-append" @click="clearResType">
             <span class="input-group-text cursor-pointer" style="color: #60CBEB">
           </div>
           <select class="form-control" v-model="comType" @change="PropertyTypeSelected">
             <option>All</option>
-            <option
-              v-for="(propertyType, i) in propertyTypesCom"
-              :key="i"
-            >{{ propertyType.description }}</option>
+            <option v-for="(propertyType, i) in propertyTypesCom" :key="i">{{
+              propertyType.description
+            }}</option>
           </select>
           <div class="input-group-append" @click="clearComType">
             <span class="input-group-text cursor-pointer" style="color: #60CBEB">
               <input
                 class="form-control"
                 type="number"
-                step="any"
-                name="minPrice"
+                setp="any"
                 v-model="propertySearch.minPrice"
               />
               <div class="input-group-append" @click="clearFilter('minPrice')">
               <input
                 class="form-control"
                 type="number"
-                step="any"
-                name="maxPrice"
+                setp="any"
                 v-model="propertySearch.maxPrice"
               />
               <div class="input-group-append" @click="clearFilter('maxPrice')">
       this.clearFilter('propertyType');
       this.comType = 'All';
     },
-    salesTypeSelected() {
-      this.$emit('updateSearch', this.propertySearch);
-    },
     PropertyTypeSelected(item) {
       this.propertySearch.propertyType = item.target.value;
-      this.$emit('updateSearch', this.propertySearch);
     },
     ProvinceSelected(item) {
       if (item.target.value !== 'All') {
-        this.getCities(
-          Object.assign({}, { province: this.propertySearch.province }),
-        );
+        this.getCities(Object.assign({}, { province: this.propertySearch.province }));
       }
-      this.$emit('updateSearch', this.propertySearch);
     },
     CitySelected(item) {
       if (item.target.value !== 'All') {
           ),
         );
       }
-      this.$emit('updateSearch', this.propertySearch);
-    },
-    SuburbSeleted() {
-      this.$emit('updateSearch', this.propertySearch);
     },
   },
 };

src/components/property/propertySearchResults.vue

   computed: {
     ...mapState('propertySearch', ['properties', 'propertySearch']),
     ...mapState('authentication', ['username']),
-    // ParamsChanged() {
-    //   if (Object.keys(this.$route.query).length === 0) {
-    //     if (this.propertySearch.propertyUsageType === 'All') {
-    //       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    //       this.propertySearch.propertyUsageType = 'Residential';
-    //       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    //       this.propertySearch.keyword = 'All';
-    //       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    //       this.propertySearch.salesType = 'All';
-    //     }
-    //   }
-    //   if (Object.keys(this.$route.query).length > 0) {
-    //     if (Object.keys(this.$route.query).length > 2) {
-    //       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    //       this.propertySearch = this.$route.query;
-    //     } else {
-    //       if (this.$route.query.salesType) {
-    //         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    //         this.propertySearch.salesType = this.$route.query.salesType;
-    //       }
-    //       if (this.$route.query.propertyUsageType) {
-    //         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    //         this.propertySearch.propertyUsageType = this.$route.query.propertyUsageType;
-    //       }
-    //     }
-    //   }
-    //   if (this.propertySearch.keyword === '') {
-    //     // 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;
-    // },
+    ParamsChanged() {
+      if (typeof this.propertySearch.propertyUsageType === 'undefined') {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.propertySearch.propertyUsageType = 'Residential';
+      }
+      this.searchProperties(this.propertySearch);
+      return null;
+    },
+  },
+  watch: {
+    ParamsChanged() {
+      return null;
+    },
   },
-  //   watch: {
-  //     ParamsChanged() {
-  //       return null;
-  //     },
-  //   },
 };
 </script>

src/components/property/propertyeditPage.vue

       this.updateProperty({
         property: this.property,
         images: this.newPropertyImages,
+      }).then(() => {
+        this.$router.push('/properties');
       });
-
-      // 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');
+      this.$router.push('/properties');
     },
     loadedImages(values) {
       this.images = values;

src/components/shared/navBar.vue

                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/property/new/Rental')"
                 >To Rent</a>
-                <hr />
+                <hr v-if="isLoggedIn" />
                 <a
                   v-if="isLoggedIn"
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/property/admin/list/my')"
+                  @click="routerGoTo('/properties')"
                 >My Properties</a>
               </div>
             </li>

src/components/shared/searchTab.vue

                   aria-controls="pills-video"
                   aria-selected="true"
                   v-on:click="updateType('Timeshare')"
-                >Timeshare</a>
+                  >Timeshare</a
+                >
               </li>
               <li class="nav-item">
                 <a
                   aria-controls="pills-plans"
                   aria-selected="false"
                   v-on:click="updateType('Residential')"
-                >Residential</a>
+                  >Residential</a
+                >
               </li>
               <li class="nav-item">
                 <a
                   aria-controls="pills-map"
                   aria-selected="false"
                   v-on:click="updateType('Commercial')"
-                >Commercial</a>
+                  >Commercial</a
+                >
               </li>
             </ul>
             <div class="tab-content" id="pills-tabContent">
                 role="tabpanel"
                 aria-labelledby="pills-plans-tab"
               >
-                <propertySearch propertyType="Residential" @updateSearch="updateSearch" />
+                <propertySearch propertyType="Residential" />
               </div>
               <div
                 class="tab-pane fade"
                 role="tabpanel"
                 aria-labelledby="pills-map-tab"
               >
-                <propertySearch propertyType="Commercial" @updateSearch="updateSearch" />
+                <propertySearch propertyType="Commercial" />
               </div>
             </div>
           </div>
     updateType(item) {
       this.selectedPropertyType = item;
     },
-    updateSearch(item) {
-      this.propertySearch = item;
-      this.propertySearch.propertyUsageType = this.selectedPropertyType;
-      this.propertySearch.keyword = this.filter.keyword;
-    },
     Search() {
       if (this.selectedPropertyType === 'timeshare') {
         this.$router.push('/timesharesearch');
       } else {
+        this.propertySearch.propertyUsageType = this.selectedPropertyType;
         this.$router.push('/property/propertySearch/results');
-        // this.$router.push({
-        //   path: '/property/search',
-        //   query: this.propertySearch,
-        // });
       }
     },
   },

src/router/index.js

       component: PropertyEdit,
     },
     {
-      path: '/property/admin/list/:by',
+      path: '/properties',
       name: 'PropertyListAdmin',
       component: PropertyList,
     },

src/store/modules/property/property.js

         .catch(console.error);
     },
     saveProperty({ commit }, item) {
-      axios
-        .post('/api/Property', item)
-        .then(result => commit('updateCurrentProperty', result.data))
-        .catch(console.error);
+      return new Promise((resolve, reject) => {
+        axios
+          .post('/api/Property', item)
+          .then((resp) => {
+            commit('updateCurrentProperty', resp);
+            resolve(resp);
+          })
+          .catch(() => {
+            reject(console.error);
+          });
+      });
     },
     clearProperty({ commit }) {
       commit('clearProperty');

src/store/modules/property/propertyEdit.js

         .catch(console.error);
     },
     updateProperty({ commit }, item) {
-      axios
-        .post('/api/PropertyImage', item.images)
-        .then(commit('ClearNewImages'))
-        .catch(console.error);
+      return new Promise((resolve) => {
+        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);
+        axios
+          .put('/api/Property', item.property)
+          .then(commit('setProperty', item.property))
+          .catch(console.error);
+        resolve(true);
+      });
     },
     mayEditProperty({ commit }, id) {
       axios