separate vue files

Tomas

2021-12-08 5730601f103ea285d129bf3d89acd649e86c114a

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
import { Vue, Component, State, Action, Watch } from 'nuxt-property-decorator';
import { allAppointmentsView, ClientInfo } from '~/assets/ts/api/appointment';
import * as _ from 'lodash';
 
@Component({
    layout: 'home'
})
export default class ClientReservedList extends Vue {
    activeTabName = 'appointmentList';
    appointmentList: ClientInfo[] = [];
    contactedList: ClientInfo[] = [];
    clients: ClientInfo[] = [];
    newAppointmentNumber: number = 0;
    showNewAppointmentNumber = false;
 
    @State('myAppointmentList') myAppointmentList!: ClientInfo[];
    @Action storeMyAppointmentList!: () => Promise<number>;
 
    mounted() {
     this.storeMyAppointmentList().then(newDataLength => {
         this.newAppointmentNumber = newDataLength;
         if (this.newAppointmentNumber > 0) {
             this.showNewAppointmentNumber = true;
             allAppointmentsView().then(res => res);
         }
    });
 
     if (this.$route.name) {
         this.activeTabName = this.$route.name.split('-')[1]
     }
    }
 
    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
        this.contactedList = this.myAppointmentList
            .filter(item => item.communicateStatus === 'contacted');
 
        this.appointmentList = this.myAppointmentList
            .filter(item => item.communicateStatus !== 'contacted');
    }
 
    tabClick(path: string) {
        this.activeTabName = path;
        this.$router.push('/myAppointmentList/' + this.activeTabName)
    }
 
    get route(): string{
        const routeName = this.$route.name;
        return routeName ? routeName:'';
    };
 
    get bannerClassName() {
        return this.routeFormatBannerClass(this.route);
    };
 
    // 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';
    };
 
}