UnivateProperties/src/components/property/propertyPage.vue

<template>
  <!-- eslint-disable max-len -->
  <div v-if="property">
    <div class="container">
      <br />
      <div class="row">
        <div class="col-md-12 col-lg-8">
          <div class="title-box-d">
            <h1
              class="title-d"
              style="text-align:left; font-size: 250%"
            >{{ property.shortDescription }}</h1>
          </div>
        </div>
      </div>
    </div>
    <!--/ Intro Single End /-->

    <!--/ property Single Star /-->
    <section class="property-single nav-arrow-b">
      <div class="container">
        <div class="row">
          <div id="app" class="scrolling-wrapper">
            <div class="card">
              <img
                class="image"
                v-for="(image, i) in propertyImages"
                :src="image"
                @click="index = i"
                :key="i"
              />
            </div>
            <gallery :images="propertyImages" :index="index" @close="index = null"></gallery>
          </div>
        </div>
        <br />
        <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" style="text-align:left">Property Description</h3>
                    </div>
                  </div>
                </div>
                <div
                  class="property-description"
                  style="text-align:left"
                  v-html="property.description"
                />
                <div v-for="display in property.displayData" :key="display.id">
                  <div class="row section-t3" style="text-align:left">
                    <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 style="width: 300px; height: 80px; border-style: solid; color: #60CBEB;">
                    <!-- <span class="ion-money">R</span> -->

                    <div class="card-title-c align-self-center">
                      <h5 class="title-c">R{{ formatPrice(property.price) }}</h5>
                      <h6 v-if="property.pricePer">Per {{ property.pricePer }}</h6>
                    </div>
                  </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" style="text-align:left">Summary</h3>
                      </div>
                    </div>
                  </div>
                  <div class="summary-list">
                    <ul class="list">
                      <li v-if="!property.isSale" class="d-flex justify-content-between">
                        <strong>Available:</strong>
                        <span
                          v-if="property.dateAvailable < date"
                        >{{ property.dateAvailable | toDate }}</span>
                        <span v-else>Now</span>
                      </li>
                      <li class="d-flex justify-content-between">
                        <strong>Property ID:</strong>
                        <span>{{ property.id }}</span>
                      </li>
                      <!-- Should not be visible? -->
                      <!-- <li class="d-flex justify-content-between">
                        <strong>Status:</strong>
                        <span
                          v-if="property.status"
                        >{{ property.status.code }} - {{ property.status.description }}</span>
                      </li>-->
                      <li class="d-flex justify-content-between">
                        <strong>Address:</strong>
                        <span
                          style="text-align:right"
                          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" v-if="mayEdit">
                  <button
                    type="button"
                    class="btn btn-b-n"
                    data-toggle="modal"
                    data-target="#myModal"
                  >Make an Offer</button>
                  <div id="myModal" class="modal fade" role="dialog">
                    <div class="modal-dialog modal-lg">
                      <!-- Modal content-->
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div padding-left="20px">
                          <makeOffer
                            name="MakeOffer"
                            :isMakeOffer="true"
                            :isProperty="true"
                            :item="{
                              id: property.id,
                              shortDescription: property.shortDescription,
                              description: property.description,
                              price: property.price
                            }"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="col-md-12"
                  v-if="!mayEdit"
                  style="background-color: #ff8344; color: white;"
                >
                  <p>
                    <b>Offer Pending</b>
                  </p>
                </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" style="text-align:left">Contact Agent</h3>
                      </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-b-n">Send Message</button>
                            </div>
                          </div>
                        </form>
                        <br />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Tab Control -->
        <div class="row">
          <div class="col-md-12">
            <div v-if="property.virtualTour" class="row justify-content-between">
              <div class="col-md-12 col-lg-12 section-md-t3">
                <div class="row">
                  <div class="col-md-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="700"
                  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-12 col-lg-12 section-md-t3">
                <div class="row">
                  <div class="col-md-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="700"
                  frameborder="0"
                  style="border:0"
                  allowfullscreen
                ></iframe>
              </div>
            </div>
          </div>
          <!-- End Tab Control -->
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import makeOffer from "../processFlow/makeOffer.vue";
import gallery from "../shared/gallerySlideShow.vue";

export default {
  name: "property",
  components: {
    makeOffer,
    gallery
  },
  data() {
    return {
      index: null,
      date: new Date()
    };
  },
  mounted() {
    this.getProperty(this.$route.params.id);
    this.getPropertyImages(this.$route.params.id);
    this.mayEditProperty(this.$route.params.id);
  },
  computed: {
    ...mapState("property", ["property", "propertyImages"]),
    ...mapState("propertyEdit", ["mayEdit"])
  },
  methods: {
    ...mapActions("property", [
      "getProperty",
      "getPropertyImages",
      "clearPropertyImages"
    ]),
    ...mapActions("propertyEdit", ["mayEditProperty"]),
    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">
.image {
  width: 150px;
  height: 150px;
  background-size: cover;
  cursor: pointer;
  margin: 5px;
  border-radius: 3px;
  border: 1px solid lightgray;
  object-fit: contain;
}
.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;

  .card {
    display: inline-block;
  }
}
</style>