update 預約清單: 使用 store 存放 AppointmentList

Mila

2021-11-16 bb682522ce2e18f7c67f087620134d3aadba559d

update 預約清單: 使用 store 存放 AppointmentList

 PAMapp/assets/ts/api/appointment.ts

@@ -2,11 +2,11 @@
import { AxiosResponse } from 'axios';

// 取得所有預約清單
export function getMyAppointmentList():Promise<AxiosResponse<ClientInfo>> {
export function getMyAppointmentList():Promise<ClientInfo[]> {
    const headers = {
        Authorization: 'Bearer ' + localStorage.getItem('id_token')
    }
    return service.get('/consultant/getMyAppointment', {headers});
    return service.get('/consultant/getMyAppointment', {headers}).then(res => res.data);
}

// 標記為已聯絡
@@ -14,7 +14,9 @@
    const headers = {
        Authorization: 'Bearer ' + localStorage.getItem('id_token')
    }
    // TODO: 跟後端確認，這裡的 API 不應該傳回 void, 而是應該是更新後的資料 - Ben 2021/11/16
    return service.post('/appointment/markAsContacted/'+appointmentId, undefined, {headers})
            .then(res => res.data)
}



 PAMapp/components/Client/ClientCard.vue

@@ -1,6 +1,6 @@
<template>
    <div>
        <el-row type="flex" class="rowStyle">
        <el-row type="flex" class="rowStyle" @click.native="openDetail">
            <el-col :xs="5" :sm="3">
                <el-avatar
                    :size="50"
@@ -32,7 +32,6 @@
            <el-col class="flex-column contactInfo" :xs="5" :sm="6">
                <div class="smTxt_bold cursor--pointer"
                    :class="client.communicateStatus"
                    @click="openDetail"
                >{{isReserved ? '已預約' : '已聯絡'}}
                </div>
                <div class="date xsTxt text--mid_grey">{{date}}</div>
@@ -66,7 +65,7 @@
</template>

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

@@ -81,6 +80,8 @@
    }
})
export default class ClientList extends Vue {
    @Action updateMyAppointment!: (data: ClientInfo) => void

    @Prop() client!: ClientInfo;
    isVisibleDialog = false;
    width = '';
@@ -121,7 +122,17 @@
    }

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

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

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

        })
    }

}

 PAMapp/pages/myAppointmentList.vue

@@ -17,17 +17,13 @@
            </div>
        </div>

        <NuxtChild
            :contactedList="contactedList"
            :appointmentList="appointmentList"
        ></NuxtChild>
        <NuxtChild></NuxtChild>
    </div>
</template>

<script lang="ts">
import { Context } from '@nuxt/types';
import { Vue, Component } from 'nuxt-property-decorator';
import { ClientInfo, getMyAppointmentList } from '~/assets/ts/api/appointment';
import { Vue, Component, State, Action, Watch } from 'nuxt-property-decorator';
import { ClientInfo } from '~/assets/ts/api/appointment';

@Component
export default class ClientReservedList extends Vue {
@@ -36,29 +32,32 @@
    contactedList: ClientInfo[] = [];
    clients: ClientInfo[] = [];

    async asyncData(context: Context) {
        let appointmentList: ClientInfo[] = [];
        let contactedList: ClientInfo[] = [];
        let clients: ClientInfo[] = [];
        await getMyAppointmentList().then((res: any) => clients = res.data)
    @State('myAppointmentList') myAppointmentList!: ClientInfo[];
    @Action storeMyAppointmentList!: any;

        contactedList = clients
    mounted() {
     this.storeMyAppointmentList();

     if (this.$route.name) {
         console.log('mounted route')
         this.activeTabName = this.$route.name.split('-')[1]
     }
    }

    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
        this.contactedList = this.myAppointmentList
            .filter(item => item.communicateStatus === 'contacted')
            .sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1);
        appointmentList = clients
            .filter(item => item.communicateStatus === 'reserved')
        this.appointmentList = this.myAppointmentList
            .filter(item => item.communicateStatus !== 'contacted')
            .sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1);;

        return {
            clients,
            contactedList,
            appointmentList
        }
    }

    tabClick(path: string) {
        this.activeTabName = path;
        this.$router.push('/myAppointmentList/' + this.activeTabName)
    }

}
</script>

 PAMapp/pages/myAppointmentList/appointmentList.vue

@@ -15,25 +15,34 @@
        ></ClientList>

        <UiPagination
            :totalList="filterList"
            :totalList="appointmentList"
            @changePage="changePage"
        ></UiPagination>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator';
import { Vue, Component, Prop, State, Watch } from 'nuxt-property-decorator';
import { ClientInfo } from '~/assets/ts/api/appointment';

@Component
export default class ClientReservedList extends Vue {
    @Prop({default: []}) appointmentList!: ClientInfo[];
    @State('myAppointmentList') myAppointmentList!: ClientInfo[];

    appointmentList: ClientInfo[] = [];
    pageList: ClientInfo[] = [];
    keyWord: string = '';
    filterList: ClientInfo[] = [];

    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
        this.appointmentList = this.myAppointmentList
            .filter(item => item.communicateStatus !== 'contacted')
            .sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1);;
    }

    mounted() {
        this.filterList = JSON.parse(JSON.stringify(this.appointmentList))
        this.onMyAppointmentListChange();
    }

    changePage(pageList: ClientInfo[]) {

 PAMapp/pages/myAppointmentList/contactedList.vue

@@ -19,25 +19,36 @@
        ></ClientList>

        <UiPagination
            :totalList="filterList"
            :totalList="contactedList"
            @changePage="changePage"
        ></UiPagination>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator';
import { Vue, Component, Watch, State } from 'nuxt-property-decorator';
import { ClientInfo } from '~/assets/ts/api/appointment';

@Component
export default class ClientContactedList extends Vue {
    @Prop({default: []}) contactedList!: ClientInfo[];
    @State('myAppointmentList') myAppointmentList!: ClientInfo[];

    contactedList: ClientInfo[] = [];
    pageList: ClientInfo[] = [];
    keyWord: string = '';
    filterList: ClientInfo[] = [];

    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
        this.contactedList = (this.myAppointmentList || [])
            .filter(item => item.communicateStatus === 'contacted')
            .sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1);
    }

    mounted() {
        this.filterList = JSON.parse(JSON.stringify(this.contactedList));
        console.log('ClientContactedList mounted');

        this.onMyAppointmentListChange();
    }

    changePage(pageList: ClientInfo[]) {