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

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

Browse Source 
√ Can choose "date is" from condition menu in each forwarding group (online, offline, busy)
√ Can click "date is ..." to set the date initially
√ Can see a date widget according to the screens
√ Can choose a date
√ Can set the date
√ Can see the changed title "... and date is Thu, Apr 13 2017"
√ Can click the changed title to set a new date again
√ Can remove the condition

Change-Id: Ia2aec66d7c8d89f2be8b471348a98db96219d204
changes/94/40894/13
Carlo Venusino 5 years ago committed by Hans-Peter Herzog
parent f599028e9b
commit c0c77e6292
6 changed files with 334 additions and 45 deletions
Show Stats Download Patch File Download Diff File

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

@ -26,16 +26,67 @@
>
<csc-new-call-forward-condition-type-select
ref="addCondition"
:disableSourcesetMenu="false"
:disableTimesetMenu="false"
:enabled="true"
:groupName="group.name"
:groupId="group.id"
/>
</q-popover>
</span>
<span
v-if="groupSourceset"
>
{{ $t('pages.newCallForward.conditionBtnLabelPrefix') }}
<span class="csc-cf-from-link">
{{ $t('pages.newCallForward.fromLabelShort') +'"'+ groupSourceset +'"'}}
</span>
<q-popover
ref="sourcesList"
class="csc-cf-number-form"
@open="showSources()"
>
<csc-new-call-forward-edit-sources
ref="editSources"
:sourceSetName="groupSourceset"
:sourceSetId="sourceSet.id"
:groupName="group.name"
:groupId="group.id"
/>
</q-popover>
</span>
<span
v-if="groupTimeset"
>
{{ $t('pages.newCallForward.conditionBtnLabelPrefix') }}
<span class="csc-cf-from-link">
{{ $t('pages.newCallForward.dateIsShort') + groupTimeset }}
</span>
<q-popover
ref="day"
@open="showQDate()"
>
<q-datetime
ref="dayWidget"
clear-label="REMOVE"
class="csc-cf-day-widget"
v-model="dayModel"
:min="today"
/>
</q-popover>
<csc-confirm-dialog
ref="confirmDeleteTimesetDialog"
title-icon="delete"
:title="$t('pages.newCallForward.cancelTimesetDialogTitle', {name: this.groupTimeset})"
:message="$t('pages.newCallForward.cancelTimesetText', {name: this.groupTimeset})"
@confirm="deleteTimeset"
/>
</span>
<span
class="csc-cf-destination-add-condition"
v-if="!groupSourceset && !isTempGroup"
v-if="!isTempGroup && !(groupSourceset && groupTimeset)"
>
{{ $t('pages.newCallForward.conditionBtnLabelPrefix') }}
<span class="csc-cf-from-link">
@ -48,6 +99,8 @@
>
<csc-new-call-forward-condition-type-select
ref="addCondition"
:disableSourcesetMenu="!groupSourceset"
:disableTimesetMenu="!groupTimeset"
:enabled="true"
:groupName="group.name"
:groupId="group.id"
@ -69,28 +122,6 @@
</q-popover>
</span>
<span
v-if="groupSourceset"
>
{{ $t('pages.newCallForward.conditionBtnLabelPrefix') }}
<span class="csc-cf-from-link">
{{ $t('pages.newCallForward.fromLabelShort') +'"'+ groupSourceset +'"'}}
</span>
<q-popover
ref="sourcesList"
class="csc-cf-number-form"
@open="showSources()"
>
<csc-new-call-forward-edit-sources
ref="editSources"
:sourceSetName="groupSourceset"
:sourceSetId="sourceSet.id"
:groupName="group.name"
:groupId="group.id"
/>
</q-popover>
</span>
</div>
<div class="col text-left col-xs-12 col-md-2 csc-cf-dest-number-cont">
<q-toggle
@ -218,10 +249,12 @@
QToggle,
QIcon,
QPopover,
QDatetime,
QList,
QItem,
QItemMain,
QItemSide
QItemSide,
date
} from 'quasar-framework'
import CscObjectSpinner from "../../CscObjectSpinner";
import CscConfirmDialog from "../../CscConfirmationDialog";
@ -242,6 +275,7 @@
QToggle,
QIcon,
QPopover,
QDatetime,
QList,
QItem,
QItemMain,
@ -264,6 +298,9 @@
groupIsLoading: false,
sourceSet: null,
sources: [],
timeSet: null,
times:[],
today: new Date(),
firstDestinationInCreation: false
};
},
@ -273,7 +310,8 @@
const isGroupEnabled = await this.$store.dispatch('newCallForward/isGroupEnabled', {groupName: this.group.name, id: this.group.id});
this.isEnabled = isGroupEnabled;
}
await this.updateSourcesetNames()
await this.updateSourcesetNames();
await this.updateTimeSetNames();
}
catch(err){
console.log(err)
@ -288,6 +326,7 @@
'getMappings',
'getGroupsLoaders',
'getSourcesets',
'getTimesets',
'getFirstDestinationInCreation'
]),
showAddDestBtn(){
@ -323,6 +362,15 @@
groupSourceset(){
return this.sourceSet ? this.sourceSet.name : false;
},
groupTimeset(){
let retVal = false, dateN, time;
if(this.timeSet && this.timeSet.times && this.timeSet.times.length > 0){
time = this.timeSet.times[0];
dateN = new Date(parseInt(time.year), parseInt(time.month) - 1 , parseInt(time.mday), 0, 0, 0, 0);
retVal = date.formatDate( dateN, 'ddd, MMM D YYYY')
}
return retVal;
},
isTempGroup(){
return this.group.id.toString().includes('temp-');
},
@ -334,12 +382,30 @@
},
isTimeoutOrUnconditional(){
return this.group.name.includes( 'unconditional') || this.group.name.includes('timeout');
},
dayModel: {
get() {
let time = this.timeSet.times[0];
let dateN = new Date(parseInt(time.year), parseInt(time.month) - 1 , parseInt(time.mday), 0, 0, 0, 0);
return dateN;
},
set(value) {
if(value !== ""){
this.addTimeset(value);
}
else{
this.showConfirmDeleteTimesetDialog()
}
}
}
},
watch: {
getSourcesets: function () {
this.updateSourcesetNames();
},
getTimesets: function () {
this.updateTimeSetNames();
},
getGroupsLoaders: function(){
const groupLoaders = this.getGroupsLoaders;
this.groupIsLoading = groupLoaders.includes(this.group.id);
@ -347,7 +413,7 @@
getFirstDestinationInCreation: function(){
if(this.getFirstDestinationInCreation === this.group.id.toString()){
this.toggleConditionFromForm = false;
this.$refs.onlineSourceset.open();
this.$refs.conditions.open();
}
}
},
@ -385,9 +451,17 @@
firstDestinationCmp.$refs.destTypeForm.open();
},
async showConditionForm(){
this.toggleConditionFromForm = false;
this.$refs.onlineSourceset.open();
showConditionForm(){
const action = this.$refs.addCondition.action;
switch(action){
case "addFromCondition":
this.toggleConditionFromForm = false;
this.$refs.onlineSourceset.open();
break;
case "addDateIsCondition":
break;
}
},
showDestTypeForm(){
@ -449,6 +523,25 @@
}
}
},
async updateTimeSetNames(){
const mappings = this.getMappings;
const groupMappingId = await this.$store.dispatch('newCallForward/getMappingIdByGroupName', this.group.name);
let groupMapping, timeSet;
if(mappings[groupMappingId]){
groupMapping = mappings[groupMappingId].filter(($mapping)=>{
return $mapping.destinationset_id == this.group.id;
});
timeSet = groupMapping[0] && groupMapping[0].timeset_id ? await this.$store.dispatch('newCallForward/getTimesetById', groupMapping[0].timeset_id) : null;
if(timeSet){
this.timeSet = timeSet;
this.times = this.timeSet.times;
}
else{
this.timeSet = null;
this.times = [];
}
}
},
showConfirmDialog(){
this.$refs.confirmDialog.open();
},
@ -463,6 +556,44 @@
console.log(e)
}
},
showQDate(){
this.$refs.dayWidget.open()
},
showConfirmDeleteTimesetDialog(){
this.$refs.confirmDeleteTimesetDialog.open();
},
async deleteTimeset(){
try{
await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
await this.$store.dispatch('newCallForward/deleteTimesFromTimeset', this.timeSet.id);
await this.$store.dispatch('newCallForward/loadTimesets');
await this.$store.dispatch('newCallForward/loadMappings');
await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
}
catch(e){
console.log(e)
}
},
async addTimeset(time){
try{
await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
this.day = {
"year": date.formatDate(time, 'YYYY'),
"month": date.formatDate(time, 'M'),
"mday": date.formatDate(time, 'D')
}
await this.$store.dispatch('newCallForward/addTimeToTimeset', {
id: this.timeSet.id,
time: this.day
});
await this.$store.dispatch('newCallForward/loadTimesets');
await this.$store.dispatch('newCallForward/loadMappings');
await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
}
catch(e){
console.log(e)
}
}
}
}
@ -509,4 +640,13 @@
color $cf-disabled-link
.q-icon
color $cf-disabled-link !important
.row.q-datetime-controls.modal-buttons-top
button:first-child
color red !important
&:before
font-family: "Material Icons"
content: "\e872"
font-size 24px
margin-right 10px
</style>

1
src/components/pages/NewCallForward/CscNewCallForward.vue
Unescape View File

@ -147,6 +147,7 @@
try{
await this.$store.dispatch('newCallForward/loadMappings');
await this.$store.dispatch('newCallForward/loadSourcesets');
await this.$store.dispatch('newCallForward/loadTimesets');
await this.$store.dispatch('newCallForward/loadForwardGroups');
let unconditionalGroups = await this.$store.dispatch('newCallForward/getForwardGroupByName', 'unconditional');
this.toggleDefaultNumber = !unconditionalGroups;

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

@ -4,10 +4,31 @@
>
<div
class="csc-cf-dest-type"
v-if="disableSourcesetMenu"
@click="addFromCondition()"
>
{{ $t('pages.newCallForward.fromLabel') }}
</div>
<div
class="csc-cf-dest-type"
v-if="disableTimesetMenu"
@click="addDateIsCondition()"
>
{{ $t('pages.newCallForward.dateIsLabel') }}
<q-popover
ref="day"
@open="showQDate()"
class="csc-cf-calendar-day"
>
<q-datetime
ref="dayWidget"
no-clear
class="csc-cf-day-widget"
v-model="dayModel"
:min="today"
/>
</q-popover>
</div>
</div>
</template>
@ -16,30 +37,82 @@
mapGetters,
} from 'vuex'
import CscSpinner from '../../CscSpinner'
import { } from 'quasar-framework'
import {
QDatetime,
QPopover,
date
} from 'quasar-framework'
export default {
name: 'csc-new-call-forward-condition-type-select',
props: [
'groupId',
'groupName',
'disableSourcesetMenu',
'disableTimesetMenu'
],
components: {
CscSpinner
CscSpinner,
QDatetime,
QPopover
},
data () {
return {
enabled: true,
action: null
action: null,
timesetName: null,
day: null,
today: new Date()
}
},
mounted(){
this.timesetName = 'timeset-'+this.groupId;
},
computed: {
...mapGetters('newCallForward', [
])
...mapGetters('newCallForward', []),
dayModel: {
get() {
return this.day;
},
async set(value) {
try{
await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
const timeSetId = await this.$store.dispatch('newCallForward/createTimeSet', this.timesetName);
await this.$store.dispatch('newCallForward/addTimesetToGroup', {
name: this.groupName,
groupId: this.groupId,
timeSetId: timeSetId
});
this.day = {
"year": date.formatDate(value, 'YYYY'),
"month": date.formatDate(value, 'M'),
"mday": date.formatDate(value, 'D')
}
await this.$store.dispatch('newCallForward/addTimeToTimeset', {
id: timeSetId,
time: this.day
});
await this.$store.dispatch('newCallForward/loadMappings');
await this.$store.dispatch('newCallForward/loadTimesets');
await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
}
catch(err){
console.log(err)
}
}
}
},
methods: {
async addFromCondition(){
addFromCondition(){
this.action = "addFromCondition";
this.$parent.close()
},
addDateIsCondition(){
this.action = "addDateIsCondition";
this.$parent.close()
},
cancel() {
this.action = null;
this.enabled = false;
@ -51,6 +124,9 @@
this.action = null;
this.enabled = false;
},
showQDate(){
this.$refs.dayWidget.open()
}
}
}
</script>
@ -63,4 +139,11 @@
cursor pointer
.csc-cf-dest-type:hover
background $main-menu-item-hover-background
.csc-cf-calendar-day
margin-top -100px !important
.q-datetime-weekdays
color $tertiary
.q-datetime-days div:not(.q-datetime-day-active),
.q-datetime-dark
color $white
</style>

4
src/components/pages/NewCallForward/CscNewCallForwardEditSources.vue
Unescape View File

@ -5,7 +5,6 @@
v-bind:class="{ 'csc-cf-popover-hide': toggleFormVisibility}"
>
<div class="col text-left col-xs-12 col-md-12 ">
<div
class='csc-cf-sourceset-name'
>
@ -26,9 +25,6 @@
</span>
</div>
</div>
<div
v-for="(source, item) in sources"

4
src/locales/en.json
Unescape View File

@ -238,11 +238,15 @@
"cancelGroupDialogTitle": "Delete {groupName} forwarding group",
"cancelDialogText": "You are about to delete {destination} from {groupName} call forwarding",
"cancelSourcesetDialogTitle": "Delete {name} sourceset",
"cancelTimesetDialogTitle": "Delete {name} timeset",
"cancelSourcesetText": "You are about to delete {name} sourceset",
"cancelTimesetText": "You are about to delete {name} timeset",
"cancelGroupDialogText": "You are about to delete {groupName} call forwarding group",
"unconditionalLabel": "If available",
"fromLabel": "If call from ...",
"fromLabelShort": " call from ",
"dateIsLabel": "If date is ...",
"dateIsShort": " date is ",
"offlineLabel": "If not available",
"busyLabel": "If busy",
"sourcesetName": "List name",

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

@ -12,7 +12,11 @@ import {
createSourcesetWithSource,
getSourcesets,
addSourceToSourceset,
deleteSourcesetById
deleteSourcesetById,
getTimesets,
addNewTimeset,
addTimeToTimeset,
deleteTimeFromTimeset
} from '../api/call-forward';
const ForwardGroup = {
@ -47,6 +51,7 @@ export default {
state: {
mappings: [],
sourceSets: [],
timeSets: [],
forwardGroups: [],
groupsLoaders: [],
selectedDestType: null,
@ -131,6 +136,9 @@ export default {
getSourcesesBySourcesetId: (state) => (sourceSetId) => {
const sourceSet = state.sourceSets.filter($sourceset => $sourceset.id == sourceSetId);
return sourceSet && sourceSet[0] ? sourceSet[0].sources : null;
},
getTimesets(state){
return state.timeSets;
}
},
mutations: {
@ -161,7 +169,6 @@ export default {
state.mappings = mappings;
},
loadForwardGroups(state, forwardGroups){
for (let i = 0; i < forwardGroups.length; i++) {
const group = forwardGroups[i];
if (group.name.includes('unconditional') || group.name.includes('timeout')){
@ -177,6 +184,9 @@ export default {
setSourceSets(state, sourceSets){
state.sourceSets = sourceSets;
},
setTimeSets(state, timeSets){
state.timeSets = timeSets;
},
addGroupLoader(state, groupId){
state.groupsLoaders.push(groupId)
},
@ -223,11 +233,12 @@ export default {
const groupMappingId = ForwardGroup[data.name] ? ForwardGroup[data.name].mapping : await context.dispatch('getMappingIdByGroupName', data.name);
const allMappings = context.getters.getMappings;
let groupMappings = allMappings[groupMappingId];
if(data.replaceMapping){
for(let mapping of groupMappings){
if(mapping.destinationset_id === data.groupId){
mapping.sourceset_id = data.sourceSetId || null;
mapping.timeset_id = data.timeSetId || null;
break;
}
}
@ -236,7 +247,7 @@ export default {
groupMappings.push({
"destinationset_id": data.groupId,
"sourceset_id": data.sourceSetId || null,
"timeset_id":null
"timeset_id": data.timeSetId || null
});
}
await addNewMapping({
@ -594,6 +605,11 @@ export default {
const sourceSets = await getSourcesets(subscriberId);
context.commit('setSourceSets', sourceSets);
},
async loadTimesets(context){
const subscriberId = localStorage.getItem('subscriberId');
const timeSets = await getTimesets(subscriberId);
context.commit('setTimeSets', timeSets);
},
async createSourceSet(context, data){
const sourceSetId = await createSourcesetWithSource({
sourcesetName: data.name,
@ -620,6 +636,10 @@ export default {
const sourceSet = context.state.sourceSets.filter($sourceset => $sourceset.id == id);
return sourceSet ? sourceSet[0] : [];
},
async getTimesetById(context, id){
const timeSet = context.state.timeSets.filter($timeset => $timeset.id == id);
return timeSet ? timeSet[0] : [];
},
async addSourceToSourceset(context, data){
await addSourceToSourceset(data)
},
@ -631,6 +651,51 @@ export default {
},
setFirstDestinationInCreation(context, groupId){
context.commit('setFirstDestinationInCreation', groupId);
},
async createTimeSet(context, timesetName){
try{
// const subscriberId = localStorage.getItem('subscriberId');
const timesetId = await addNewTimeset(timesetName);
return timesetId;
}
catch(err){
console.log(err)
}
},
async addTimesetToGroup(context, data){
try{
await context.dispatch('editMapping', {
name: data.name,
groupId: data.groupId,
timeSetId: data.timeSetId,
replaceMapping: true
});
}
catch(err){
console.log(err)
}
},
async addTimeToTimeset(context, data){
try{
await addTimeToTimeset({
id: data.id,
times: [data.time]
});
}
catch(err){
console.log(err)
}
},
async deleteTimesFromTimeset(context, timesetId){
try{
await deleteTimeFromTimeset({
timesetId: timesetId,
times: []
});
}
catch(err){
console.log(err)
}
}
}
};

Write Preview
Loading…
Cancel
Save