refactor: move ts folder to shared folder

Tomas

2021-12-22 abfd26bb700d93a92da6a04703b0187d4acaaeb5

 PAMapp/pages/myAppointmentList.vue

@@ -6,78 +6,115 @@
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'appointmentList'}"
                    @click="tabClick('appointmentList')"
                    @click="clickTab('appointmentList')"
                >客戶預約
                    <span class="p">({{appointmentList.length}})</span>
                </div>
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'contactedList'}"
                    @click="tabClick('contactedList')"
                    @click="clickTab('contactedList')"
                >已聯絡
                    <span class="p">({{contactedList.length}})</span>
                </div>
            </div>

            <NuxtChild></NuxtChild>

        </div>

        <!-- DIALOG -->
        <PopUpFrame
             :isOpen.sync="showNewAppointmentHint"
        >
            <div class="text--center mdTxt">
                <p class="mb-50">你有 <span class="text--primary">{{ newAppointmentSum }}</span> 則新的預約</p>
                <div class="text--center">
                    <el-button
                        type="primary"
                        @click="showNewAppointmentHint = false"
                    >我知道了</el-button>
                </div>
            </div>
        </PopUpFrame>
    </div>
</template>

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

import * as _ from 'lodash';

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

@Component({
    layout: 'home'
    layout: 'home',
    middleware: 'myAppointmentMiddleware'
})
export default class ClientReservedList extends Vue {
    activeTabName = 'appointmentList';
    appointmentList: ClientInfo[] = [];
    contactedList: ClientInfo[] = [];
    clients: ClientInfo[] = [];

    @State('myAppointmentList') myAppointmentList!: ClientInfo[];
    @Action storeMyAppointmentList!: any;

    mounted() {
     this.storeMyAppointmentList();

     if (this.$route.name) {
         this.activeTabName = this.$route.name.split('-')[1]
     }
    }
    @State('myAppointmentList')
    myAppointmentList!: ClientInfo[];

    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
        this.contactedList = this.myAppointmentList
            .filter(item => item.communicateStatus === 'contacted')
            .sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1);
            .filter(item => item.communicateStatus === 'contacted');

        this.appointmentList = this.myAppointmentList
            .filter(item => item.communicateStatus !== 'contacted')
            .sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1);;
            .filter(item => item.communicateStatus !== 'contacted');
    }

    tabClick(path: string) {
        this.activeTabName = path;
        this.$router.push('/myAppointmentList/' + this.activeTabName)
    @State('myNewAppointmentSum')
    newAppointmentSum!: number;

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

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

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

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

    mounted() {
      this.setActivatedTab();
      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) {
        this.activeTabName = routeFullName.split('-')[1];
      }
    }

}
</script>
@@ -106,7 +143,7 @@
    @include desktop {
        .pam-container {
            width: 700px;
            margin: 30px auto 0px auto;
            margin: 30px auto;
        }
    }
</style>
</style>