add#134504: 顧問_預約清單 - 約訪中 - 新舊排序功能

Tomas

2022-01-20 a6587a9187ae030e819aeedbd005f6d2a7dfa405

add#134504: 顧問_預約清單 - 約訪中 - 新舊排序功能

 PAMapp/pages/myAppointmentList/contactedList.vue

@@ -14,12 +14,17 @@
            ></i>
        </el-input>

        <div class="sort-indicator mb-10 text--primary text--underline cursor--pointer" @click="changeSortType">
          {{ this.sortType === 'DESC' ? '新->舊' : '舊->新' }}
        </div>

        <ClientList
            :clients="pageList"
            :title="'contactedList'"
        ></ClientList>

        <UiPagination
            v-if="togglePagination"
            :totalList="filterList"
            :currentPage="currentPage"
            @changePage="changePage"
@@ -28,7 +33,7 @@
</template>

<script lang="ts">
import { Vue, Component, Watch, State, namespace } from 'nuxt-property-decorator';
import { Vue, Component, Watch, namespace } from 'nuxt-property-decorator';

import { Appointment } from '~/shared/models/appointment.model';

@@ -46,10 +51,12 @@
    currentAppointmentIdFromMsg!: string;

    contactedList: Appointment[] = [];
    currentPage      : number        = 1;
    filterList   : Appointment[] = [];
    keyWord      : string       = '';
    pageList     : Appointment[] = [];
    currentPage  : number = 1;
    sortType        : 'ASC' | 'DESC' = 'DESC';
    togglePagination: boolean        = true;

    //////////////////////////////////////////////////////////////////////

@@ -61,16 +68,32 @@

    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
      this.setContactedList();
    }

    @Watch('sortType')
    onSortTypeChange() {
      this.togglePagination = false;
      setTimeout(() => {
      this.togglePagination = true;
        this.currentPage = 1;
        this.setContactedList();
      }, 0)
    }

    private setContactedList(): void {
        this.contactedList = (this.myAppointmentList || [])
            .filter(item => item.communicateStatus === 'contacted')
            .map((item) => ({...item, sortTime: new Date(item.contactTime)}))
            .sort((prevItem, nextItem) => +nextItem.sortTime - +prevItem.sortTime);
            .map((item) => ({...item, sortTime: new Date(item.lastModifiedDate)}))
            .sort((prevItem, nextItem) => {
              return this.sortType === 'DESC' ? +nextItem.sortTime - +prevItem.sortTime : +prevItem.sortTime - +nextItem.sortTime
            });
        this.filterList = this.contactedList;

        this.getCurrentPage();
    }

    private getCurrentPage() {
    private getCurrentPage(): void {
        const currentIndex = this.filterList.findIndex(item => item.id === +this.currentAppointmentIdFromMsg);
        const pageSize = 5;
        if (currentIndex > -1) {
@@ -90,5 +113,13 @@
        this.pageList = pageList;
    }

    changeSortType(): void {
      if (this.sortType === 'DESC') {
        this.sortType = 'ASC';
      } else {
        this.sortType = 'DESC';
      }
    }

}
</script>