| | |
| | | |
| | | <script lang="ts"> |
| | | import { Vue, Component, State, Watch } from 'nuxt-property-decorator'; |
| | | import { ClientInfo } from '~/assets/ts/api/appointment'; |
| | | |
| | | import { ClientInfo } from '~/shared/models/client.model'; |
| | | |
| | | @Component |
| | | export default class ClientReservedList extends Vue { |
| | | @State('myAppointmentList') myAppointmentList!: ClientInfo[]; |
| | | |
| | | @State('myAppointmentList') |
| | | myAppointmentList!: ClientInfo[]; |
| | | |
| | | appointmentList: ClientInfo[] = []; |
| | | pageList: ClientInfo[] = []; |
| | | keyWord: string = ''; |
| | | filterList: ClientInfo[] = []; |
| | | |
| | | @Watch('myAppointmentList') |
| | | onMyAppointmentListChange() { |
| | | const unreadList = this.myAppointmentList |
| | | .filter(item => item.communicateStatus !== 'contacted' && !item.consultantReadTime) |
| | | .sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1); |
| | | |
| | | const readList = this.myAppointmentList |
| | | .filter(item => item.communicateStatus !== 'contacted' && item.consultantReadTime) |
| | | .sort((a, b) => a.consultantReadTime > b.consultantReadTime ? -1 : 1) |
| | | |
| | | this.appointmentList = unreadList.concat(readList); |
| | | this.filterList = this.appointmentList; |
| | | } |
| | | ////////////////////////////////////////////////////////////////////// |
| | | |
| | | mounted() { |
| | | this.onMyAppointmentListChange(); |
| | | } |
| | | |
| | | changePage(pageList: ClientInfo[]) { |
| | | this.pageList = pageList; |
| | | ////////////////////////////////////////////////////////////////////// |
| | | |
| | | @Watch('myAppointmentList') |
| | | onMyAppointmentListChange(): void { |
| | | const unViewList = this.myAppointmentList |
| | | .filter((item) => item.communicateStatus !== 'contacted' && !item.consultantViewTime) |
| | | .map((item) => ({ ...item, sortTime: new Date(item.appointmentDate)})) |
| | | .sort((preItem, nextItem) => +nextItem.sortTime - +preItem.sortTime); |
| | | |
| | | const tempViewList = this.myAppointmentList |
| | | .filter(item => item.communicateStatus !== 'contacted' && item.consultantViewTime); |
| | | |
| | | // TODO: 後續如需針對 unreadList 做更細緻的排序,則需請後端提供判斷依據(例如: createTime)。[Tomas, 2021/12/16];å |
| | | const unreadList = tempViewList.filter((item) => !item.consultantReadTime); |
| | | const readList = tempViewList |
| | | .filter((item) => item.consultantReadTime) |
| | | .map((item) => ({ ...item, sortTime: new Date(item.consultantReadTime)})) |
| | | .sort((preItem, nextItem) => +nextItem - +preItem); |
| | | |
| | | this.appointmentList = [...unViewList, ...unreadList, ...readList]; |
| | | this.filterList = this.appointmentList; |
| | | } |
| | | |
| | | search() { |
| | | search(): void { |
| | | this.filterList = this.appointmentList.filter(item => { |
| | | return item.name.match(this.keyWord) || item.requirement.match(this.keyWord) |
| | | }) |
| | | } |
| | | |
| | | changePage(pageList: ClientInfo[]): void { |
| | | this.pageList = pageList; |
| | | } |
| | | |
| | | } |
| | | </script> |
| | | </script> |