update: 顧問-預約單列表調整為三個頁面籤的邏輯調整

Tomas

2022-01-14 5e17ffe4ac5922abec6114d7da4c39f50d6768a6

update: 顧問-預約單列表調整為三個頁面籤的邏輯調整

 PAMapp/components/Client/ClientCard.vue

@@ -30,7 +30,7 @@
                    </template>
                </div>
                <AppointmentProgress
                  :currentStep="'contacted'"
                  :currentStep="client.communicateStatus"
                ></AppointmentProgress>
            </div>
        </div>

 PAMapp/components/Client/ClientList.vue

@@ -28,9 +28,14 @@
    //////////////////////////////////////////////////////////////////////

    get noDataPlaceholder(): string {
      return this.title === 'reservedList'
                          ? '您目前無已預約客戶'
                          : '您目前無已聯絡客戶';
      let noDataWording = '您目前無已結案的預約單';
      if (this.title === 'contactedList') {
        noDataWording = '您目前無約訪中的預約單';
      }
      if (this.title === 'reservedList') {
        noDataWording = '您目前無未聯絡的預約單';
      }
      return noDataWording;
    }
}
</script>

 PAMapp/pages/myAppointmentList.vue

@@ -12,17 +12,17 @@
                </div>
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'onProgressList'}"
                    @click="clickTab('onProgressList')"
                    :class="{'is-active': activeTabName === 'contactedList'}"
                    @click="clickTab('contactedList')"
                >
                  <span class="smTxt">約訪中({{ appointmentList.length }})</span>
                </div>
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'contactedList'}"
                    @click="clickTab('contactedList')"
                    :class="{'is-active': activeTabName === 'closedList'}"
                    @click="clickTab('closedList')"
                >
                  <span class="smTxt">結案({{ contactedList.length }})</span>
                  <span class="smTxt">結案({{ closedList.length }})</span>
                </div>
            </div>

@@ -53,6 +53,7 @@
import * as _ from 'lodash';

import { Appointment } from '~/shared/models/appointment.model';
import { ContactStatus } from '~/shared/models/enum/contact-status';

const localStorage = namespace('localStorage');

@@ -77,11 +78,12 @@
    @localStorage.Getter
    currentAppointmentIdFromMsg!: string;

    activeTabName         : string       = 'appointmentList';
    appointmentList       : Appointment[] = [];
    clients               : Appointment[] = [];
    contactedList         : Appointment[] = [];
    showNewAppointmentHint: boolean      = false;
    activeTabName          : string        = 'appointmentList';
    appointmentList        : Appointment[] = [];
    contactedList          : Appointment[] = [];
    closedList             : Appointment[] = [];
    contactStatus          = ContactStatus;
    showNewAppointmentHint: boolean        = false;

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

@@ -97,23 +99,24 @@

    @Watch('myAppointmentList')
    onMyAppointmentListChange(): void {
        this.contactedList = this.myAppointmentList
            .filter(item => item.communicateStatus === 'contacted');

        this.appointmentList = this.myAppointmentList
            .filter(item => item.communicateStatus !== 'contacted');

            .filter(item => item.communicateStatus === this.contactStatus.RESERVED);
        this.contactedList = this.myAppointmentList
            .filter((item) => item.communicateStatus === this.contactStatus.CONTACTED);
        this.closedList = this.myAppointmentList
            .filter(item => item.communicateStatus === this.contactStatus.DONE || item.communicateStatus === this.contactStatus.CLOSE );
        if (this.currentAppointmentIdFromMsg) {
            this.redirectAppointmentStatus();
        }
    }

    // TODO: 調整程式碼 [Tomas, 2022/1/14 12:02]
    private redirectAppointmentStatus() {
        const currentAppointmentIndex = this.myAppointmentList
            .findIndex(item => item.id === +this.currentAppointmentIdFromMsg);
        if (currentAppointmentIndex > -1) {
            const communicateStatus = this.myAppointmentList[currentAppointmentIndex].communicateStatus;
            const pathName = communicateStatus === 'reserved' ? 'appointmentList' : 'contactedList';
            const pathName = communicateStatus === 'reserved' ? 'appointmentList' : 'closedList';
            this.$router.push(
                {
                    path: '/myAppointmentList/' + pathName,
@@ -150,7 +153,7 @@

    // format to {page}-banner or pam-no-banner tag
    private routeFormatBannerClass(route: string): string {
        const needBannerTags = ['myAppointmentList-appointmentList', 'myAppointmentList-contactedList'];
        const needBannerTags = ['myAppointmentList-appointmentList', 'myAppointmentList-closedList'];
        return _.includes(needBannerTags, route) ? route + '-banner' : 'pam-no-banner';
    };
}

 PAMapp/pages/myAppointmentList/appointmentList.vue

@@ -27,6 +27,7 @@
import { Vue, Component, State, Watch, namespace } from 'nuxt-property-decorator';

import { Appointment } from '~/shared/models/appointment.model';
import { ContactStatus } from '~/shared/models/enum/contact-status';


const localStorage = namespace('localStorage');
@@ -44,6 +45,7 @@
    keyWord        : string       = '';
    pageList       : Appointment[] = [];
    currentPage    : number = 1;
    contactStatus  = ContactStatus;

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

@@ -55,13 +57,14 @@

    @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 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);
          .filter(item => item.communicateStatus === this.contactStatus.RESERVED && item.consultantViewTime);

      // TODO: 後續如需針對 unreadList 做更細緻的排序，則需請後端提供判斷依據（例如： createTime）。[Tomas, 2021/12/16];å
      const unreadList = tempViewList
@@ -71,7 +74,8 @@
                    .map((item) => ({ ...item, sortTime: new Date(item.consultantReadTime)}))
                    .sort((preItem, nextItem) => +nextItem.sortTime - +preItem.sortTime);

      this.appointmentList = [...unViewList, ...unreadList, ...readList];
      this.appointmentList = [ ...unreadList, ...readList];
      // this.appointmentList = [...unViewList, ...unreadList, ...readList];
      this.filterList = this.appointmentList;

      this.getCurrentPage();

 PAMapp/pages/myAppointmentList/closedList.vue

File was renamed from PAMapp/pages/myAppointmentList/onProgressList.vue
@@ -16,7 +16,7 @@

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

        <UiPagination
@@ -31,6 +31,7 @@
import { Vue, Component, Watch, State, namespace } from 'nuxt-property-decorator';

import { Appointment } from '~/shared/models/appointment.model';
import { ContactStatus } from '~/shared/models/enum/contact-status';


const localStorage = namespace('localStorage');
@@ -48,6 +49,7 @@
    keyWord      : string       = '';
    pageList     : Appointment[] = [];
    currentPage  : number = 1;
    contactStatus= ContactStatus;

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

@@ -60,7 +62,7 @@
    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
        this.contactedList = (this.myAppointmentList || [])
            .filter(item => item.communicateStatus === 'contacted')
            .filter(item => item.communicateStatus === this.contactStatus.DONE || item.communicateStatus === this.contactStatus.CLOSE)
            .map((item) => ({...item, sortTime: new Date(item.contactTime)}))
            .sort((prevItem, nextItem) => +nextItem.sortTime - +prevItem.sortTime);
        this.filterList = this.contactedList;