UnivateProperties/src/components/property/propertyeditPage.vue

<template>
  <!-- eslint-disable max-len -->
  <div>
    <div class="container">
      <div class="col-sm-12">
        <div class="tobuy-img-box">
          <img
            src="img/Listings2.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">
        <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">
        <div class="container col-md-10" style="text-align:left">
          <form id="mainForm">
            <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"
                  >
                    <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>
              <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>

              <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>
              <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>
              <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">
              <div class="col-md-12">
                <label for="Property Description">Description</label>
                <TextEditor
                  name="description"
                  v-model="property.description"
                  id="description"
                  style="text-align:left"
                />
                <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, i) 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"
              />
            </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
              :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="wait" id="preloader"></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import TextEditor from 'vue-trix';
import { setTimeout } from 'timers';
import UserField from './propertyUserField.vue';
import ImageLoad from './propertyImage.vue';

export default {
  name: 'PropertyEdit',
  components: {
    UserField,
    ImageLoad,
    TextEditor,
  },
  data() {
    return {
      propertyType: 'Residential',
      salesType: 'Rental',
      selectedProvince: '',
      selectedCity: '',
      images: [],
      propertyFieldValues: [],
      defaultImage: 0,
      wait: false,
    };
  },
  methods: {
    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
    ...mapActions('property', [
      'getPropertyTypes',
      'getPropertyOverviewFields',
      'getPropertyFields',
      'saveProperty',
      'getProperty',
      'getPropertyImages',
      'clearProperty',
      'clearPropertyImages',
      'getPropertyEditDisplay',
      'getPropertySavedOverviewFields',
      'getPropertySavedFields',
      'getSavedPropertyData',
    ]),
    SubmitData() {
      this.wait = true;
      if (this.salesType === 'Sale') {
        this.property.isSale = true;
      }
      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;

      this.saveProperty(this.property);

      setTimeout(
        () => this.$router.push({
            path: '/property/search',
            query: {
              salesType: this.salesType,
              propertyUsageType: this.propertyType,
            },
          }),
        3000,
      );
    },
    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 }));
      }
    },
    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 },
          ),
        );
      }
    },
    getPostalCode(item) {
      this.property.addressLine3 = this.suburbs[
        item.target.options.selectedIndex - 1
      ].postalCode;
    },
    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 = '';
    }

    this.propertyType = this.$route.params.propType;
    this.salesType = this.$route.params.saleType;

    this.getPropertyTypes(this.$route.params.propType);

    this.getProvince();
    if (this.$route.query.id) {
      // this.getCities(Object.assign({}, { province: this.selectedProvince }));
      this.getSavedPropertyData(
        Object.assign({}, { id: this.$route.query.id, type: this.propertyType }),
      );
    } else {
      this.getPropertyOverviewFields();
      this.getPropertyFields(this.$route.params.propType);
    }
    // if (this.$route.params.id) {
    //   this.getPropertyEditDisplay(4); // (this.$route.params.id);
    //   this.propertyType = 'Residential'; // this.propertyEditDisplay.propertyType;
    //   this.salesType = 'Rental'; // this.propertyEditDisplay.saleType;

    //   this.getProvince();
    //   this.getPropertyTypes('Residential');
    //   this.getPropertySavedOverviewFields(4);
    //   this.getPropertySavedFields(
    //     Object.assign(
    //       {},
    //       {
    //         type: 'Residential',
    //         id: 4,
    //       },
    //     ),
    //   );

    //   this.getProperty(this.$route.params.id);
    // } else {

    // }
  },
  computed: {
    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
    ...mapState('property', [
      'propertyTypes',
      'propertyOverviewFields',
      'propertyFields',
      'property',
      'propertyImages',
    ]),
    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.$route.query.id) {
        this.getPropertyTypes(this.$route.params.propType);
        this.getPropertyFields(this.$route.params.propType);
      }

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