|
|
<template>
|
<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>{{ scheduleDto.selectWeekOptions | optionsFormat(weekOptions)}}</p>
|
<p>{{ scheduleDto.selectTimesOptions| optionsFormat(timesOfDayOptions)}}</p>
|
</template>
|
<template v-else>
|
請選擇
|
</template>
|
</div>
|
<div class="pam-contact-schedule__icon">
|
<i v-if="checkFormHasDone(scheduleDto)"
|
class="icon-delet"
|
: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(scheduleList[scheduleList.length && scheduleList.length - 1]) || scheduleList.length===7 }"
|
@click="addNewSchedule">
|
<i class="icon-add"></i>
|
新增時段
|
</div>
|
|
<PopUpFrame class="pam-popUpFrame"
|
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-block mt-30">
|
<button class="pam-select-confirm"
|
:class="[initPickerControl.selectWeekOptions.length?'el-button--primary' :'is-disabled']"
|
@click="confirmBySelectDay">
|
確定
|
</button>
|
</div>
|
</PopUpFrame>
|
|
<PopUpFrame class="pam-popUpFrame"
|
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-block mt-30">
|
<button class="pam-select-confirm"
|
:class="[initPickerControl.selectTimesOptions.length ?'el-button--primary' :'is-disabled']"
|
@click="confirmBySelectTime">
|
確定
|
</button>
|
</div>
|
</PopUpFrame>
|
</div>
|
</template>
|
|
<script lang="ts">
|
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";
|
@Component({
|
filters:{
|
titleFormatByIndex(index:number):string{
|
const chineseNumber = ['一','二','三','四','五','六','七','八','九','十'];
|
return '時段'+chineseNumber[index];
|
},
|
optionsFormat(selectedOptions = [], compareOptions) {
|
return selectedOptions.length === compareOptions.options.length
|
? compareOptions.selectAll
|
: selectedOptions.join(',');
|
}
|
}
|
})
|
export default class PhoneContactTimePicker extends Vue {
|
@Prop({type:Array,default:()=>[]})
|
scheduleList!:scheduleDto[];
|
|
weekOptions = {
|
selectAll: '每天',
|
options : weekDays,
|
};
|
timesOfDayOptions = {
|
selectAll: '全天',
|
options : dayTimeFrames,
|
};
|
initPickerControl:scheduleDto = {
|
selectWeekOptions : [],
|
selectTimesOptions: [],
|
}
|
popUpMode : TimePickerMode = TimePickerMode.NONE;
|
scheduleIndex : number = 0;
|
|
//////////////////////////////////////////////////////////////////////
|
|
get isOpenByDayPopUp(): boolean{
|
return this.popUpMode === TimePickerMode.SELECT_DAY;
|
}
|
|
set isOpenByDayPopUp(value:boolean){
|
this.popUpMode = TimePickerMode.NONE;
|
}
|
|
get isOpenByTimePopUp(): boolean{
|
return this.popUpMode === TimePickerMode.SELECT_TIME;
|
}
|
|
set isOpenByTimePopUp(value:boolean){
|
this.popUpMode = TimePickerMode.NONE;
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
openPopUp(schedule:scheduleDto,index:number):void{
|
this.initPickerControl = JSON.parse(JSON.stringify(schedule));
|
this.popUpMode = TimePickerMode.SELECT_DAY;
|
this.scheduleIndex = index;
|
}
|
|
confirmBySelectDay(): void {
|
this.popUpMode = TimePickerMode.SELECT_TIME;
|
}
|
|
confirmBySelectTime(): void {
|
this.popUpMode = TimePickerMode.NONE;
|
// detect array change to parent
|
this.$set( this.scheduleList, this.scheduleIndex, this.initPickerFormatSort(this.initPickerControl) );
|
}
|
|
private initPickerFormatSort(initPickerControl:scheduleDto):scheduleDto{
|
Object.keys(initPickerControl).forEach(keyName=>{
|
const options = keyName === 'selectWeekOptions' ? weekDays : dayTimeFrames;
|
initPickerControl[keyName] = this.getOptionsBySort(initPickerControl[keyName],options);
|
})
|
return initPickerControl;
|
}
|
|
// 資料重新排序，回復一開始清單順序
|
private getOptionsBySort( selectedOptions:string[] , options:OptionBtnDto[]): string[] {
|
return options.map( o => selectedOptions.includes(o.label as string) ? o.label as string : '').filter(String);
|
}
|
|
addNewSchedule(): void {
|
const newScheduleDto={
|
selectWeekOptions:[],
|
selectTimesOptions:[],
|
}
|
this.scheduleList.push(newScheduleDto)
|
}
|
|
deleteScheduleByIndex(index:number): void {
|
this.scheduleList.splice(index,1);
|
}
|
checkFormHasDone(item:scheduleDto): boolean {
|
return item&&item.selectWeekOptions?.length > 0
|
&& item.selectTimesOptions?.length > 0;
|
}
|
}
|
enum TimePickerMode{
|
SELECT_DAY="selectDay",
|
SELECT_TIME="selectTime",
|
NONE=""
|
}
|
interface scheduleDto {
|
selectWeekOptions : string[]|[];
|
selectTimesOptions: string[]|[];
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.pam-popUp-title{
|
font-size : 24px;
|
color : $PRIMARY_BLACK;
|
display : flex;
|
justify-content: center;
|
}
|
.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;
|
justify-content: space-between;
|
margin-top : 10px;
|
}
|
.pam-contact-schedule__text{
|
align-self: center;
|
font-size : 20px;
|
width : 85%;
|
word-break: break-all;
|
color : $PRUDENTIAL_GREY;
|
}
|
.pam-contact-schedule__icon{
|
width : 15%;
|
display : flex;
|
align-items : center;
|
justify-content: flex-end;
|
color : $PRIMARY_RED;
|
font-size : 25px;
|
.disable{
|
color : $LIGHT_GREY;
|
pointer-events: none;
|
}
|
}
|
.pam-add-schedule{
|
color : $PRIMARY_RED;
|
margin-top: 10px;
|
font-size : 20px;
|
&.disable{
|
color : $LIGHT_GREY;
|
pointer-events: none;
|
}
|
}
|
</style>
|
