|
|
<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 && syncScheduleList.length && syncScheduleList.length - 1])|| syncScheduleList.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>
|
<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="confirmByStep_1">
|
確定
|
</button>
|
</div>
|
</PopUpFrame>
|
|
<PopUpFrame class="pam-popUpFrame"
|
:isOpen.sync="isOpenByStep_2"
|
: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-block mt-30">
|
<button class="pam-select-confirm"
|
: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 { 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 : 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);
|
this.selectedSchedule = schedule;
|
this.initPickerControl = _.cloneDeep(schedule);
|
}
|
|
addNewSchedule(): void {
|
const newScheduleDto={
|
selectWeekOptions:[],
|
selectTimesOptions:[],
|
}
|
this.syncScheduleList.push(newScheduleDto)
|
}
|
|
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 {
|
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,',');
|
}
|
}
|
|
export interface scheduleDto {
|
selectWeekOptions : string[]|[];
|
selectTimesOptions: string[]|[];
|
}
|
|
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-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>
|
