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;"
          />
        </div>
        <div class="sinse-box">
          <h3 class="sinse-title">
            List {{ propertyType }} {{ salesType }} Property
            <span></span>
          </h3>
        </div>
      </div>
      <br />
      <div class="row">
        <div class="container col-md-10">
          <div class="title-box-d">
            <h5 class="title-d">Property Overview</h5>
          </div>
        </div>
      </div>
      <div class="row mb-3">
        <div class="container col-md-10">
          <form id="mainForm">
            <div class="form-group row">
              <div class="col-md-4">
                <label>Property Type</label>
                <select
                  class="form-control"
                  name="propertyType"
                  id="propertyType"
                  v-model="property.propertyTypeId"
                >
                  <option value="0">Please Select</option>
                  <option
                    v-for="item in propertyTypes"
                    :value="item.id"
                    :key="item.id"
                  >{{ item.description }}</option>
                </select>
              </div>
              <div v-if="propertyType === 'Commercial'" class="col-md-4">
                <label>Property Name</label>
                <input
                  class="form-control"
                  type="text"
                  name="propertyName"
                  id="propertyName"
                  v-model="property.propertyName"
                />
              </div>
              <div v-if="propertyType === 'Commercial'" class="col-md-4">
                <label>Unit</label>
                <input
                  class="form-control"
                  type="text"
                  name="unit"
                  id="unit"
                  v-model="property.unit"
                />
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-4">
                <label>Address Line 1</label>
                <input
                  class="form-control"
                  type="text"
                  name="address1"
                  id="address1"
                  v-model="property.addressLine1"
                />
              </div>
              <div class="col-md-4">
                <label>Address Line 2</label>
                <input
                  class="form-control"
                  type="text"
                  name="address2"
                  id="address2"
                  v-model="property.addressLine2"
                />
              </div>
              <div class="col-md-4">
                <label>Address Line 3</label>
                <input
                  class="form-control"
                  type="text"
                  name="address3"
                  id="address3"
                  v-model="property.addressLine3"
                />
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-4">
                <label>Province</label>
                <select
                  class="form-control"
                  name="propertyType"
                  id="propertyType"
                  @change="ProvinceSelected"
                  v-model="property.provinceId"
                >
                  <option value="0">Please select</option>
                  <option
                    v-for="province in provinces"
                    :value="province.id"
                    :key="province.id"
                  >{{ province.description }}</option>
                </select>
              </div>
              <div class="col-md-4">
                <label>City</label>
                <select
                  class="form-control"
                  name="propertyType"
                  id="propertyType"
                  @change="CitySelected"
                  v-model="property.cityId"
                >
                  <option value="0">Please Select</option>
                  <option
                    v-for="city in cities"
                    :value="city.id"
                    :key="city.id"
                  >{{ city.description }}</option>
                </select>
              </div>
              <div class="col-md-4">
                <label>Suburb</label>
                <select
                  class="form-control"
                  name="propertyType"
                  id="suburbselector"
                  v-model="property.suburbId"
                >
                  <option value="0">Please Select</option>
                  <option
                    v-for="suburb in suburbs"
                    :value="suburb.id"
                    :key="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">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"
            ></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.id"
                @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
              type="button"
              @click="SubmitData()"
              class="btn btn-b-n"
              style="width: 85px; height:40px;"
            >Save</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import TextEditor from 'vue-trix';
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,
    };
  },
  methods: {
    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
    ...mapActions('property', [
      'getPropertyTypes',
      'getPropertyOverviewFields',
      'getPropertyFields',
      'saveProperty',
      'getProperty',
      'getPropertyImages',
      'clearProperty',
      'clearPropertyImages',
      'getPropertyEditDisplay',
      'getPropertySavedOverviewFields',
      'getPropertySavedFields',
    ]),
    SubmitData() {
      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.saveProperty(this.property);

      this.$router.push({
        path: '/property/search',
        query: { type: this.salesType, propertyType: this.propertyType },
      });
    },
    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 },
          ),
        );
      }
    },
    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.clearProperty();
    this.clearPropertyImages();
    this.images = [];
    this.defaultImage = 0;
    // 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 {
    this.propertyType = this.$route.params.propType;
    this.salesType = this.$route.params.saleType;

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

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

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

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