sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

TT#85808 CF: As a Customer, I want to add condition "... and date range is" to forwarding groups

Browse Source 
√ Can choose "date range are ..." from condition menu in each forwarding group (online, offline, busy)
√ Can click "date range are ..." to choose the range initially
√ Can see a date range widget according to the screens
√ Can choose range
√ Can save the chosen range
√ Can cancel the process
√ Can see the changed title "... and date range are ..." after saving
√ Can click the changed title to change date range again
√ Can remove the condition

Change-Id: I432fa3b99f0be0abd7d16d7be48d2c2d96811f97
mr9.0.1
Carlo Venusino 5 years ago
parent 9c624967da
commit 04b4660396
4 changed files with 413 additions and 9 deletions
Show Stats Download Patch File Download Diff File

212
src/components/pages/NewCallForward/CscCallForwardGroup.vue
Unescape View File

@ -28,6 +28,7 @@
ref="addCondition"
:disableSourcesetMenu="false"
:disableTimesetMenu="false"
:disableDateRangeMenu="false"
:enabled="true"
:groupName="group.name"
:groupId="group.id"
@ -57,7 +58,7 @@
</span>
<span
v-if="groupTimeset"
v-if="groupTimeset && !isRange"
>
{{ $t('pages.newCallForward.conditionBtnLabelPrefix') }}
<span class="csc-cf-from-link">
@ -70,7 +71,6 @@
<q-datetime
ref="dayWidget"
clear-label="REMOVE"
class="csc-cf-day-widget"
v-model="dayModel"
:min="today"
/>
@ -84,6 +84,97 @@
/>
</span>
<span
v-if="groupTimeset && isRange"
>
{{ $t('pages.newCallForward.conditionBtnLabelPrefix') }}
<span class="csc-cf-from-link" ref="isRangeLink">
{{ $t('pages.newCallForward.dateRangeShort') + groupTimeRange }}
</span>
<q-popover
ref="daterange"
class="csc-cf-calendar-day"
enabled="enabled"
>
<q-field
label="Date range"
:labelWidth="11"
class="csc-cf-popover-daterange-title"
/>
<q-field
dark
:helper="$t('pages.newCallForward.dateRangeDateHelper')"
>
<q-datetime-range
ref="dayRangeWidget"
type="date"
no-clear
v-model="rangeDateModel"
:min="today"
@change="rangeDateChanged()"
format="DD/MM/YYYY"
:after="[
{
icon: 'today'
}
]"
/>
</q-field>
<q-field
dark
:helper="$t('pages.newCallForward.dateRangeTimeHelper')"
>
<q-datetime-range
ref="dayRangeWidget"
type="time"
no-clear
v-model="rangeTimeModel"
@change="rangeTimeChanged()"
:after="[
{
icon: 'access_time'
}
]"
/>
</q-field>
<div
class="csc-cf-daterange-btn-cont"
>
<q-btn
flat
color="red"
icon="delete"
@mousedown.native="showRemoveDateRangeDialog()"
>
{{ $t('buttons.remove') }}
<csc-confirm-dialog
ref="confirmDeleteTimesetDialog"
title-icon="delete"
:title="$t('pages.newCallForward.cancelTimesetDialogTitle', {name: this.groupTimeRange})"
:message="$t('pages.newCallForward.cancelTimesetText', {name: this.groupTimeRange})"
@confirm="deleteTimeset"
/>
</q-btn>
<q-btn
flat
color="default"
icon="clear"
@mousedown.native="cancelTimerange()"
>
{{ $t('buttons.cancel') }}
</q-btn>
<q-btn
flat
color="primary"
icon="done"
@click="saveDateRange();"
:disable="!allFieldsFilled"
>
{{ $t('buttons.save') }}
</q-btn>
</div>
</q-popover>
</span>
<span
class="csc-cf-destination-add-condition"
v-if="!isTempGroup && !(groupSourceset && groupTimeset)"
@ -101,6 +192,7 @@
ref="addCondition"
:disableSourcesetMenu="!groupSourceset"
:disableTimesetMenu="!groupTimeset"
:disableDateRangeMenu="!groupTimeset"
:enabled="true"
:groupName="group.name"
:groupId="group.id"
@ -240,6 +332,9 @@
</template>
<script>
import moment from 'moment'
import {
mapGetters,
} from 'vuex'
@ -248,8 +343,11 @@
QSpinnerDots,
QToggle,
QIcon,
QPopover,
QDatetime,
QDatetimeRange,
QPopover,
QField,
QBtn,
QList,
QItem,
QItemMain,
@ -274,8 +372,11 @@
QSpinnerDots,
QToggle,
QIcon,
QPopover,
QDatetime,
QDatetimeRange,
QPopover,
QField,
QBtn,
QList,
QItem,
QItemMain,
@ -300,6 +401,17 @@
sources: [],
timeSet: null,
times:[],
action: null,
enabled: false,
day: null,
rangeDateModel: {
from: null,
to: null
},
rangeTimeModel: {
from: null,
to: null
},
today: new Date(),
firstDestinationInCreation: false
};
@ -329,6 +441,12 @@
'getTimesets',
'getFirstDestinationInCreation'
]),
allFieldsFilled(){
return this.rangeDateModel.from !== null &&
this.rangeDateModel.to !== null &&
this.rangeTimeModel.from !== null &&
this.rangeTimeModel.to !== null;
},
showAddDestBtn(){
const destinations = this.group.destinations;
for(let dest of destinations){
@ -371,6 +489,24 @@
}
return retVal;
},
groupTimeRange(){
let retVal = false, startDateN, endDateN, time;
if(this.timeSet && this.timeSet.times && this.timeSet.times.length > 0){
time = this.timeSet.times[0];
startDateN = new Date(parseInt(time.year.split('-')[0]), parseInt(time.month.split('-')[0]) - 1 , parseInt(time.mday.split('-')[0]), 0, 0, 0, 0);
endDateN = new Date(parseInt(time.year.split('-')[1]), parseInt(time.month.split('-')[1]) - 1 , parseInt(time.mday.split('-')[1]), 0, 0, 0, 0);
retVal = date.formatDate( startDateN, 'ddd, MMM D YYYY') +' - '+ date.formatDate( endDateN, 'ddd, MMM D YYYY')
}
return retVal;
},
isRange(){
const isRange = this.timeSet
&& this.timeSet.times
&& this.timeSet.times.length > 0
&& this.timeSet.times[0].year
&& this.timeSet.times[0].year.includes('-');
return isRange;
},
isTempGroup(){
return this.group.id.toString().includes('temp-');
},
@ -535,6 +671,13 @@
if(timeSet){
this.timeSet = timeSet;
this.times = this.timeSet.times;
if(this.times[0] && this.times[0].year && this.times[0].year.includes('-')){
const time = this.times[0];
this.rangeDateModel.from = moment(new Date(parseInt(time.year.split('-')[0]),parseInt(time.month.split('-')[0])-1,parseInt(time.mday.split('-')[0]),parseInt(time.hour.split('-')[0]),parseInt(time.minute.split('-')[0]),0,0)).format();
this.rangeDateModel.to = moment(new Date(parseInt(time.year.split('-')[1]),parseInt(time.month.split('-')[1])-1,parseInt(time.mday.split('-')[1]),parseInt(time.hour.split('-')[1]),parseInt(time.minute.split('-')[1]),0,0)).format();
this.rangeTimeModel.from = moment(new Date(parseInt(time.year.split('-')[0]),parseInt(time.month.split('-')[0])-1,parseInt(time.mday.split('-')[0]),parseInt(time.hour.split('-')[0]),parseInt(time.minute.split('-')[0]),0,0)).format();
this.rangeTimeModel.to = moment(new Date(parseInt(time.year.split('-')[1]),parseInt(time.month.split('-')[1])-1,parseInt(time.mday.split('-')[1]),parseInt(time.hour.split('-')[1]),parseInt(time.minute.split('-')[1]),0,0)).format();
}
}
else{
this.timeSet = null;
@ -594,6 +737,67 @@
catch(e){
console.log(e)
}
},
rangeDateChanged(){
this.$refs.isRangeLink.click();
},
rangeTimeChanged(){
this.$refs.isRangeLink.click();
},
resetTimeRange(){
this.rangeDateModel = {
from: null,
to: null
};
this.rangeTimeModel = {
from: null,
to: null
};
},
cancelTimerange() {
this.action = null;
this.enabled = false;
this.$refs.daterange.close();
},
formatRange(startDate, endDate, startTime, endTime){
const startDateOnly = startDate.split('T')[0];
const endDateOnly = endDate.split('T')[0];
const startTimeOnly = startTime.split('T')[1];
const endTimeOnly = endTime.split('T')[1];
const getDateObj = date => (([year, month, day ]) => ({ day, year, month }))(date.split('-'));
const getTimeObj = time => (([hour, minute, second]) => ({ hour, minute, second }))(time.split(':'));
const startDateObj = getDateObj(startDateOnly);
const endDateObj = getDateObj(endDateOnly);
const startTimeObj = getTimeObj(startTimeOnly);
const endTimeObj = getTimeObj(endTimeOnly);
return [
{
year: startDateObj.year +'-'+endDateObj.year,
month: startDateObj.month +'-'+endDateObj.month,
mday: startDateObj.day +'-'+endDateObj.day,
hour: startTimeObj.hour +'-'+endTimeObj.hour,
minute: startTimeObj.minute +'-'+endTimeObj.minute
}
]
},
async saveDateRange(){
const days = this.rangeDateModel;
const time = this.rangeTimeModel;
const datesTimesInRange = this.formatRange(days.from, days.to, time.from, time.to);
this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
const updatedTimeset = await this.$store.dispatch('newCallForward/addRangeToTimeset', {
id: this.timeSet.id,
times: datesTimesInRange
});
this.$refs.daterange.close();
this.$store.dispatch('newCallForward/setTimeset', updatedTimeset);
this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
},
showRemoveDateRangeDialog(){
this.$refs.daterange.close();
this.showConfirmDeleteTimesetDialog();
}
}
}

190
src/components/pages/NewCallForward/CscNewCallForwardConditionTypeSelect.vue
Unescape View File

@ -23,12 +23,86 @@
<q-datetime
ref="dayWidget"
no-clear
class="csc-cf-day-widget"
v-model="dayModel"
:min="today"
/>
</q-popover>
</div>
<div
class="csc-cf-dest-type"
ref="daterangeItem"
v-if="disableDateRangeMenu"
@click="addDateRangeCondition()"
>
{{ $t('pages.newCallForward.dateRangeLabel') }}
<q-popover
ref="daterange"
class="csc-cf-calendar-day"
>
<q-field
label="Date range"
:labelWidth="11"
class="csc-cf-popover-daterange-title"
/>
<q-field
dark
:helper="$t('pages.newCallForward.dateRangeDateHelper')"
>
<q-datetime-range
ref="dayRangeWidget"
type="date"
no-clear
v-model="rangeDateModel"
:min="today"
@change="rangeDateChanged()"
format="DD/MM/YYYY"
:after="[
{
icon: 'today'
}
]"
/>
</q-field>
<q-field
dark
:helper="$t('pages.newCallForward.dateRangeTimeHelper')"
>
<q-datetime-range
ref="dayRangeWidget"
type="time"
no-clear
v-model="rangeTimeModel"
@change="rangeTimeChanged()"
:after="[
{
icon: 'access_time'
}
]"
/>
</q-field>
<div
class="csc-cf-daterange-btn-cont"
>
<q-btn
flat
color="default"
icon="clear"
@mousedown.native="reset(); cancel()"
>
{{ $t('buttons.cancel') }}
</q-btn>
<q-btn
flat
color="primary"
icon="done"
@click="save(); close()"
:disable="!allFieldsFilled"
>
{{ $t('buttons.save') }}
</q-btn>
</div>
</q-popover>
</div>
</div>
</template>
@ -39,7 +113,10 @@
import CscSpinner from '../../CscSpinner'
import {
QDatetime,
QDatetimeRange,
QPopover,
QField,
QBtn,
date
} from 'quasar-framework'
@ -49,12 +126,16 @@
'groupId',
'groupName',
'disableSourcesetMenu',
'disableTimesetMenu'
'disableTimesetMenu',
'disableDateRangeMenu'
],
components: {
CscSpinner,
QDatetimeRange,
QDatetime,
QPopover
QPopover,
QField,
QBtn
},
data () {
return {
@ -62,6 +143,14 @@
action: null,
timesetName: null,
day: null,
rangeDateModel: {
from: null,
to: null
},
rangeTimeModel: {
from: null,
to: null
},
today: new Date()
}
},
@ -70,6 +159,12 @@
},
computed: {
...mapGetters('newCallForward', []),
allFieldsFilled(){
return this.rangeDateModel.from !== null &&
this.rangeDateModel.to !== null &&
this.rangeTimeModel.from !== null &&
this.rangeTimeModel.to !== null;
},
dayModel: {
get() {
return this.day;
@ -112,6 +207,10 @@
this.action = "addDateIsCondition";
this.$parent.close()
},
addDateRangeCondition(){
this.action = "addDateRangeCondition";
this.$parent.close()
},
cancel() {
this.action = null;
this.enabled = false;
@ -125,6 +224,64 @@
},
showQDate(){
this.$refs.dayWidget.open()
},
rangeDateChanged(){
this.$parent.open(); // workaround to keep popver position
this.$refs.daterangeItem.click();
},
rangeTimeChanged(){
this.$parent.open(); // workaround to keep popver position
this.$refs.daterangeItem.click();
},
reset(){
this.rangeDateModel = {
from: null,
to: null
};
this.rangeTimeModel = {
from: null,
to: null
};
},
formatRange(startDate, endDate, startTime, endTime){
const startDateOnly = startDate.toString().split('T')[0];
const endDateOnly = endDate.toString().split('T')[0];
const startTimeOnly = startTime.toString().split('T')[1];
const endTimeOnly = endTime.toString().split('T')[1];
const getDateObj = date => (([year, month, day ]) => ({ day, year, month }))(date.split('-'));
const getTimeObj = time => (([hour, minute, second]) => ({ hour, minute, second }))(time.split(':'));
const startDateObj = getDateObj(startDateOnly);
const endDateObj = getDateObj(endDateOnly);
const startTimeObj = getTimeObj(startTimeOnly);
const endTimeObj = getTimeObj(endTimeOnly);
return [
{
year: startDateObj.year +'-'+endDateObj.year,
month: startDateObj.month +'-'+endDateObj.month,
mday: startDateObj.day +'-'+endDateObj.day,
hour: startTimeObj.hour +'-'+endTimeObj.hour,
minute: startTimeObj.minute +'-'+endTimeObj.minute
}
]
},
async save(){
const days = this.rangeDateModel;
const time = this.rangeTimeModel;
const datesTimesInRange = this.formatRange(days.from, days.to, time.from, time.to);
const timeSetId = await this.$store.dispatch('newCallForward/createTimeSet', this.timesetName);
this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
this.$store.dispatch('newCallForward/addTimesetToGroup', {
name: this.groupName,
groupId: this.groupId,
timeSetId: timeSetId
});
const updatedTimeset = await this.$store.dispatch('newCallForward/addRangeToTimeset', {
id: timeSetId,
times: datesTimesInRange
});
this.reset();
this.$store.dispatch('newCallForward/setTimeset', updatedTimeset);
this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
}
}
}
@ -140,9 +297,32 @@
background $main-menu-item-hover-background
.csc-cf-calendar-day
margin-top -100px !important
padding 20px
min-width 400px
.csc-cf-popover-daterange-title
text-align center
margin-left 40px
.q-field-label-inner
color $white
margin-top -25px
margin-bottom 10px
font-weight bold
span
width 100%
text-align center
.q-datetime-weekdays
color $tertiary
.q-datetime-days div:not(.q-datetime-day-active),
.q-datetime-dark
color $white
.q-datetime-dark,
.q-datetime-range .q-datetime-input .q-input-target,
.q-datetime-range .q-icon,
.q-datetime-range .q-if:before,
.q-item-icon
color $white !important
.q-datetime-range.row .q-datetime-range-right,
.q-datetime-range.row .q-datetime-range-left
padding-left 20px
.csc-cf-daterange-btn-cont
width 100%
text-align right
</style>

4
src/locales/en.json
Unescape View File

@ -246,7 +246,11 @@
"fromLabel": "If call from ...",
"fromLabelShort": " call from ",
"dateIsLabel": "If date is ...",
"dateRangeLabel": "If date range is ...",
"dateRangeDateHelper": "Pick start and end date",
"dateRangeTimeHelper": "Pick start and end time",
"dateIsShort": " date is ",
"dateRangeShort": " date range is ",
"offlineLabel": "If not available",
"busyLabel": "If busy",
"sourcesetName": "List name",

16
src/store/new-call-forward.js
Unescape View File

@ -643,6 +643,10 @@ export default {
const timeSets = await getTimesets(subscriberId);
context.commit('setTimeSets', timeSets);
},
setTimeset(context, timeSet){
const timeSets = context.state.timeSets.filter($timeset => $timeset.id !== timeSet.id);
context.commit('setTimeSets', [...timeSets, timeSet]);
},
editTimes(context, timeSet){
context.commit('editTimes', timeSet);
},
@ -723,6 +727,18 @@ export default {
console.log(err)
}
},
async addRangeToTimeset(context, data){
try{
const result = await addTimeToTimeset({
id: data.id,
times: data.times
});
return result;
}
catch(err){
console.log(err)
}
},
async deleteTimesFromTimeset(context, timesetId){
try{
await deleteTimeFromTimeset({

Write Preview
Loading…
Cancel
Save