UnivateProperties/src/components/property/propertyPage.vue

<template>
  <!-- eslint-disable max-len -->
  <div v-if="property">
    <section class="intro-single">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="title-single-box">
              <h1 class="title-single">{{ property.shortDescription }}</h1>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--/ Intro Single End /-->

    <!--/ property Single Star /-->
    <section class="property-single nav-arrow-b">
      <div class="container">
        <div class="row">
          <lightBox
            :thumbnails="propertyImages"
            :largeImages="propertyImages"
            :caption="false"
            class="lightBox"
          />
        </div>
        <div class="row">
          <div class="col-sm-12">
            <div 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">Property Description</h3>
                    </div>
                  </div>
                </div>
                <div class="property-description" v-html="property.description" />
                <div v-for="display in property.displayData" :key="display.id">
                  <div class="row section-t3">
                    <div class="col-sm-12">
                      <div class="title-box-d">
                        <h3 class="title-d">{{ display.groupName }}</h3>
                      </div>
                    </div>
                  </div>
                  <div class="summary-list">
                    <ul class="list" v-for="item in display.values" :key="item.id">
                      <li class="d-flex justify-content-between">
                        <strong>{{ item.name }}:</strong>
                        <span v-html="item.value"></span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="col-md-5 col-lg-4">
                <div class="property-price d-flex justify-content-center foo">
                  <div class="card-header-c d-flex">
                    <div class="card-box-ico">
                      <span class="ion-money">R</span>
                    </div>
                    <div class="card-title-c align-self-center">
                      <h5 class="title-c">{{ formatPrice(property.price) }}</h5>
                      <h6 v-if="property.pricePer">Per {{property.pricePer}}</h6>
                    </div>
                  </div>
                </div>
                <div class="property-summary">
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="title-box-d section-t4">
                        <h3 class="title-d">Summary</h3>
                      </div>
                    </div>
                  </div>
                  <div class="summary-list">
                    <ul class="list">
                      <li class="d-flex justify-content-between">
                        <strong>Property ID:</strong>
                        <span>{{ property.id }}</span>
                      </li>
                      <li class="d-flex justify-content-between">
                        <strong>Status:</strong>
                        <span v-if="property.isSale">Sale</span>
                        <span v-else>Rental</span>
                      </li>
                      <li class="d-flex justify-content-between">
                        <strong>Address:</strong>
                        <span
                          v-if="property"
                          v-html="formatAddress(property.addressLine1) + formatAddress(property.addressLine2) + formatAddress(property.addressLine3) + formatAddress(property.suburb ? property.suburb.description : '') + formatAddress(property.city ? property.city.description : '') + formatAddress(property.province ? property.province.description : '') "
                        ></span>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="row section-t3">
                    <div class="col-sm-12">
                      <div class="title-box-d">
                        <h3 class="title-d">Contact Agent</h3>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <img src="img/agent-4.jpg" alt class="img-fluid" />
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="property-agent">
                        <h4 class="title-agent">Anabella Geller</h4>
                        <p class="color-text-a">
                          Nulla porttitor accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet
                          dui. Quisque velit nisi,
                          pretium ut lacinia in, elementum id enim.
                        </p>
                        <ul class="list-unstyled">
                          <li class="d-flex justify-content-between">
                            <strong>Phone:</strong>
                            <span class="color-text-a">(222) 4568932</span>
                          </li>
                          <li class="d-flex justify-content-between">
                            <strong>Mobile:</strong>
                            <span class="color-text-a">777 287 378 737</span>
                          </li>
                          <li class="d-flex justify-content-between">
                            <strong>Email:</strong>
                            <span class="color-text-a">annabella@example.com</span>
                          </li>
                          <li class="d-flex justify-content-between">
                            <strong>Skype:</strong>
                            <span class="color-text-a">Annabela.ge</span>
                          </li>
                        </ul>
                        <div class="socials-a">
                          <ul class="list-inline">
                            <li class="list-inline-item">
                              <a href="#">
                                <i class="fa fa-facebook" aria-hidden="true"></i>
                              </a>
                            </li>
                            <li class="list-inline-item">
                              <a href="#">
                                <i class="fa fa-twitter" aria-hidden="true"></i>
                              </a>
                            </li>
                            <li class="list-inline-item">
                              <a href="#">
                                <i class="fa fa-instagram" aria-hidden="true"></i>
                              </a>
                            </li>
                            <li class="list-inline-item">
                              <a href="#">
                                <i class="fa fa-pinterest-p" aria-hidden="true"></i>
                              </a>
                            </li>
                            <li class="list-inline-item">
                              <a href="#">
                                <i class="fa fa-dribbble" aria-hidden="true"></i>
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="property-contact">
                        <form class="form-a">
                          <div class="row">
                            <div class="col-md-12 mb-1">
                              <div class="form-group">
                                <input
                                  type="text"
                                  class="form-control form-control-lg form-control-a"
                                  id="inputName"
                                  placeholder="Name *"
                                  required
                                />
                              </div>
                            </div>
                            <div class="col-md-12 mb-1">
                              <div class="form-group">
                                <input
                                  type="email"
                                  class="form-control form-control-lg form-control-a"
                                  id="inputEmail1"
                                  placeholder="Email *"
                                  required
                                />
                              </div>
                            </div>
                            <div class="col-md-12 mb-1">
                              <div class="form-group">
                                <textarea
                                  id="textMessage"
                                  class="form-control"
                                  placeholder="Comment *"
                                  name="message"
                                  cols="45"
                                  rows="8"
                                  required
                                ></textarea>
                              </div>
                            </div>
                            <div class="col-md-12">
                              <button type="submit" class="btn btn-a">Send Message</button>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import lightBox from '../shared/lightBoxGallery.vue';

export default {
  name: 'property',
  components: {
    lightBox,
  },
  data() {
    return {};
  },
  mounted() {
    this.getProperty(this.$route.params.id);
    this.getPropertyImages(this.$route.params.id);
  },
  computed: {
    ...mapState('property', ['property', 'propertyImages']),
  },
  methods: {
    ...mapActions('property', [
      'getProperty',
      'getPropertyImages',
      'clearPropertyImages',
    ]),
    formatPrice(value) {
      const val = (value / 1).toFixed(2);
      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
    },
    formatAddress(value) {
      if (value !== '') {
        return `${value}<br/>`;
      }
      return '';
    },
  },
  beforeDestroy() {
    this.clearPropertyImages();
  },
};
</script>

<style lang ="scss">
.light-box {
  &__thumbnail {
    margin: 20px;
    width: 200px;
  }
}
img {
  max-width: 100%;
}
</style>