From d178464332e352b3fe4df583f0575b1eea38783b Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期一, 27 十二月 2021 14:53:45 +0800
Subject: [PATCH] refactor component: phoneContactTimePicker
---
PAMapp/components/phoneContactTimePicker.vue | 202 +++++++++++++++++----------------------
PAMapp/shared/const/week-days.ts | 29 +++++
PAMapp/shared/const/day-time-frames.ts | 18 +++
3 files changed, 135 insertions(+), 114 deletions(-)
diff --git a/PAMapp/components/phoneContactTimePicker.vue b/PAMapp/components/phoneContactTimePicker.vue
index 9382daa..e92cdf7 100644
--- a/PAMapp/components/phoneContactTimePicker.vue
+++ b/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;
}
}
diff --git a/PAMapp/shared/const/day-time-frames.ts b/PAMapp/shared/const/day-time-frames.ts
new file mode 100644
index 0000000..bfd8537
--- /dev/null
+++ b/PAMapp/shared/const/day-time-frames.ts
@@ -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',
+ }
+];
diff --git a/PAMapp/shared/const/week-days.ts b/PAMapp/shared/const/week-days.ts
new file mode 100644
index 0000000..16f6b68
--- /dev/null
+++ b/PAMapp/shared/const/week-days.ts
@@ -0,0 +1,29 @@
+export const weekDays = [
+ {
+ title:'����',
+ label:'����'
+ },
+ {
+ title:'�����',
+ label:'�����'
+ },
+ {
+ title:'�����',
+ label:'�����'
+ },
+ {
+ title:'�����',
+ label:'�����'
+ },
+ {
+ title:'�����',
+ label:'�����'
+ }, {
+ title:'���',
+ label:'���'
+ },
+ {
+ title:'���',
+ label:'���'
+ },
+];
--
Gitblit v1.8.0