page refactor: my-appointment-list

Tomas

2021-12-27 a74fd90950e4d37c35b947db979d3a26698a85db

page refactor: my-appointment-list

 PAMapp/pages/myAppointmentList.vue

@@ -56,33 +56,17 @@
    @State('myAppointmentList')
    myAppointmentList!: ClientInfo[];

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

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

    @State('myNewAppointmentSum')
    newAppointmentSum!: number;

    @Watch('newAppointmentSum')
    newAppointmentSumChange(): void {
      this.showNewAppointmentHint = this.newAppointmentSum > 0;
    }
    @Action
    storeMyAppointmentList!: () => Promise<number>;

    activeTabName = 'appointmentList';
    appointmentList: ClientInfo[] = [];
    contactedList: ClientInfo[] = [];
    clients: ClientInfo[] = [];
    showNewAppointmentHint = false;

    get bannerClassName() {
        const routeName = this.$route.name || '';
        return this.routeFormatBannerClass(routeName);
    };
    activeTabName         : string       = 'appointmentList';
    appointmentList       : ClientInfo[] = [];
    clients               : ClientInfo[] = [];
    contactedList         : ClientInfo[] = [];
    showNewAppointmentHint: boolean      = false;

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

@@ -91,24 +75,6 @@
      this.storeMyAppointmentList();
    }

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

    @Action
    storeMyAppointmentList!: () => Promise<number>;


    clickTab(path: string): void {
      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) {
@@ -116,18 +82,51 @@
      }
    }

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

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

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

    @Watch('newAppointmentSum')
    newAppointmentSumChange(): void {
      this.showNewAppointmentHint = this.newAppointmentSum > 0;
    }

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

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

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

    // 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';
    };
}
</script>

<style lang="scss" scoped>
    .pam-myAppointment-banner {
        width: 100%;
        height: 120px;
        background-size: cover;
        background-repeat: no-repeat;
        width              : 100%;
        height             : 120px;
        background-size    : cover;
        background-repeat  : no-repeat;
        background-position: center;
        position: relative;
        background-image: url('~/assets/images/myAppointmentList/agent_banner_mob.svg');
        position           : relative;
        background-image   : url('~/assets/images/myAppointmentList/agent_banner_mob.svg');
    }

    @media (min-width: 768px) {