refactor: clientCard

Tomas

2022-01-18 8c3d81576f29541cd6f19fe41397d1f67f2dda80

refactor: clientCard

 PAMapp/components/Client/ClientCard.vue

@@ -6,7 +6,7 @@
            class="rowStyle cursor--pointer"
            justify="space-between"
            :class="{'new': newAppointment }"
            @click.native="viewDetail"
            @click.native="viewAppointmentDetail"
        >
        <div class="test">
            <div class="unread" v-if="isReserved">
@@ -93,9 +93,9 @@
        </el-row>

        <Ui-Dialog
            :isVisible.sync="isVisibleDialog"
            :isVisible.sync="isShowInformDialog"
            :width="dialogWidth"
            @closeDialog="closeDialog"
            @closeDialog="closeInformDialog"
            class="pam-myDemand-dialog"
        >
            <h5 class="subTitle text--center mb-30"
@@ -158,10 +158,10 @@
          :client="client"
          :isVisible.sync="isShowAddInterviewDialog">
        </InterviewMsg>
        <PopUpFrame :isOpen.sync="showInviteReview">
        <PopUpFrame :isOpen.sync="isShowInviteReviewDialog">
          <div class="text--middle invite-review">
            <div class="mb-30 mt-10">已發送滿意度</div>
            <div class="text--primary text--middle cursor--pointer text--underline" @click="showInviteReview = false" :size="'250px'">我知道了</div>
            <div class="text--primary text--middle cursor--pointer text--underline" @click="isShowInviteReviewDialog = false" :size="'250px'">我知道了</div>
          </div>
        </PopUpFrame>
    </div>
@@ -209,22 +209,20 @@
    storageClearAppointmentIdFromMsg!: () => void;

    contactStatus            = ContactStatus;

    dialogWidth              = '';
    hideReviews              = hideReviews;
    isEdit                   = false;
    isShowAddInterviewDialog = false;
    isVisibleDialog          = false;
    isShowInformDialog       = false;
    isShowInviteReviewDialog = false;
    memo                     = '';
    showInviteReview = false;


    // currentAppointmentStatus = this.contactStatus.RESERVED;

    memoInfo: AppointmentMemoInfo = {
        appointmentId: 0,
        content      : '',
        id           : 0
    }
    };

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

@@ -247,7 +245,7 @@

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

    viewDetail(): void {
    viewAppointmentDetail(): void {
      this.$router.push(`/appointment/${this.client.id}`);
    }

@@ -264,62 +262,7 @@
    }

    inviteReview(): void {
      this.showInviteReview = true ;
    }

    get newAppointment(): boolean {
      return !this.client.consultantViewTime
            && this.client.communicateStatus === 'reserved';
    }

    get isReserved() {
      return this.client.communicateStatus === 'reserved';
    }

    get isRead() {
      return !!this.client.consultantReadTime;
    }

    get requirements() {
        return this.client.requirement.split(',');
    }

    get gender() {
        if (this.client.gender) {
            return this.client.gender === 'male' ? '男性' : '女性';
        }
        return '';
    }

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

    get reservedTxt(): string {
        if (this.isReserved) {
            return this.client.consultantReadTime ? '已讀' : '未讀';
        } else {
            return '已聯絡'
        }
    }

    get displayTime(): string {
        if (this.isReserved) {
            return this.client.appointmentDate;
        } else {
            return this.client.lastModifiedDate;
        }
    }

    get time() {
        const formatDate = (this.$options.filters as any).formatDate(this.displayTime);
        return formatDate.split(' ')[1]
    }

    get date() {
        const formatDate = (this.$options.filters as any).formatDate(this.displayTime);
        return formatDate.split(' ')[0];
      this.isShowInviteReviewDialog = true ;
    }

    openDetail() {
@@ -327,17 +270,17 @@
            (this.$refs.clientCardRef as any).$el.classList.add('currentShowStyle');
        }, 0)
        this.dialogWidth = UtilsService.isMobileDevice() ? '80%' : '';
        this.isVisibleDialog = true;
        this.isShowInformDialog = true;
    }

    markAppointment() {
        myConsultantService.markAsContact(this.client.id).then(data => {
            this.updateMyAppointment(data);
            this.isVisibleDialog = false;
            this.isShowInformDialog = false;
        })
    }

    closeDialog(): void {
    closeInformDialog(): void {
      const unread = !this.client.consultantReadTime;
        if (unread) {
            appointmentService.recordRead(this.client.id).then((_) => {
@@ -404,20 +347,75 @@
        this.memo = this.memoInfo.content;
    }

      get newAppointment(): boolean {
      return !this.client.consultantViewTime
            && this.client.communicateStatus === 'reserved';
    }

    get isReserved() {
      return this.client.communicateStatus === 'reserved';
    }

    get isRead() {
      return !!this.client.consultantReadTime;
    }

    get requirements() {
        return this.client.requirement.split(',');
    }

    get gender() {
        if (this.client.gender) {
            return this.client.gender === 'male' ? '男性' : '女性';
        }
        return '';
    }

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

    get reservedTxt(): string {
        if (this.isReserved) {
            return this.client.consultantReadTime ? '已讀' : '未讀';
        } else {
            return '已聯絡'
        }
    }

    get displayTime(): string {
        if (this.isReserved) {
            return this.client.appointmentDate;
        } else {
            return this.client.lastModifiedDate;
        }
    }

    get date() {
        const formatDate = (this.$options.filters as any).formatDate(this.displayTime);
        return formatDate.split(' ')[0];
    }

    get time() {
        const formatDate = (this.$options.filters as any).formatDate(this.displayTime);
        return formatDate.split(' ')[1]
    }

}
</script>

<style lang="scss" scoped>
    .rowStyle {
        padding: 10px 15px 10px 5px;
        background-color: $PRIMARY_WHITE;
        margin-bottom: 10px;
        border-left     : solid 4px transparent;
        display: flex;
        justify-content: space-between;

        margin-bottom   : 10px;
        padding         : 10px 15px 10px 5px;
        transition: background-color 0.5s;
        &.new {
            border-left: solid 4px $YELLOW;
            border-color: $YELLOW;
        }
        &.currentShowStyle {
            background-color: rgba(236, 195, 178, 0.5);
@@ -426,11 +424,11 @@
        .unread {
            align-self: center;
            .circle {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: $PRIMARY_RED;
                border-radius   : 50%;
                height          : 10px;
                margin: auto;
                width           : 10px;
            }
        }
        .satisfaction {
@@ -438,14 +436,14 @@
            font-weight: bold;
            margin-top: 5px;
            .unfilled {
                font-weight: lighter;
                color: $MID_GREY;
                font-weight: lighter;
            }
        }
        .professionals {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            white-space  : nowrap;
            .professionalsTxt {
                font-size: 12px;
                margin-right: 5px;
@@ -475,8 +473,8 @@
    }
    .dialogTxt {
        font-size: 20px;
        overflow-y:scroll;
        max-height: 25vh;
        overflow-y: scroll;
        @include desktop {
            height: 400px;
        }
@@ -485,7 +483,6 @@
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .edit {
            align-self: flex-end;
        }
@@ -501,8 +498,8 @@
        @extend .text--underline;
    }
  .invite-review{
    align-items   : center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>