refactor: move ts folder to shared folder

Tomas

2021-12-22 abfd26bb700d93a92da6a04703b0187d4acaaeb5

 PAMapp/components/Client/ClientCard.vue

@@ -4,7 +4,7 @@
            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" v-if="isReserved">
@@ -13,10 +13,10 @@
            <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>
@@ -26,7 +26,7 @@
                </div>
            </el-col>
            <el-col :xs="14" :sm="14" class="pl-10">
                <div class="smTxt_bold name">{{client.name}}</div>
                <div class="smTxt_bold name">{{ client.name }}</div>
                <div class="message">預約成功</div>
                <div class="professionals">
                    <template v-if="client.requirement">
@@ -46,20 +46,20 @@
                <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"
@@ -95,8 +95,12 @@

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

import appointmentService from '~/shared/services/appointment.service';
import { isMobileDevice } from '~/shared/device';
import { hideReviews } from '~/shared/const/hide-reviews';
import { ClientInfo } from '~/shared/models/client.model';


@Component({
    filters: {
@@ -118,12 +122,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(',');
@@ -133,7 +158,7 @@
        if (this.client.gender) {
            return this.client.gender === 'male' ? '男性' : '女性';
        }
        return ''
        return '';
    }

    get hopeContactTime() {
@@ -141,19 +166,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 {
@@ -180,30 +193,28 @@
    }

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

    markAppointment() {
        markAsContact(this.client.id).then(data => {
        appointmentService.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);
            });
        }