From dbdf05da89c536d310394cd3e09fc0b16d762fd8 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期一, 24 一月 2022 16:34:43 +0800
Subject: [PATCH] fixed TODO#134626 調整移除按鈕點選範圍、點選移除時增加確認dialog

---
 PAMapp/components/Consultant/ConsultantCard.vue |  457 ++++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 355 insertions(+), 102 deletions(-)

diff --git a/PAMapp/components/Consultant/ConsultantCard.vue b/PAMapp/components/Consultant/ConsultantCard.vue
index cf2564a..8ea5a64 100644
--- a/PAMapp/components/Consultant/ConsultantCard.vue
+++ b/PAMapp/components/Consultant/ConsultantCard.vue
@@ -1,79 +1,159 @@
 <template>
     <div>
-        <el-row type="flex" class="rowStyle">
-            <el-col :xs="2" :sm="1" :class="{'state': agentInfo.new}"></el-col>
-            <el-col :xs="22" :sm="23">
-                <el-row type="flex">
-                    <el-col class="flex_column" :xs="5" :sm="3">
-                        <UiAvatar
-                            :size="50"
-                            :fileName="avatarFileName"
-                            @click.native="showAgentDetail(agentInfo.agentNo)"
-                        ></UiAvatar>
-                        <div class="satisfaction">
-                            <i class="icon-star pam-icon icon--yellow satisfaction"></i>
-                            <span>{{agentInfo.avgScore }}</span>
-                        </div>
-                    </el-col>
-                    <el-col :xs="10" :sm="15">
-                        <div class="smTxt_bold name">{{agentInfo.name}}</div>
-                        <div class="professionals">
-                            <span
-                                class="professionalsTxt"
-                                v-for="(expertise, index) in expertises"
-                                :key="index"
-                            >#{{expertise}}</span>
-                        </div>
-                        <div
-                            class="delete"
-                            v-if="agentInfo.contactStatus === 'picked'
-                                || !agentInfo.contactStatus"
-                            @click="removeAgent"
-                        >蝘駁</div>
-                    </el-col>
-                    <el-col class="flex_column" :xs="9" :sm="6">
-                        <el-button
-                            class="smTxt_bold outline_btn"
-                            @click="reserveCommunication"
-                            :class="agentInfo.contactStatus + 'Btn'"
-                        >{{ contactTxt }}</el-button>
-                        <div class="updateTime" v-if="updateTime">{{updateTime | formatDate}}</div>
-                    </el-col>
-                </el-row>
+        <el-row type="flex" class="rowStyle" :class="{'new': !agentInfo.customerViewTime }">
+            <el-col class="flex_column pl-5" :xs="5" :sm="3">
+                <UiAvatar
+                    :size="50"
+                    :agentNo="agentInfo.agentNo"
+                    @click.native="showAgentDetail(agentInfo.agentNo)"
+                ></UiAvatar>
+                <!-- TODO:���遛��漲 -->
+                <div v-if="!hideReviews">
+                    <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="notScoreAppointmentYet">�憛�<br />皛踵�漲</div>
+                    <span v-if="agentInfo.contactStatus !== 'contacted'">{{ agentInfo.avgScore }}</span>
+                </div>
+            </el-col>
+            <el-col :xs="10" :sm="15">
+                <div class="smTxt_bold name">{{agentInfo.name}}</div>
+                <div class="professionals">
+                    <span
+                        class="professionalsTxt"
+                        v-for="(expertise, index) in agentInfo.expertise"
+                        :key="index"
+                    >#{{expertise}}</span>
+                </div>
+                <div
+                    class="delete"
+                    v-if="showRemoveBtn"
+                    @click="isRemoveAgentPopup = true"
+                >蝘駁</div>
+                <div
+                    v-if="notScoreAppointmentYet"
+                    class="text--primary text--underline cursor--pointer xsTxt text--bold"
+                    @click="reviewsBtn = true">蝯虫�遛��漲閰��</div>
+            </el-col>
+            <el-col class="flex_column" :xs="9" :sm="6">
+                <el-button
+                    class="smTxt_bold outline_btn"
+                    @click="reservedOrShowAppointmentInfo"
+                    :class="actionBtnStyle"
+                >{{ actionBtnLabel }}</el-button>
+                <div class="updateTime mt-10">
+                    {{ agentInfo.updateTime | formatDate }}
+                </div>
             </el-col>
         </el-row>
 
         <Ui-Dialog
             :isVisible.sync="isVisibleDialog"
             :width="width"
+            class="pam-myDemand-dialog pam-dialog-reserved"
         >
             <div v-if="appointmentDetail">
                 <h5 class="subTitle text--center mb-30">������</h5>
                 <p class="smTxt">{{appointmentDetail.appointmentDate | formatDate}}</p>
-                <div class="dialogInfo">
+                <div class="reserved-info">
                     <p>憪��{appointmentDetail.name}}</p>
                     <p>�閰梧�{appointmentDetail.phone}}</p>
                     <p>Email嚗{appointmentDetail.email}}</p>
                     <p>�批嚗{gender}}</p>
-                    <p>撟湧翩嚗{appointmentDetail.age}}</p>
+                    <p>撟湧翩嚗{appointmentDetail.age | toAgeLabel }}</p>
                     <p>�璆哨�{appointmentDetail.job}}</p>
-                    <p>��瘙�{appointmentDetail.requirement.replace(',', '��')}}</p>
+                    <p>��瘙�{appointmentDetail.requirement.split(',').join('��')}}</p>
                     <p
                         v-for="(item, index) in hopeContactTime"
                         :key="index"
-                    >��蝯⊥�挾{{index + 1 | formatNumber}}嚗{item}}</p>
+                    >��蝯⊥�挾{{index + 1 | formatNumber}}嚗{ item | formatHopeContactTime }}</p>
+                    <div v-if="appointmentDetail.satisfactionScore">
+                        <div class="mdTxt mt-10 mb-10">皛踵�漲</div>
+                        <el-rate
+                        :value="appointmentDetail.satisfactionScore"
+                        class="pam-myDemand-dialog__rate"
+                        disabled>
+                        </el-rate>
+                    </div>
+                </div>
+
+                <div v-if="notScoreAppointmentYet" class="reserved-btn">
+                    <el-button type="primary"
+                        @click.native="reviewsBtn = true">蝯虫�遛��漲閰��</el-button>
+                </div>
+
+                <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>
             </div>
         </Ui-Dialog>
+
+        <PopUpFrame :isOpen.sync="reviewsBtn" class="reviewDialog-content">
+            <div class="mdTxt pam-dialog-review">
+                靽憿批�遛��漲
+                <span class="hint">������</span>
+                <div class="mt-30 review-content">
+                    <UiAvatar :size="80" :agentNo="agentInfo.agentNo"></UiAvatar>
+                    <div class="review-text">撠憿批��
+                        <span class="text--primary">{{agentInfo.name}}</span>
+                        ��擃���蝯虫�嗾憿��嚗�
+                    </div>
+                </div>
+
+                <div class="review-score">
+                    <el-rate v-model="inputScore" class="pam-rate mt-30"></el-rate>
+                </div>
+
+                <div class="review-btn">
+                    <el-button
+                        type="primary"
+                        :disabled="!inputScore"
+                        @click="userReviewsConsultants">�</el-button>
+                </div>
+            </div>
+        </PopUpFrame>
+
+        <PopUpFrame :isOpen.sync="isCancelPopup">
+            <div class="text--center mdTxt">�����迨蝑����</div>
+            <div class="text--center mt-30">
+                <el-button @click="isCancelPopup = false">�</el-button>
+                <el-button @click="cancel" type="primary">�</el-button>
+            </div>
+        </PopUpFrame>
+
+        <PopUpFrame  :isOpen.sync="isConfirmPopup">
+            <div class="text--center mdTxt">撌脫��{confirmTxt}}</div>
+            <div class="text--center mt-30">
+                <el-button @click="isConfirmPopup = false" type="primary">蝣箏��</el-button>
+            </div>
+        </PopUpFrame>
+
+        <PopUpFrame :isOpen.sync="isRemoveAgentPopup">
+            <div class="text--center mdTxt">��蝘駁憿批�� <span class="text--primary">{{agentInfo.name}}</span>嚗�</div>
+            <div class="text--center mt-30">
+                <el-button @click="isRemoveAgentPopup = false">�</el-button>
+                <el-button @click="removeAgent" type="primary">�</el-button>
+            </div>
+        </PopUpFrame>
     </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';
-import { AppointmentDetail, Consultants, getAppointmentDetail } from '~/assets/ts/api/consultant';
-import { isLogin } from '~/assets/ts/auth';
-import { isMobileDevice } from '~/assets/ts/device';
+import { Vue, Component, Prop, Action, namespace } from 'nuxt-property-decorator';
 
+import appointmentService from '~/shared/services/appointment.service';
+import reviewsService from '~/shared/services/reviews.service';
+import UtilsService from '~/shared/services/utils.service';
+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) {
@@ -81,91 +161,244 @@
                 const upperNumber = ['�', '銝�', '鈭�', '銝�', '���', '鈭�', '�', '銝�', '�', '銋�', '���']
                 return upperNumber[index];
             }
+        },
+        formatHopeContactTime(item: string): string {
+        if (item) {
+            const [hopeDay, hopeTime] = item.split('��');
+            const day = hopeDay.split(',').length > 6 ? '銝����' : hopeDay;
+            const time = hopeTime.split(',').length > 3 ? '銝����' : hopeTime;
+            return `${day}��${time}`;
+            }
+            return '';
         }
     }
 })
 export default class ConsultantCard extends Vue {
-    @Prop() agentInfo!: Consultants;
+
+    @Prop()
+    agentInfo!: Consultant | ConsultantWithAppointmentId;
+
+    @localStorage.State('current_role')
+    currentRole!: string;
+
     isVisibleDialog = false;
+    reviewsBtn = false;
+    status = false;
     width: string = '';
-    appointmentDetail: AppointmentDetail = {
-        id: 0,
-        phone: '',
-        email: '',
-        contactType: '',
-        gender: '',
-        age: '',
-        job: '',
-        requirement: '',
-        communicateStatus: '',
-        hopeContactTime: '',
-        otherRequirement: '',
-        appointmentDate: new Date(),
-        agentNo: '',
-        customerId: 0,
-        name: ''
+    inputScore = 0;
+    isCancelPopup = false;
+    hideReviews = hideReviews;
+    isConfirmPopup = false;
+    isRemoveAgentPopup = false;
+    confirmTxt = '';
+
+    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() {
-        console.log('avatarFileName')
-        return this.agentInfo.img ? this.agentInfo.img : this.agentInfo.image;
+    get notScoreAppointmentYet(): boolean {
+      const isAppointment = !!this.agentInfo['appointmentStatus'];
+      if (!isAppointment) return false;
+      return this.agentInfo['appointmentStatus'] !== 'contacted' ? !this.agentInfo['appointmentScore'] : false;
     }
 
-    get expertises() {
-        return this.agentInfo.expertise ? this.agentInfo.expertise : this.agentInfo.expertises;
+    get isAppointment(): boolean {
+      return !!this.agentInfo['appointmentStatus'];
     }
+
+    get latestReservedAppointment(): Appointment {
+        return this.agentInfo.appointments!
+                .filter((appointment) => appointment.communicateStatus === 'reserved')
+                .map((reversedAppointment) => {
+                    return {
+                    ...reversedAppointment,
+                    sortDate: new Date(reversedAppointment.appointmentDate)
+                    }
+                })
+                .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 avatarFileName() {
+        return this.agentInfo.img;
+    }
+
     get gender() {
         if (this.appointmentDetail.gender) {
             return this.appointmentDetail.gender === 'male' ? '���' : '憟單��';
         }
         return ''
     }
-    get contactTxt() {
+    get actionBtnLabel() {
+      const isAppointment = !!this.agentInfo['appointmentStatus'];
+      if (isAppointment) {
+        if (this.agentInfo['appointmentStatus'] === 'contacted') {
+            return '撌脰蝯�';
+        }
+        if (this.agentInfo['appointmentStatus'] === 'reserved') {
+            return '撌脤���';
+        }
+        if (this.agentInfo['appointmentStatus'] === 'done') {
+            return '撌脫�漱';
+        }
+        if (this.agentInfo['appointmentStatus'] === 'closed') {
+            return '���漱';
+        }
+      } else {
         if (this.agentInfo.contactStatus === 'contacted') {
-            return '撌脰蝯�'
+            return '撌脰蝯�';
         }
         if (this.agentInfo.contactStatus === 'reserved') {
-            return '撌脤���'
+            return '撌脤���';
         }
-        return '�脰����'
+      }
+        return '�脰����';
     }
 
-    get updateTime() {
-        return isLogin() ? this.agentInfo.updateTime : '';
+    get actionBtnStyle() {
+      const isAppointment = !!this.agentInfo['appointmentStatus'];
+      if (isAppointment) {
+        if (this.agentInfo['appointmentStatus'] === 'contacted') {
+            return 'contactedBtn';
+        }
+        if (this.agentInfo['appointmentStatus'] === 'reserved') {
+            return 'reservedBtn';
+        }
+        if (this.agentInfo['appointmentStatus'] === 'done') {
+            return 'doneBtn';
+        }
+        if (this.agentInfo['appointmentStatus'] === 'closed') {
+            return 'closedBtn';
+        }
+      } else {
+        if (this.agentInfo.contactStatus === 'contacted') {
+            return 'contactedBtn';
+        }
+        if (this.agentInfo.contactStatus === 'reserved') {
+            return 'reservedBtn';
+        }
+      }
     }
 
     get hopeContactTime() {
         const contactList = this.appointmentDetail.hopeContactTime
-            .split("'").map(item => item.slice(0, item.length - 1));
-        return contactList.filter(item => !!item)
+            .split("'").map((item: any) => item.slice(0, item.length));
+        return contactList.filter((item: any) => !!item && item !== ",")
     }
-    reserveCommunication() {
-        const contactStatus = this.agentInfo.contactStatus;
-        if (!contactStatus || contactStatus === 'picked') {
-            isLogin()
-                ? this.$router.push(`/questionnaire/${this.agentInfo.agentNo}`)
-                : this.$router.push('/login');
+
+    //////////////////////////////////////////////////////////////////////
+
+    @Action
+    removeFromMyConsultantList!: (agentNo: string) => Promise<boolean>;
+
+    @Action
+    storeConsultantList!: () => void;
+
+    reservedOrShowAppointmentInfo() {
+      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() {
-        getAppointmentDetail(this.agentInfo.latestAppointmentId).then(res => {
-            this.appointmentDetail = res.data;
-            this.width = isMobileDevice() ? '80%' : '';
+    openPopUp(): void {
+      const isAppointment = !!this.agentInfo['appointmentStatus'];
+      const appointmentId = isAppointment
+                          ? this.agentInfo['appointmentId']
+                          : this.latestReservedAppointment.id;
+
+        appointmentService.getAppointmentDetail(appointmentId!).then(res => {
+            this.appointmentDetail = {
+                ...res,
+                satisfactionScore:  this.agentInfo['appointmentScore'],
+            };
+            this.width = UtilsService.isMobileDevice() ? '80%' : '';
             this.isVisibleDialog = true;
         });
     }
 
-    @Emit('removeAgent') removeAgent() {
-        return this.agentInfo.agentNo;
+    removeAgent() {
+        this.removeFromMyConsultantList(this.agentInfo.agentNo).then((removeOk) => {
+            this.isRemoveAgentPopup = false;
+            setTimeout(() => {
+                this.confirmTxt = '蝘駁憿批��';
+                this.isConfirmPopup = true;
+            }, 300);
+
+        });
     }
 
     showAgentDetail(agentNo: string): void {
         this.$router.push(`/agentInfo/${agentNo}`);
     }
+
+    userReviewsConsultants() {
+      const isAppointment = !!this.agentInfo['appointmentStatus'];
+      const appointmentId = isAppointment
+                          ? this.agentInfo['appointmentId']
+                          : this.latestReservedAppointment.id;
+
+        const reviewParams: UserReviewsConsultantsParams = {
+            appointmentId: appointmentId,
+            score: this.inputScore,
+        }
+        this.appointmentDetail.satisfactionScore = this.inputScore;
+
+        reviewsService.userReviewsConsultants(reviewParams).then((res) => {
+            this.reviewsBtn = false;
+            this.storeConsultantList();
+        });
+    }
+
+    cancel() {
+        appointmentService.cancelAppointment(this.latestReservedAppointment.id).then(res => {
+            this.storeConsultantList();
+            this.isVisibleDialog = false;
+            this.isCancelPopup = false;
+            setTimeout(() => {
+                this.confirmTxt = '���迨蝑���';
+                this.isConfirmPopup = true;
+
+            }, 300);
+        });
+    }
+
+    edit() {
+        this.isVisibleDialog = false;
+        this.$router.push({path: `/questionnaire/${this.agentInfo.agentNo}`, query: {'edit': 'true'}});
+    }
 }
+
 </script>
 
 <style lang="scss" scoped>
@@ -175,13 +408,10 @@
         margin-bottom: 10px;
         display: flex;
         justify-content: space-between;
+        border-left: 4px solid transparent;
 
-        .state {
-            width: 10px;
-            height: 10px;
-            border-radius: 50px;
-            background-color: $YELLOW;
-            margin: auto 0;
+        &.new {
+            border-color: $YELLOW;
         }
 
         .satisfaction {
@@ -189,6 +419,11 @@
             font-weight: bold;
             margin-top: 5px;
         }
+        .unfilled {
+                font-size: 12px;
+                padding-top: 5px;
+                padding-left: 5px;
+            }
 
         .professionals {
             height: 20px;
@@ -205,6 +440,7 @@
         }
 
         .delete {
+            display: inline-block;
             color: $PRIMARY_RED;
             font-size: 14px;
             font-weight: bold;
@@ -233,6 +469,28 @@
             }
         }
 
+        .doneBtn {
+            color: $BEIGE;
+            border-color: $BEIGE;
+
+            &:focus {
+                color: $PRIMARY_WHITE;
+                background-color: $BEIGE;
+                opacity: 0.5;
+            }
+        }
+
+        .closedBtn {
+            color: $PRUDENTIAL_GREY;
+            border-color: $PRUDENTIAL_GREY;
+
+            &:focus {
+                color: $PRIMARY_WHITE;
+                background-color: $PRUDENTIAL_GREY;
+                opacity: 0.5;
+            }
+        }
+
         .updateTime {
             font-size: 12px;
             font-weight: bold;
@@ -246,9 +504,4 @@
         flex-direction: column;
         justify-content: space-between;
     }
-
-    .dialogInfo {
-        font-size: 20px;
-    }
-
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.8.0