update 我的顧問清單: 使用 store 存放 consultantList 以及新增顧問、移除顧問的狀態控制

Mila

2021-11-16 f6a21bf37ef56ecab88652b1449da63f73b9648a

update 我的顧問清單: 使用 store 存放 consultantList 以及新增顧問、移除顧問的狀態控制

 PAMapp/assets/ts/api/consultant.ts

@@ -1,5 +1,6 @@
import { service } from '~/assets/ts/api/share';
import { AxiosResponse } from 'axios';
import { AppointmentDetail } from '../models/AppointmentDetail';

// é¡§å®¢ç™»å…¥(TODO: OTP認證開發前 æš«æ™‚使用)
export function login(user: any) {
@@ -8,15 +9,17 @@

// æŽ¨è–¦ä¿éšªé¡§å•
export function recommend() {
    return service.get('/consultant/recommend')
    return service.get<Consultants[]>('/consultant/recommend')
            .then(res => res.data);
}

// æˆ‘的顧問清單
export function getFavoriteConsultant():Promise<AxiosResponse<Consultants[]>> {
export function getFavoriteConsultant() {
    const headers = {
        Authorization: 'Bearer ' + localStorage.getItem('id_token')
    }
    return service.get('/consultant/favorite', {headers});
    return service.get<Consultants[]>('/consultant/favorite', {headers})
            .then(res => res.data);
}

// å¿«é€Ÿç¯©é¸
@@ -152,20 +155,3 @@
    new:           boolean;
}

export interface AppointmentDetail {
    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
}

 PAMapp/assets/ts/models/AppointmentDetail.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,18 @@

export interface AppointmentDetail {
    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;
}

 PAMapp/components/AddAndReservedBtns.vue

@@ -1,6 +1,6 @@
<template>
    <el-row type="flex" justify="center" :class="cusClass">
        <el-button @click="addConsultant(agentInfo)">
        <el-button @click="addConsultant(agentInfo)" :disabled="isAdded">
            <span> + é¡§å•æ¸…å–®</span>
        </el-button>
        <el-button
@@ -11,42 +11,22 @@
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';
import { addFavoriteConsultant, Consultants } from '~/assets/ts/api/consultant';
import { Vue, Component, Prop, Emit, Action, State } from 'nuxt-property-decorator';
import { Consultants } from '~/assets/ts/api/consultant';
import { isLogin } from '~/assets/ts/auth';
import { getFavoriteFromStorage, setFavoriteToStorage } from '~/assets/ts/storageConsultant';

@Component
export default class AddAndReservedBtns extends Vue {
    @Action addToMyConsultantList!: (consultantToAdd: Consultants) => Promise<boolean>
    @State('myConsultantList') myConsultantList!: Consultants[];

    @Prop() agentInfo!: Consultants;
    @Prop() cusClass!: string;
    isVisiblePopUp = false;
    addConsultant(item: Consultants) {
        if (isLogin()) {
            addFavoriteConsultant([item.agentNo]).then(res => this.openPopUp())
        } else {
            this.addConsultantToStorage(item);
        }
    }

    addConsultantToStorage(item: Consultants) {
        let agentList = [item];
        const consultantList = getFavoriteFromStorage();

        if (consultantList) {
            const isRepeat = consultantList.findIndex(i => i.agentNo === item.agentNo) === -1;
            isRepeat
                ? this.storageFavoriteAndPopUp(consultantList.concat(agentList))
                : this.openPopUp('已經加入顧問清單');

        } else {
            this.storageFavoriteAndPopUp(agentList);
        }
    }

    storageFavoriteAndPopUp(item: Consultants[]) {
        setFavoriteToStorage(item);
        this.openPopUp();
        this.addToMyConsultantList(item).then(addOk => {
            addOk && this.openPopUp();
        });
    }

    reserveCommunication() {
@@ -56,5 +36,10 @@
    @Emit('openPopUp') openPopUp(popUpTxt: string = '成功加入顧問清單') {
        return popUpTxt
    }

    get isAdded() {
        return this.myConsultantList.find(item => item.agentNo === this.agentInfo.agentNo)
                ? true : false
    }
}
</script>

 PAMapp/components/Consultant/ConsultantCard.vue

@@ -69,8 +69,9 @@
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';
import { AppointmentDetail, Consultants, getAppointmentDetail } from '~/assets/ts/api/consultant';
import { Vue, Component, Prop, Emit, Action } from 'nuxt-property-decorator';
import { Consultants, getAppointmentDetail } from '~/assets/ts/api/consultant';
import { AppointmentDetail } from '~/assets/ts/models/AppointmentDetail';
import { isLogin } from '~/assets/ts/auth';
import { isMobileDevice } from '~/assets/ts/device';

@@ -85,6 +86,8 @@
    }
})
export default class ConsultantCard extends Vue {
    @Action removeFromMyConsultantList!: (agentNo: string) => Promise<boolean>;

    @Prop() agentInfo!: Consultants;
    isVisibleDialog = false;
    width: string = '';
@@ -157,8 +160,10 @@
        });
    }

    @Emit('removeAgent') removeAgent() {
        return this.agentInfo.agentNo;
    removeAgent() {
        this.removeFromMyConsultantList(this.agentInfo.agentNo).then((removeOk) => {
            console.log('removeOk?', removeOk);
        });
    }

    showAgentDetail(agentNo: string): void {

 PAMapp/components/Consultant/ConsultantList.vue

@@ -6,7 +6,6 @@
                v-for="(agent, index) in agents"
                :key="index"
                :agentInfo="agent"
                @removeAgent="removeAgent"
            ></ConsultantCard>
        </template>
        <template v-if="isLogin && agents.length === 0">
@@ -24,7 +23,7 @@
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';
import { Vue, Component, Prop } from 'nuxt-property-decorator';
import { Consultants } from '~/assets/ts/api/consultant';
import { isLogin } from '~/assets/ts/auth';

@@ -36,9 +35,6 @@
        return isLogin();
    }

    @Emit('removeAgent') removeAgent(agentId: number) {
        return agentId;
    }
}
</script>


 PAMapp/pages/index.vue

@@ -28,7 +28,6 @@
            </el-row>
            <ConsultantList
                :agents="consultantList.slice(0, 3)"
                @removeAgent="removeAgent"
            ></ConsultantList>
            <div class='pam-recommend pb-30 pt-30'>
                <h5 class="mdTxt">推薦保險顧問</h5>
@@ -40,11 +39,8 @@
</template>

<script lang="ts">
import { Vue, Component, State, Action } from 'nuxt-property-decorator';
import { getFavoriteFromStorage, setFavoriteToStorage } from '~/assets/ts/storageConsultant';
import { addFavoriteConsultant, Consultants, deleteConsultant } from '~/assets/ts/api/consultant';
import { login, getFavoriteConsultant } from '~/assets/ts/api/consultant';
import { isLogin } from '~/assets/ts/auth';
import { Vue, Component, State, Action, Watch } from 'nuxt-property-decorator';
import { Consultants } from '~/assets/ts/api/consultant';

@Component({
    layout: 'home'
@@ -55,52 +51,28 @@
    @State('recommendList') recommendList!: Consultants[];
    @Action storeRecommendList!: any;

    @State('myConsultantList') myConsultantList!: Consultants[];
    @Action storeConsultantList!: any;

    @Watch('myConsultantList')
    onMyConsultantListChange() {
        this.consultantList = (this.myConsultantList || [])
                .filter(item => item.contactStatus !== 'contacted')
                .sort((a, b) => a.updateTime > b.updateTime ? -1 : 1)
    }

    mounted() {
        if (!this.recommendList) {
        if (!this.recommendList?.length) {
            this.storeRecommendList();
        }

        if (isLogin()) {
            this.addFavoriteFromStorageToApi();
        } else {
            this.consultantList = getFavoriteFromStorage();
        }
    }

    getMyConsutant() {
        getFavoriteConsultant().then((response) => {
            this.consultantList = response.data
                .filter(item => item.contactStatus !== 'contacted')
                .sort((a, b) => a.updateTime > b.updateTime ? -1 : 1)
        });
    }

    addFavoriteFromStorageToApi() {
        const agentNoList = getFavoriteFromStorage().map(i => i.agentNo)
        if (agentNoList.length > 0) {
            addFavoriteConsultant(agentNoList).then(res => this.getMyConsutant());
            localStorage.removeItem('favoriteConsultant');
            return;
        }
        this.getMyConsutant();
        this.storeConsultantList();
    }

    routerPush(path: string) {
        this.$router.push(path);
    }

    removeAgent(agentNo: string) {

        if (!isLogin()) {
            const findIndex = this.consultantList.findIndex((item, i) => {
                return item.agentNo === agentNo;
            })
            this.consultantList.splice(findIndex, 1);
            setFavoriteToStorage(this.consultantList)
        } else {
            deleteConsultant(agentNo).then(res => this.$router.go(0))
        }
    }
}

</script>

 PAMapp/pages/myConsultantList.vue

@@ -20,17 +20,14 @@
        <NuxtChild
            :contactedList="contactedList"
            :consultantList="consultantList"
            @remove="removeAgent"
        ></NuxtChild>
    </div>
</template>

<script lang='ts'>
import { Vue, Component, Watch } from 'vue-property-decorator';
import { Vue, Component, Watch, State, Action } from 'nuxt-property-decorator';
import { Route } from 'vue-router/types/router.d'
import { getFavoriteFromStorage, setFavoriteToStorage } from '~/assets/ts/storageConsultant';
import { addFavoriteConsultant, Consultants, deleteConsultant, getFavoriteConsultant } from '~/assets/ts/api/consultant';
import { isLogin } from '~/assets/ts/auth';
import { Consultants } from '~/assets/ts/api/consultant';

@Component
export default class myConsultantList extends Vue {
@@ -39,54 +36,30 @@
    contactedList: Consultants[] = [];
    consultantList: Consultants[] = [];

    @State('myConsultantList') myConsultantList!: Consultants[];
    @Action storeConsultantList!: any;

    @Watch('myConsultantList')
    onMyConsultantListChange() {
        this.filterContactedList();
    }

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

    mounted() {
        if (isLogin()) {
            this.addFavoriteFromStorageToApi();
        } else {
            this.agents = getFavoriteFromStorage();
            this.filterContactedList()
        }
    }

    addFavoriteFromStorageToApi() {
        const agentNoList = getFavoriteFromStorage().map(i => i.agentNo)
        if (agentNoList.length > 0) {
            addFavoriteConsultant(agentNoList).then(res => this.getMyConsutant());
            localStorage.removeItem('favoriteConsultant');
            return;
        }
        this.getMyConsutant();
    }

    getMyConsutant() {
        getFavoriteConsultant().then((response) => {
            this.agents = response.data;
            this.filterContactedList();
        });
        this.storeConsultantList();
    }

    filterContactedList() {
        this.consultantList = this.agents
        this.consultantList = (this.myConsultantList || [])
                .filter(item => item.contactStatus !== 'contacted')
                .sort((a, b) => a.updateTime > b.updateTime ? -1 : 1);
        this.contactedList = this.agents
        this.contactedList = (this.myConsultantList || [])
                .filter(item => item.contactStatus === 'contacted')
                .sort((a, b) => a.updateTime > b.updateTime ? -1 : 1);
    }

    removeAgent(agentNo: string) {
        if (!isLogin()) {
            const fintIndex = this.consultantList.findIndex(item => item.agentNo === agentNo);
            this.consultantList.splice(fintIndex, 1);
            setFavoriteToStorage(this.consultantList);
        } else {
            deleteConsultant(agentNo).then(res => this.$router.go(0))
        }
    }

    @Watch('$route') watchRouter(currentRoute: Route) {

 PAMapp/pages/myConsultantList/consultantList.vue

@@ -2,7 +2,6 @@
    <div>
        <ConsultantList
            :agents="pageList"
            @removeAgent="removeAgent"
        ></ConsultantList>

        <UiPagination
@@ -13,7 +12,7 @@
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit, Getter } from 'nuxt-property-decorator';
import { Vue, Component, Prop, Getter } from 'nuxt-property-decorator';
import { Consultants } from '~/assets/ts/api/consultant';

@Component
@@ -21,10 +20,6 @@
    @Prop() consultantList!: Consultants[];
    @Getter isLogin!: boolean;
    pageList: Consultants[] = [];

    @Emit('remove') removeAgent(agentNo: number) {
        return agentNo;
    }

    changePage(pageList: Consultants[]) {
        this.pageList = pageList;

 PAMapp/store/index.ts

@@ -1,23 +1,112 @@
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'
import { Consultants,recommend,AgentOfStrictQuery} from '~/assets/ts/api/consultant';
import { ClientInfo, getMyAppointmentList } from '~/assets/ts/api/appointment';
// import * as consultant from '~/assets/ts/api/consultant';
import { Consultants,recommend,AgentOfStrictQuery, getFavoriteConsultant, addFavoriteConsultant, deleteConsultant } from '~/assets/ts/api/consultant';
import { isLogin } from '~/assets/ts/auth';
import { getFavoriteFromStorage, setFavoriteToStorage } from '~/assets/ts/storageConsultant';

@Module
export default class Store extends VuexModule {
    recommendList: Consultants[] | null = null;
    recommendList: Consultants[] = [];
    strictQueryList: AgentOfStrictQuery[] = [];
    myConsultantList: Consultants[] = [];

    myAppointmentList: ClientInfo[] = [];

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

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

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

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

    @Action storeRecommendList() {
        recommend().then(res => {
            this.context.commit('updateRecommend', res.data)
        recommend().then(data => {
            this.context.commit('updateRecommend', data)
        })
    }

    @Action
    async storeConsultantList() {
        const localData = getFavoriteFromStorage();
        if (!isLogin()) {
            this.context.commit('updateConsultantList', localData)
            return;
        };


        if (localData?.length) {
            const agentNoList = localData.map(i => i.agentNo)
            await addFavoriteConsultant(agentNoList).then(res => {
                localStorage.removeItem('favoriteConsultant')
            })
        }

        getFavoriteConsultant().then(data => {
            this.context.commit('updateConsultantList', data)
        })
    }

    @Action
    async removeFromMyConsultantList(agentNo: string) {
        const left = this.myConsultantList.filter(item => item.agentNo !== agentNo);

        // no agent was removed
        if (left.length === this.myConsultantList.length) return false;

        if (!isLogin()) {
            setFavoriteToStorage(left);
        } else {
            await deleteConsultant(agentNo)
        }

        this.context.commit('updateConsultantList', left)

        return true
    }

    @Action
    async addToMyConsultantList(consultantToAdd: Consultants) {
        if (consultantToAdd) {
            const found = this.myConsultantList.find(item => item.agentNo === consultantToAdd.agentNo);
            if (!found) {
                const newData = [consultantToAdd].concat(this.myConsultantList);

                if (isLogin()) {
                    await addFavoriteConsultant([consultantToAdd.agentNo])
                } else {
                    setFavoriteToStorage(newData);
                }

                this.context.commit('updateConsultantList', newData)

                return true;
            }
        }

        return false;
    }

    @Action
    storeMyAppointmentList() {
        getMyAppointmentList().then((data) => {
            this.context.commit('updateMyAppointmentList', data)
        });
    }

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

}