From bb682522ce2e18f7c67f087620134d3aadba559d Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期二, 16 十一月 2021 21:00:50 +0800
Subject: [PATCH] update 預約清單: 使用 store 存放 AppointmentList
---
PAMapp/pages/myAppointmentList/appointmentList.vue | 17 ++++++--
PAMapp/components/Client/ClientCard.vue | 19 +++++++--
PAMapp/pages/myAppointmentList/contactedList.vue | 19 +++++++--
PAMapp/assets/ts/api/appointment.ts | 6 ++-
PAMapp/pages/myAppointmentList.vue | 41 ++++++++++----------
5 files changed, 67 insertions(+), 35 deletions(-)
diff --git a/PAMapp/assets/ts/api/appointment.ts b/PAMapp/assets/ts/api/appointment.ts
index bbb8d6b..f574ac9 100644
--- a/PAMapp/assets/ts/api/appointment.ts
+++ b/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)
}
diff --git a/PAMapp/components/Client/ClientCard.vue b/PAMapp/components/Client/ClientCard.vue
index 398ef8e..2a2eef9 100644
--- a/PAMapp/components/Client/ClientCard.vue
+++ b/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;
+
+ })
}
}
diff --git a/PAMapp/pages/myAppointmentList.vue b/PAMapp/pages/myAppointmentList.vue
index aad9709..36b96b3 100644
--- a/PAMapp/pages/myAppointmentList.vue
+++ b/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>
\ No newline at end of file
diff --git a/PAMapp/pages/myAppointmentList/appointmentList.vue b/PAMapp/pages/myAppointmentList/appointmentList.vue
index 39a357c..370dad2 100644
--- a/PAMapp/pages/myAppointmentList/appointmentList.vue
+++ b/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[]) {
diff --git a/PAMapp/pages/myAppointmentList/contactedList.vue b/PAMapp/pages/myAppointmentList/contactedList.vue
index de75b31..857d6cd 100644
--- a/PAMapp/pages/myAppointmentList/contactedList.vue
+++ b/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[]) {
--
Gitblit v1.8.0