refactor: layouts/default.vue

Tomas

2021-12-23 cedd1f296cdb1b14cdb4e7d1c5c080e507c7eeb1

 PAMapp/components/Client/ClientCard.vue

@@ -4,26 +4,29 @@
            type="flex"
            class="rowStyle cursor--pointer"
            justify="space-between"
            :class="{'new': !isView && isReserved}"
            :class="{'new': newAppointment }"
            @click.native="openDetail"
        >
            <el-col :xs="1" :sm="1" class="unread" align="middle">
                <div class="circle" v-if="isReserved && !isRead"></div>
            <el-col :xs="1" :sm="1" class="unread" align="middle" v-if="isReserved">
                <div class="circle" v-if="!isRead"></div>
            </el-col>
            <el-col :xs="4" :sm="2" align="middle">
            <el-col :xs="5" :sm="3" align="middle">
                <el-avatar
                    :size="50"
                    src=""
                ></el-avatar>
                <div class="satisfaction">
                <div class="satisfaction" v-if="!hideReviews">
                    <template v-if="client.satisfactionScore">
                        TODO:隱藏滿意度
                        <i class="icon-star pam-icon icon--yellow satisfaction"></i>
                        <span>{{client.satisfactionScore}}</span>
                    </template>
                    <template v-else>
                        <div class="unfilled">未填滿意度</div>
                    </template>
                </div>
            </el-col>
            <el-col :xs="15" :sm="15" class="pl-10">
                <div class="smTxt_bold name">{{client.name}}</div>
            <el-col :xs="14" :sm="14" class="pl-10">
                <div class="smTxt_bold name">{{ client.name }}</div>
                <div class="message">預約成功</div>
                <div class="professionals">
                    <template v-if="client.requirement">
@@ -43,24 +46,24 @@
                <div
                    class="smTxt_bold fix-chrome-click--issue"
                    :class="{'unread-txt': reservedTxt === '未讀', 'read-txt': reservedTxt !== '未讀'}"
                >{{reservedTxt}}</div>
                >{{ reservedTxt }}</div>
                <div
                    class="date xsTxt text--mid_grey"
                >{{date}}</div>
                >{{ date }}</div>
                <div
                    class="xsTxt text--mid_grey"
                >{{time}}</div>
                >{{ time }}</div>
            </el-col>
        </el-row>

        <Ui-Dialog
            :isVisible.sync="isVisibleDialog"
            :width="width"
            @closeDialog="close"
            :width="dialogWidth"
            @closeDialog="closeDialog"
            class="pam-myDemand-dialog"
        >
            <h5 class="subTitle text--center mb-30"
            >{{isReserved ? '預約成功' : '已聯絡資訊'}}</h5>
            >{{isReserved ? '預約資訊' : '已聯絡資訊'}}</h5>

            <p v-if='isReserved'
                class="smTxt text-right"
@@ -91,9 +94,14 @@
</template>

<script lang="ts">
import { Vue, Component, Prop, Mutation, Action } from 'nuxt-property-decorator';
import { isMobileDevice } from '~/assets/ts/device';
import { ClientInfo, markAsContact, recordRead } from '~/assets/ts/api/appointment';
import { Vue, Component, Prop, Action } from 'nuxt-property-decorator';

import appointmentService from '~/shared/services/appointment.service';
import UtilsService from '~/shared/services/utils.service';
import { hideReviews } from '~/shared/const/hide-reviews';
import { ClientInfo } from '~/shared/models/client.model';
import myConsultantService from '~/shared/services/my-consultant.service';


@Component({
    filters: {
@@ -115,12 +123,33 @@
    }
})
export default class ClientList extends Vue {
    @Action updateMyAppointment!: (data: ClientInfo) => void
    @Action storeConsultantList!: () => void;
    @Action
    updateMyAppointment!: (data: ClientInfo) => void

    @Prop() client!: ClientInfo;
    @Action
    storeConsultantList!: () => void;

    @Prop()
    client!: ClientInfo;

    isVisibleDialog = false;
    width = '';
    dialogWidth = '';
    hideReviews = hideReviews;

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

    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(',');
@@ -130,7 +159,7 @@
        if (this.client.gender) {
            return this.client.gender === 'male' ? '男性' : '女性';
        }
        return ''
        return '';
    }

    get hopeContactTime() {
@@ -138,19 +167,7 @@
        return contactList.filter(item => !!item && item !== ",")
    }

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

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

    get isView() {
        return !!this.client.consultantViewTime;
    }

    get reservedTxt() {
    get reservedTxt(): string {
        if (this.isReserved) {
            return this.client.consultantReadTime ? '已讀' : '未讀';
        } else {
@@ -177,30 +194,28 @@
    }

    openDetail() {
        this.width = isMobileDevice() ? '80%' : '';
        this.dialogWidth = UtilsService.isMobileDevice() ? '80%' : '';
        this.isVisibleDialog = true;
    }

    markAppointment() {
        markAsContact(this.client.id).then(data => {
        myConsultantService.markAsContact(this.client.id).then(data => {
            // TODO: 要接後台傳回的 updated client 資料 - Ben 2021/11/16

            const updatedClient = {...this.client};
            updatedClient.communicateStatus = 'contacted';
            updatedClient.contactTime = new Date();
            updatedClient.contactTime = new Date().toString();

            this.updateMyAppointment(updatedClient);
            this.isVisibleDialog = false;

        })
    }

    close() {
        if (!this.client.consultantReadTime) {
            recordRead(this.client.id).then(res => {
    closeDialog(): void {
      const unread = !this.client.consultantReadTime;
        if (unread) {
            appointmentService.recordRead(this.client.id).then((_) => {
                const updatedClient = {...this.client};
                updatedClient.consultantReadTime = new Date();

                updatedClient.consultantReadTime = new Date().toString();
                this.updateMyAppointment(updatedClient);
            });
        }
@@ -237,6 +252,11 @@
            font-size: 12px;
            font-weight: bold;
            margin-top: 5px;

            .unfilled {
                font-weight: lighter;
                color: $MID_GREY;
            }
        }

        .message {