refactor: move ts folder to shared folder

Tomas

2021-12-22 abfd26bb700d93a92da6a04703b0187d4acaaeb5

 PAMapp/components/phoneContactTimePicker.vue

@@ -4,19 +4,19 @@
  <div>
    <div class="mt-10" v-for="(scheduleDto,index) in syncScheduleList" :key="index">
      <div class="mdTxt">{{titleFormatByIndex(index)}}</div>
      <div class="pam-contact-schedule cursor--pointer" @click="openPopUp(scheduleDto,index)">
      <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>
          </template>
          <template v-else>
            請選擇 
            請選擇
          </template>
        </div>
        <div class="pam-contact-schedule__icon">
          <i v-if="checkFormHasDone(scheduleDto)" 
            class="icon-delet" 
          <i v-if="checkFormHasDone(scheduleDto)"
            class="icon-delet"
            :class="{'disable':syncScheduleList.length===1}"
            @click.stop="deleteScheduleItem(index)">
          </i>
@@ -25,45 +25,42 @@
      </div>
    </div>
    <div class="pam-add-schedule cursor--pointer"
      :class="{'disable':!checkFormHasDone(syncScheduleList[syncScheduleList.length-1])|| syncScheduleList.length ===7}" 
      :class="{'disable':!checkFormHasDone(syncScheduleList[syncScheduleList && syncScheduleList.length && syncScheduleList.length - 1])|| syncScheduleList.length ===7}"
      @click="addNewSchedule">
      <i class="icon-add"></i>
      新增時段
    </div>

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

    <PopUpFrame class="pam-popUpFrame" 
    <PopUpFrame class="pam-popUpFrame"
      :isOpen.sync="isOpenByStep_2"
      :drawerSize="drawerSize"
      :dialogWidth="dialogWidth">
        <div class="pam-popUp-title">{{popUpTitle}}</div>
        <MultiSelectBtn class="mt-30" 
          :mutiSelect.sync="initPickerControl.selectTimesOptions" 
          :options="timesOfDayOptions.options" 
        <MultiSelectBtn class="mt-30"
          :mutiSelect.sync="initPickerControl.selectTimesOptions"
          :options="timesOfDayOptions.options"
          :nameOfSelectAll="timesOfDayOptions.selectAll">
        </MultiSelectBtn>
        <div class="pam-popUp-confirm-bolck">
          <button class="pam-select-confirm mt-30" 
            :class="[initPickerControl.selectTimesOptions.length ?'el-button--primary' :'is-disabled']"  
        <div class="pam-popUp-confirm-bolck mt-30">
          <button class="pam-select-confirm"
            :class="[initPickerControl.selectTimesOptions.length ?'el-button--primary' :'is-disabled']"
            @click="confirmByStep_2">
            確定
          </button>
@@ -75,18 +72,63 @@
<script lang="ts">
  import { Component,PropSync,Vue } from "nuxt-property-decorator";
  import * as _ from "lodash";
import { OptionBtnDto } from "./singleSelectBtn.vue";
  @Component
  export default class PhoneContactTimePicker extends Vue {
    @PropSync('scheduleList',{type:Array,default:()=>[]}) syncScheduleList!:scheduleDto[];
    private weekOptions ={
      selectAll:'每天',
      options:['禮拜一','禮拜二','禮拜三','禮拜四','禮拜五','禮拜六','禮拜日'],
      options:[
        {
          title:'星期一',
          label:'星期一'
        },
         {
          title:'星期二',
          label:'星期二'
        },
         {
          title:'星期三',
          label:'星期三'
        },
         {
          title:'星期四',
          label:'星期四'
        },
         {
          title:'星期五',
          label:'星期五'
        }, {
          title:'星期六',
          label:'星期六'
        },
         {
          title:'星期日',
          label:'星期日'
        },
      ],
    };
    private timesOfDayOptions ={
      selectAll:'全天',
      options:['9:00~12:00','12:00~14:00','14:00~18:00','18:00~21:00'],
      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 drawerSize="40%";
    private dialogWidth="376px";
    private selectedSchedule!:scheduleDto;

@@ -98,7 +140,6 @@
      selectWeekOptions:[] as string[],
      selectTimesOptions:[] as string[],
    }
    
    openPopUp(schedule:scheduleDto,index:number):void{
      this.isOpenByStep_1 = true;
      this.popUpTitle = this.titleFormatByIndex(index);
@@ -117,8 +158,9 @@
      this.selectedSchedule.selectWeekOptions = this.getOptionsBySort(this.weekOptions.options,this.initPickerControl.selectWeekOptions);
      this.selectedSchedule.selectTimesOptions = this.getOptionsBySort(this.timesOfDayOptions.options,this.initPickerControl.selectTimesOptions);
    }
    getOptionsBySort(options:string[],selectedOptions:string[]):string[]{
      return options.filter( o => _.includes(selectedOptions,o));
    getOptionsBySort(options:OptionBtnDto[],selectedOptions:string[]):string[]{
      return options.map( o => _.includes(selectedOptions,o.title) ? o.title :'').filter(String);
      // return
    }
    addNewSchedule():void{
      const newScheduleDto={
@@ -133,14 +175,15 @@
    }

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

    titleFormatByIndex(index:number):string{
      const chineseNumber = ['一','二','三','四','五','六','七','八','九','十']
      return '時段'+chineseNumber[index];
    }
    optionsFormat(options:string[],needToCompareList:OptionDto):string{
    optionsFormat(options:OptionBtnDto[],needToCompareList:OptionDto):string{
      return _.isEqual(options.length,needToCompareList.options.length) ? needToCompareList.selectAll: _.join(options,',');
    }
  }
@@ -198,7 +241,6 @@
  .pam-add-schedule{
    color: $PRIMARY_RED;
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 20px;
     &.disable{
        color:$LIGHT_GREY;