refactor component: phoneContactTimePicker

Tomas

2021-12-27 d178464332e352b3fe4df583f0575b1eea38783b

refactor component: phoneContactTimePicker

 PAMapp/components/phoneContactTimePicker.vue

@@ -40,7 +40,7 @@
            :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">
@@ -58,7 +58,7 @@
          :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">
@@ -71,75 +71,44 @@

<script lang="ts">
  import { Component,PropSync,Vue } from "nuxt-property-decorator";

  import * as _ from "lodash";

  import { weekDays } from "~/shared/const/week-days";
  import { dayTimeFrames } from "~/shared/const/day-time-frames";

import { OptionBtnDto } from "./singleSelectBtn.vue";
  @Component
  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;

    // popUp frame
    private isOpenByStep_1=false;
    private isOpenByStep_2=false;
    private popUpTitle='';
    private initPickerControl={
    @PropSync('scheduleList',{type:Array,default:()=>[]})
    syncScheduleList!:scheduleDto[];

    private weekOptions ={
      selectAll: '每天',
      options  : weekDays,
    };

    private timesOfDayOptions ={
      selectAll: '全天',
      options  : dayTimeFrames,
    };

    private initPickerControl = {
      selectWeekOptions:[] as string[],
      selectTimesOptions:[] as string[],
    }

    // popUp frame
    private dialogWidth      : string = "376px";
    private isOpenByStep_1   : boolean = false;
    private isOpenByStep_2   : boolean = false;
    private popUpTitle       : string= '';
    private selectedSchedule!: scheduleDto;

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


    openPopUp(schedule:scheduleDto,index:number):void{
      this.isOpenByStep_1 = true;
      this.popUpTitle = this.titleFormatByIndex(index);
@@ -147,22 +116,7 @@
      this.initPickerControl = _.cloneDeep(schedule);
    }

    confirmByStep_1():void{
      this.isOpenByStep_1=false;
      this.isOpenByStep_2=true;
    }

    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);
    }
    getOptionsBySort(options:OptionBtnDto[],selectedOptions:string[]):string[]{
      return options.map( o => _.includes(selectedOptions,o.title) ? o.title :'').filter(String);
      // return
    }
    addNewSchedule():void{
    addNewSchedule(): void {
      const newScheduleDto={
        selectWeekOptions:[],
        selectTimesOptions:[],
@@ -170,80 +124,100 @@
      this.syncScheduleList.push(newScheduleDto)
    }

    deleteScheduleItem(index:number):void{
    confirmByStep_1(): void {
      this.isOpenByStep_1 = false;
      this.isOpenByStep_2 = true;
    }

    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);
    }

    private getOptionsBySort(options:OptionBtnDto[],selectedOptions:string[]): string[] {
      return options.map( o => _.includes(selectedOptions,o.title) ? o.title :'').filter(String);
    }

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

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

    titleFormatByIndex(index:number):string{
    titleFormatByIndex(index:number): string {
      const chineseNumber = ['一','二','三','四','五','六','七','八','九','十']
      return '時段'+chineseNumber[index];
    }
    optionsFormat(options:OptionBtnDto[],needToCompareList:OptionDto):string{

    optionsFormat(options:OptionBtnDto[],needToCompareList:OptionDto): string {
      return _.isEqual(options.length,needToCompareList.options.length) ? needToCompareList.selectAll: _.join(options,',');
    }
  }
  export interface scheduleDto{
    selectWeekOptions:string[]|[];
    selectTimesOptions:string[]|[];

  export interface scheduleDto {
    selectWeekOptions : string[]|[];
    selectTimesOptions: string[]|[];
  }
  type scheduleKey = keyof scheduleDto

  interface OptionDto{
    selectAll:string,
    options:string[],
    selectAll: string,
    options  : 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;
    }
  }

 PAMapp/shared/const/day-time-frames.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,18 @@
export const dayTimeFrames = [
  {
    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',
  }
];

 PAMapp/shared/const/week-days.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,29 @@
export const weekDays = [
  {
    title:'星期一',
    label:'星期一'
  },
   {
    title:'星期二',
    label:'星期二'
  },
   {
    title:'星期三',
    label:'星期三'
  },
   {
    title:'星期四',
    label:'星期四'
  },
   {
    title:'星期五',
    label:'星期五'
  }, {
    title:'星期六',
    label:'星期六'
  },
   {
    title:'星期日',
    label:'星期日'
  },
];