From ef8ad4faedd0cbcfbc2288528bdd1099b8815b86 Mon Sep 17 00:00:00 2001
From: 劉鈞霖 <benson@gmail.com>
Date: 星期二, 28 十二月 2021 11:57:22 +0800
Subject: [PATCH] [ Ref ] : refactor phoneContactTimePicker Component，相關interface 移出
---
PAMapp/pages/quickFilter/index.vue | 1
PAMapp/components/popUpFrame.vue | 14 +--
PAMapp/components/phoneContactTimePicker.vue | 175 +++++++++++++++++++++++--------------------
PAMapp/pages/questionnaire/_agentNo.vue | 4
PAMapp/shared/models/optionBtnDto.model.ts | 9 ++
PAMapp/components/singleSelectBtn.vue | 7 -
6 files changed, 111 insertions(+), 99 deletions(-)
diff --git a/PAMapp/components/phoneContactTimePicker.vue b/PAMapp/components/phoneContactTimePicker.vue
index e92cdf7..1055196 100644
--- a/PAMapp/components/phoneContactTimePicker.vue
+++ b/PAMapp/components/phoneContactTimePicker.vue
@@ -2,13 +2,13 @@
<template>
<div>
- <div class="mt-10" v-for="(scheduleDto,index) in syncScheduleList" :key="index">
- <div class="mdTxt">{{titleFormatByIndex(index)}}</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>{{optionsFormat(scheduleDto.selectWeekOptions,weekOptions)}}</p>
- <p>{{optionsFormat(scheduleDto.selectTimesOptions,timesOfDayOptions)}}</p>
+ <p>{{ scheduleDto.selectWeekOptions | optionsFormat(weekOptions)}}</p>
+ <p>{{ scheduleDto.selectTimesOptions| optionsFormat(timesOfDayOptions)}}</p>
</template>
<template v-else>
隢���
@@ -17,24 +17,24 @@
<div class="pam-contact-schedule__icon">
<i v-if="checkFormHasDone(scheduleDto)"
class="icon-delet"
- :class="{'disable':syncScheduleList.length===1}"
- @click.stop="deleteScheduleItem(index)">
+ :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(syncScheduleList[syncScheduleList && syncScheduleList.length && syncScheduleList.length - 1])|| syncScheduleList.length ===7}"
+ :class="{'disable': !checkFormHasDone(scheduleList[scheduleList.length && scheduleList.length - 1]) || scheduleList.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>
+ dialogWidth="376px"
+ :isOpen.sync="isOpenByDayPopUp">
+ <div class="pam-popUp-title">{{scheduleIndex | titleFormatByIndex}}</div>
<MultiSelectBtn class="mt-30"
:mutiSelect.sync="initPickerControl.selectWeekOptions"
:options="weekOptions.options"
@@ -43,16 +43,16 @@
<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">
+ @click="confirmBySelectDay">
蝣箏��
</button>
</div>
</PopUpFrame>
<PopUpFrame class="pam-popUpFrame"
- :isOpen.sync="isOpenByStep_2"
- :dialogWidth="dialogWidth">
- <div class="pam-popUp-title">{{popUpTitle}}</div>
+ dialogWidth="376px"
+ :isOpen.sync="isOpenByTimePopUp">
+ <div class="pam-popUp-title">{{scheduleIndex | titleFormatByIndex}}</div>
<MultiSelectBtn class="mt-30"
:mutiSelect.sync="initPickerControl.selectTimesOptions"
:options="timesOfDayOptions.options"
@@ -61,7 +61,7 @@
<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">
+ @click="confirmBySelectTime">
蝣箏��
</button>
</div>
@@ -70,50 +70,90 @@
</template>
<script lang="ts">
- import { Component,PropSync,Vue } from "nuxt-property-decorator";
-
- import * as _ from "lodash";
-
- import { weekDays } from "~/shared/const/week-days";
+ import { Component, Prop, PropSync, Vue } from "nuxt-property-decorator";
import { dayTimeFrames } from "~/shared/const/day-time-frames";
-
-import { OptionBtnDto } from "./singleSelectBtn.vue";
- @Component
+ import { OptionBtnDto, OptionDto } from "~/shared/models/optionBtnDto.model";
+ import { weekDays } from "~/shared/const/week-days";
+ import * as _ from "lodash";
+ @Component({
+ filters:{
+ titleFormatByIndex(index:number):string{
+ const chineseNumber = ['銝�','鈭�','銝�','���','鈭�','�','銝�','�','銋�','���'];
+ return '��挾'+chineseNumber[index];
+ },
+ optionsFormat(selectedOptions:string[]|[], compareOptions:OptionDto): string{
+ return _.isEqual(selectedOptions.length,compareOptions.options.length)
+ ? compareOptions.selectAll
+ : _.join(selectedOptions,',');
+ },
+ }
+ })
export default class PhoneContactTimePicker extends Vue {
+ @Prop({type:Array,default:()=>[]})
+ scheduleList!:scheduleDto[];
- @PropSync('scheduleList',{type:Array,default:()=>[]})
- syncScheduleList!:scheduleDto[];
-
- private weekOptions ={
+ weekOptions = {
selectAll: '瘥予',
options : weekDays,
};
-
- private timesOfDayOptions ={
+ timesOfDayOptions = {
selectAll: '�憭�',
options : dayTimeFrames,
};
-
- private initPickerControl = {
- selectWeekOptions:[] as string[],
- selectTimesOptions:[] as string[],
+ initPickerControl:scheduleDto = {
+ selectWeekOptions : [],
+ selectTimesOptions: [],
}
-
- // popUp frame
- private dialogWidth : string = "376px";
- private isOpenByStep_1 : boolean = false;
- private isOpenByStep_2 : boolean = false;
- private popUpTitle : string= '';
- private selectedSchedule!: scheduleDto;
+ popUpMode : TimePickerMode = TimePickerMode.NONE;
+ scheduleIndex : number = 0;
//////////////////////////////////////////////////////////////////////
+ get isOpenByDayPopUp(): boolean{
+ return _.isEqual(this.popUpMode , TimePickerMode.SELECT_DAY)
+ }
+
+ set isOpenByDayPopUp(value:boolean){
+ this.popUpMode = TimePickerMode.NONE;
+ }
+
+ get isOpenByTimePopUp(): boolean{
+ return _.isEqual(this.popUpMode , TimePickerMode.SELECT_TIME);
+ }
+
+ set isOpenByTimePopUp(value:boolean){
+ this.popUpMode = TimePickerMode.NONE;
+ }
+
+ //////////////////////////////////////////////////////////////////////
openPopUp(schedule:scheduleDto,index:number):void{
- this.isOpenByStep_1 = true;
- this.popUpTitle = this.titleFormatByIndex(index);
- this.selectedSchedule = schedule;
this.initPickerControl = _.cloneDeep(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{
+ _.keys(initPickerControl).forEach(keyName=>{
+ const options = _.isEqual(keyName,'selectWeekOptions') ? weekDays : dayTimeFrames;
+ initPickerControl[keyName] = this.getOptionsBySort(initPickerControl[keyName],options);
+ })
+ return initPickerControl;
+ }
+
+ // 鞈�������儔銝���������
+ private getOptionsBySort( selectedOptions:string[] , options:OptionBtnDto[]): string[] {
+ return options.map( o => _.includes(selectedOptions , o.label) ? o.label as string : '').filter(String);
}
addNewSchedule(): void {
@@ -121,55 +161,26 @@
selectWeekOptions:[],
selectTimesOptions:[],
}
- this.syncScheduleList.push(newScheduleDto)
+ this.scheduleList.push(newScheduleDto)
}
- confirmByStep_1(): void {
- this.isOpenByStep_1 = false;
- this.isOpenByStep_2 = true;
+ deleteScheduleByIndex(index:number): void {
+ this.scheduleList.splice(index,1);
}
-
- 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
+ return item&&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 {
+ enum TimePickerMode{
+ SELECT_DAY="selectDay",
+ SELECT_TIME="selectTime",
+ NONE=""
+ }
+ interface scheduleDto {
selectWeekOptions : string[]|[];
selectTimesOptions: string[]|[];
}
-
- interface OptionDto{
- selectAll: string,
- options : string[],
- }
-
</script>
<style lang="scss" scoped>
diff --git a/PAMapp/components/popUpFrame.vue b/PAMapp/components/popUpFrame.vue
index de6b525..cfa9821 100644
--- a/PAMapp/components/popUpFrame.vue
+++ b/PAMapp/components/popUpFrame.vue
@@ -18,7 +18,6 @@
<script lang="ts">
import { Vue, Component, Prop, Emit, PropSync} from 'vue-property-decorator';
-
import UtilsService from '~/shared/services/utils.service';
@Component
@@ -41,21 +40,20 @@
//////////////////////////////////////////////////////////////////////
- private get isUseDrawer() : boolean {
+ get isUseDrawer() : boolean {
return this.syncIsOpen && UtilsService.isMobileDevice();
}
- private set isUseDrawer(value: boolean) {
- this.$emit('update:isOpen',value);
+ set isUseDrawer(value: boolean) {
+ this.syncIsOpen = value
}
- private get isUseDialog() : boolean {
+ get isUseDialog() : boolean {
return this.syncIsOpen && !UtilsService.isMobileDevice();
}
- private set isUseDialog(value: boolean) {
- this.$emit('update:isOpen',value);
+ set isUseDialog(value: boolean) {
+ this.syncIsOpen = value
}
-
}
</script>
diff --git a/PAMapp/components/singleSelectBtn.vue b/PAMapp/components/singleSelectBtn.vue
index 85e67a1..b7a4a55 100644
--- a/PAMapp/components/singleSelectBtn.vue
+++ b/PAMapp/components/singleSelectBtn.vue
@@ -20,7 +20,7 @@
<script lang="ts">
import { Component, Prop, PropSync, Vue } from "nuxt-property-decorator";
-
+ import { OptionBtnDto } from "~/shared/models/optionBtnDto.model";
import * as _ from 'lodash';
@Component
@@ -37,10 +37,5 @@
// 銝餉�圾瘙箸����甈∟��嚗暺������
this.syncSingleSelected = _.isEqual(this.syncSingleSelected, value) ? "" : value;
}
- }
- export interface OptionBtnDto {
- title : string,
- subTitle?: string,
- label : string | number,
}
</script>
diff --git a/PAMapp/pages/questionnaire/_agentNo.vue b/PAMapp/pages/questionnaire/_agentNo.vue
index 69ea619..4bb0532 100644
--- a/PAMapp/pages/questionnaire/_agentNo.vue
+++ b/PAMapp/pages/questionnaire/_agentNo.vue
@@ -16,7 +16,7 @@
<div class="datepicker required">
<span class="mdTxt">�����蝯∠�靘踵���</span>
<PhoneContactTimePicker
- :scheduleList.sync="myRequest.hopeContactTime"/>
+ :scheduleList="myRequest.hopeContactTime"/>
</div>
</div>
<div class="mt-30">
@@ -55,7 +55,7 @@
<div class="datepicker">
<span class="mdTxt">�����蝯∠�靘踵���</span>
<PhoneContactTimePicker
- :scheduleList.sync="myRequest.hopeContactTime"/>
+ :scheduleList="myRequest.hopeContactTime"/>
</div>
</div>
</div>
diff --git a/PAMapp/pages/quickFilter/index.vue b/PAMapp/pages/quickFilter/index.vue
index a9e3f75..dcd7795 100644
--- a/PAMapp/pages/quickFilter/index.vue
+++ b/PAMapp/pages/quickFilter/index.vue
@@ -89,7 +89,6 @@
subTitle:'撟湧翩銝����'
},
}
- // TODO: Vue3 撌脫�ilter 蝘駁嚗ilter and computed ��隞亙������� ����末 ?
@Component({
filters: {
formatSeniorityTitle(value): string{
diff --git a/PAMapp/shared/models/optionBtnDto.model.ts b/PAMapp/shared/models/optionBtnDto.model.ts
new file mode 100644
index 0000000..474d2e5
--- /dev/null
+++ b/PAMapp/shared/models/optionBtnDto.model.ts
@@ -0,0 +1,9 @@
+export interface OptionBtnDto {
+ title : string,
+ subTitle?: string,
+ label : string | number,
+}
+export interface OptionDto{
+ selectAll: string,
+ options : OptionBtnDto[],
+}
--
Gitblit v1.8.0