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="!isLoggedIn">
      <div class="container col-md-10">
        <p class="alert myError">Please Login to add a property</p>
      </div>
      <button
        type="button"
        class="btn btn-b-n"
        style="width: 150px; height:40px;"
        data-dismiss="modal"
      >
        OK
      </button>
    </div>
    <div v-else>
      <div v-if="!isSaved">
        <br />
        <div v-if="isProperty">
          <div class="form-group row">
            <div style="text-align:left">
              <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 style="text-align:left">
              <div class="title-box-d">
                <h3 class="title-d">
                  {{ item.resort.resortName ? item.resort.resortName : item.resort }}
                </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
                v-if="isProperty"
                class="form-control"
                type="number"
                v-model="item.price"
                disabled
              />
              <input v-else 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 />
          <div class="container col-md-10">
            <p :class="[isInfo ? 'alert myInfo' : 'alert myWarning']">{{ message }}</p>
          </div>
        </div>
        <button
          v-if="isSaved"
          type="button"
          class="btn btn-b-n"
          style="width: 150px; height:40px;"
          data-dismiss="modal"
        >
          OK
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Log from "../../assets/Log";

export default {
  name: "MakeOffer",
  props: {
    isMakeOffer: Boolean,
    isProperty: Boolean,
    canEdit: Boolean,
    item: Object,
    bidId: Number,
    updateItem: Function
  },
  data() {
    return {
      isDecline: false,
      isSaved: false,
      message: "",
      isInfo: true,
      isLoggedIn: Log.isLoggedIn()
    };
  },
  methods: {
    ...mapActions("bid", ["getBid", "saveBid", "acceptBid", "declineBid"]),
    SendOffer() {
      alert("Under Development");
      // 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.";
      // this.isInfo = true;
    },
    Accept() {
      this.acceptBid(this.item.id);
      this.isSaved = true;
      this.message = "Offer Accepted.";
      this.isInfo = true;
    },
    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.";
      this.isInfo = false;
    }
  },
  computed: {
    ...mapState("bid", ["bidIt,em"])
  },
  watch: {
    item() {
      this.isSaved = false;
      this.canEdit = this.item.statusCode === "E1";
    }
  }
};
</script>