From 8a0527d54ac8551b4e32dc7643000e8323ae972a Mon Sep 17 00:00:00 2001
From: Carlo Venusino <cvenusino@sipwise.com>
Date: Wed, 22 Jul 2020 15:41:21 +0200
Subject: [PATCH] TT#82507 CF: As a Customer, I want to add condition "... and
 weekdays are" to forwarding groups
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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: I8a5a465765b5ce204fd47c1880164f91c03b4622
---
 src/api/call-forward.js                       |   1 -
 .../NewCallForward/CscCallForwardGroup.vue    | 492 ++++++++++--------
 .../CscNewCallForwardAddDestinationForm.vue   |   2 +
 .../CscNewCallForwardAddSourcesetForm.vue     |   3 +
 .../CscNewCallForwardAddWeekdayForm.vue       | 261 ++++++++++
 .../CscNewCallForwardConditionTypeSelect.vue  | 230 +-------
 .../CscNewCallForwardDateRange.vue            | 400 ++++++++++++++
 .../CscNewCallForwardDestination.vue          |   1 -
 .../CscNewCallForwardEditSources.vue          |   3 +-
 src/locales/en.json                           |   9 +
 src/store/new-call-forward.js                 |  17 +-
 11 files changed, 969 insertions(+), 450 deletions(-)
 create mode 100644 src/components/pages/NewCallForward/CscNewCallForwardAddWeekdayForm.vue
 create mode 100644 src/components/pages/NewCallForward/CscNewCallForwardDateRange.vue

diff --git a/src/api/call-forward.js b/src/api/call-forward.js
index 5af4dcc0..44f04e73 100644
--- a/src/api/call-forward.js
+++ b/src/api/call-forward.js
@@ -305,7 +305,6 @@ export function updateDestinationsetName(options) {
 }
 
 export function addDestinationToDestinationset(options) {
-
     return patchReplaceFull({
         path: 'api/cfdestinationsets/' + options.id,
         fieldPath: 'destinations',
diff --git a/src/components/pages/NewCallForward/CscCallForwardGroup.vue b/src/components/pages/NewCallForward/CscCallForwardGroup.vue
index 9185aa7c..cd2ff97f 100644
--- a/src/components/pages/NewCallForward/CscCallForwardGroup.vue
+++ b/src/components/pages/NewCallForward/CscCallForwardGroup.vue
@@ -1,4 +1,5 @@
-<template>
+<template
+>
     <div
         class="csc-cf-group"
         v-if="group.destinations.length > 0"
@@ -11,30 +12,6 @@
                     class="col col-xs-12 col-md-4 text-right csc-cf-group-title-bold"
                 >
                     {{groupTitle}}
-                    <span
-                        class="csc-cf-destination-add-condition"
-                        v-if="isTempGroup"
-                    >
-                        {{ $t('pages.newCallForward.conditionBtnLabelPrefix') }}
-                        <span class="csc-cf-from-link">
-                            {{ $t('pages.newCallForward.conditionBtnLabel') }}
-                        </span>
-                        <q-popover
-                            ref="conditions"
-                            @open="showConditions()"
-                            @close="showFirstDestMenu()"
-                        >
-                            <csc-new-call-forward-condition-type-select
-                                ref="addCondition"
-                                :disableSourcesetMenu="false"
-                                :disableTimesetMenu="false"
-                                :disableDateRangeMenu="false"
-                                :enabled="true"
-                                :groupName="group.name"
-                                :groupId="group.id"
-                            />
-                        </q-popover>
-                    </span>
                     <span
                         v-if="groupSourceset"
                     >
@@ -65,15 +42,16 @@
                             {{ $t('pages.newCallForward.dateIsShort') + groupTimeset }}
                         </span>
                         <q-popover
-                            ref="day"
-                            @open="showQDate()"
+                          ref="day"
+                          class="csc-cf-popover-top-valign"
+                          @open="showQDate()"
                         >
-                            <q-datetime
-                                ref="dayWidget"
-                                clear-label="REMOVE"
-                                v-model="dayModel"
-                                :min="today"
-                                />
+                          <q-datetime
+                              ref="dayWidget"
+                              clear-label="REMOVE"
+                              v-model="dayModel"
+                              :min="today"
+                              />
                         </q-popover>
                         <csc-confirm-dialog
                             ref="confirmDeleteTimesetDialog"
@@ -92,92 +70,53 @@
                             {{ $t('pages.newCallForward.dateRangeShort') + groupTimeRange }}
                         </span>
                         <q-popover
-                            ref="daterange"
-                            class="csc-cf-calendar-day"
-                            enabled="enabled"
+                         ref="daterange"
+                         class="csc-cf-calendar-day"
+                         @open="showDateRange()"
+
                         >
-                            <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>
+                         <csc-new-call-forward-date-range
+                             ref="dateRangePopover"
+                             :groupName="group.name"
+                             :groupId="group.id"
+                             :groupTimeRange="groupTimeRangeObj"
+                             @open-daterange-popover="rangeChanged()"
+                             @confirm-delete="showConfirmDeleteTimesetDialog()"
+                         />
+                         <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-popover>
                     </span>
+                    <span
+                        v-if="isWeekdays"
+                    >
+                        {{ $t('pages.newCallForward.conditionBtnLabelPrefix') }}
+                        <span class="csc-cf-from-link" ref="isWeekdayLink">
+                            {{ weekdaysLabelShort + groupWeekdays }}
+                        </span>
+                        <q-popover
+                           ref="weekdayEditPanel"
+                           class="csc-cf-number-form"
+                           @open="showWeekdayEditForm()"
+                       >
+                           <csc-new-call-forward-add-weekday-form
+                               ref="weekdayEditForm"
+                               :days="times"
+                               :id="timeSet.id"
+                               :enabled="true"
+                               :groupName="group.name"
+                               :groupId="group.id"
+                           />
+                       </q-popover>
+                    </span>
                     <span
                         class="csc-cf-destination-add-condition"
-                        v-if="!isTempGroup && !(groupSourceset && groupTimeset)"
+                        v-if="isTempGroup || (!isTempGroup && !(groupSourceset && groupTimeset || groupSourceset && isWeekdays || groupTimeset && isWeekdays ))"
                     >
                         {{ $t('pages.newCallForward.conditionBtnLabelPrefix') }}
                         <span class="csc-cf-from-link">
@@ -190,30 +129,82 @@
                         >
                             <csc-new-call-forward-condition-type-select
                                 ref="addCondition"
-                                :disableSourcesetMenu="!groupSourceset"
-                                :disableTimesetMenu="!groupTimeset"
-                                :disableDateRangeMenu="!groupTimeset"
-                                :enabled="true"
-                                :groupName="group.name"
-                                :groupId="group.id"
-                            />
-                        </q-popover>
-                         <q-popover
-                            ref="onlineSourceset"
-                            class="csc-cf-number-form"
-                            v-bind:class="{ 'csc-cf-popover-hide': toggleConditionFromForm}"
-                            @open="showSourcesetForm()"
-                            @close="resetToggleCondition()"
-                        >
-                            <csc-new-call-forward-add-sourceset-form
-                                ref="addSourceSet"
+                                :disableSourcesetMenu="isTempGroup || !groupSourceset"
+                                :disableTimesetMenu="isTempGroup || !groupTimeset && !isRange && !isWeekdays"
+                                :disableDateRangeMenu="isTempGroup || !groupTimeset && !isRange && !isWeekdays"
+                                :disableWeekdaysMenu="isTempGroup || !groupTimeset && !isRange && !isWeekdays"
                                 :enabled="true"
                                 :groupName="group.name"
                                 :groupId="group.id"
                             />
                         </q-popover>
+                        <span>
+                            <q-popover
+                                ref="onlineSourceset"
+                                class="csc-cf-number-form csc-cf-popover-left-align"
+                                v-bind:class="{ 'csc-cf-popover-hide': toggleConditionFromForm}"
+                                @open="showSourcesetForm()"
+                                @close="resetToggleCondition(); resetAction()"
+                            >
+                               <csc-new-call-forward-add-sourceset-form
+                            	   ref="addSourceSet"
+                            	   :enabled="true"
+                            	   :groupName="group.name"
+                            	   :groupId="group.id"
+                               />
+                            </q-popover>
+                        </span>
+                        <span>
+                            <q-popover
+                              ref="day"
+                              class="csc-cf-popover-left-align csc-cf-popover-top-valign"
+                              @open="showQDate()"
+                              @close="resetAction()"
+                              v-bind:class="{ 'csc-cf-popover-hide': toggleIsDatePanel}"
+                            >
+                              <q-datetime
+                            	  ref="dayWidget"
+                                  anchor="bottom right"
+                            	  no-clear
+                            	  v-model="dayModel"
+                            	  :min="today"
+                            	  />
+                            </q-popover>
+                        </span>
+                        <span>
+                            <q-popover
+                             ref="daterange"
+                             class="csc-cf-popover-left-align csc-cf-calendar-day"
+                             v-bind:class="{ 'csc-cf-popover-hide': toggleIsRangePanel}"
+                             @open="showDateRange()"
+                             @close="resetAction()"
+                            >
+                             <csc-new-call-forward-date-range
+                            	 ref="dateRangePopover"
+                            	 :groupName="group.name"
+                            	 :groupId="group.id"
+                                 :noClear="true"
+                            	 @open-daterange-popover="rangeChanged()"
+                             />
+                            </q-popover>
+                        </span>
+                        <span>
+                            <q-popover
+                              ref="weekdayPanel"
+                              class="csc-cf-number-form csc-cf-popover-left-align"
+                              v-bind:class="{ 'csc-cf-popover-hide': toggleWeekdayPanel}"
+                              @open="showWeekdayPanel()"
+                              @close="resetWeekdayCondition(); resetAction()"
+                            >
+                              <csc-new-call-forward-add-weekday-form
+                                  ref="weekdayForm"
+                                  :enabled="true"
+                                  :groupName="group.name"
+                                  :groupId="group.id"
+                              />
+                            </q-popover>
+                        </span>
                     </span>
-
                 </div>
                 <div class="col text-left col-xs-12 col-md-2 csc-cf-dest-number-cont">
                     <q-toggle
@@ -333,6 +324,8 @@
 
 <script>
 
+    // import _ from 'lodash'
+
     import moment from 'moment'
 
     import {
@@ -360,8 +353,10 @@
     import CscNewCallForwardAddDestinationForm from './CscNewCallForwardAddDestinationForm'
     import CscNewCallForwardEditSources from './CscNewCallForwardEditSources'
     import CscNewCallForwardAddSourcesetForm from './CscNewCallForwardAddSourcesetForm'
+    import CscNewCallForwardAddWeekdayForm from './CscNewCallForwardAddWeekdayForm'
     import CscNewCallForwardConditionTypeSelect from './CscNewCallForwardConditionTypeSelect'
     import CscNewCallForwardDestinationTypeForm from './CscNewCallForwardDestinationTypeForm'
+    import CscNewCallForwardDateRange from './CscNewCallForwardDateRange'
     export default {
         name: 'csc-cf-group',
         props: [
@@ -387,15 +382,21 @@
             CscNewCallForwardAddDestinationForm,
             CscNewCallForwardEditSources,
             CscNewCallForwardAddSourcesetForm,
+            CscNewCallForwardAddWeekdayForm,
             CscNewCallForwardConditionTypeSelect,
-            CscNewCallForwardDestinationTypeForm
+            CscNewCallForwardDestinationTypeForm,
+            CscNewCallForwardDateRange
         },
         data () {
             return {
+                firstDestinationInCreation: false,
                 toggleGroup: true,
                 isEnabled: true,
                 toggleNumberForm: true,
                 toggleConditionFromForm: true,
+                toggleWeekdayPanel: true,
+                toggleIsDatePanel: true,
+                toggleIsRangePanel: true,
                 groupIsLoading: false,
                 sourceSet: null,
                 sources: [],
@@ -404,16 +405,7 @@
                 action: null,
                 enabled: false,
                 day: null,
-                rangeDateModel: {
-                    from: null,
-                    to: null
-                },
-                rangeTimeModel: {
-                    from: null,
-                    to: null
-                },
-                today: new Date(),
-                firstDestinationInCreation: false
+                today: new Date()
             };
         },
         async mounted(){
@@ -441,12 +433,6 @@
                 '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){
@@ -484,8 +470,10 @@
                 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')
+                    if(time.year && time.month && time.mday){
+                        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;
             },
@@ -499,6 +487,23 @@
                 }
                 return retVal;
             },
+            groupTimeRangeObj(){
+                let retVal = false, time;
+                if(this.timeSet && this.timeSet.times && this.timeSet.times.length > 0){
+                    time = this.timeSet.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();
+
+                    retVal = {
+                        dateFrom: 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(),
+                        dateTo:  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(),
+                    }
+                }
+                return retVal;
+            },
             isRange(){
                 const isRange = this.timeSet
                         && this.timeSet.times
@@ -507,6 +512,51 @@
                         && this.timeSet.times[0].year.includes('-');
                 return isRange;
             },
+            weekdaysLabelShort(){
+                return this.timeSet.times.length > 1
+                    ? `${this.$t('pages.newCallForward.weekdaysLabelShort')}`
+                    : `${this.$t('pages.newCallForward.weekdayLabelShort')}`;
+
+            },
+            groupWeekdays(){
+                let retVal = '', times = this.timeSet.times.sort((a,b) => (parseInt(a.wday) > parseInt(b.wday)) ? 1 : ((parseInt(b.wday) > parseInt(a.wday)) ? -1 : 0));
+                times.forEach((time, index) => {
+                    const separator = (index === times.length - 1) ? '': ', ';
+                    switch(time.wday){
+                        case '2':
+                            retVal += `${this.$t('pages.callForward.times.monday')}`
+                        break;
+                        case '3':
+                            retVal += `${this.$t('pages.callForward.times.tuesday')}`
+                        break;
+                        case '4':
+                            retVal += `${this.$t('pages.callForward.times.wednesday')}`
+                        break;
+                        case '5':
+                            retVal += `${this.$t('pages.callForward.times.thursday')}`
+                        break;
+                        case '6':
+                            retVal += `${this.$t('pages.callForward.times.friday')}`
+                        break;
+                        case '7':
+                            retVal += `${this.$t('pages.callForward.times.saturday')}`
+                        break;
+                        case '1':
+                            retVal += `${this.$t('pages.callForward.times.sunday')}`
+                        break;
+                    }
+                    retVal += separator;
+                })
+                return retVal;
+            },
+            isWeekdays(){
+                const isWeekdays = this.timeSet
+                        && this.timeSet.times
+                        && this.timeSet.times.length > 0
+                        && this.timeSet.times[0].wday
+                        && this.timeSet.times[0].wday > 0;
+                return isWeekdays;
+            },
             isTempGroup(){
                 return this.group.id.toString().includes('temp-');
             },
@@ -521,6 +571,9 @@
             },
             dayModel: {
                 get() {
+                    if(!this.timeSet){
+                        return;
+                    }
                     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;
@@ -547,8 +600,7 @@
                 this.groupIsLoading =  groupLoaders.includes(this.group.id);
             },
             getFirstDestinationInCreation: function(){
-                if(this.getFirstDestinationInCreation === this.group.id.toString()){
-                    this.toggleConditionFromForm = false;
+                if(this.getFirstDestinationInCreation === this.group.id.toString() && this.$refs.conditions){
                     this.$refs.conditions.open();
                 }
             }
@@ -588,6 +640,10 @@
                 firstDestinationCmp.$refs.destTypeForm.open();
             },
             showConditionForm(){
+                if(this.isTempGroup){
+                    this.showFirstDestMenu();
+                    return;
+                }
                 const action = this.$refs.addCondition.action;
                 switch(action){
                     case "addFromCondition":
@@ -595,15 +651,26 @@
                         this.$refs.onlineSourceset.open();
                     break;
                     case "addDateIsCondition":
+                        this.toggleIsDatePanel = false;
+                        this.$refs.day.open();
+                    break;
+                    case "addDateRangeCondition":
+                        this.toggleIsRangePanel = false;
+                        this.$refs.daterange.open();
+                    break;
+                    case "addWeekdayCondition":
+                        this.toggleWeekdayPanel = false;
+                        this.$refs.weekdayPanel.open();
                     break;
                 }
-
-
             },
             showDestTypeForm(){
                 this.toggleNumberForm = true;
                 this.$refs.selectDestinationType.add();
             },
+            showWeekdayEditForm(){
+                this.$refs.weekdayEditForm.add();
+            },
             getDestName(index){
                 return "destination" + index;
             },
@@ -626,19 +693,30 @@
                 });
                 this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
             },
+            openConditionsPopover(){
+                this.$refs.conditions.open();
+            },
             showConditions(){
                 this.$refs.addCondition.add();
             },
             showSourcesetForm(){
                 this.$refs.addSourceSet.add();
             },
+            showWeekdayPanel(){
+                this.$refs.weekdayForm.add();
+            },
             showSources(){
                 this.$refs.editSources.add();
             },
             resetToggleCondition(){
                 this.toggleConditionFromForm = true;
             },
-
+            resetAction(){
+                this.$refs.addCondition.action = null;
+            },
+            resetWeekdayCondition(){
+                this.toggleWeekdayPanel = true;
+            },
             async updateSourcesetNames(){
                 const mappings = this.getMappings;
                 const groupMappingId = await this.$store.dispatch('newCallForward/getMappingIdByGroupName', this.group.name);
@@ -671,13 +749,6 @@
                     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;
@@ -700,17 +771,23 @@
                 }
 
             },
+            showQDateContainer(){
+                this.toggleIsDatePanel = false;
+                this.$refs.day.open()
+            },
             showQDate(){
                 this.$refs.dayWidget.open()
             },
+            showDateRange(){
+                this.$refs.dateRangePopover.add()
+            },
             showConfirmDeleteTimesetDialog(){
                 this.$refs.confirmDeleteTimesetDialog.open();
             },
             async deleteTimeset(){
                 try{
                     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/deleteTimeset', this.timeSet.id);
                     this.$store.dispatch('newCallForward/loadMappings');
                     this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
                 }
@@ -720,6 +797,13 @@
             },
             async addTimeToExistingTimeset(time){
                 try{
+                    let timseSetId;
+                    if(!this.timeSet){
+                        timseSetId = await this.$store.dispatch('newCallForward/createTimeSet', this.timesetName = 'timeset-'+this.group.id);
+                    }
+                    else{
+                        timseSetId = this.timeSet.id
+                    }
                     this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
                     this.day = {
                         "year": date.formatDate(time, 'YYYY'),
@@ -728,76 +812,26 @@
                     }
 
                     const updatedTimeset = await this.$store.dispatch('newCallForward/addTimeToTimeset', {
-                        id: this.timeSet.id,
+                        id: timseSetId,
                         time: this.day
                     });
-                    this.$store.dispatch('newCallForward/editTimes', updatedTimeset);
+
+                    if(!this.timeSet){
+                        this.$store.dispatch('newCallForward/addTimesetToGroup', {
+                            name: this.group.name,
+                            groupId: this.group.id,
+                            timeSetId: timseSetId
+                        });
+                    }
+                    this.$store.dispatch('newCallForward/setTimeset', updatedTimeset);
                     this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
                 }
                 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();
+            rangeChanged(){
+                this.$refs.daterange.open();
             }
         }
     }
@@ -828,6 +862,10 @@
         cursor pointer
     .csc-cf-group-popover-bottom
         margin-left 30px
+    .csc-cf-popover-left-align
+        margin-left -120px
+    .csc-cf-popover-top-valign
+        margin-top -40px
     .csc-cf-from-link
         color $primary
         cursor pointer
diff --git a/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue b/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue
index de7473bf..d8b0dd9d 100644
--- a/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue
+++ b/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue
@@ -141,6 +141,7 @@
             cancel() {
                 this.number = '';
                 this.enabled = false;
+                this.$parent.close();
             },
             add() {
                 this.number = '';
@@ -148,6 +149,7 @@
             },
             close() {
                 this.enabled = false;
+                this.$parent.close();
             },
             reset() {
                 this.cancel();
diff --git a/src/components/pages/NewCallForward/CscNewCallForwardAddSourcesetForm.vue b/src/components/pages/NewCallForward/CscNewCallForwardAddSourcesetForm.vue
index 3ee0071a..3a60301d 100644
--- a/src/components/pages/NewCallForward/CscNewCallForwardAddSourcesetForm.vue
+++ b/src/components/pages/NewCallForward/CscNewCallForwardAddSourcesetForm.vue
@@ -114,6 +114,7 @@
                     return;
                 }
                 try{
+                    this.close();
                     this.$store.dispatch('newCallForward/addGroupLoader', forwardGroupId);
                     sourceSetId = await this.$store.dispatch('newCallForward/createSourceSet', {
                         name: this.name,
@@ -136,6 +137,7 @@
                 this.number = '';
                 this.name = '';
                 this.enabled = false;
+                this.$parent.close();
             },
             add() {
                 this.number = '';
@@ -144,6 +146,7 @@
             },
             close() {
                 this.enabled = false;
+                this.$parent.close();
             },
             reset() {
                 this.cancel();
diff --git a/src/components/pages/NewCallForward/CscNewCallForwardAddWeekdayForm.vue b/src/components/pages/NewCallForward/CscNewCallForwardAddWeekdayForm.vue
new file mode 100644
index 00000000..c62d66df
--- /dev/null
+++ b/src/components/pages/NewCallForward/CscNewCallForwardAddWeekdayForm.vue
@@ -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>
diff --git a/src/components/pages/NewCallForward/CscNewCallForwardConditionTypeSelect.vue b/src/components/pages/NewCallForward/CscNewCallForwardConditionTypeSelect.vue
index 5f42fb49..6ab1af4e 100644
--- a/src/components/pages/NewCallForward/CscNewCallForwardConditionTypeSelect.vue
+++ b/src/components/pages/NewCallForward/CscNewCallForwardConditionTypeSelect.vue
@@ -15,18 +15,6 @@
             @click="addDateIsCondition()"
         >
             {{ $t('pages.newCallForward.dateIsLabel') }}
-            <q-popover
-                ref="day"
-                @open="showQDate()"
-                class="csc-cf-calendar-day"
-            >
-                <q-datetime
-                    ref="dayWidget"
-                    no-clear
-                    v-model="dayModel"
-                    :min="today"
-                    />
-            </q-popover>
         </div>
         <div
             class="csc-cf-dest-type"
@@ -35,73 +23,14 @@
             @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
+            class="csc-cf-dest-type"
+            v-if="disableWeekdaysMenu"
+            @click="addWeekdayCondition()"
+        >
+            {{ $t('pages.newCallForward.weekdaysLabel') }}
         </div>
     </div>
 </template>
@@ -112,12 +41,9 @@
     } from 'vuex'
     import CscSpinner from '../../CscSpinner'
     import {
-        QDatetime,
-        QDatetimeRange,
         QPopover,
         QField,
-        QBtn,
-        date
+        QBtn
     } from 'quasar-framework'
 
     export default {
@@ -127,12 +53,11 @@
             'groupName',
             'disableSourcesetMenu',
             'disableTimesetMenu',
-            'disableDateRangeMenu'
+            'disableDateRangeMenu',
+            'disableWeekdaysMenu'
         ],
         components: {
             CscSpinner,
-            QDatetimeRange,
-            QDatetime,
             QPopover,
             QField,
             QBtn
@@ -141,17 +66,7 @@
             return {
                 enabled: true,
                 action: null,
-                timesetName: null,
-                day: null,
-                rangeDateModel: {
-                    from: null,
-                    to: null
-                },
-                rangeTimeModel: {
-                    from: null,
-                    to: null
-                },
-                today: new Date()
+                timesetName: null
             }
         },
         mounted(){
@@ -164,38 +79,6 @@
                        this.rangeDateModel.to !== null &&
                        this.rangeTimeModel.from !== null &&
                        this.rangeTimeModel.to !== null;
-            },
-            dayModel: {
-                get() {
-                    return this.day;
-                },
-                async set(value) {
-                    try{
-                        this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
-                        const timeSetId = await this.$store.dispatch('newCallForward/createTimeSet', this.timesetName);
-                        this.day = {
-                            "year": date.formatDate(value, 'YYYY'),
-                            "month": date.formatDate(value, 'M'),
-                            "mday": date.formatDate(value, 'D')
-                        }
-                        this.$store.dispatch('newCallForward/addTimesetToGroup', {
-                            name: this.groupName,
-                            groupId: this.groupId,
-                            timeSetId: timeSetId
-                        });
-                        await this.$store.dispatch('newCallForward/addTimeToTimeset', {
-                            id: timeSetId,
-                            time: this.day
-                        });
-                        await this.$store.dispatch('newCallForward/loadTimesets');
-                        this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
-
-                    }
-                    catch(err){
-                        console.log(err)
-                    }
-
-                }
             }
         },
         methods: {
@@ -209,11 +92,16 @@
             },
             addDateRangeCondition(){
                 this.action = "addDateRangeCondition";
+                this.$parent.close();
+            },
+            addWeekdayCondition(){
+                this.action = "addWeekdayCondition";
                 this.$parent.close()
             },
             cancel() {
                 this.action = null;
                 this.enabled = false;
+                this.$parent.close();
             },
             add() {
                 this.enabled = true;
@@ -221,67 +109,10 @@
             close() {
                 this.action = null;
                 this.enabled = false;
+                this.$parent.close();
             },
             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);
             }
         }
     }
@@ -296,33 +127,8 @@
     .csc-cf-dest-type:hover
         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,
-    .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>
diff --git a/src/components/pages/NewCallForward/CscNewCallForwardDateRange.vue b/src/components/pages/NewCallForward/CscNewCallForwardDateRange.vue
new file mode 100644
index 00000000..d241b032
--- /dev/null
+++ b/src/components/pages/NewCallForward/CscNewCallForwardDateRange.vue
@@ -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>
diff --git a/src/components/pages/NewCallForward/CscNewCallForwardDestination.vue b/src/components/pages/NewCallForward/CscNewCallForwardDestination.vue
index 7abec5f5..861694b3 100644
--- a/src/components/pages/NewCallForward/CscNewCallForwardDestination.vue
+++ b/src/components/pages/NewCallForward/CscNewCallForwardDestination.vue
@@ -197,7 +197,6 @@
 								await this.$store.dispatch('newCallForward/setFirstDestinationInCreation', newGroupId);
 								this.firstDestinationInCreation = false;
 							}
-
 						}
 						else{
 							await this.$store.dispatch('newCallForward/addVoiceMail', this.groupId);
diff --git a/src/components/pages/NewCallForward/CscNewCallForwardEditSources.vue b/src/components/pages/NewCallForward/CscNewCallForwardEditSources.vue
index 941400b1..dffc0c48 100644
--- a/src/components/pages/NewCallForward/CscNewCallForwardEditSources.vue
+++ b/src/components/pages/NewCallForward/CscNewCallForwardEditSources.vue
@@ -12,7 +12,6 @@
                 <span
                     class="csc-cf-delete-sourceset-btn"
                 >
-
                     <csc-confirm-dialog
                         ref="confirmDialog"
                         title-icon="delete"
@@ -213,6 +212,7 @@
             cancel() {
                 this.number = '';
                 this.enabled = false;
+                this.$parent.close();
             },
             add() {
                 this.number = '';
@@ -220,6 +220,7 @@
             },
             close() {
                 this.enabled = false;
+                this.$parent.close();
             },
             reset() {
                 this.cancel();
diff --git a/src/locales/en.json b/src/locales/en.json
index 52e7331f..f748bdaa 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -251,6 +251,15 @@
             "dateRangeTimeHelper": "Pick start and end time",
             "dateIsShort": " date is ",
             "dateRangeShort": " date range is ",
+            "dateRangeStartDate" : "Start date",
+            "dateRangeEndDate" : "End date",
+            "dateRangeStartTime" : "Start time",
+            "dateRangeEndTime" : "End time",
+            "weekdaysLabel": "If weekdays are ...",
+            "weekdayLabel": "If weekday is ...",
+            "weekdaysLabelShort": " weekdays are ",
+            "weekdays":"weekdays",
+            "weekdayLabelShort": " weekday is ",
             "offlineLabel": "If not available",
             "busyLabel": "If busy",
             "sourcesetName": "List name",
diff --git a/src/store/new-call-forward.js b/src/store/new-call-forward.js
index 799e55eb..808720c6 100644
--- a/src/store/new-call-forward.js
+++ b/src/store/new-call-forward.js
@@ -18,7 +18,7 @@ import {
     getTimesets,
     addNewTimeset,
     addTimeToTimeset,
-    deleteTimeFromTimeset
+    deleteTimesetById
 } from '../api/call-forward';
 
 const ForwardGroup = {
@@ -219,6 +219,9 @@ export default {
         setOwnPhoneTimeout(state, cft_ringtimeout){
             const mappings = state.mappings;
             mappings.cft_ringtimeout = cft_ringtimeout
+        },
+        removeTimeset(state, timesSetId){
+            state.timeSets = state.timeSets.filter($timeset => $timeset.id !== timesSetId);
         }
     },
     actions: {
@@ -301,7 +304,7 @@ export default {
                     groupId: newForwardGroupId
                 });
 
-                addDestinationToDestinationset({
+                await addDestinationToDestinationset({
                     id: newForwardGroupId,
                     data: [destination]
                 });
@@ -719,7 +722,7 @@ export default {
             try{
                 const timeset = await addTimeToTimeset({
                     id: data.id,
-                    times: [data.time]
+                    times: _.isArray(data.time) ? data.time : [data.time]
                 });
                 return timeset;
             }
@@ -739,12 +742,10 @@ export default {
                 console.log(err)
             }
         },
-        async deleteTimesFromTimeset(context, timesetId){
+        async deleteTimeset(context, timesetId){
             try{
-                await deleteTimeFromTimeset({
-                    timesetId: timesetId,
-                    times: []
-                });
+                await deleteTimesetById(timesetId);
+                context.commit('removeTimeset', timesetId);
             }
             catch(err){
                 console.log(err)