UnivateProperties/src/components/property/editProperty/editProperty.vue

<template>
  <div>
    <main id="main">
      <section id="services">
        <div class="container">
          <div class="col-12">
            <h1>Property Details</h1>
          </div>
          <main id="main" style="margin-top:-20px">
            <div class="container pt-5 pb-5">
              <div class="row my-3">
                <div class="col-md-6">
                  <select
                    class="form-control uniSelect"
                    v-model="property.propertyUsageType"
                    @change="UpdateUsageType"
                    :disabled="!canEdit"
                  >
                    <option>Commercial</option>
                    <option>Residential</option>
                  </select>
                </div>
                <div class="col-md-6">
                  <select
                    class="form-control uniSelect"
                    v-model="property.statusString"
                    @change="StatusChanged"
                  >
                    <option v-for="(item, i) in statuses" :key="i">{{ item }}</option>
                  </select>
                </div>
              </div>
              <div class="row my-3">
                <div class="col-md-6">
                  <div v-if="!property.propertyName">
                    <label for="propertyName" class="uniSelectLabel">PROPERTY NAME</label>
                  </div>
                  <input
                    class="form-control uniInput"
                    type="text"
                    name="propertyName"
                    v-model="property.propertyName"
                    :disabled="!canEdit"
                  />
                </div>
                <div class="col-md-6">
                  <div v-if="!property.propertyRef">
                    <label for="propertyName" class="uniSelectLabel">PROPERTY REFERENCE</label>
                  </div>
                  <input
                    class="form-control uniInput"
                    type="text"
                    name="propertyRef"
                    v-model="property.propertyRef"
                    :disabled="!canEdit"
                  />
                </div>
              </div>
              <div class="row my-3">
                <div class="col-md-6">
                  <select
                    class="form-control uniSelect"
                    name="propertyType"
                    id="propertyType"
                    v-model="property.propertyTypeId"
                    :disabled="!canEdit"
                  >
                    <option value="0">Please select type *</option>
                    <option
                      v-for="item in propertyTypes"
                      :value="item.id"
                      :key="item.id"
                    >{{ item.description }}</option>
                  </select>
                </div>
                <div v-if="property.propertyUsageType === 'Commercial'" class="col-md-2">
                  <div v-if="!property.unit">
                    <label for="unit" class="uniSelectLabel">UNIT</label>
                  </div>
                  <input
                    class="form-control uniInput"
                    type="text"
                    name="unit"
                    id="unit"
                    v-model="property.unit"
                    :disabled="!canEdit"
                  />
                </div>
              </div>
              <div class="row my-3">
                <div class="col-md-6">
                  <mapSection
                    v-on:map-location="updateLocation"
                    :savedCoords="property.propertCoords"
                    :canEdit="canEdit"
                  />
                  <input
                    type="checkbox"
                    v-model="property.showAddress"
                    style="margin-right: 10px; margin-top: 10px;"
                    :disabled="!canEdit"
                  />
                  <label>Show address on listing</label>
                </div>
                <div class="col-md-6">
                  <div class="row">
                    <div class="col-md-6">
                      <div v-if="property.price < 1">
                        <label
                          for="price"
                          class="uniSelectLabel"
                          style="text-transform:uppercase; margin-left:17px; background-color:white"
                        >{{ property.salesTypeString }} Price</label>
                      </div>
                      <input
                        class="form-control uniInput"
                        type="number"
                        name="price"
                        id="price"
                        v-model="property.price"
                        :disabled="!canEdit"
                      />
                    </div>
                    <div v-if="!property.isSale" class="col-md-6">
                      <select
                        class="form-control uniSelect"
                        name="propertyType"
                        id="propertyType"
                        v-model="property.pricePer"
                        :disabled="!canEdit"
                      >
                        <option value>Please select</option>
                        <option value="Month">Month</option>
                        <option value="Day">Day</option>
                      </select>
                    </div>
                  </div>
                  <div class="row my-3">
                    <div class="col-md-12">
                      <input
                        type="date"
                        class="form-control uniInput"
                        name="date"
                        v-model="property.dateAvailableString"
                        :disabled="!canEdit"
                      />
                    </div>
                  </div>
                  <div class="row my-3">
                    <br />
                  </div>
                  <div class="row my-3">
                    <div class="col-md-12">
                      <div v-if="!property.streetNumber">
                        <label for="streetNumber" class="uniSelectLabel">STREET NUMBER</label>
                      </div>
                      <input
                        class="form-control uniInput"
                        type="text"
                        name="streetNumber"
                        id="unit"
                        v-model="property.streetNumber"
                        disabled
                      />
                    </div>
                  </div>
                  <div class="row my-3">
                    <div class="col-md-12">
                      <div v-if="!property.streetName">
                        <label for="streetName" class="uniSelectLabel">STREET NAME</label>
                      </div>
                      <input
                        class="form-control uniInput"
                        type="text"
                        name="streetName"
                        id="unit"
                        v-model="property.streetName"
                        disabled
                      />
                    </div>
                  </div>
                  <div class="row my-3">
                    <div class="col-md-12">
                      <div v-if="!property.suburb">
                        <label for="suburb" class="uniSelectLabel">SUBURB</label>
                      </div>
                      <input
                        class="form-control uniInput"
                        type="text"
                        name="suburb"
                        id="unit"
                        v-model="property.suburb"
                        disabled
                      />
                    </div>
                  </div>
                  <div class="row my-3">
                    <div class="col-md-12">
                      <div v-if="!property.city">
                        <label for="city" class="uniSelectLabel">CITY</label>
                      </div>
                      <input
                        class="form-control uniInput"
                        type="text"
                        name="city"
                        id="unit"
                        v-model="property.city"
                        disabled
                      />
                    </div>
                  </div>
                  <div class="row my-3">
                    <div class="col-md-12">
                      <div v-if="!property.province">
                        <label for="province" class="uniSelectLabel">PROVINCE</label>
                      </div>
                      <input
                        class="form-control uniInput"
                        type="text"
                        name="province"
                        id="unit"
                        v-model="property.province"
                        disabled
                      />
                    </div>
                  </div>
                  <div class="row my-3">
                    <div class="col-md-12">
                      <div v-if="!property.postalCode">
                        <label for="postalCode" class="uniSelectLabel">POSTAL CODE</label>
                      </div>
                      <input
                        class="form-control uniInput"
                        type="text"
                        name="postalCode"
                        id="unit"
                        v-model="property.postalCode"
                        disabled
                      />
                    </div>
                  </div>
                  <div class="row my-3">
                    <div class="col-md-12">
                      <div v-if="!property.country">
                        <label for="country" class="uniSelectLabel">COUNTRY</label>
                      </div>
                      <input
                        class="form-control uniInput"
                        type="text"
                        name="country"
                        id="unit"
                        v-model="property.country"
                        disabled
                      />
                    </div>
                  </div>
                  <div class="row my-3">
                    <div class="col-md-12">
                      <button
                        type="button"
                        @click="clearAddress()"
                        class="btn-solid-blue"
                      >Clear Address</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <label for="Property Description" style="font-family:'muli'">Description:</label>
                  <vue-editor
                    v-model="property.description"
                    :editor-toolbar="customToolbar"
                    :disabled="!canEdit"
                  />
                  <br />
                  <p>
                    * A listing fee of R380 including VAT is payable to list your Property on the
                    Uni-Vate website
                  </p>
                </div>
              </div>
              <div class="row">
                <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'">
                      {{ field.name }}
                      <input
                        type="number"
                        class="form-control uniInput"
                        v-model="field.value"
                        :disabled="!canEdit"
                      />
                    </div>
                    <div v-else class="display:none"></div>
                    <div v-if="field.type === 'yesno'">
                      {{ field.name }}
                      <input
                        type="checkbox"
                        v-model="field.value"
                        :disabled="!canEdit"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="section-header">
                    <h2>Media</h2>
                  </div>
                </div>
              </div>
              <div class="form-group row">
                <div class="col-md-12">
                  <label class="uniSelectLabel">Virtual Tour (URL)</label>
                  <div class="input-group-prepend">
                    <input
                      class="form-control uniInput"
                      type="link"
                      name="vtlink"
                      id="vtlink"
                      v-model="property.virtualTour"
                      :disabled="!canEdit"
                    />
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <label class="uniSelectLabel">Video (URL)</label>
                  <div class="input-group-prepend">
                    <input
                      class="form-control uniInput"
                      type="link"
                      name="vlink"
                      id="vlink"
                      v-model="property.video"
                      :disabled="!canEdit"
                    />
                  </div>
                </div>
              </div>
              <div class="row mt-3">
                <div class="col-md-6">
                  <div class="content-header">
                    <h2>Images</h2>
                  </div>

                  <div class="input-group-prepend"></div>
                </div>
              </div>
              <ImageLoad
                :savedImages="propertyImages"
                :loadedImages="loadedImages"
                @DefaultImage="UpdateDefaultImage"
                @DeleteImage="DeleteImage"
                :mayEdit="canEdit"
              />
              <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">Save</button>
              <button v-if="!wait" type="button" @click="Close()" class="btn-solid-blue">Close</button>
              <div v-if="showPropertyTypeError">
                <p
                  class="alert myError"
                >Missing fields. Please fill in all required fields. Marked with *</p>
              </div>
              <div v-if="!addressSet">
                <p class="alert myError">Please enter an address.</p>
              </div>
              <div v-if="wait" id="preloader"></div>
            </div>
          </main>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import mapSection from "../mapSection";
import ImageLoad from "../propertyImage";
import _ from "lodash";

export default {
  name: "PropertyEditPage",
  components: {
    mapSection,
    ImageLoad,
  },
  data() {
    return {
      addressSet: true,
      defaultImage: 0,
      images: [],
      wait: false,
      canEdit: true,
    };
  },
  methods: {
    ...mapActions("property", [
      "getProperty",
      "getPropertyTypes",
      "getPropertyFields",
      "updateProperty",
    ]),
    StatusChanged(item) {
      if (
        item.target.value === "Offer Pending" ||
        item.target.value === "Sold" ||
        item.target.value === "Rented Out"
      ) {
        this.canEdit = false;
      } else {
        this.canEdit = true;
      }
      if (item.target.value === "For Rent") {
        this.property.isSale = false;
      }
      if (item.target.value === "For Sale") {
        this.property.isSale = true;
      }
    },
    clearAddress() {
      this.addressSet = false;
      this.property.streetNumber = undefined;
      this.property.streetName = undefined;
      this.property.suburb = undefined;
      this.property.city = undefined;
      this.property.province = undefined;
      this.property.country = undefined;
      this.property.postalCode = undefined;
      this.property.addressUrl = undefined;
      this.property.propertCoords = undefined;
    },
    UpdateUsageType() {
      this.getPropertyTypes(this.property.propertyUsageType);
      this.getPropertyFields(this.property.propertyUsageType);
    },
    UpdateDefaultImage(item) {
      this.defaultImage = item;
      for (let i = 0; i < this.propertyImages.length; i++) {
        if (i === item) {
          this.propertyImages[i].isDefault = true;
        } else {
          this.propertyImages[i].isDefault = false;
        }
      }
    },
    loadedImages(values) {
      this.images = values;
    },
    SubmitData() {
      this.wait = true;
      this.property.propertyFields = this.propertyFields;

      if (this.images.length > 0) {
        this.property.newImages = [];
      }
      // 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.newImages.push({
          image: this.images[i],
          isDefault: setAsDefault,
        });
      }

      this.property.propertyImages = this.propertyImages;

      //console.log(JSON.stringify(this.property));

      this.updateProperty(this.property).then((fulfilled) => {
        this.$router.push("/PropertyAdmin");
      });
    },
    Close() {
      this.$router.push("/PropertyAdmin");
    },
    updateLocation(place) {
      this.addressSet = true;
      this.property.streetNumber = place.streetNumber;
      this.property.streetName = place.streetName;
      this.property.suburb = place.suburb;
      this.property.city = place.city;
      this.property.province = place.province;
      this.property.country = place.country;
      this.property.postalCode = place.postalCode;
      this.property.addressUrl = place.url;
      this.property.propertCoords = place.coords;
    },
    DeleteImage(item) {
      this.propertyImages[item].isDeleted = true;
    },
  },
  mounted() {
    this.getProperty(this.$route.params.id).then((fulfilled) => {
      this.wait = false;
      if (
        this.property.statusString === "Offer Pending" ||
        this.property.statusString === "Sold" ||
        this.property.statusString === "Rented Out"
      ) {
        this.canEdit = false;
      } else {
        this.canEdit = true;
      }
    });
  },
  computed: {
    ...mapState("property", [
      "property",
      "propertyTypes",
      "propertyImages",
      "propertyFields",
      "statuses",
    ]),
    savedImages() {
      const list = [];
      for (let i = 0; i < this.propertyImages.length; i++) {
        list.push(this.proeprtyImages[i].image);
      }
      return list;
    },
  },
};
</script>

<style lang="scss" scoped></style>