UnivateProperties/src/components/processFlow/makeOffer.vue

<template>
  <!-- eslint-disable max-len -->
  <div style="padding-left:50px; padding-right:50px; padding-bottom:50px;">
    <div v-if="!isSaved">
      <br />
      <div v-if="isProperty">
        <div class="form-group row">
          <div class="col-md-6">
            <div class="title-box-d">
              <h3 class="title-d">{{ item.shortDescription }}</h3>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <div class="col-md-12" style="text-align:left">
            <div v-html="item.description"></div>
          </div>
        </div>
      </div>
      <div v-if="!isProperty">
        <div class="form-group row">
          <div class="col-md-6 col-lg-5 section-md-t3">
            <div class="title-box-d">
              <h3 class="title-d">{{ item ? item.resort.resortName : '' }}</h3>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <div class="col-md-6">
            <label for="resortunit">Unit</label>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" style="color: #60CBEB">
                  <b>U#</b>
                </span>
              </div>
              <input
                class="form-control"
                type="text"
                id="resort"
                name="resortunit"
                disabled
                v-model="item.unitNumber"
              />
            </div>
          </div>
          <div class="col-md-6">
            <label for="resortWeek">Module / Week Number</label>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" style="color: #60CBEB">
                  <b>M</b>
                </span>
              </div>
              <input
                class="form-control"
                type="text"
                id="week"
                name="resortWeek"
                disabled
                v-model="item.weekNumber"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-md-6">
          <label>Current Price</label>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" style="color: #60CBEB">
                <b>R</b>
              </span>
            </div>
            <input class="form-control" type="number" v-model="item.sellPrice" disabled />
          </div>
        </div>
        <div class="col-md-6">
          <label>Offer</label>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" style="color: #60CBEB">
                <b>R</b>
              </span>
            </div>
            <input
              class="form-control"
              type="number"
              step="any"
              id="minPrice"
              name="minPrice"
              v-model="item.offer"
              :disabled="!isMakeOffer"
            />
          </div>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-md-12">
          <label>Comments</label>
          <textarea
            class="form-control editor form-control-lg form-control-a"
            name="description"
            v-model="item.comment"
            :disabled="!isMakeOffer"
          ></textarea>
        </div>
      </div>
    </div>
    <div v-if="!isSaved" class="container">
      <button
        v-if="isMakeOffer"
        type="button"
        @click="SendOffer()"
        class="btn btn-b-n"
        style="width: 150px; height:40px;"
      >Send Offer</button>
      <button
        v-if="!isMakeOffer && !isDecline && canEdit"
        type="submit"
        @click="Accept()"
        class="btn btn-b-n"
        style="width: 150px; height:40px;"
      >Accept</button>
      <button
        v-if="!isMakeOffer && !isDecline && canEdit"
        type="button"
        @click="Decline()"
        class="btn btn-b-n"
        style="width: 150px; height:40px;"
      >Decline</button>
    </div>
    <div v-if="isDecline || item.statusCode === 'E3'" class="form-group row">
      <div class="col-md-12">
        <br />
        <label>Decline Reason</label>
        <textarea
          class="form-control editor form-control-lg form-control-a"
          name="description"
          v-model="item.declineReason"
          :disabled="item.statusCode === 'E3'"
        ></textarea>
      </div>
    </div>
    <button
      v-if="isDecline"
      type="button"
      @click="Complete()"
      class="btn btn-b-n"
      style="width: 150px; height:40px;"
    >Complete</button>
    <div v-if="isSaved">
      <div class="form-group row">
        <br />
        <label>{{ message }}</label>
      </div>
      <button
        v-if="isSaved"
        type="button"
        class="btn btn-b-n"
        style="width: 150px; height:40px;"
        data-dismiss="modal"
      >OK</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'MakeOffer',
  props: {
    isMakeOffer: Boolean,
    isProperty: Boolean,
    canEdit: Boolean,
    item: Object,
    bidId: Number,
    updateItem: Function,
  },
  data() {
    return {
      isDecline: false,
      isSaved: false,
      message: '',
    };
  },
  methods: {
    ...mapActions('bid', ['getBid', 'saveBid', 'acceptBid', 'declineBid']),
    SendOffer() {
      this.getBid(0);
      this.bidItem.id = 0;
      this.bidItem.amount = this.item.offer;
      this.bidItem.comment = this.item.comment;
      if (this.isProperty) {
        this.bidItem.propertyId = this.item.id;
      } else {
        this.bidItem.timeshareWeekId = this.item.id;
      }
      this.saveBid(this.bidItem);

      this.item = [];
      this.isSaved = true;
      this.message = 'Offer was submitted.';
    },
    Accept() {
      this.acceptBid(this.item.id);
      this.isSaved = true;
      this.message = 'Offer Accepted.';
    },
    Decline() {
      this.isDecline = true;
    },
    Complete() {
      this.isDecline = false;

      const decline = {
        id: this.item.id,
        comment: this.item.declineReason,
      };

      this.declineBid(decline);
      this.isSaved = true;
      this.message = 'Offer Declined.';
    },
  },
  computed: {
    ...mapState('bid', ['bidItem']),
  },
};
</script>