Merge branch 'sit' into uat

wayne

2022-02-17 a3716f72066d25d745f4d5103ff23a553c3e102b

 PAMapp/components/phoneContactTimePicker.vue

@@ -2,13 +2,13 @@

<template>
  <div>
    <div class="mt-10" v-for="(scheduleDto,index) in syncScheduleList" :key="index">
      <div class="mdTxt">{{titleFormatByIndex(index)}}</div>
    <div class="mt-10" v-for="(scheduleDto,index) in scheduleList" :key="index">
      <div class="mdTxt">{{index | titleFormatByIndex}}</div>
      <div class="pam-contact-schedule cursor--pointer fix-chrome-click--issue" @click="openPopUp(scheduleDto,index)">
        <div class="pam-contact-schedule__text">
          <template v-if="checkFormHasDone(scheduleDto)">
            <p>{{optionsFormat(scheduleDto.selectWeekOptions,weekOptions)}}</p>
            <p>{{optionsFormat(scheduleDto.selectTimesOptions,timesOfDayOptions)}}</p>
            <p>{{ scheduleDto.selectWeekOptions | optionsFormat(weekOptions)}}</p>
            <p>{{ scheduleDto.selectTimesOptions| optionsFormat(timesOfDayOptions)}}</p>
          </template>
          <template v-else>
            請選擇
@@ -17,51 +17,51 @@
        <div class="pam-contact-schedule__icon">
          <i v-if="checkFormHasDone(scheduleDto)"
            class="icon-delet"
            :class="{'disable':syncScheduleList.length===1}"
            @click.stop="deleteScheduleItem(index)">
            :class="{'disable':scheduleList.length===1}"
            @click.stop="deleteScheduleByIndex(index)">
          </i>
          <i v-else class="icon-calender"></i>
        </div>
      </div>
    </div>
    <div class="pam-add-schedule cursor--pointer"
      :class="{'disable':!checkFormHasDone(syncScheduleList[syncScheduleList && syncScheduleList.length && syncScheduleList.length - 1])|| syncScheduleList.length ===7}"
      :class="{'disable': !checkFormHasDone(scheduleList[scheduleList.length && scheduleList.length - 1]) || scheduleList.length===7 }"
      @click="addNewSchedule">
      <i class="icon-add"></i>
      新增時段
    </div>

    <PopUpFrame class="pam-popUpFrame"
      :isOpen.sync="isOpenByStep_1"
      :dialogWidth="dialogWidth">
        <div class="pam-popUp-title">{{popUpTitle}}</div>
      dialogWidth="376px"
      :isOpen.sync="isOpenByDayPopUp">
        <div class="pam-popUp-title">{{scheduleIndex | titleFormatByIndex}}</div>
          <MultiSelectBtn class="mt-30"
            :mutiSelect.sync="initPickerControl.selectWeekOptions"
            :options="weekOptions.options"
            :nameOfSelectAll="weekOptions.selectAll">
          </MultiSelectBtn>
          <div class="pam-popUp-confirm-bolck mt-30">
          <div class="pam-popUp-confirm-block  mt-30">
            <button class="pam-select-confirm"
              :class="[initPickerControl.selectWeekOptions.length?'el-button--primary' :'is-disabled']"
              @click="confirmByStep_1">
              @click="confirmBySelectDay">
              確定
            </button>
          </div>
    </PopUpFrame>

    <PopUpFrame class="pam-popUpFrame"
      :isOpen.sync="isOpenByStep_2"
      :dialogWidth="dialogWidth">
        <div class="pam-popUp-title">{{popUpTitle}}</div>
      dialogWidth="376px"
      :isOpen.sync="isOpenByTimePopUp">
        <div class="pam-popUp-title">{{scheduleIndex | titleFormatByIndex}}</div>
        <MultiSelectBtn class="mt-30"
          :mutiSelect.sync="initPickerControl.selectTimesOptions"
          :options="timesOfDayOptions.options"
          :nameOfSelectAll="timesOfDayOptions.selectAll">
        </MultiSelectBtn>
        <div class="pam-popUp-confirm-bolck mt-30">
        <div class="pam-popUp-confirm-block  mt-30">
          <button class="pam-select-confirm"
            :class="[initPickerControl.selectTimesOptions.length ?'el-button--primary' :'is-disabled']"
            @click="confirmByStep_2">
            @click="confirmBySelectTime">
            確定
          </button>
        </div>
@@ -70,180 +70,165 @@
</template>

<script lang="ts">
  import { Component,PropSync,Vue } from "nuxt-property-decorator";
  import { Component, Prop, PropSync, Vue } from "nuxt-property-decorator";
  import { dayTimeFrames } from "~/shared/const/day-time-frames";
  import { OptionBtnDto, OptionDto } from "~/shared/models/optionBtnDto.model";
  import { weekDays } from "~/shared/const/week-days";
  import * as _ from "lodash";
import { OptionBtnDto } from "./singleSelectBtn.vue";
  @Component
  @Component({
    filters:{
      titleFormatByIndex(index:number):string{
        const chineseNumber = ['一','二','三','四','五','六','七','八','九','十'];
        return '時段'+chineseNumber[index];
      },
      optionsFormat(selectedOptions:string[]|[], compareOptions:OptionDto): string{
        return _.isEqual(selectedOptions.length,compareOptions.options.length)
                ? compareOptions.selectAll
                : _.join(selectedOptions,',');
      },
    }
  })
  export default class PhoneContactTimePicker extends Vue {
    @PropSync('scheduleList',{type:Array,default:()=>[]}) syncScheduleList!:scheduleDto[];
    private weekOptions ={
      selectAll:'每天',
      options:[
        {
          title:'禮拜一',
          label:'禮拜一'
        },
         {
          title:'禮拜二',
          label:'禮拜二'
        },
         {
          title:'禮拜三',
          label:'禮拜三'
        },
         {
          title:'禮拜四',
          label:'禮拜四'
        },
         {
          title:'禮拜五',
          label:'禮拜五'
        }, {
          title:'禮拜六',
          label:'禮拜六'
        },
         {
          title:'禮拜日',
          label:'禮拜日'
        },
      ],
    };
    private timesOfDayOptions ={
      selectAll:'全天',
      options:[
        {
          title:'9:00~12:00',
          label:'9:00~12:00',
        },
        {
          title:'12:00~14:00',
           label:'12:00~14:00',
        },
        {
          title:'14:00~18:00',
           label:'14:00~18:00',
        },
        {
          title:'18:00~21:00',
          label:'18:00~21:00',
        }
      ],
    };
    private dialogWidth="376px";
    private selectedSchedule!:scheduleDto;
    @Prop({type:Array,default:()=>[]})
    scheduleList!:scheduleDto[];

    // popUp frame
    private isOpenByStep_1=false;
    private isOpenByStep_2=false;
    private popUpTitle='';
    private initPickerControl={
      selectWeekOptions:[] as string[],
      selectTimesOptions:[] as string[],
    weekOptions = {
      selectAll: '每天',
      options  : weekDays,
    };
    timesOfDayOptions = {
      selectAll: '全天',
      options  : dayTimeFrames,
    };
    initPickerControl:scheduleDto = {
      selectWeekOptions : [],
      selectTimesOptions: [],
    }
    popUpMode     : TimePickerMode = TimePickerMode.NONE;
    scheduleIndex : number         = 0;

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

    get isOpenByDayPopUp(): boolean{
      return _.isEqual(this.popUpMode , TimePickerMode.SELECT_DAY)
    }

    set isOpenByDayPopUp(value:boolean){
      this.popUpMode = TimePickerMode.NONE;
    }

    get isOpenByTimePopUp(): boolean{
      return _.isEqual(this.popUpMode , TimePickerMode.SELECT_TIME);
    }

    set isOpenByTimePopUp(value:boolean){
      this.popUpMode = TimePickerMode.NONE;
    }

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

    openPopUp(schedule:scheduleDto,index:number):void{
      this.isOpenByStep_1 = true;
      this.popUpTitle = this.titleFormatByIndex(index);
      this.selectedSchedule = schedule;
      this.initPickerControl = _.cloneDeep(schedule);
      this.popUpMode = TimePickerMode.SELECT_DAY;
      this.scheduleIndex = index;
    }

    confirmByStep_1():void{
      this.isOpenByStep_1=false;
      this.isOpenByStep_2=true;
    confirmBySelectDay(): void {
      this.popUpMode = TimePickerMode.SELECT_TIME;
    }

    confirmByStep_2():void{
      this.isOpenByStep_2=false;
      // TODO: code ref
      this.selectedSchedule.selectWeekOptions = this.getOptionsBySort(this.weekOptions.options,this.initPickerControl.selectWeekOptions);
      this.selectedSchedule.selectTimesOptions = this.getOptionsBySort(this.timesOfDayOptions.options,this.initPickerControl.selectTimesOptions);
    confirmBySelectTime(): void {
      this.popUpMode = TimePickerMode.NONE;
      // detect array change to parent
      this.$set( this.scheduleList, this.scheduleIndex, this.initPickerFormatSort(this.initPickerControl) );
    }
    getOptionsBySort(options:OptionBtnDto[],selectedOptions:string[]):string[]{
      return options.map( o => _.includes(selectedOptions,o.title) ? o.title :'').filter(String);
      // return

    private initPickerFormatSort(initPickerControl:scheduleDto):scheduleDto{
      _.keys(initPickerControl).forEach(keyName=>{
        const options = _.isEqual(keyName,'selectWeekOptions') ? weekDays : dayTimeFrames;
        initPickerControl[keyName] = this.getOptionsBySort(initPickerControl[keyName],options);
      })
      return initPickerControl;
    }
    addNewSchedule():void{

    // 資料重新排序，回復一開始清單順序
    private getOptionsBySort( selectedOptions:string[] , options:OptionBtnDto[]): string[] {
      return options.map( o => _.includes(selectedOptions , o.label) ? o.label as string : '').filter(String);
    }

    addNewSchedule(): void {
      const newScheduleDto={
        selectWeekOptions:[],
        selectTimesOptions:[],
      }
      this.syncScheduleList.push(newScheduleDto)
      this.scheduleList.push(newScheduleDto)
    }

    deleteScheduleItem(index:number):void{
      this.syncScheduleList.splice(index,1);
    deleteScheduleByIndex(index:number): void {
      this.scheduleList.splice(index,1);
    }

    checkFormHasDone(item:scheduleDto):boolean{
      if (!item) return false;
      return item.selectWeekOptions?.length>0 && item.selectTimesOptions?.length>0;
    }

    titleFormatByIndex(index:number):string{
      const chineseNumber = ['一','二','三','四','五','六','七','八','九','十']
      return '時段'+chineseNumber[index];
    }
    optionsFormat(options:OptionBtnDto[],needToCompareList:OptionDto):string{
      return _.isEqual(options.length,needToCompareList.options.length) ? needToCompareList.selectAll: _.join(options,',');
    checkFormHasDone(item:scheduleDto): boolean {
      return item&&item.selectWeekOptions?.length > 0
          && item.selectTimesOptions?.length > 0;
    }
  }
  export interface scheduleDto{
    selectWeekOptions:string[]|[];
    selectTimesOptions:string[]|[];
  enum TimePickerMode{
    SELECT_DAY="selectDay",
    SELECT_TIME="selectTime",
    NONE=""
  }
  type scheduleKey = keyof scheduleDto
  interface OptionDto{
    selectAll:string,
    options:string[],
  interface scheduleDto {
    selectWeekOptions : string[]|[];
    selectTimesOptions: string[]|[];
  }
</script>

<style lang="scss" scoped>
  .pam-popUp-title{
    font-size: 24px;
    color:$PRIMARY_BLACK;
    display: flex;
    font-size      : 24px;
    color          : $PRIMARY_BLACK;
    display        : flex;
    justify-content: center;
  }
  .pam-popUp-confirm-bolck{
    display: flex;
  .pam-popUp-confirm-block {
    display        : flex;
    justify-content: center;
  }
  .pam-contact-schedule{
    width: inherit;
    background:$PRIMARY_WHITE;
    border: 1px solid $LIGHT_GREY;
    padding: 12px 20px;
    border-radius: 10px;
    display: flex;
    width          : inherit;
    background     : $PRIMARY_WHITE;
    border         : 1px solid $LIGHT_GREY;
    padding        : 12px 20px;
    border-radius  : 10px;
    display        : flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-top     : 10px;
  }
  .pam-contact-schedule__text{
    align-self: center;
    font-size: 20px;
    width: 85%;
    font-size : 20px;
    width     : 85%;
    word-break: break-all;
    color: $PRUDENTIAL_GREY;
    color     : $PRUDENTIAL_GREY;
  }
  .pam-contact-schedule__icon{
    width: 15%;
    display: flex;
    align-items: center;
    width          : 15%;
    display        : flex;
    align-items    : center;
    justify-content: flex-end;
    color: $PRIMARY_RED;
    font-size: 25px;
    color          : $PRIMARY_RED;
    font-size      : 25px;
    .disable{
      color:$LIGHT_GREY;
      color         : $LIGHT_GREY;
      pointer-events: none;
    }
  }
  .pam-add-schedule{
    color: $PRIMARY_RED;
    color     : $PRIMARY_RED;
    margin-top: 10px;
    font-size: 20px;
    font-size : 20px;
     &.disable{
        color:$LIGHT_GREY;
        color         : $LIGHT_GREY;
        pointer-events: none;
    }
  }