update: [我的顧問列表-已聯絡] 以 Appointment 狀態賴進行判斷及顯示

Tomas

2021-12-16 6ebc03603c00e02cb6e1843c9cbd129f132610e9

update: [我的顧問列表-已聯絡] 以 Appointment 狀態賴進行判斷及顯示

 PAMapp/assets/ts/models/consultant.model.ts

@@ -19,5 +19,6 @@
  appointmentId    : number;
  appointmentDate  : string;
  appointmentScore?: number;
  appointmentStatus: string;
}


 PAMapp/components/Consultant/ConsultantCard.vue

@@ -13,14 +13,13 @@
                        ></UiAvatar>
                        <!-- TODO:隱藏滿意度 -->
                        <div v-if="!hideReviews">
                            <i class="icon-star pam-icon icon--yellow satisfaction"  v-if="!(latestContactedAppointment && !latestContactedAppointment.satisfactionScore)"></i>
                            <span v-if="agentInfo.contactStatus === 'contacted' && latestContactedAppointment && latestContactedAppointment.satisfactionScore">
                                {{ latestContactedAppointment && latestContactedAppointment.satisfactionScore}}
                            <i class="icon-star pam-icon icon--yellow satisfaction"  v-if="notScoreAppointmentYet"></i>
                            <span v-if="notScoreAppointmentYet">
                                {{ agentInfo.satisfactionScore }}
                            </span>
                            <div class="unfilled text--center "
                                style="display:flex"
                                v-if="agentInfo.contactStatus === 'contacted' &&
                                latestContactedAppointment && !latestContactedAppointment.satisfactionScore">未填<br />滿意度</div>
                                v-if="notScoreAppointmentYet">未填<br />滿意度</div>
                            <span v-if="agentInfo.contactStatus !== 'contacted'">{{ agentInfo.avgScore }}</span>
                        </div>
                    </el-col>
@@ -35,8 +34,7 @@
                        </div>
                        <div
                            class="delete"
                            v-if="agentInfo.contactStatus === 'picked'
                                || !agentInfo.contactStatus"
                            v-if="showRemoveBtn"
                            @click="removeAgent"
                        >移除</div>
                    </el-col>
@@ -44,8 +42,8 @@
                        <el-button
                            class="smTxt_bold outline_btn"
                            @click="reserveCommunication"
                            :class="agentInfo.contactStatus + 'Btn'"
                        >{{ contactTxt }}</el-button>
                            :class="actionBtnStyle"
                        >{{ actionBtnLabel }}</el-button>
                        <div class="updateTime mt-10">
                            {{ displayTime | formatDate }}
                        </div>
@@ -132,7 +130,8 @@
<script lang="ts">
import { Vue, Component, Prop, Action, namespace } from 'nuxt-property-decorator';
import { getAppointmentDetail, UserReviewsConsultantsParams, userReviewsConsultants, cancelAppointment } from '~/assets/ts/api/consultant';
import { Consultant, Appointment } from '~/assets/ts/models/consultant.model';
import { Consultant, ConsultantWithAppointmentId } from '~/assets/ts/models/consultant.model';
import { Appointment } from '~/assets/ts/models/appointment.model';
import { isMobileDevice } from '~/assets/ts/device';
import { Role } from '~/assets/ts/models/enum/Role';
import { hideReviews } from '~/assets/ts/const/hide-reviews';
@@ -158,9 +157,16 @@
    }
})
export default class ConsultantCard extends Vue {
    @Action removeFromMyConsultantList!: (agentNo: string) => Promise<boolean>;
    @Action storeConsultantList!: any;
    @Prop() agentInfo!: Consultant;

    @Action
    removeFromMyConsultantList!: (agentNo: string) => Promise<boolean>;

    @Action
    storeConsultantList!: any;

    @Prop()
    agentInfo!: Consultant | ConsultantWithAppointmentId;

    @roleStorage.Getter currentRole!:string;

    isVisibleDialog = false;
@@ -172,12 +178,9 @@
    hideReviews = hideReviews;
    isConfirmPopup = false;

    get latestContactedAppointment(): Appointment | null {
        if (!(this.agentInfo && this.agentInfo.appointments && this.agentInfo.appointments.length)) return null;
        const contactedAppointments: Appointment[] =  this.agentInfo.appointments
                                                        .filter((appointment) => appointment.communicateStatus === 'contacted')
                                                        .sort((preAppointment, nextAppointment) => +nextAppointment.appointmentDate - +preAppointment.appointmentDate);
        return contactedAppointments[0];
    get notScoreAppointmentYet(): boolean {
      if (this.agentInfo.contactStatus !== 'contacted') return false;
      return !this.agentInfo['appointmentScore'];
    }

    get latestReservedAppointment(): Appointment {
@@ -191,18 +194,30 @@
                })
                .sort((preAppointment, nextAppointment) => +nextAppointment.sortDate - +preAppointment.sortDate)[0];
    }

    get showRemoveBtn(): boolean {
      const isAppointment = !!this.agentInfo['appointmentStatus'];
      if (isAppointment) {
        return false;
      } else {
        return this.agentInfo.contactStatus === 'picked' || !this.agentInfo.contactStatus;
      }
    }

    get displayTime(): string {
      const isAppointment = !!this.agentInfo['appointmentStatus'];
        let time: Date | string = '';
      if (isAppointment) {
        time = this.agentInfo['appointmentDate'];
      } else {
        switch(this.agentInfo.contactStatus) {
            case 'reserved':
                time = this.agentInfo.updateTime
                break;
            case 'contacted':
                time = this.agentInfo.updateTime
                time = this.agentInfo.updateTime;
                break;
            case 'picked':
                time = this.agentInfo.updateTime
                time = this.agentInfo.updateTime;
                break;
        }
        }
        if (typeof time !== 'string') {
          time.toString();
@@ -243,14 +258,43 @@
        }
        return ''
    }
    get contactTxt() {
    get actionBtnLabel() {
      const isAppointment = !!this.agentInfo['appointmentStatus'];
      if (isAppointment) {
        if (this.agentInfo['appointmentStatus'] === 'contacted') {
            return '已聯絡';
        }
        if (this.agentInfo['appointmentStatus'] === 'reserved') {
            return '已預約';
        }
      } else {
        if (this.agentInfo.contactStatus === 'contacted') {
            return '已聯絡';
        }
        if (this.agentInfo.contactStatus === 'reserved') {
            return '已預約';
        }
      }
        return '進行預約';
    }

    get actionBtnStyle() {
      const isAppointment = !!this.agentInfo['appointmentStatus'];
      if (isAppointment) {
        if (this.agentInfo['appointmentStatus'] === 'contacted') {
            return 'contactedBtn';
        }
        if (this.agentInfo['appointmentStatus'] === 'reserved') {
            return 'reservedBtn';
        }
      } else {
        if (this.agentInfo.contactStatus === 'contacted') {
            return 'contactedBtn';
        }
        if (this.agentInfo.contactStatus === 'reserved') {
            return 'reservedBtn';
        }
      }
    }

    get hopeContactTime() {
@@ -258,6 +302,8 @@
            .split("'").map(item => item.slice(0, item.length));
        return contactList.filter(item => !!item && item !== ",")
    }

    //////////////////////////////////////////////////////////////////////

    reserveCommunication() {
        const contactStatus = this.agentInfo.contactStatus;
@@ -272,7 +318,7 @@

    openPopUp() {
      const appointmentId = this.agentInfo.contactStatus === 'contacted'
                          ? this.latestContactedAppointment?.id
                          ? this.agentInfo['appointmentId']
                          : this.latestReservedAppointment.id;

        getAppointmentDetail(appointmentId!).then(res => {

 PAMapp/pages/myConsultantList.vue

@@ -41,11 +41,6 @@
    @Action
    storeConsultantList!: any;

    @Watch('myConsultantList')
    onMyConsultantListChange() {
        this.setList();
    }

    //////////////////////////////////////////////////////////////////////

    beforeRouteEnter(to: any, from: any, next: any) {
@@ -66,6 +61,11 @@
    }

    //////////////////////////////////////////////////////////////////////

    @Watch('myConsultantList')
    onMyConsultantListChange() {
        this.setList();
    }

    clickTab(path: string) {
        this.activeTabName = path;
@@ -92,14 +92,15 @@
                ...consultant,
                appointmentId: appointment.id,
                appointmentDate: appointment.appointmentDate,
                appointmentScore: appointment.satisfactionScore
                appointmentScore: appointment.satisfactionScore,
                appointmentStatus: appointment.communicateStatus,
              };
              this.contactedList.push(consultantWithAppointmentId);
            })
          });

        this.contactedList = this.contactedList
          .filter((appointment) => appointment['contactStatus'] === 'contacted')
          .filter((appointment) => appointment['appointmentStatus'] === 'contacted')
          .map((appointment) => ({ ...appointment, sortTime: new Date(appointment.appointmentDate)}))
          .sort((preAppointment, nextAppointment) => +nextAppointment.sortTime - +preAppointment.sortTime);
    }