refactor: separate api/appointment.ts into several services

Tomas

2021-12-22 23f7ec5f7cd67322617e623361a5620d405dfeda

 PAMapp/components/Consultant/ConsultantCard.vue

@@ -82,13 +82,12 @@
                    </div>
                </div>

                <div v-if="agentInfo.contactStatus === 'contacted'
                        && !appointmentDetail.satisfactionScore" class="dialogInfo-btn">
                <div v-if="notScoreAppointmentYet" class="dialogInfo-btn">
                    <el-button type="primary"
                        @click.native="reviewsBtn = true">給予滿意度評分</el-button>
                </div>

                <div v-if="agentInfo.contactStatus === 'reserved'" class="text--center mt-10">
                <div v-if="agentInfo.contactStatus === 'reserved' && !isAppointment" class="text--center mt-10">
                    <el-button @click="isCancelPopup = true">取消預約</el-button>
                    <el-button @click="edit" type="primary">編輯</el-button>
                </div>
@@ -129,14 +128,16 @@

<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, 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';

const roleStorage = namespace('localStorage');
import appointmentService from '~/shared/services/appointment.service';
import reviewsService from '~/shared/services/reviews.service';
import { isMobileDevice } from '~/shared/device';
import { hideReviews } from '~/shared/const/hide-reviews';
import { Consultant, ConsultantWithAppointmentId } from '~/shared/models/consultant.model';
import { Appointment } from '~/shared/models/appointment.model';
import { UserReviewsConsultantsParams } from '~/shared/models/reviews.model';

const localStorage = namespace('localStorage');
@Component({
    filters: {
        formatNumber(index: number) {
@@ -158,16 +159,11 @@
})
export default class ConsultantCard extends Vue {

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

    @Action
    storeConsultantList!: any;

    @Prop()
    agentInfo!: Consultant | ConsultantWithAppointmentId;

    @roleStorage.Getter currentRole!:string;
    @localStorage.State('current_role')
    currentRole!: string;

    isVisibleDialog = false;
    reviewsBtn = false;
@@ -178,9 +174,38 @@
    hideReviews = hideReviews;
    isConfirmPopup = false;


    appointmentDetail: any = {
        age               : '',
        agentNo           : '',
        appointmentDate   : '',
        communicateStatus : '',
        consultantReadTime: null,
        consultantViewTime: null,
        contactTime       : '',
        contactType       : '',
        customerId        : 0,
        email             : '',
        gender            : '',
        hopeContactTime   : "",
        id                : 0,
        job               : "",
        lastModifiedDate  : '',
        name              : '',
        otherRequirement  : null,
        phone             : "",
        requirement       : '',
        satisfactionScore : 0,
    };

    get notScoreAppointmentYet(): boolean {
      if (this.agentInfo.contactStatus !== 'contacted') return false;
      const isAppointment = !!this.agentInfo['appointmentStatus'];
      if (!isAppointment) return false;
      return !this.agentInfo['appointmentScore'];
    }

    get isAppointment(): boolean {
      return !!this.agentInfo['appointmentStatus'];;
    }

    get latestReservedAppointment(): Appointment {
@@ -224,29 +249,6 @@
        }
        return time as string;
    }

    appointmentDetail: any = {
        age               : '',
        agentNo           : '',
        appointmentDate   : '',
        communicateStatus : '',
        consultantReadTime: null,
        consultantViewTime: null,
        contactTime       : '',
        contactType       : '',
        customerId        : 0,
        email             : '',
        gender            : '',
        hopeContactTime   : "",
        id                : 0,
        job               : "",
        lastModifiedDate  : '',
        name              : '',
        otherRequirement  : null,
        phone             : "",
        requirement       : '',
        satisfactionScore : 0,
    };

    get avatarFileName() {
        return this.agentInfo.img;
@@ -299,32 +301,38 @@

    get hopeContactTime() {
        const contactList = this.appointmentDetail.hopeContactTime
            .split("'").map(item => item.slice(0, item.length));
        return contactList.filter(item => !!item && item !== ",")
            .split("'").map((item: any) => item.slice(0, item.length));
        return contactList.filter((item: any) => !!item && item !== ",")
    }

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

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

    @Action
    storeConsultantList!: () => void;

    reserveCommunication() {
        const contactStatus = this.agentInfo.contactStatus;
        if (!contactStatus || contactStatus === 'picked') {
            this.currentRole === Role.USER
                ? this.$router.push(`/questionnaire/${this.agentInfo.agentNo}`)
                : this.$router.push('/login');
      const isAppointment = !!this.agentInfo['appointmentStatus'];
      const contactStatus = this.agentInfo.contactStatus;
        if (!isAppointment && (!contactStatus || contactStatus === 'picked')) {
            this.$router.push(`/questionnaire/${this.agentInfo.agentNo}`);
        } else {
            this.openPopUp();
        }
    }

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

        getAppointmentDetail(appointmentId!).then(res => {
        appointmentService.getAppointmentDetail(appointmentId!).then(res => {
            this.appointmentDetail = {
                ...this.appointmentDetail,
                ...res.data
                ...res,
                satisfactionScore:  this.agentInfo['appointmentScore'],
            };
            this.width = isMobileDevice() ? '80%' : '';
            this.isVisibleDialog = true;
@@ -347,14 +355,14 @@
        }
        this.appointmentDetail.satisfactionScore = this.inputScore;

        userReviewsConsultants(reviewParams).then((res) => {
        reviewsService.userReviewsConsultants(reviewParams).then((res) => {
            this.reviewsBtn = false;
            this.storeConsultantList();
        });
    }

    cancel() {
        cancelAppointment(this.latestReservedAppointment.id).then(res => {
        appointmentService.cancelAppointment(this.latestReservedAppointment.id).then(res => {
            this.storeConsultantList();
            this.isVisibleDialog = false;
            this.isCancelPopup = false;