|
|
<template>
|
<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 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"
|
:class="{'disable':syncScheduleList.length===1}"
|
@click.stop="deleteScheduleItem(index)">
|
</i>
|
<i v-else class="icon-calender"></i>
|
</div>
|
</div>
|
</div>
|
<div class="pam-add-schedule cursor--pointer"
|
:class="{'disable':!checkFormHasDone(syncScheduleList[syncScheduleList.length-1])|| syncScheduleList.length ===7}"
|
@click="addNewSchedule">
|
<i class="icon-add"></i>
|
新增時段
|
</div>
|
|
<PopUpFrame class="pam-popUpFrame"
|
:isOpen.sync="isOpenByStep_1"
|
:drawerSize="drawerSize"
|
:dialogWidth="dialogWidth">
|
<div class="pam-popUp-title">{{popUpTitle}}</div>
|
<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']"
|
@click="confirmByStep_1">
|
確定
|
</button>
|
</div>
|
</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"
|
: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']"
|
@click="confirmByStep_2">
|
確定
|
</button>
|
</div>
|
</PopUpFrame>
|
</div>
|
</template>
|
|
<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:[
|
{
|
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 drawerSize="40%";
|
private dialogWidth="376px";
|
private selectedSchedule!:scheduleDto;
|
|
// popUp frame
|
private isOpenByStep_1=false;
|
private isOpenByStep_2=false;
|
private popUpTitle='';
|
private initPickerControl={
|
selectWeekOptions:[] as string[],
|
selectTimesOptions:[] as string[],
|
}
|
|
openPopUp(schedule:scheduleDto,index:number):void{
|
this.isOpenByStep_1 = true;
|
this.popUpTitle = this.titleFormatByIndex(index);
|
this.selectedSchedule = schedule;
|
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{
|
const newScheduleDto={
|
selectWeekOptions:[],
|
selectTimesOptions:[],
|
}
|
this.syncScheduleList.push(newScheduleDto)
|
}
|
|
deleteScheduleItem(index:number):void{
|
this.syncScheduleList.splice(index,1);
|
}
|
|
checkFormHasDone(item:scheduleDto):boolean{
|
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,',');
|
}
|
}
|
export interface scheduleDto{
|
selectWeekOptions:string[]|[];
|
selectTimesOptions:string[]|[];
|
}
|
type scheduleKey = keyof scheduleDto
|
interface OptionDto{
|
selectAll:string,
|
options:string[],
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.pam-popUp-title{
|
font-size: 24px;
|
color:$PRIMARY_BLACK;
|
display: flex;
|
justify-content: center;
|
}
|
.pam-popUp-confirm-bolck{
|
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;
|
margin-bottom: 30px;
|
font-size: 20px;
|
&.disable{
|
color:$LIGHT_GREY;
|
pointer-events: none;
|
}
|
}
|
</style>
|
