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

Mila

2021-11-16 bb682522ce2e18f7c67f087620134d3aadba559d

 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>