Styles and Property Listing

src/components/property/ListProperty/contentSection.vue

     CommercialCreate
   },
   methods: {
-    ...mapActions("property", ["getPropertyTypes"]),
+    ...mapActions("property", ["getPropertyTypes", "getPropertyFields"]),
     getPropTypeResidential() {
       this.getPropertyTypes("Residential");
+      this.getPropertyFields("Residential");
     },
     getPropTypeCommercial() {
       this.getPropertyTypes("Commercial");
+      this.getPropertyFields("Commercial");
     }
   },
   mounted() {
     this.getPropertyTypes("Residential");
+    this.getPropertyFields("Residential");
   },
   computed: {
     ...mapState("property", ["propertyTypes"])
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.nav-pills .nav-link.active {
+  color: #1b75bb;
+  font-weight: 400;
+  background-color: white;
+}
+</style>

src/components/property/commercial/commercialSearchResults.vue

   },
   mounted() {
     this.wait = true;
-    console.log(this.propertySearch.salesType);
-
     if (typeof this.propertySearch.propertyUsageType === "undefined") {
-      this.propertySearch.propertyUsageType = "Residential";
+      this.propertySearch.propertyUsageType = "Commercial";
     }
     if (this.user) {
       this.propertySearch.userName = this.user.username;
     this.searchProperties(this.propertySearch).then(fulfilled => {
       this.wait = false;
     });
-    console.log(this.properties);
   },
   methods: {
     ...mapActions("propertySearch", [

src/components/property/commercial/createProperty/commercialCreateNew.vue

         <div class="row">
           <div class="col">
             <label v-if="!salesType" class="uniSelectLabel" for="saleType">Sale Type</label>
-            <select class="form-control uniSelect mb-5" name="saleType" v-model="salesType">
+            <select class="form-control uniSelect mb-3" name="saleType" v-model="salesType">
               <option value="Sale">To Sell</option>
               <option value="Rental">To Rent</option>
             </select>
         <div class="section-header">
           <h2>Property Information</h2>
         </div>
-
         <div class="row mb-3" v-for="item in propertyFields" :key="item.id">
           <div class="col-md-6" v-for="field in item.fields" :key="field.id">
             <div v-if="field.type === 'number'">
     this.salesType = this.$route.params.saleType;
 
     this.getPropertyOverviewFields();
-    this.getPropertyFields(this.propertyType);
+    //this.getPropertyFields(this.propertyType);
   },
   computed: {
     ...mapState("property", [

src/components/property/commercial/singleView/contentSection.vue

         </div>
         <div class="col-md-8 p-5 resort-profile">
           <h2 v-if="property.showAddress">
-            {{ property.propertyName }} / {{ property.streetNumber }} {{ property.streetName }}
+            <div style="display:inline" v-if="property.propertyName !== null">
+              {{ property.propertyName }} /
+            </div>
+            {{ property.streetNumber }} {{ property.streetName }}
           </h2>
           <h2>{{ property.propertyName }}</h2>
-          <div>
+          <p>{{ property.shortDescription }}</p>
+          <h4>Property Features</h4>
+          <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
+            <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
+              <div v-if="field.value.toUpperCase() != 'YES'">
+                <i class="fa fa-check-circle"></i> {{ field.value }} {{ field.name }}
+              </div>
+              <div v-else><i class="fa fa-check-circle"></i> {{ field.name }}</div>
+            </div>
+          </div>
+          <div class="mt-5" v-html="property.description"></div>
+          <h4 class="mt-5">Video Tour</h4>
+          <iframe
+            width="100%"
+            src="https://www.youtube.com/embed/watch_popup?v=qKgHJYzWtVA"
+            frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+            style="margin-bottom:-6px"
+            class="mt-3"
+          ></iframe>
+          <!-- <div>
             <table class="table table-striped">
               <thead>
                 <tr>
                 </tr>
               </tbody>
             </table>
-          </div>
+          </div> -->
 
           <!-- <div class="d-flex mt-3">
             <iframe

src/components/property/residential/createProperty/residentialCreateNew.vue

     this.getPropertyTypes(this.propertyType);
 
     this.getPropertyOverviewFields();
-    this.getPropertyFields(this.propertyType);
+    //this.getPropertyFields(this.propertyType);
   },
   computed: {
     ...mapState("property", [

src/components/property/residential/singleView/contentSection.vue

           </div>
           <div class="panel-left p-5" style="margin-top:130px">
             <h2>Property Detial</h2>
+            <!-- TODO: Make it dynamic -->
             <h4 style="color:white">{{ property.price | toCurrency }}</h4>
             <p>#{{ property.propertyRef }}</p>
             <p v-if="property.showAddress">{{ property.addressOther }}</p>
             <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
             <p>{{ property.city }}, {{ property.suburb }}</p>
+            <!-- <div v-for="(data, i) in property.displayData" :key="i">
+              {{ data }}
+            </div> -->
             <p>
               Bedrooms {{ property.displayData[1].values[0].value }}, Bathrooms
               {{ property.displayData[1].values[1].value }}
         </div>
         <div class="col-md-8 p-5 resort-profile">
           <h2 v-if="property.showAddress">
-            {{ property.propertyName }} / {{ property.streetNumber }} {{ property.streetName }}
+            <div style="display:inline" v-if="property.propertyName !== null">
+              {{ property.propertyName }} /
+            </div>
+            {{ property.streetNumber }} {{ property.streetName }}
           </h2>
           <h2 v-else>{{ property.propertyName }}</h2>
           <div class="container">
                 </tr>
               </tbody>
             </table>-->
-            <div v-for="(data, i) in property.displayData" :key="i">
-              <div class="content-header">
-                <h2>{{ data.groupName }}</h2>
+            <h4>Property Features</h4>
+            <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
+              <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
+                <div v-if="field.value.toUpperCase() != 'YES'">
+                  <i class="fa fa-check-circle"></i> {{ field.value }} {{ field.name }}
+                </div>
+                <div v-else><i class="fa fa-check-circle"></i> {{ field.name }}</div>
               </div>
-              <table class="table table-striped">
-                <thead>
-                  <tr>
-                    <th v-for="(tableHead, j) in data.values" :key="j" scope="col">
-                      {{ tableHead.name }}
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td v-for="(tableVal, k) in data.values" :key="k" scope="col">
-                      {{ tableVal.value }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
             </div>
           </div>
+          <h4 class="mt-5">Video Tour</h4>
+          <iframe
+            width="100%"
+            src="https://www.youtube.com/embed/watch_popup?v=qKgHJYzWtVA"
+            frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+            style="margin-bottom:-6px"
+            class="mt-3"
+          ></iframe>
           <p></p>
           <div class="d-flex mt-3">
             <iframe

vue.config.js

   devServer: {
     proxy: {
       "/api": {
-        target: "http://localhost:57260/",
-        //target: "http://training.provision-sa.com:82",
+        //target: "http://localhost:57260/",
+        target: "http://training.provision-sa.com:82",
         changeOrigin: true
       },
       "/nph-srep": {