refactor components: AddAndReservedBtns, AddressPicker, BackActionBar

Tomas

2021-12-27 e468c37484e3d3b9f713ef70ed9b207840690c6e

refactor components: AddAndReservedBtns, AddressPicker, BackActionBar

 PAMapp/components/AddAndReservedBtns.vue

@@ -1,10 +1,10 @@
<template>
    <el-row type="flex" justify="center" :class="cusClass">
        <el-button @click="addConsultant(agentInfo)" :disabled="isAdded">
            <span> {{isAdded ? '已加入顧問清單' : '+ é¡§å•æ¸…å–®'}}</span>
            <span> {{ isAdded ? '已加入顧問清單' : '+ é¡§å•æ¸…å–®' }}</span>
        </el-button>
        <el-button
            @click="reserveCommunication"
            @click="navigateToReservationForm"
            type="primary"
        >進行預約</el-button>
    </el-row>
@@ -14,26 +14,40 @@
import { Vue, Component, Prop, Emit, Action, State, namespace } from 'nuxt-property-decorator';
import { Consultant } from '~/shared/models/consultant.model';

const localStorage = namespace('localStorage');
@Component
export default class AddAndReservedBtns extends Vue {
    @Action addToMyConsultantList!: (consultantToAdd: Consultant) => Promise<boolean>
    @State('myConsultantList') myConsultantList!: Consultant[];
    @Prop() agentInfo!: Consultant;
    @Prop() cusClass!: string;

    @Action
    addToMyConsultantList!: (consultantToAdd: Consultant) => Promise<boolean>

    @State('myConsultantList')
    myConsultantList!: Consultant[];

    @Prop()
    agentInfo!: Consultant;

    @Prop()
    cusClass!: string;

    isVisiblePopUp = false;
    addConsultant(item: Consultant) {

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

    @Emit('openPopUp')
    openPopUp(popUpTxt: string = '成功加入顧問清單'): string {
        return popUpTxt;
    }

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

    addConsultant(item: Consultant): void {
        this.addToMyConsultantList(item).then(addOk => {
            addOk && this.openPopUp();
        });
    }

    reserveCommunication() {
    navigateToReservationForm(): void {
        this.$router.push(`/questionnaire/${this.agentInfo.agentNo}`);
    }

    @Emit('openPopUp') openPopUp(popUpTxt: string = '成功加入顧問清單') {
        return popUpTxt
    }

    get isAdded() {

 PAMapp/components/AddressPicker.vue

@@ -23,17 +23,30 @@
<script lang="ts">
import { Vue, Component, Emit } from 'nuxt-property-decorator';

import { taiwanCities } from '~/shared/const/taiwan-cities';

@Component
export default class AddressPicker extends Vue {

    options = ['基隆市', '台北市', '新北市', '桃園市', '新竹市', '新竹縣', '苗栗縣', '台中市', '彰化縣', '南投縣', '雲林縣', '嘉義市', '嘉義縣', '台南市', '高雄市', '屏東縣', '台東縣', '花蓮縣', '宜蘭縣', '澎湖縣', '金門縣', '連江縣'];
    keyWord = '';
    options      : string[] = taiwanCities;
    keyWord      : string   = '';
    filterOptions: string[] = [];
    district = '台北市';
    district     : string   = '台北市';

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

    mounted() {
        this.filterOptions = JSON.parse(JSON.stringify(this.options));
    }

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

    @Emit('confirm')
    confirm(): string {
        return this.district;
    }

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

    searchDistrict() {
        this.filterOptions = this.options.filter(e => e.match(this.keyWord));
@@ -43,10 +56,7 @@
        this.district = value;
    }

    @Emit('confirm')
    confirm() {
        return this.district;
    }


}
</script>

 PAMapp/components/BackActionBar.vue

@@ -1,7 +1,7 @@
<template>
    <nav class="pam-back-action-bar fix-chrome-click--issue">
        <a @click="pushRouterByLoginRole">
          <i class="icon-left "></i>
        <a @click="goBack">
            <i class="icon-left "></i>
        </a>
        <div class="label">{{ label }}</div>
    </nav>
@@ -10,15 +10,27 @@
<script lang="ts">
import { namespace } from 'nuxt-property-decorator';
import { Vue, Component,} from 'vue-property-decorator';

import * as _ from 'lodash';

import { Role } from '~/shared/models/enum/Role';

const roleStorage = namespace('localStorage');

@Component
export default class UiCarousel extends Vue {
  @roleStorage.Getter currentRole!:string;
  get label(): string {

  @roleStorage.Getter
  currentRole!:string;

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

  goBack(): void {
    const pathName = this.$route.name;
    pathName?.includes('myConsultantList') ? this.$router.push('/') : this.$router.go(-1);
  }

  get label(): string {
    if (this.$route.name) {
      const routeName = this.$route.name.split('-')[0];
      let featureLabel = '';
@@ -67,46 +79,41 @@
    }
  }

  pushRouterByLoginRole():void{
    const pathName = this.$route.name;
    pathName?.includes('myConsultantList') ? this.$router.push('/') : this.$router.go(-1);
  }

}
</script>

<style lang="scss" scoped>
.pam-back-action-bar {
  height: $MOB_NAV_BAR;
  border: 1px solid #CCCCCC;
  display: flex;
  align-items: center;
  position: fixed;
  top: $MOB_NAV_BAR;
  left: 0;
  width: 100%;
  height          : $MOB_NAV_BAR;
  border          : 1px solid #CCCCCC;
  display         : flex;
  align-items     : center;
  position        : fixed;
  top             : $MOB_NAV_BAR;
  left            : 0;
  width           : 100%;
  background-color: $PRIMARY_WHITE;
  z-index: 6;
  font-size: 20px;
  font-weight: bold;
  z-index         : 6;
  font-size       : 20px;
  font-weight     : bold;
  i {
    display: block;
    display      : block;
    padding-right: 14px;
  }
  a {
    cursor: pointer;
    cursor : pointer;
    padding: 0 20px;
    width: 26px;
    width  : 26px;
  }
  .label {
    margin: 0 auto;
    margin   : 0 auto;
    transform: translateX(-33px);
  }
}

@include desktop {
  .pam-back-action-bar {
    top: $DESKTOP_NAV_BAR;
    top      : $DESKTOP_NAV_BAR;
    font-size: 24px;
  }
}

 PAMapp/shared/const/taiwan-cities.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1 @@
export const taiwanCities = ['基隆市', '台北市', '新北市', '桃園市', '新竹市', '新竹縣', '苗栗縣', '台中市', '彰化縣', '南投縣', '雲林縣', '嘉義市', '嘉義縣', '台南市', '高雄市', '屏東縣', '台東縣', '花蓮縣', '宜蘭縣', '澎湖縣', '金門縣', '連江縣'];