AC: √ Can choose "weekdays are ..." from condition menu in each forwarding group (online, offline, busy) √ Can click "weekdays are ..." to choose the weekdays initially √ Can see a date weekday widget according to the screens √ Can choose weekdays √ Can save the chosen weekdays √ Can cancel the process √ Can see the changed title "... and weekdays are Monday, Friday" after saving √ Can click the changed title to change weekdays again √ Can remove the condition Extra: √ Fix conditions menu UX bugs √ Fix conditions popover position Change-Id: I8a5a465765b5ce204fd47c1880164f91c03b4622mr9.0.1
Carlo Venusino
5 years ago
parent
04b4660396
commit
8a0527d54a
@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="enabled"
|
||||
class="csc-form"
|
||||
v-bind:class="{ 'csc-cf-popover-hide': toggleFormVisibility}"
|
||||
>
|
||||
<div
|
||||
class="csc-cf-delete-weekdays-btn"
|
||||
>
|
||||
<csc-confirm-dialog
|
||||
ref="confirmDeleteTimesetDialog"
|
||||
title-icon="delete"
|
||||
:title="$t('pages.newCallForward.cancelTimesetDialogTitle', {name: 'weekdays'})"
|
||||
:message="$t('pages.newCallForward.cancelTimesetText', {name: 'this'})"
|
||||
@confirm="deleteTimeset"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="csc-form-actions row justify-center csc-actions-cont"
|
||||
>
|
||||
|
||||
|
||||
<q-btn
|
||||
class="day-btn"
|
||||
v-bind:class="{ 'day-selected-btn': weekdays.includes('2')}"
|
||||
rounded
|
||||
@click="toggleWeekday('2')"
|
||||
>
|
||||
M
|
||||
</q-btn>
|
||||
<q-btn
|
||||
class="day-btn"
|
||||
v-bind:class="{ 'day-selected-btn': weekdays.includes('3')}"
|
||||
rounded
|
||||
@click="toggleWeekday('3')"
|
||||
>
|
||||
T
|
||||
</q-btn>
|
||||
<q-btn
|
||||
class="day-btn"
|
||||
v-bind:class="{ 'day-selected-btn': weekdays.includes('4')}"
|
||||
rounded
|
||||
@click="toggleWeekday('4')"
|
||||
>
|
||||
W
|
||||
</q-btn>
|
||||
<q-btn
|
||||
class="day-btn"
|
||||
v-bind:class="{ 'day-selected-btn': weekdays.includes('5')}"
|
||||
rounded
|
||||
@click="toggleWeekday('5')"
|
||||
>
|
||||
T
|
||||
</q-btn>
|
||||
<q-btn
|
||||
class="day-btn"
|
||||
v-bind:class="{ 'day-selected-btn': weekdays.includes('6')}"
|
||||
rounded
|
||||
@click="toggleWeekday('6')"
|
||||
>
|
||||
F
|
||||
</q-btn>
|
||||
<q-btn
|
||||
class="day-btn"
|
||||
v-bind:class="{ 'day-selected-btn': weekdays.includes('7')}"
|
||||
rounded
|
||||
@click="toggleWeekday('7')"
|
||||
>
|
||||
S
|
||||
</q-btn>
|
||||
<q-btn
|
||||
class="day-btn"
|
||||
v-bind:class="{ 'day-selected-btn': weekdays.includes('1')}"
|
||||
rounded
|
||||
@click="toggleWeekday('1')"
|
||||
>
|
||||
S
|
||||
</q-btn>
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="csc-form-actions row justify-center csc-actions-cont"
|
||||
>
|
||||
<q-btn
|
||||
:disabled="this.weekdays.length < 1"
|
||||
flat
|
||||
color="red"
|
||||
icon="delete"
|
||||
@mousedown.native="showRemoveDialog()"
|
||||
>
|
||||
{{ $t('buttons.remove') }}
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
color="default"
|
||||
icon="clear"
|
||||
@mousedown.native="cancel()"
|
||||
>
|
||||
{{ $t('buttons.cancel') }}
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="!loading"
|
||||
flat
|
||||
color="primary"
|
||||
icon="done"
|
||||
@click="save(); close()"
|
||||
>
|
||||
{{ $t('buttons.save') }}
|
||||
</q-btn>
|
||||
<div
|
||||
v-if="loading"
|
||||
class="csc-form-actions-spinner"
|
||||
>
|
||||
<csc-spinner />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscNewCallForwardInput from './CscNewCallForwardInput'
|
||||
import CscNewCallForwardInputText from './CscNewCallForwardInputText'
|
||||
import CscConfirmDialog from "../../CscConfirmationDialog";
|
||||
import CscSpinner from '../../CscSpinner'
|
||||
import {
|
||||
QField,
|
||||
QInput,
|
||||
QBtn
|
||||
} from 'quasar-framework'
|
||||
|
||||
export default {
|
||||
name: 'csc-new-call-forward-add-weekday-form',
|
||||
components: {
|
||||
CscNewCallForwardInput,
|
||||
CscNewCallForwardInputText,
|
||||
CscConfirmDialog,
|
||||
CscSpinner,
|
||||
QField,
|
||||
QInput,
|
||||
QBtn
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
timesetId: null,
|
||||
timesetName: null,
|
||||
toggleFormVisibility: false,
|
||||
loading: false,
|
||||
enabled: false,
|
||||
weekdays: []
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'groupName',
|
||||
'groupId',
|
||||
'id',
|
||||
'days'
|
||||
],
|
||||
computed: {
|
||||
saveDisabled() {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.timesetName = 'timeset-'+this.groupId;
|
||||
this.timeSetId = this.id;
|
||||
if(this.days){
|
||||
for(let day of this.days){
|
||||
this.weekdays.push(day.wday);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
async save() {
|
||||
const forwardGroupId = this.groupId;
|
||||
this.$store.dispatch('newCallForward/addGroupLoader', forwardGroupId);
|
||||
try{
|
||||
if(this.weekdays.length < 1){
|
||||
this.deleteTimeset();
|
||||
}
|
||||
else{
|
||||
if(this.id){
|
||||
this.timeSetId = this.id
|
||||
}
|
||||
else{
|
||||
this.timeSetId = await this.$store.dispatch('newCallForward/createTimeSet', this.timesetName);
|
||||
}
|
||||
|
||||
this.$store.dispatch('newCallForward/addTimesetToGroup', {
|
||||
name: this.groupName,
|
||||
groupId: this.groupId,
|
||||
timeSetId: this.timeSetId
|
||||
});
|
||||
this.weekdays.sort((a,b) => (parseInt(a) > parseInt(b)) ? 1 : ((parseInt(b) > parseInt(a)) ? -1 : 0));
|
||||
const days = this.weekdays.map(item => { return {"wday":item}});
|
||||
const updatedTimeset = await this.$store.dispatch('newCallForward/addTimeToTimeset', {
|
||||
id: this.timeSetId,
|
||||
time: days
|
||||
});
|
||||
this.$store.dispatch('newCallForward/setTimeset', updatedTimeset);
|
||||
}
|
||||
}
|
||||
catch(err){
|
||||
console.log(err)
|
||||
}
|
||||
this.$store.dispatch('newCallForward/removeGroupLoader', forwardGroupId);
|
||||
},
|
||||
cancel(){
|
||||
this.weekdays = [];
|
||||
if(this.days){
|
||||
for(let day of this.days){
|
||||
this.weekdays.push(day.wday);
|
||||
}
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
close() {
|
||||
this.$parent.close();
|
||||
this.enabled = false;
|
||||
},
|
||||
add() {
|
||||
this.toggleFormVisibility = false;
|
||||
this.enabled = true;
|
||||
},
|
||||
showRemoveDialog(){
|
||||
this.toggleFormVisibility = true;
|
||||
this.$refs.confirmDeleteTimesetDialog.open();
|
||||
},
|
||||
toggleWeekday(weekday){
|
||||
if(this.weekdays.includes(weekday)){
|
||||
this.weekdays = this.weekdays.filter(item => item !== weekday);
|
||||
}
|
||||
else{
|
||||
this.weekdays.push(weekday);
|
||||
}
|
||||
},
|
||||
async deleteTimeset(){
|
||||
this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
|
||||
await this.$store.dispatch('newCallForward/deleteTimeset', this.timeSetId);
|
||||
this.$store.dispatch('newCallForward/loadMappings');
|
||||
this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
@import '../../../themes/app.common.styl'
|
||||
.csc-actions-cont
|
||||
margin-bottom 15px
|
||||
.day-btn
|
||||
margin 5px
|
||||
background rgba(37,51,85,0.8)
|
||||
width 35px
|
||||
.day-selected-btn
|
||||
background $primary
|
||||
.csc-cf-delete-weekdays-btn
|
||||
float right
|
||||
margin-top -10px
|
||||
margin-right -20px
|
||||
</style>
|
||||
@ -0,0 +1,400 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="enabled"
|
||||
class="csc-form"
|
||||
>
|
||||
<div
|
||||
class="csc-cf-daterange-popovers-container"
|
||||
>
|
||||
<q-datetime
|
||||
class="csc-cf-datetime"
|
||||
v-model="dayFrom"
|
||||
type="date"
|
||||
format="DD/MM/YYYY"
|
||||
ref="dayFrom"
|
||||
:min="today"
|
||||
@blur="openParent()"
|
||||
/>
|
||||
<q-datetime
|
||||
class="csc-cf-datetime"
|
||||
v-model="dayTo"
|
||||
type="date"
|
||||
format="DD/MM/YYYY"
|
||||
ref="dayTo"
|
||||
:min="dayFrom"
|
||||
@blur="openParent()"
|
||||
/>
|
||||
<q-datetime
|
||||
class="csc-cf-datetime"
|
||||
v-model="hourFrom"
|
||||
type="time"
|
||||
format="HH:MM"
|
||||
ref="hourFrom"
|
||||
@blur="openParent()"
|
||||
/>
|
||||
<q-datetime
|
||||
class="csc-cf-datetime"
|
||||
v-model="hourTo"
|
||||
type="time"
|
||||
format="HH:MM"
|
||||
:min="hourFrom"
|
||||
ref="hourTo"
|
||||
@blur="openParent()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="csc-cf-daterange-fields-cont csc-form-actions row justify-center csc-actions-cont"
|
||||
>
|
||||
<q-field
|
||||
dark
|
||||
label="Date range"
|
||||
:labelWidth="11"
|
||||
class="csc-cf-popover-daterange-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="csc-cf-daterange-fields-cont csc-form-actions row justify-center csc-actions-cont"
|
||||
>
|
||||
<q-input
|
||||
dark
|
||||
v-model="dayFromFormatted"
|
||||
@click="openDayFrom()"
|
||||
:placeholder="$t('pages.newCallForward.dateRangeStartDate')"
|
||||
:after="[
|
||||
{
|
||||
icon: 'today',
|
||||
handler () {
|
||||
openDayFrom();
|
||||
}
|
||||
}
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
dark
|
||||
v-model="dayToFormatted"
|
||||
@click="openDayTo()"
|
||||
:placeholder="$t('pages.newCallForward.dateRangeEndDate')"
|
||||
:after="[
|
||||
{
|
||||
icon: 'today',
|
||||
handler () {
|
||||
openDayTo();
|
||||
}
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="csc-form-actions row justify-center csc-actions-cont"
|
||||
>
|
||||
<q-input
|
||||
dark
|
||||
v-model="hourFromFormatted"
|
||||
@click="openHourFrom()"
|
||||
:placeholder="$t('pages.newCallForward.dateRangeStartTime')"
|
||||
:after="[
|
||||
{
|
||||
icon: 'access_time',
|
||||
handler () {
|
||||
openHourFrom();
|
||||
}
|
||||
}
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
dark
|
||||
v-model="hourToFormatted"
|
||||
@click="openHourTo()"
|
||||
:placeholder="$t('pages.newCallForward.dateRangeEndTime')"
|
||||
:after="[
|
||||
{
|
||||
icon: 'access_time',
|
||||
handler () {
|
||||
openHourTo();
|
||||
}
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="csc-cf-daterange-btn-cont"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
color="red"
|
||||
icon="delete"
|
||||
v-if="!noClear"
|
||||
@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"
|
||||
@click="cancelTimerange(); resetTimeRange()"
|
||||
>
|
||||
{{ $t('buttons.cancel') }}
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
color="primary"
|
||||
icon="done"
|
||||
@click="save();"
|
||||
:disable="!allFieldsFilled"
|
||||
>
|
||||
{{ $t('buttons.save') }}
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscConfirmDialog from "../../CscConfirmationDialog";
|
||||
import CscSpinner from '../../CscSpinner'
|
||||
import {
|
||||
QDatetime,
|
||||
QField,
|
||||
QInput,
|
||||
QBtn,
|
||||
date
|
||||
} from 'quasar-framework'
|
||||
|
||||
export default {
|
||||
name: 'csc-new-call-forward-date-range',
|
||||
components: {
|
||||
CscConfirmDialog,
|
||||
CscSpinner,
|
||||
QDatetime,
|
||||
QField,
|
||||
QInput,
|
||||
QBtn
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
enabled: false,
|
||||
timesetId: null,
|
||||
timesetName: null,
|
||||
dayFrom: null,
|
||||
dayTo: null,
|
||||
hourFrom: null,
|
||||
hourTo: null,
|
||||
today: new Date(),
|
||||
dayRegExp: /^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}$/i,
|
||||
timeRegExp: /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/,
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'groupName',
|
||||
'groupId',
|
||||
'groupTimeRange',
|
||||
'noClear',
|
||||
'id'
|
||||
],
|
||||
mounted(){
|
||||
this.setDaysAndTimes()
|
||||
},
|
||||
computed: {
|
||||
dayFromFormatted(){
|
||||
let day = this.dayFrom ? this.dayFrom : '';
|
||||
if(day.toString().length > 0 && !day.match(this.dayRegExp)){
|
||||
day = date.formatDate(day, 'DD/MM/YYYY');
|
||||
}
|
||||
return day;
|
||||
},
|
||||
dayToFormatted(){
|
||||
let day = this.dayTo ? this.dayTo : '';
|
||||
if(day.toString().length > 0 && !day.match(this.dayRegExp)){
|
||||
day = date.formatDate(day, 'DD/MM/YYYY');
|
||||
}
|
||||
return day;
|
||||
},
|
||||
hourFromFormatted(){
|
||||
let time = this.hourFrom ? this.hourFrom : '';
|
||||
if(time.toString().length > 0 && !time.match(this.timeRegExp)){
|
||||
time = date.formatDate(time, 'hh:mm');
|
||||
}
|
||||
return time;
|
||||
},
|
||||
hourToFormatted(){
|
||||
let time = this.hourTo ? this.hourTo : '';
|
||||
if(time.toString().length > 0 && !time.match(this.timeRegExp)){
|
||||
time = date.formatDate(time, 'hh:mm');
|
||||
}
|
||||
return time;
|
||||
},
|
||||
allFieldsFilled(){
|
||||
return this.dayFrom !== null &&
|
||||
this.dayTo !== null &&
|
||||
this.hourFrom !== null &&
|
||||
this.hourTo !== null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openParent(){
|
||||
this.$emit('open-daterange-popover');
|
||||
},
|
||||
openDayFrom(){
|
||||
this.$refs.dayFrom.open();
|
||||
},
|
||||
openDayTo(){
|
||||
this.$refs.dayTo.open();
|
||||
},
|
||||
openHourFrom(){
|
||||
this.$refs.hourFrom.open();
|
||||
},
|
||||
openHourTo(){
|
||||
this.$refs.hourTo.open();
|
||||
},
|
||||
cancel(){
|
||||
this.close();
|
||||
},
|
||||
close() {
|
||||
this.$parent.close();
|
||||
this.enabled = false;
|
||||
},
|
||||
add() {
|
||||
this.enabled = true;
|
||||
},
|
||||
showRemoveDialog(){
|
||||
},
|
||||
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(){
|
||||
this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
|
||||
const datesTimesInRange = this.formatRange(this.dayFrom, this.dayTo, this.hourFrom, this.hourTo);
|
||||
if(!this.timesetName){
|
||||
this.timesetName = 'timeset-' + this.groupId;
|
||||
}
|
||||
const timeSetId = await this.$store.dispatch('newCallForward/createTimeSet', this.timesetName);
|
||||
|
||||
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.$store.dispatch('newCallForward/setTimeset', updatedTimeset);
|
||||
this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
|
||||
this.cancelTimerange();
|
||||
},
|
||||
async deleteTimeset(){
|
||||
try{
|
||||
this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
|
||||
await this.$store.dispatch('newCallForward/deleteTimeset', this.timesetId);
|
||||
this.$store.dispatch('newCallForward/loadMappings');
|
||||
this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
|
||||
}
|
||||
catch(e){
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
resetTimeRange(){
|
||||
this.dayFrom = null;
|
||||
this.dayTo = null;
|
||||
this.hourFrom = null;
|
||||
this.hourTo = null;
|
||||
},
|
||||
cancelTimerange() {
|
||||
this.$parent.close()
|
||||
this.action = null;
|
||||
this.enabled = false;
|
||||
},
|
||||
setDaysAndTimes(){
|
||||
if(this.groupTimeRange){
|
||||
this.dayFrom = this.groupTimeRange.dateFrom;
|
||||
this.dayTo = this.groupTimeRange.dateTo;
|
||||
this.hourFrom = this.groupTimeRange.dateFrom;
|
||||
this.hourTo = this.groupTimeRange.dateTo;
|
||||
}
|
||||
else{
|
||||
this.resetTimeRange();
|
||||
}
|
||||
},
|
||||
showRemoveDateRangeDialog(){
|
||||
this.$parent.close();
|
||||
this.$emit('confirm-delete');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
@import '../../../themes/app.common.styl'
|
||||
.csc-cf-popover-daterange-title
|
||||
text-align center
|
||||
width 100%
|
||||
margin-left 40px
|
||||
margin-top 50px
|
||||
margin-bottom -60px
|
||||
.q-field-label-inner
|
||||
color $white
|
||||
margin-top -25px
|
||||
margin-bottom 10px
|
||||
font-weight bold
|
||||
span
|
||||
width 100%
|
||||
text-align center
|
||||
.csc-actions-cont
|
||||
margin-bottom 15px
|
||||
.q-input
|
||||
margin-left 10px
|
||||
margin-right 20px
|
||||
max-width 160px
|
||||
.csc-cf-daterange-fields-cont
|
||||
margin-top 73px !important
|
||||
.csc-cf-daterange-popovers-container
|
||||
width 100%
|
||||
height 1px !important
|
||||
margin-top -70px !important
|
||||
margin-bottom -30px !important
|
||||
position relative
|
||||
.csc-cf-datetime
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
.csc-cf-daterange-btn-cont
|
||||
width 100%
|
||||
text-align center
|
||||
.q-datetime-days div:not(.q-datetime-day-active),
|
||||
.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
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in new issue