UnivateProperties/src/components/property/propertyeditPage.vue

<template>
  <div @submit.prevent="SubmitData">
    <div class="container">
      <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">List {{ propertyType }} {{ salesType }} Property</h1>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div class="row">
        <div class="col-sm-12">
          <div class="title-box-d">
            <h5 class="title-d">Property Overview</h5>
          </div>
        </div>
      </div>
      <div class="row mb-3">
        <div class="col-md-12">
          <form
            id="mainForm"
            method="POST"
            action="/to-sell"
            accept-charset="UTF-8"
            enctype="multipart/form-data"
          >
            <div class="form-group row">
              <div class="col-md-4">
                <label for="Property Type"></label>
                <select
                  class="form-control"
                  name="propertyType"
                  id="propertyType"
                  v-model="property.propertyTypeId"
                >
                  <option value="0">Please select Property Type</option>
                  <option v-for="item in propertyTypes" :value="item.id">{{ item.description }}</option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-4">
                <label for="Address Line 1"></label>
                <input
                  class="form-control"
                  type="text"
                  placeholder="Address Line 1"
                  name="address1"
                  id="address1"
                  v-model="property.addressLine1"
                />
              </div>
              <div class="col-md-4">
                <label for="Address Line 2"></label>
                <input
                  class="form-control"
                  type="text"
                  placeholder="Address Line 2"
                  name="address2"
                  id="address2"
                  v-model="property.addressLine2"
                />
              </div>
              <div class="col-md-4">
                <label for="Address Line 3"></label>
                <input
                  class="form-control"
                  type="text"
                  placeholder="Address Line 3"
                  name="address3"
                  id="address3"
                  v-model="property.addressLine3"
                />
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-4">
                <label for="Province"></label>
                <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"
                  >{{ province.description }}</option>
                </select>
              </div>
              <div class="col-md-4">
                <label for="City"></label>
                <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">{{ city.description }}</option>
                </select>
              </div>
              <div class="col-md-4">
                <label for="Suburb"></label>
                <select
                  class="form-control"
                  name="propertyType"
                  id="suburbselector"
                  v-model="property.suburbId"
                >
                  <option value="0">Please select Suburb</option>
                  <option v-for="suburb in suburbs" :value="suburb.id">{{ suburb.description }}</option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-4">
                <label v-if="salesType === 'Rental'">Rental Price</label>
                <label v-if="salesType !== 'Rental'">Sales Price</label>
                <input
                  class="form-control"
                  type="number"
                  name="price"
                  id="price"
                  placeholder="R"
                  v-model="property.price"
                />
              </div>
              <div class="col-md-4" v-if="salesType === 'Rental'">
                <label>Per</label>
                <select
                  class="form-control"
                  name="propertyType"
                  id="propertyType"
                  v-model="property.per"
                >
                  <option value>Please select</option>
                  <option value="month">Month</option>
                  <option value="day">Day</option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-12">
                <label for="Property Description"></label>
                <textarea
                  class="form-control editor"
                  placeholder="Property Description"
                  name="description"
                  v-model="property.description"
                ></textarea>
                <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="ApiRunning" :fields="propValuesProp[0].fields"></UserField>
            <div class="form-group row" />
            <div v-for="item in propertyValues">
              <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.id" />
            </div>
            <div class="form-group row" />
            <div class="row">
              <div class="col-sm-12">
                <div class="title-box-d">
                  <h5 class="title-d">Images</h5>
                </div>
              </div>
            </div>
            <ImageLoad />
            <button type="submit" class="btn btn-b-n" style="width: 85px; height:40px;">Save</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserField from "./propertyUserField.vue";
import ImageLoad from "./propertyImage.vue";

export default {
  name: "PropertyEdit",
  components: {
    UserField,
    ImageLoad
  },
  data() {
    return {
      ApiRunning: false,
      propertyType: "Residential",
      salesType: "Rental",
      imageFile: "",
      provinces: [],
      cities: [],
      suburbs: [],
      propertyValues: [],
      propValuesProp: [],
      propertyTypes: [],
      selectedProvince: "",
      selectedCity: "",
      property: {
        propertyTypeId: 0,
        addressLine1: "",
        addressLine2: "",
        addressLine3: "",
        suburbId: 0,
        cityId: 0,
        provinceId: 0,
        price: "",
        per: "",
        description: "",
        isSale: false
      }
    };
  },
  methods: {
    SubmitData() {
      const axios = require("axios");
      axios
        .post("http://localhost:57260/Property/Property", this.property, {
          headers: {
            "Content-type": "application/json"
          }
        })
        .then(response => {})
        .catch(e => {
          alert(e);
        });

      console.log(JSON.stringify(this.property));
    },
    ProvinceSelected(item) {
      if (item.target.options.selectedIndex > 0) {
        this.selectedProvince = this.provinces[
          item.target.options.selectedIndex - 1
        ].description;
        const axios = require("axios");
        axios
          .get(
            `http://localhost:57260/region/city/getby/${this.selectedProvince}`
          )
          .then(response => (this.cities = response.data));
      }
    },
    CitySelected(item) {
      if (item.target.options.selectedIndex > 0) {
        this.selectedCity = this.cities[
          item.target.options.selectedIndex - 1
        ].description;
        const axios = require("axios");
        axios
          .get(
            `http://localhost:57260/region/Suburb/${this.selectedProvince}/${this.selectedCity}`
          )
          .then(response => (this.suburbs = response.data));
      }
    }
  },
  mounted() {
    this.propertyType = this.$route.params.propType;
    this.salesType = this.$route.params.saleType;

    const axios = require("axios");
    axios
      .get("http://localhost:57260/Property/PropertyFields/Property Overview")
      .then(response => (this.propValuesProp = response.data));

    axios
      .get("http://localhost:57260/Property/PropertyFields")
      .then(response => (this.propertyValues = response.data));

    axios
      .get(
        `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
      )
      .then(response => (this.propertyTypes = response.data));

    axios
      .get("http://localhost:57260/region/province")
      .then(response => (this.provinces = response.data));
  },
  computed: {
    SalesTypeChanged() {
      this.propertyType = this.$route.params.propType;
      this.salesType = this.$route.params.saleType;

      const axios = require("axios");
      axios
        .get(
          `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
        )
        .then(response => (this.propertyTypes = response.data));
    }
  },
  watch: {
    SalesTypeChanged() {
      console.log(this.salesType);
    }
  }
};
</script>