From 74e563da7fa6886449fd2be5933e2d4ca5c85f48 Mon Sep 17 00:00:00 2001
From: jack <jack.su@pollex.com.tw>
Date: 星期二, 12 九月 2023 11:25:52 +0800
Subject: [PATCH] [UPDATE] 解決弱點Se: Incorrect definition of Serializable class [UPDATE] 解決弱點Information exposure to log file [UPDATE] 解決弱點Use of hard-coded password
---
PAMapp/components/phoneContactTimePicker.vue | 175 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 93 insertions(+), 82 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>
--
Gitblit v1.8.0