refactor: myAppointmentList

Tomas

2021-12-14 497f54b264eba626b77e79fec2ca6947ccae19e4

refactor: myAppointmentList

 PAMapp/assets/ts/api/appointment.ts

@@ -2,14 +2,6 @@

import { AppointmentLog } from '../models/appointment.model';

// å–得所有預約清單
export function getMyAppointmentList():Promise<ClientInfo[]> {
    const headers = {
        Authorization: 'Bearer ' + localStorage.getItem('id_token')
    }
    return http.get('/consultant/getMyAppointment', {headers}).then(res => res.data);
}

// æ¨™è¨˜ç‚ºå·²è¯çµ¡
export function markAsContact(appointmentId: number) {
    const headers = {
@@ -42,27 +34,4 @@
        Authorization: 'Bearer ' + localStorage.getItem('id_token')
    }
    return http.post('/appointment/recordRead/' + appointmentId, undefined, {headers})
}


export interface ClientInfo {
    id               : number,
    phone            : string,
    email            : string,
    contactType      : string,
    gender           : string,
    age              : string,
    job              : string,
    requirement      : string,
    communicateStatus: string,
    hopeContactTime  : string,
    otherRequirement : string,
    appointmentDate  : Date,
    agentNo          : string,
    customerId       : number,
    name             : string,
    consultantViewTime: Date,
    consultantReadTime: Date,
    contactTime      : Date,
    satisfactionScore: number
}

 PAMapp/assets/ts/models/client.model.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,21 @@
export interface ClientInfo {
  id                : number,
  phone             : string,
  email             : string,
  contactType       : string,
  gender            : string,
  age               : string,
  job               : string,
  requirement       : string,
  communicateStatus : string,
  hopeContactTime   : string,
  otherRequirement  : string,
  appointmentDate   : string,
  agentNo           : string,
  customerId        : number,
  name              : string,
  consultantViewTime: string,
  consultantReadTime: string,
  contactTime       : string,
  satisfactionScore : number
}

 PAMapp/assets/ts/services/appointment.service.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,14 @@
import { http } from "./httpClient";

import { ClientInfo } from "../models/client.model";

class AppointmentService {

  // å–得所有預約清單
  async getMyAppointmentList(): Promise<ClientInfo[]> {
    return http.get('/consultant/getMyAppointment').then(res => res.data);
  }

}

export default new AppointmentService();

 PAMapp/pages/myAppointmentList.vue

@@ -22,15 +22,16 @@
            <NuxtChild></NuxtChild>
        </div>

        <!-- DIALOG -->
        <PopUpFrame
             :isOpen.sync="showNewAppointmentNumber"
             :isOpen.sync="showNewAppointmentHint"
        >
            <div class="text--center mdTxt">
                <p class="mb-50">你有 <span class="text--primary">{{newAppointmentNumber}}</span> å‰‡æ–°çš„預約</p>
                <p class="mb-50">你有 <span class="text--primary">{{ newAppointmentSum }}</span> å‰‡æ–°çš„預約</p>
                <div class="text--center">
                    <el-button
                        type="primary"
                        @click="showNewAppointmentNumber = false"
                        @click="showNewAppointmentHint = false"
                    >我知道了</el-button>
                </div>
            </div>
@@ -40,37 +41,31 @@

<script lang="ts">
import { Vue, Component, State, Action, Watch } from 'nuxt-property-decorator';
import { allAppointmentsView, ClientInfo } from '~/assets/ts/api/appointment';

import * as _ from 'lodash';

import { ClientInfo } from '~/assets/ts/models/client.model';

@Component({
    layout: 'home',
    middleware: 'myAppointmentMiddleware'
})
export default class ClientReservedList extends Vue {

    activeTabName = 'appointmentList';
    appointmentList: ClientInfo[] = [];
    contactedList: ClientInfo[] = [];
    clients: ClientInfo[] = [];
    newAppointmentNumber: number = 0;
    showNewAppointmentNumber = false;
    showNewAppointmentHint = false;

    @State('myAppointmentList') myAppointmentList!: ClientInfo[];
    @Action storeMyAppointmentList!: () => Promise<number>;
    @State('myAppointmentList')
    myAppointmentList!: ClientInfo[];

    mounted() {
     this.storeMyAppointmentList().then(newDataLength => {
         this.newAppointmentNumber = newDataLength;
         if (this.newAppointmentNumber > 0) {
             this.showNewAppointmentNumber = true;
             allAppointmentsView().then(res => res);
         }
    });
    @State('myNewAppointmentSum')
    newAppointmentSum!: number;

     if (this.$route.name) {
         this.activeTabName = this.$route.name.split('-')[1]
     }
    }
    @Action
    storeMyAppointmentList!: () => Promise<number>;

    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
@@ -81,25 +76,39 @@
            .filter(item => item.communicateStatus !== 'contacted');
    }

    tabClick(path: string) {
        this.activeTabName = path;
        this.$router.push('/myAppointmentList/' + this.activeTabName)
    //////////////////////////////////////////////////////////////////////

    mounted() {
      this.setActivatedTab();
      this.storeMyAppointmentList();
      this.showNewAppointmentHint = this.newAppointmentSum > 0;
    }

    get route(): string{
        const routeName = this.$route.name;
        return routeName ? routeName:'';
    };
    //////////////////////////////////////////////////////////////////////

    get bannerClassName() {
        return this.routeFormatBannerClass(this.route);
        const routeName = this.$route.name || '';
        return this.routeFormatBannerClass(routeName);
    };

    tabClick(path: string) {
      this.activeTabName = path;
      this.$router.push(`/myAppointmentList/${this.activeTabName}`);
    }

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

    private setActivatedTab(): void {
      const routeFullName = this.$route.name;
      if (routeFullName) {
        this.activeTabName = routeFullName.split('-')[1];
      }
    }

}
</script>
@@ -131,4 +140,4 @@
            margin: 30px auto;
        }
    }
</style>
</style>

 PAMapp/store/index.ts

@@ -1,12 +1,15 @@
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'

import { ClientInfo, getMyAppointmentList, getMyReviewLog } from '~/assets/ts/api/appointment';
import { getMyReviewLog } from '~/assets/ts/api/appointment';
import { recommend, AgentOfStrictQuery, addFavoriteConsultant, deleteConsultant, strictQuery } from '~/assets/ts/api/consultant';
import { getFavoriteFromStorage, setFavoriteToStorage } from '~/assets/ts/storageConsultant';

import  myConsultantService from '~/assets/ts/services/my-consultant.service';
import myConsultantService from '~/assets/ts/services/my-consultant.service';
import appointmentService from '~/assets/ts/services/appointment.service';

import { Consultant } from '~/assets/ts/models/consultant.model';
import { AppointmentLog } from '~/assets/ts/models/appointment.model';
import { ClientInfo } from '~/assets/ts/models/client.model';
@Module
export default class Store extends VuexModule {
    recommendList: Consultant[] = [];
@@ -14,6 +17,7 @@
    myConsultantList: Consultant[] = [];

    myAppointmentList: ClientInfo[] = [];
    myNewAppointmentSum: number = 0;

    myAppointmentReviewLogList: AppointmentLog[] = [];

@@ -21,27 +25,38 @@
        return this.context.getters['localStorage/isUserLogin'];
    }

    @Mutation updateRecommend(data: Consultant[]) {
    @Mutation
    updateRecommend(data: Consultant[]) {
        this.recommendList = data;
    }

    @Mutation updateConsultantList(data: Consultant[]) {
    @Mutation
    updateConsultantList(data: Consultant[]) {
        this.myConsultantList = data;
    }

    @Mutation updateStrictQueryList(data: AgentOfStrictQuery[]) {
    @Mutation
    updateStrictQueryList(data: AgentOfStrictQuery[]) {
        this.strictQueryList = data;
    }

    @Mutation updateMyAppointmentList(data: ClientInfo[]) {
    @Mutation
    updateMyAppointmentList(data: ClientInfo[]) {
        this.myAppointmentList = data;
    }

    @Mutation updateMyAppointmentReviewLog(data: AppointmentLog[]) {
    @Mutation
    updateMyNewAppointmentSum(newAppointmentSum: number) {
      this.myNewAppointmentSum = newAppointmentSum;
    }

    @Mutation
    updateMyAppointmentReviewLog(data: AppointmentLog[]) {
        this.myAppointmentReviewLogList = data;
    }

    @Action storeRecommendList() {
    @Action
    storeRecommendList() {
        recommend().then(data => {
            this.context.commit('updateRecommend', data)
        })
@@ -109,10 +124,11 @@
    }

    @Action
    async storeMyAppointmentList() {
        return await getMyAppointmentList().then((data) => {
    storeMyAppointmentList(): void {
      appointmentService.getMyAppointmentList().then((data) => {
            const newAppointmentSum = data.filter(item => !item.consultantViewTime || item.consultantViewTime === null).length;
            this.context.commit('updateMyAppointmentList', data);
            return data.filter(item => !item.consultantViewTime || item.consultantViewTime === null).length
            this.context.commit('updateMyNewAppointmentSum', newAppointmentSum);
        });
    }

@@ -130,7 +146,8 @@
        });
    }

    @Action updateMyAppointment(myAppointment: ClientInfo) {
    @Action
    updateMyAppointment(myAppointment: ClientInfo) {
        const data = this.myAppointmentList.filter(item => item.id !== myAppointment.id);
        data.unshift(myAppointment);
        this.context.commit('updateMyAppointmentList', data)