UnivateProperties/src/components/property/propertyCreate.vue

<template>
  <!-- eslint-disable max-len -->
  <div>
    <div class="container">
      <div class="col-sm-12">
        <br />
        <div class="tobuy-img-box">
          <img
            v-if="propertyType === 'Commercial'"
            src="img/Commercial-Property.jpg"
            alt="Timeshare To Buy"
            class="img-fluid"
            style="width:800px;height:400px; border-radius:10px"
          />
          <img
            v-else
            src="img/Listing3.2.jpg"
            alt="Timeshare To Buy"
            class="img-fluid"
            style="width:800px;height:400px; border-radius:10px"
          />
        </div>
        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
          <h3 class="sinse-title">List {{ propertyType }} {{ salesType }} Property</h3>
        </div>
      </div>
      <br />
      <div class="row" v-if="!mayEdit">
        <div class="container col-md-10">
          <p class="alert myError">Please Login to add a property</p>
        </div>
      </div>
      <div class="row" v-if="mayEdit">
        <div class="container col-md-10">
          <div class="title-box-d">
            <h5 class="title-d" style="text-align:left">Property Overview</h5>
          </div>
        </div>
      </div>
      <div class="row mb-3" v-if="mayEdit">
        <div class="container col-md-10" style="text-align:left">
          <form id="mainForm">
            <div class="form-goup row">
              <div class="col-md-4">
                <label>Usage Type</label>
                <div class="input-group-prepend">
                  <span class="input-group-text" style="color: #60CBEB">
                    <b>U</b>
                  </span>
                  <select
                    class="form-control"
                    name="propertyUsageType"
                    id="propertyUsageType"
                    v-model="propertyType"
                    @change="TypeChanged"
                  >
                    <option value="Residential">Residential</option>
                    <option value="Commercial">Commercial</option>
                  </select>
                </div>
              </div>
            </div>
            <br />
            <div class="form-group row">
              <div class="col-md-4">
                <label>Property Type *</label>
                <div class="input-group-prepend">
                  <span class="input-group-text" style="color: #60CBEB">
                    <b>T</b>
                  </span>
                  <select
                    class="form-control"
                    name="propertyType"
                    id="propertyType"
                    v-model="property.propertyTypeId"
                    @change="PropertyTypeSelected"
                  >
                    <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="showPropertyTypeError">
                  <p class="alert myError">Please select a type</p>
                </div>
              </div>
              <div v-if="propertyType === 'Commercial'" class="col-md-4">
                <label>Property Name</label>
                <div class="input-group-prepend">
                  <span class="input-group-text" style="color: #60CBEB">
                    <b>N</b>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="propertyName"
                    id="propertyName"
                    v-model="property.propertyName"
                  />
                </div>
              </div>
              <div v-if="propertyType === 'Commercial'" class="col-md-4">
                <label>Unit</label>
                <div class="input-group-prepend">
                  <span class="input-group-text" style="color: #60CBEB">
                    <b>U#</b>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="unit"
                    id="unit"
                    v-model="property.unit"
                  />
                </div>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-6" style="margin-bottom: 1em">
                <label>Street Number</label>
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="streetnumber"
                    v-model="property.addressLine1"
                  />
                </div>
              </div>
              <div class="col-md-6" style="margin-bottom: 1em">
                <label>Street Name</label>
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="streetname"
                    id="streetname"
                    v-model="property.addressLine2"
                  />
                </div>
              </div>
              <div class="col-md-6" style="margin-bottom: 1em">
                <label>Province *</label>
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <select
                    class="form-control"
                    name="propertyType"
                    id="propertyType"
                    @change="ProvinceSelected"
                    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>
                  </select>
                </div>
                <div v-if="showProvinceError">
                  <p class="alert myError">Please select a Province</p>
                </div>
              </div>

              <div class="col-md-6" style="margin-bottom: 1em">
                <label>City *</label>
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <select
                    class="form-control"
                    name="propertyType"
                    id="propertyType"
                    @change="CitySelected"
                    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>
                  </select>
                </div>
                <div v-if="showCityError">
                  <p class="alert myError">Please select a City</p>
                </div>
              </div>
              <div class="col-md-6" style="margin-bottom: 1em">
                <label>Suburb *</label>
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <select
                    class="form-control"
                    name="propertyType"
                    id="suburbselector"
                    v-model="property.suburbId"
                    @change="getPostalCode"
                  >
                    <option value="0">Please select suburb</option>
                    <option v-for="suburb in suburbs" :value="suburb.id" :key="suburb.id">
                      {{
                      suburb.description
                      }}
                    </option>
                  </select>
                </div>
                <div v-if="showSuburbError">
                  <p class="alert myError">Please select a Suburb</p>
                </div>
              </div>
              <div class="col-md-6" style="margin-bottom: 1em">
                <label>Postal Code</label>
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="postalcode"
                    v-model="property.addressLine3"
                  />
                </div>
              </div>
            </div>

            <div class="form-group row">
              <div class="col-md-6">
                <label v-if="salesType === 'Rental'">Rental Price</label>
                <label v-if="salesType !== 'Rental'">Sales Price</label>
                <div class="input-group-prepend">
                  <span class="input-group-text" style="color: #60CBEB">
                    <b>R</b>
                  </span>
                  <input
                    class="form-control"
                    type="number"
                    name="price"
                    id="price"
                    placeholder="R"
                    v-model="property.price"
                  />
                </div>
              </div>
              <div class="col-md-6" v-if="salesType === 'Rental'">
                <label>Per</label>
                <div class="input-group-prepend">
                  <span class="input-group-text" style="color: #60CBEB">
                    <b>D/M</b>
                  </span>
                  <select
                    class="form-control"
                    name="propertyType"
                    id="propertyType"
                    v-model="property.pricePer"
                  >
                    <option value>Please select</option>
                    <option value="Month">Month</option>
                    <option value="Day">Day</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="form-group row" v-if="salesType === 'Rental'">
              <div class="col-md-12">
                <input
                  type="date"
                  class="form-control"
                  name="date"
                  v-model="property.dateAvailable"
                />
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-12">
                <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>
              </div>
            </div>
            <div class="form-group row" />
            <UserField
              v-if="(propertyType === 'Residential') & (propertyOverviewFields.length > 0)"
              :fields="propertyOverviewFields[0].fields"
              @UpdateUserDefinedFields="UpdateUserDefinedFields"
              :id="1"
            ></UserField>
            <div class="form-group row" />
            <div v-for="item in propertyFields" :key="item.id">
              <div class="row">
                <div class="col-sm-12">
                  <div class="title-box-d">
                    <h5 class="title-d">{{ item.name }}</h5>
                  </div>
                </div>
              </div>
              <UserField
                :fields="item.fields"
                :id="item.name"
                @UpdateUserDefinedFields="UpdateUserDefinedFields"
                :fieldValues="item.fields"
              />
            </div>
            <div class="form-group row" />
            <div class="row">
              <div class="col-sm-12">
                <div class="title-box-d">
                  <h5 class="title-d">Media</h5>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-12">
                <label>Virtual Tour (URL)</label>
                <div class="input-group-prepend">
                  <span class="input-group-text" style="color: #60CBEB">
                    <b>VT</b>
                  </span>
                  <input
                    class="form-control"
                    type="link"
                    name="vtlink"
                    id="vtlink"
                    v-model="property.virtualTour"
                  />
                </div>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-12">
                <label>Video (URL)</label>
                <div class="input-group-prepend">
                  <span class="input-group-text" style="color: #60CBEB">
                    <b>V</b>
                  </span>
                  <input
                    class="form-control"
                    type="link"
                    name="vlink"
                    id="vlink"
                    v-model="property.video"
                  />
                </div>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-6">
                <label>Images</label>
                <div class="input-group-prepend"></div>
              </div>
            </div>
            <ImageLoad
              :loadedImages="loadedImages"
              :savedImages="propertyImages"
              @DefaultImage="UpdateDefaultImage"
            />
            <button
              v-if="!wait"
              type="button"
              @click="SubmitData()"
              class="btn btn-b-n"
              style="width: 85px; height:40px;"
            >Save</button>
            <div
              v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError"
            >
              <p
                class="alert myError"
              >Missing fields. Please fill in all required fields. Marked with *</p>
            </div>
            <div v-if="wait" id="preloader"></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { VueEditor } from "vue2-editor";
import UserField from "./propertyUserField.vue";
import ImageLoad from "./propertyImage.vue";
import Log from "../../assets/Log";

export default {
  name: "PropertyCreate",
  components: {
    UserField,
    ImageLoad,
    VueEditor
  },
  data() {
    return {
      propertyType: "Residential",
      salesType: "Rental",
      selectedProvince: "",
      selectedCity: "",
      images: [],
      propertyFieldValues: [],
      defaultImage: 0,
      wait: false,
      customToolbar: [
        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        ["bold", "italic", "underline", "strike"],
        [
          { align: "" },
          { align: "center" },
          { align: "right" },
          { align: "justify" }
        ],
        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
        [{ script: "sub" }, { script: "super" }],
        [{ indent: "-1" }, { indent: "+1" }]
      ],
      error: "",
      showPropertyTypeError: false,
      showProvinceError: false,
      showCityError: false,
      showSuburbError: false,
      showDateError: false,
      user: Log.getUser(),
      mayEdit: Log.isLoggedIn()
    };
  },
  methods: {
    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
    ...mapActions("property", [
      "getPropertyTypes",
      "getPropertyOverviewFields",
      "getPropertyFields",
      "saveProperty",
      "getProperty",
      "getPropertyImages",
      "clearProperty",
      "clearPropertyImages",
      "getPropertyEditDisplay",
      "getPropertySavedOverviewFields",
      "getPropertySavedFields",
      "getSavedPropertyData"
    ]),
    TypeChanged() {
      this.property.propertyUsageType = this.propertyType;
    },
    SubmitData() {
      if (this.property.propertyTypeId === 0) {
        this.showPropertyTypeError = true;
      }
      if (this.property.provinceId === 0) {
        this.showProvinceError = true;
      }
      if (this.property.cityId === 0) {
        this.showCityError = true;
      }
      if (this.property.suburbId === 0) {
        this.showSuburbError = true;
      }

      if (
        this.salesType === "Rental" &&
        this.property.dateAvailable === "undef"
      ) {
        this.showDateError = true;
      }

      if (
        this.showPropertyTypeError ||
        this.showProvinceError ||
        this.showCityError ||
        this.showSuburbError ||
        this.showDateError
      ) {
        return;
      }

      this.wait = true;
      if (this.salesType === "Sale") {
        this.property.isSale = true;
        this.property.dateAvailable = new Date();
      }
      // 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.propertyImages.push({
          image: this.images[i],
          isDefault: setAsDefault
        });
      }
      this.property.propertyUserFields = this.propertyFieldValues;

      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");
    },
    PropertyTypeSelected(item) {
      if (item.target.options.selectedIndex > 0) {
        this.showPropertyTypeError = false;
      } else {
        this.showPropertyTypeError = true;
      }
    },
    ProvinceSelected(item) {
      if (item.target.options.selectedIndex > 0) {
        this.selectedProvince = this.provinces[
          item.target.options.selectedIndex - 1
        ].description;
        this.getCities(Object.assign({}, { province: this.selectedProvince }));
        this.showProvinceError = false;
      } else {
        this.showProvinceError = true;
      }
    },
    CitySelected(item) {
      if (item.target.options.selectedIndex > 0) {
        this.selectedCity = this.cities[
          item.target.options.selectedIndex - 1
        ].description;
        this.getSuburbs(
          Object.assign(
            {},
            { province: this.selectedProvince, city: this.selectedCity }
          )
        );
        this.showCityError = false;
      } else {
        this.showCityError = true;
      }
    },
    getPostalCode(item) {
      this.property.addressLine3 = this.suburbs[
        item.target.options.selectedIndex - 1
      ].postalCode;
      if (item.target.options.selectedIndex > 0) {
        this.showSuburbError = false;
      } else {
        this.showSuburbError = true;
      }
    },
    loadedImages(values) {
      this.images = values;
    },
    UpdateUserDefinedFields(item) {
      let update = false;
      this.propertyFieldValues.forEach(element => {
        if (element.userDefinedFieldId === item.userDefinedFieldId) {
          element.value = item.value;
          update = true;
        }
      });
      if (!update) {
        this.propertyFieldValues.push(item);
      }
    },
    UpdateDefaultImage(item) {
      this.defaultImage = item;
    }
  },
  mounted() {
    this.wait = false;
    this.clearProperty();
    this.clearPropertyImages();
    this.images = [];
    this.defaultImage = 0;

    if (this.propertyOverviewFields.length > 0) {
      this.propertyOverviewFields = [];
    }
    if (this.propertyFields.length > 0) {
      this.propertyFields = [];
    }
    if (this.property.description !== "") {
      this.property.description = "";
    }

    if (this.$route.params.propertyUsageType) {
      this.propertyType = this.$route.params.propertyUsageType;
    }
    this.salesType = this.$route.params.saleType;

    this.getPropertyTypes(this.propertyType);

    this.getProvince();
    this.getPropertyOverviewFields();
    this.getPropertyFields(this.propertyType);
  },
  computed: {
    ...mapState("searchTab", ["provinces", "cities", "suburbs"]),
    ...mapState("property", [
      "propertyTypes",
      "propertyOverviewFields",
      "propertyFields",
      "property",
      "propertyImages"
    ]),
    ...mapState("authentication", ["user"]),
    SalesTypeChanged() {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      // this.propertyType = this.$route.params.propType;
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.salesType = this.$route.params.saleType;
      if (this.property && this.property.propertyUsageType) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.propertyType = this.property.propertyUsageType;
      }

      if (!this.$route.query.id) {
        this.getPropertyFields(this.propertyType);
      }

      this.getPropertyTypes(this.propertyType);

      return this.propertyType;
    }
  },
  watch: {
    SalesTypeChanged() {
      return null;
    }
  }
};
</script>