| | |
| | | |
| | | <UiPagination |
| | | :totalList="filterList" |
| | | :currentPage="currentPage" |
| | | @changePage="changePage" |
| | | ></UiPagination> |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { Vue, Component, State, Watch } from 'nuxt-property-decorator'; |
| | | import { Vue, Component, State, Watch, namespace } from 'nuxt-property-decorator'; |
| | | |
| | | import { ClientInfo } from '~/shared/models/client.model'; |
| | | |
| | | const localStorage = namespace('localStorage'); |
| | | @Component |
| | | export default class ClientReservedList extends Vue { |
| | | |
| | | @State('myAppointmentList') |
| | | myAppointmentList!: ClientInfo[]; |
| | | |
| | | @localStorage.Getter |
| | | currentAppointmentIdFromMsg!: string; |
| | | |
| | | appointmentList: ClientInfo[] = []; |
| | | filterList : ClientInfo[] = []; |
| | | keyWord : string = ''; |
| | | pageList : ClientInfo[] = []; |
| | | currentPage : number = 1; |
| | | |
| | | ////////////////////////////////////////////////////////////////////// |
| | | |
| | |
| | | |
| | | this.appointmentList = [...unViewList, ...unreadList, ...readList]; |
| | | this.filterList = this.appointmentList; |
| | | |
| | | this.getCurrentPage(); |
| | | } |
| | | |
| | | private getCurrentPage() { |
| | | const currentIndex = this.filterList |
| | | .findIndex(item => item.id === +this.currentAppointmentIdFromMsg); |
| | | const pageSize = 5; |
| | | if (currentIndex > -1) { |
| | | this.currentPage = Math.ceil((currentIndex + 1) / pageSize); |
| | | } |
| | | } |
| | | |
| | | ////////////////////////////////////////////////////////////////////// |
| | | search(): void { |
| | | this.filterList = this.appointmentList.filter(item => { |
| | | return item.name.match(this.keyWord) || item.requirement.match(this.keyWord) |