TT#28060 Add time to company hours

What has been done:
- TT#32500, CallForwarding: Implement UI elements and flow
- TT#31806, CallForwarding: Implement api requests
- TT#32501, CallForwarding: Implement store and state management

Change-Id: I7ba7c2b5115f10480db4f560e39ffa43205c92af

src/api/call-forward.js

@@ -542,3 +542,148 @@ export function deleteTimesetById(id) {
         });
     });
 }
+
+export function resetTimesetByName(options) {
+    return new Promise((resolve, reject)=> {
+        Promise.resolve().then(() => {
+            return getTimesets(options.id);
+        }).then((timesets) => {
+            let deleteTimesetPromises = [];
+            _.filter(timesets, { 'name': options.name }).forEach((timeset) => {
+                deleteTimesetPromises.push(deleteTimesetById(timeset.id));
+            });
+            return Promise.all(deleteTimesetPromises);
+        }).then(() => {
+            resolve();
+        }).catch((err) => {
+            reject(err);
+        });
+    });
+}
+
+export function addTimeToTimeset(options) {
+    let headers = {
+        'Content-Type': 'application/json-patch+json'
+    };
+    return new Promise((resolve, reject) => {
+        Vue.http.patch('/api/cftimesets/' + options.id, [{
+            op: 'replace',
+            path: '/times',
+            value: options.time
+        }], { headers: headers }).then(() => {
+            resolve();
+        }).catch(err => {
+            reject(err);
+        });
+    });
+}
+
+export function addNewTimeset(timesetName) {
+    return new Promise((resolve, reject) => {
+        Vue.http.post('/api/cftimesets/', { name: timesetName  })
+            .then(response => {
+                resolve(_.last(_.split(response.headers.get('Location'), '/')));
+            }).catch(err => {
+                reject(err);
+            });
+    });
+}
+
+export function convertAddTime(options) {
+    let time = options.time;
+    let weekday = options.weekday;
+    let convertedTime = [];
+    let fromHour = time.from.split(':')[0];
+    let toHour = time.to.split(':')[0];
+    let fromMinute = time.from.split(':')[1];
+    let toMinute = time.to.split(':')[1];
+    let bothHasFullHour = fromMinute  === '00' && toMinute  === '00';
+    let bothHasSameHour = fromHour  === toHour;
+    let fromMinuteNotZero = time.from.split(':')[1] !== '00';
+    let toMinuteNotZero = time.to.split(':')[1] !== '00';
+    let bothMinutesNotZeroAndNextHourPlusOne = fromMinuteNotZero && toMinuteNotZero && parseInt(toHour) === parseInt(fromHour) + 1;
+    let bothMinutesNotZero = time.from.split(':')[1] !== '00' &&
+        time.to.split(':')[1] !== '00';
+    let startNotZeroAndEndNextFullHour =
+        (parseInt(fromHour) === (parseInt(toHour) - 1) && toMinute === '00');
+    if (bothHasFullHour) {
+        convertedTime.push({ wday: weekday, hour: `${parseInt(fromHour)}-${parseInt(toHour)-1}` });
+    }
+    else if (bothHasSameHour) {
+        convertedTime.push({ wday: weekday, hour: `${parseInt(fromHour)}`, minute: `${parseInt(fromMinute)}-${parseInt(toMinute)-1}`});
+    }
+    else if (startNotZeroAndEndNextFullHour) {
+        convertedTime.push({ wday: weekday, hour: `${parseInt(fromHour)}`, minute: `${parseInt(fromMinute)}-59` });
+    }
+    else if (bothMinutesNotZeroAndNextHourPlusOne) {
+        convertedTime.push(
+            { wday: weekday, hour: `${parseInt(fromHour)}`, minute: `${parseInt(fromMinute)}-59` },
+            { wday: weekday, hour: `${parseInt(toHour)}`, minute: `0-${parseInt(toMinute)-1}` }
+        );
+    }
+    else if (bothMinutesNotZero) {
+        convertedTime.push(
+            { wday: weekday, hour: `${parseInt(fromHour)}`, minute: `${parseInt(fromMinute)}-59` },
+            { wday: weekday, hour: `${parseInt(fromHour)+1}-${parseInt(toHour)-1}` },
+            { wday: weekday, hour: `${parseInt(toHour)}`, minute: `0-${parseInt(toMinute)-1}` }
+        );
+    }
+    // From minute not zero and to minute zero
+    else if (fromMinuteNotZero) {
+        convertedTime.push(
+            { wday: weekday, hour: `${parseInt(fromHour)}`, minute: `${parseInt(fromMinute)}-59` },
+            { wday: weekday, hour: `${parseInt(fromHour)+1}-${parseInt(toHour)-1}` }
+        );
+    }
+    // From minute zero and to minute not zero
+    else if (toMinuteNotZero) {
+        convertedTime.push(
+            { wday: weekday, hour: `${parseInt(fromHour)+1}-${parseInt(toHour)-1}` },
+            { wday: weekday, hour: `${parseInt(toHour)}`, minute: `0-${parseInt(toMinute)-1}` }
+        );
+    }
+    return convertedTime;
+}
+
+export function createTimesetWithTime(options) {
+    let convertedTime = convertAddTime({ time: options.time[0], weekday: options.weekday });
+    return new Promise((resolve, reject)=> {
+        Promise.resolve().then(() => {
+            return addNewTimeset(options.name);
+        }).then((timesetId) => {
+            return addTimeToTimeset({ id: timesetId, time: convertedTime });
+        }).then(() => {
+            resolve();
+        }).catch((err) => {
+            reject(err);
+        });
+    });
+}
+
+export function getTimesByTimesetId(id) {
+    return new Promise((resolve, reject)=>{
+        Vue.http.get('/api/cftimesets/' + id).then((res)=>{
+            let timeset = getJsonBody(res.body);
+            delete timeset['_links'];
+            resolve(timeset.times);
+        }).catch((err)=>{
+            reject(err);
+        });
+    });
+}
+
+export function appendTimeToTimeset(options) {
+    let convertedTime = convertAddTime({ time: options.time[0], weekday: options.weekday });
+    return new Promise((resolve, reject)=> {
+        Promise.resolve().then(() => {
+            return getTimesByTimesetId(options.id);
+        }).then((times) => {
+            let concatTimes = times.concat(convertedTime);
+            return addTimeToTimeset({ id: options.id, time: concatTimes });
+        }).then(() => {
+            resolve();
+        }).catch((err) => {
+            reject(err);
+        });
+    });
+}

src/components/pages/CallForward/CompanyHours.vue

@@ -1,64 +1,72 @@
 <template>
     <csc-page :title="$t('pages.callForward.titles.companyHours')">
         <div v-if="timesetIsCompatible && !timesetHasReverse && !timesetHasDuplicate && timesetExists">
-            <csc-call-forward-times :times="timesetTimes"></csc-call-forward-times>
-            <csc-call-forward-destinations timeset="Company Hours" :destinations="destinations">
-            </csc-call-forward-destinations>
-        </div>
-        <div v-else-if="timesetHasDuplicate && timesetExists">
-            <q-alert color="red"
-                icon="date_range"
-                enter="bounceInLeft"
-                leave="bounceOutRight"
-                appear>
-                    {{ $t('pages.callForward.times.companyHoursDuplicate') }}
-            </q-alert>
-        </div>
-        <div v-else-if="!timesetIsCompatible && timesetExists">
-            <q-alert color="red"
-                icon="date_range"
-                enter="bounceInLeft"
-                leave="bounceOutRight"
-                appear>
-                    {{ $t('pages.callForward.times.companyHoursIncompatible') }}
-            </q-alert>
-        </div>
-        <div v-else-if="timesetHasReverse && timesetExists">
-            <q-alert color="red"
-                icon="date_range"
-                enter="bounceInLeft"
-                leave="bounceOutRight"
-                appear>
-                    {{ $t('pages.callForward.times.companyHoursReverse') }}
-            </q-alert>
-        </div>
-        <div v-else>
-            <q-alert color="warning"
-                icon="date_range"
-                enter="bounceInLeft"
-                leave="bounceOutRight"
-                appear>
-                    {{ $t('pages.callForward.times.companyHoursNotDefined') }}
-            </q-alert>
+            <csc-call-forward-times :times="timesetTimes" ref="times"></csc-call-forward-times>
+            <csc-call-forward-destinations timeset="Company Hours" :destinations="destinations" />
         </div>
+        <q-card flat>
+            <div v-if="timesetHasDuplicate">
+                <q-alert color="red"
+                    v-model="showAlertDuplicate"
+                    icon="date_range"
+                    :actions="[{ label: $t('pages.callForward.times.resetCompanyHours'), handler: resetCompanyHours }]"
+                    appear>
+                        {{ $t('pages.callForward.times.companyHoursDuplicate') }}
+                </q-alert>
+            </div>
+            <div v-else-if="!timesetIsCompatible">
+                <q-alert color="red"
+                    v-model="showAlertCompatible"
+                    icon="date_range"
+                    :actions="[{ label: $t('pages.callForward.times.resetCompanyHours'), handler: resetCompanyHours }]"
+                    appear>
+                        {{ $t('pages.callForward.times.companyHoursIncompatible') }}
+                </q-alert>
+            </div>
+            <div v-else-if="timesetHasReverse">
+                <q-alert color="red"
+                    v-model="showAlertReverse"
+                    icon="date_range"
+                    :actions="[{ label: $t('pages.callForward.times.resetCompanyHours'), handler: resetCompanyHours }]"
+                    appear>
+                        {{ $t('pages.callForward.times.companyHoursReverse') }}
+                </q-alert>
+            </div>
+            <div v-show="showDefinedAlert">
+                <q-alert color="warning"
+                    v-model="showAlertDefined"
+                    icon="date_range"
+                    :actions="[{ label: $t('pages.callForward.times.addCompanyHours'), handler: addCompanyHours }]"
+                    appear>
+                        {{ $t('pages.callForward.times.companyHoursNotDefined') }}
+                </q-alert>
+            </div>
+            <csc-add-time-form type="new" :title="$t('pages.callForward.times.addCompanyHours')" timeset="Company Hours" ref="addTimeNew"></csc-add-time-form>
+        </q-card>
     </csc-page>
 </template>
 
 <script>
-    import { mapState } from 'vuex'
-    import { QAlert } from 'quasar-framework'
+    import { mapState, mapGetters } from 'vuex'
+    import { QAlert, QCard } from 'quasar-framework'
     import CscPage from '../../CscPage'
+    import { startLoading, stopLoading,
+        showGlobalError, showToast } from '../../../helpers/ui'
     import CscCallForwardDestinations from './CscCallForwardDestinations'
     import CscCallForwardTimes from './CscCallForwardTimes'
+    import CscAddTimeForm from './CscAddTimeForm'
     export default {
         data () {
-            return {}
+            return {
+            }
         },
         components: {
             CscPage,
             CscCallForwardDestinations,
             CscCallForwardTimes,
-            QAlert
+            CscAddTimeForm,
+            QAlert,
+            QCard
         },
         created() {
             this.$store.dispatch('callForward/loadCompanyHoursEverybodyDestinations');
@@ -70,14 +78,110 @@
             ...mapState('callForward', [
                 'destinations',
                 'timesetTimes',
+                'resetTimeState',
+                'addTimeState',
                 'timesetIsCompatible',
                 'timesetHasReverse',
                 'timesetHasDuplicate',
                 'timesetExists'
-            ])
+            ]),
+            ...mapGetters('callForward', [
+                'resetTimeError',
+                'addTimeError',
+                'showDefinedAlert'
+            ]),
+
+            showAlertDuplicate: {
+                get() {
+                    return this.$store.state.callForward.showAlerts.duplicate;
+                },
+                set(value) {
+                    return this.$store.commit('callForward/setShowAlertDuplicate', value);
+                }
+            },
+            showAlertCompatible: {
+                get() {
+                    return this.$store.state.callForward.showAlerts.compatible;
+                },
+                set(value) {
+                    return this.$store.commit('callForward/setShowAlertCompatible', value);
+                }
+            },
+            showAlertReverse: {
+                get() {
+                    return this.$store.state.callForward.showAlerts.reverse;
+                },
+                set(value) {
+                    return this.$store.commit('callForward/setShowAlertReverse', value);
+                }
+            },
+            showAlertDefined: {
+                get() {
+                    return this.$store.state.callForward.showAlerts.defined;
+                },
+                set(value) {
+                    return this.$store.commit('callForward/setShowAlertDefined', value);
+                }
+            }
+        },
+        methods: {
+            resetCompanyHours() {
+                this.$store.dispatch('callForward/resetTimesetByName', 'Company Hours');
+            },
+            addCompanyHours() {
+                this.$store.commit('callForward/setActiveTimeForm', true);
+            },
+            loadTimes() {
+                this.$store.dispatch('callForward/loadTimesetTimes', {
+                    timeset: 'Company Hours'
+                });
+                this.$store.commit('callForward/resetAlerts');
+            }
+        },
+        watch: {
+            resetTimeState(state) {
+                if (state === 'requesting') {
+                    startLoading();
+                }
+                else if (state === 'failed') {
+                    stopLoading();
+                    showGlobalError(this.resetTimeError);
+                }
+                else if (state === 'succeeded') {
+                    stopLoading();
+                    showToast(this.$t('pages.callForward.times.resetSuccessMessage'));
+                    this.loadTimes();
+                }
+            },
+            addTimeState(state) {
+                if (state === 'requesting') {
+                    this.$store.commit('callForward/setActiveTimeForm', true);
+                    startLoading();
+                }
+                else if (state === 'failed') {
+                    stopLoading();
+                    showGlobalError(this.addTimeError);
+                }
+                else if (state === 'succeeded') {
+                    this.$store.commit('callForward/setActiveTimeForm', false);
+                    stopLoading();
+                    if (this.$refs.times) {
+                        this.$refs.times.resetTimes();
+                    }
+                    else {
+                        this.$refs.addTimeNew.resetTimes();
+                    }
+                    this.loadTimes();
+                    showToast(this.$t('pages.callForward.times.addTimeSuccessMessage'));
+                }
+            }
         }
     }
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
+    @import '../../../themes/quasar.variables.styl'
+    .times-card
+        .q-alert-container
+            padding 15px 0
 </style>

src/components/pages/CallForward/CscAddDestinationForm.vue

@@ -117,11 +117,11 @@
             enableForm(type) {
                 let lastDestination = _.findLast(this.destinations) || {};
                 this.formEnabled = true;
-                this.$store.dispatch('callForward/setFormType', type);
-                this.$store.dispatch('callForward/setActiveForm', this.groupName);
-                this.$store.dispatch('callForward/setDestinationsetId', this.id);
-                this.$store.dispatch('callForward/setGroupName', this.groupName);
-                this.$store.dispatch('callForward/setPriority', lastDestination.priority || 1);
+                this.$store.commit('callForward/setFormType', type);
+                this.$store.commit('callForward/setActiveForm', this.groupName);
+                this.$store.commit('callForward/setDestinationsetId', this.id);
+                this.$store.commit('callForward/setGroupName', this.groupName);
+                this.$store.commit('callForward/setPriority', lastDestination.priority || 1);
                 if (type === 'voicebox') {
                     this.destinationForm.destination = 'Voicemail';
                 }
@@ -136,8 +136,8 @@
                 this.destinationForm.timeout = 300;
                 this.destinationForm.destination = '';
                 this.formEnabled = false;
-                this.$store.dispatch('callForward/resetFormState');
-                this.$store.dispatch('callForward/resetDestinationState');
+                this.$store.commit('callForward/resetFormState');
+                this.$store.commit('callForward/resetDestinationState');
             },
             addDestination() {
                 startLoading();

src/components/pages/CallForward/CscAddTimeForm.vue

@@ -0,0 +1,159 @@
+<template>
+    <div v-if="activeTimeForm" class="add-times">
+        <div class="title" v-if="typeIsNew">
+            {{ title }}
+        </div>
+        <div class="row no-wrap">
+            <q-field class="col-8">
+                <q-select v-model="selectedWeekday"
+                    :options="selectOptions" />
+            </q-field>
+            <q-field class="col-2">
+                    <q-datetime
+                        color="primary"
+                        v-model="timeFromConverted"
+                        align="right"
+                        type="time"
+                        format24h />
+            </q-field>
+            <q-field class="col-2"
+                :error="timeHasError"
+                :error-label="$t('pages.callForward.times.selectValidTime')">
+                    <q-datetime
+                        color="primary"
+                        v-model="timeToConverted"
+                        align="right"
+                        type="time"
+                        format24h />
+            </q-field>
+        </div>
+        <q-btn flat dark @click="disableForm()">
+            {{ $t('buttons.cancel') }}
+        </q-btn>
+        <q-btn flat color="primary" icon-right="fa-save" @click="addTime()">
+            {{ $t('buttons.save') }}
+        </q-btn>
+    </div>
+</template>
+
+<script>
+    import { mapState } from 'vuex'
+    import { QField, QSelect, QDatetime, QCardTitle,
+        QBtn, date } from 'quasar-framework'
+    import { showGlobalError } from '../../../helpers/ui'
+    export default {
+        name: 'csc-add-time-form',
+        props: [
+            'type',
+            'title',
+            'timeset'
+        ],
+        data () {
+            return {
+                selectOptions: [
+                    { label: this.$t('pages.callForward.times.sunday'), value: 1 },
+                    { label: this.$t('pages.callForward.times.monday'), value: 2 },
+                    { label: this.$t('pages.callForward.times.tuesday'), value: 3 },
+                    { label: this.$t('pages.callForward.times.wednesday'), value: 4 },
+                    { label: this.$t('pages.callForward.times.thursday'), value: 5 },
+                    { label: this.$t('pages.callForward.times.friday'), value: 6 },
+                    { label: this.$t('pages.callForward.times.saturday'), value: 7 }
+                ],
+                selectedWeekday: 1,
+                timeTo: '0:00',
+                timeFrom: '0:00'
+            }
+        },
+        components: {
+            QField,
+            QSelect,
+            QDatetime,
+            QCardTitle,
+            QBtn,
+            date
+        },
+        computed: {
+            ...mapState('callForward', {
+                activeTimeForm: 'activeTimeForm',
+                addTimeState: 'addTimeState'
+            }),
+            typeIsNew() {
+                return this.type === 'new';
+            },
+            timeFromConverted: {
+                get() {
+                    return date.buildDate({
+                        hours: this.timeFrom.split(':')[0],
+                        minutes: this.timeFrom.split(':')[1]
+                    });
+                },
+                set(value) {
+                    this.timeFrom = date.formatDate(value, 'HH:mm');
+                }
+            },
+            timeToConverted: {
+                get() {
+                    return date.buildDate({
+                        hours: this.timeTo.split(':')[0],
+                        minutes: this.timeTo.split(':')[1]
+                    });
+                },
+                set(value) {
+                    this.timeTo = date.formatDate(value, 'HH:mm');
+                }
+            },
+            timeHasError() {
+                let timeToHour = parseInt(this.timeTo.split(':')[0]);
+                let timeFromHour = parseInt(this.timeFrom.split(':')[0]);
+                let timeToMinute = parseInt(this.timeTo.split(':')[1]);
+                let timeFromMinute = parseInt(this.timeFrom.split(':')[1]);
+                let hoursReverse = timeToHour < timeFromHour || (timeToMinute < timeFromMinute && timeToHour === timeFromHour);
+                let sameTime = this.timeTo === this.timeFrom;
+                return hoursReverse || sameTime;
+            }
+        },
+        methods: {
+            resetTimes() {
+                this.timeTo = '0:00';
+                this.timeFrom = '0:00';
+                this.selectedWeekday = 1;
+            },
+            disableForm() {
+                this.resetTimes();
+                this.$store.commit('callForward/resetAlerts');
+                this.$store.commit('callForward/setActiveTimeForm', false);
+            },
+            addTime() {
+                if (this.type === "new" && !this.timeHasError) {
+                    this.$store.dispatch('callForward/createTimesetWithTime', {
+                        time: [{ from: this.timeFrom, to: this.timeTo}],
+                        weekday: this.selectedWeekday,
+                        name: this.timeset
+                    });
+                }
+                else if (this.type === "existing" && !this.timeHasError) {
+                    this.$store.dispatch('callForward/appendTimeToTimeset', {
+                        time: [{ from: this.timeFrom, to: this.timeTo}],
+                        weekday: this.selectedWeekday,
+                        name: this.timeset
+                    })
+                }
+                else {
+                    showGlobalError(this.$t('pages.callForward.times.selectValidTime'));
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+    @import '../../../themes/quasar.variables.styl'
+
+    .add-times
+        margin-right 30px
+        .title
+            color $primary
+            line-height $csc-subtitle-line-height
+            font-size $csc-subtitle-font-size
+            font-weight $csc-subtitle-font-weight
+</style>

src/components/pages/CallForward/CscCallForwardDestinations.vue

@@ -4,20 +4,17 @@
             :group="destinations.online"
             group-name="cfu"
             :timeset="timeset"
-            icon="signal_wifi_4_bar">
-        </csc-destinations>
+            icon="signal_wifi_4_bar" />
         <csc-destinations :title="$t('pages.callForward.whenBusy')"
             :group="destinations.busy"
             group-name="cfb"
             :timeset="timeset"
-            icon="record_voice_over">
-        </csc-destinations>
+            icon="record_voice_over" />
         <csc-destinations :title="$t('pages.callForward.whenOffline')"
             :group="destinations.offline"
             group-name="cfna"
             :timeset="timeset"
-            icon="signal_wifi_off">
-        </csc-destinations>
+            icon="signal_wifi_off" />
     </q-card>
 </template>
 

src/components/pages/CallForward/CscCallForwardTime.vue

@@ -1,5 +1,5 @@
 <template>
-    <q-field class="time-field">
+    <q-field>
         <div class="row no-wrap">
             <q-input class="col-7"
                 v-model="weekday"

src/components/pages/CallForward/CscCallForwardTimes.vue

@@ -1,32 +1,36 @@
 <template>
-    <q-card class="times-card">
+    <q-card class="times-card" flat>
         <q-card-title class="times-title">
             Times
         </q-card-title>
         <q-card-main>
-            <csc-call-forward-time v-if="times.length > 0" v-for="(time, index) in times" :time="time" :index="index">
-            </csc-call-forward-time>
+            <csc-call-forward-time v-if="times.length > 0" v-for="(time, index) in times"
+                :time="time" :index="index" />
+            <csc-add-time-form type="existing" :title="$t('pages.callForward.times.addCompanyHours')" timeset="Company Hours" ref="addFormExisting" />
         </q-card-main>
-        <q-card-actions>
-            <q-field v-if="!addFormEnabled">
+        <q-card-actions v-if="!activeTimeForm">
+            <q-field>
                 <q-btn color="primary"
                     class="add-time"
                     icon="fa-plus" flat
-                    @click="enableAddForm()">{{ $t('pages.callForward.times.addTimeButton') }}</q-btn>
+                    @click="enableAddForm()">
+                        {{ $t('pages.callForward.times.addTimeButton') }}
+                </q-btn>
             </q-field>
         </q-card-actions>
     </q-card>
 </template>
 
 <script>
+    import { mapState } from 'vuex'
     import CscCallForwardTime from './CscCallForwardTime'
+    import CscAddTimeForm from './CscAddTimeForm'
     import { QCard, QCardTitle, QCardMain, QCardActions,
         QField, QBtn } from 'quasar-framework'
     export default {
         name: 'csc-call-forward-times',
         props: [
-            'times',
-            'timeset'
+            'times'
         ],
         data () {
             return {
@@ -35,6 +39,7 @@
         },
         components: {
             CscCallForwardTime,
+            CscAddTimeForm,
             QCard,
             QCardTitle,
             QCardMain,
@@ -42,9 +47,17 @@
             QField,
             QBtn
         },
+        computed: {
+            ...mapState('callForward', {
+                activeTimeForm: 'activeTimeForm'
+            })
+        },
         methods: {
+            resetTimes() {
+                this.$refs.addFormExisting.resetTimes();
+            },
             enableAddForm() {
-                console.log('enableAddForm()');
+                this.$store.commit('callForward/setActiveTimeForm', true);
             }
         }
     }
@@ -55,25 +68,4 @@
 
     .times-title
         color $primary
-        padding-left 5px
-        padding-bottom 8px
-
-    .times-card
-         padding 0 15px
-        .q-field
-            margin 5px 0
-        .q-card-actions
-            padding-top 0
-            padding-left 10px
-        .q-card-main
-            padding-bottom 8px
-        .add-time
-            margin-left 14px
-        .row
-            p
-                font-size 0.9 rem
-                color $secondary
-                margin-bottom 0
-            .hour-label
-                text-align center
 </style>

src/components/pages/CallForward/CscDestinations.vue

@@ -16,12 +16,11 @@
                 <div v-else v-for="(destinationset, index) in group">
                     <csc-destination v-bind="destinationset"
                         :prev-dest-id="previousDestinationsetId(index)"
-                        :next-dest-id="nextDestinationsetId(index)">
-                    </csc-destination>
+                        :next-dest-id="nextDestinationsetId(index)"
+                    />
                 </div>
             </q-list>
-            <csc-add-destination-form v-bind="lastDestinationset">
-            </csc-add-destination-form>
+            <csc-add-destination-form v-bind="lastDestinationset" />
         </q-card-main>
     </div>
 </template>
@@ -31,7 +30,7 @@
     import CscDestination from './CscDestination'
     import CscAddDestinationForm from './CscAddDestinationForm'
     import { QCardTitle, QCardMain, QCardSeparator,
-        QItem, QList } from 'quasar-framework'
+        QItem, QList, QIcon } from 'quasar-framework'
     export default {
         name: 'csc-destinations',
         props: [
@@ -47,6 +46,7 @@
             QList,
             QItem,
             QCardSeparator,
+            QIcon,
             CscDestination,
             CscAddDestinationForm
         },

src/locales/en.json

@@ -158,12 +158,16 @@
                 "removeSuccessMessage": "Removed time entry for {day}",
                 "removeErrorMessage": "An error occured while trying to delete the time entry. Please try again.",
                 "removeTimesetSuccessMessage": "Removed timeset",
+                "resetErrorMessage": "An error occured while trying to reset the timesets. Please try again.",
+                "resetSuccessMessage": "Reset of timesets completed",
+                "addTimeSuccessMessage": "Created new timeset",
+                "addTimeErrorMessage": "An error occured while trying to create the timeset. Please try again.",
                 "noTimeSet": "no time set",
                 "addTimeButton": "Add Time",
-                "companyHoursIncompatible":  "The Company Hours timeset contains incompatible values.",
-                "companyHoursNotDefined":  "The Company Hours timeset is not defined.",
-                "companyHoursDuplicate":  "More than one Company Hours timeset exists.",
-                "companyHoursReverse":  "The Company Hours timeset contain reverse order of values.",
+                "companyHoursIncompatible":  "The Company Hours timeset contains incompatible values. You can resolve this by resetting the company hours timeset.",
+                "companyHoursNotDefined":  "The Company Hours timeset is not defined. You need to create one to be able to define call forward destinations.",
+                "companyHoursDuplicate":  "More than one Company Hours timeset exists. You can resolve this by resetting the company hours timesets.",
+                "companyHoursReverse":  "The Company Hours timeset contain reverse order of values. You can resolve this by resetting the company hours timeset.",
                 "weekday": "Weekday",
                 "from": "From",
                 "to": "To",
@@ -173,7 +177,10 @@
                 "thursday": "Thursday",
                 "friday": "Friday",
                 "saturday": "Saturday",
-                "sunday": "Sunday"
+                "sunday": "Sunday",
+                "addCompanyHours": "Add Company Hours",
+                "resetCompanyHours": "Reset Company Hours",
+                "selectValidTime": "Select valid time"
             }
         },
         "home": {

src/store/call-forward.js

@@ -2,6 +2,7 @@
 'use strict';
 
 import _ from 'lodash';
+import { i18n } from '../i18n';
 import { getSourcesets,
     getDestinationsets,
     getTimesets,
@@ -16,9 +17,12 @@ import { getSourcesets,
     moveDestinationDown,
     loadTimesetTimes,
     deleteTimeFromTimeset,
-    deleteTimesetById } from '../api/call-forward';
+    deleteTimesetById,
+    resetTimesetByName,
+    createTimesetWithTime,
+    appendTimeToTimeset } from '../api/call-forward';
 
-const DestinationState = {
+const RequestState = {
     button: 'button',
     requesting: 'requesting',
     succeeded: 'succeeded',
@@ -37,16 +41,20 @@ export default {
             busy: [],
             offline: []
         },
-        removeDestinationState: DestinationState.button,
+        removeDestinationState: RequestState.button,
         removeDestinationError: null,
         lastRemovedDestination: null,
-        addDestinationState: DestinationState.button,
+        addDestinationState: RequestState.button,
         addDestinationError: null,
         lastAddedDestination: null,
-        changeDestinationState: DestinationState.button,
+        changeDestinationState: RequestState.button,
         changeDestinationError: null,
-        removeTimeState: DestinationState.button,
+        removeTimeState: RequestState.button,
         removeTimeError: null,
+        resetTimeState: RequestState.button,
+        resetTimeError: null,
+        addTimeState: RequestState.button,
+        addTimeError: null,
         lastRemovedDay: null,
         activeForm: '',
         formType: '',
@@ -63,7 +71,14 @@ export default {
         timesetExists: true,
         timesetHasReverse: false,
         timesetHasDuplicate: false,
-        timesetId: null
+        timesetId: null,
+        activeTimeForm: false,
+        showAlerts: {
+            duplicate: true,
+            compatible: true,
+            reverse: true,
+            defined: true
+        }
     },
     getters: {
         hasFaxCapability(state, getters, rootState, rootGetters) {
@@ -92,6 +107,17 @@ export default {
         },
         getTimesetTimesLength(state) {
             return state.timesetTimes.length;
+        },
+        addTimeError(state) {
+            return state.addTimeError ||
+                i18n.t('pages.callForward.times.addTimeErrorMessage');
+        },
+        resetTimeError(state) {
+            return state.resetTimeError ||
+                i18n.t('pages.callForward.times.resetErrorMessage');
+        },
+        showDefinedAlert(state) {
+            return !state.timesetExists && !state.activeTimeForm && state.addTimeState !== 'succeeded';
         }
     },
     mutations: {
@@ -141,56 +167,56 @@ export default {
             state.formType = '';
             state.destinationsetId = '';
             state.groupName = '';
-            state.addDestinationState = DestinationState.button;
-            state.changeDestinationState = DestinationState.button;
-            state.removeDestinationState = DestinationState.button;
+            state.addDestinationState = RequestState.button;
+            state.changeDestinationState = RequestState.button;
+            state.removeDestinationState = RequestState.button;
         },
         addDestinationRequesting(state) {
-            state.addDestinationState = DestinationState.requesting;
+            state.addDestinationState = RequestState.requesting;
             state.addDestinationError = null;
         },
         addDestinationSucceeded(state) {
-            state.addDestinationState = DestinationState.succeeded;
+            state.addDestinationState = RequestState.succeeded;
             state.addDestinationError = null;
         },
         addDestinationFailed(state, error) {
-            state.addDestinationState = DestinationState.failed;
+            state.addDestinationState = RequestState.failed;
             state.addDestinationError = error;
         },
         changeDestinationRequesting(state) {
-            state.changeDestinationState = DestinationState.requesting;
+            state.changeDestinationState = RequestState.requesting;
             state.changeDestinationError = null;
         },
         changeDestinationSucceeded(state) {
-            state.changeDestinationState = DestinationState.succeeded;
+            state.changeDestinationState = RequestState.succeeded;
             state.changeDestinationError = null;
         },
         changeDestinationFailed(state, error) {
-            state.changeDestinationState = DestinationState.failed;
+            state.changeDestinationState = RequestState.failed;
             state.changeDestinationError = error;
         },
         removeDestinationRequesting(state) {
-            state.removeDestinationState = DestinationState.requesting;
+            state.removeDestinationState = RequestState.requesting;
             state.removeDestinationError = null;
         },
         removeDestinationSucceeded(state) {
-            state.removeDestinationState = DestinationState.succeeded;
+            state.removeDestinationState = RequestState.succeeded;
             state.removeDestinationError = null;
         },
         removeDestinationFailed(state, error) {
-            state.removeDestinationState = DestinationState.failed;
+            state.removeDestinationState = RequestState.failed;
             state.removeDestinationError = error;
         },
         removeTimeRequesting(state) {
-            state.removeTimeState = DestinationState.requesting;
+            state.removeTimeState = RequestState.requesting;
             state.removeTimeError = null;
         },
         removeTimeSucceeded(state) {
-            state.removeTimeState = DestinationState.succeeded;
+            state.removeTimeState = RequestState.succeeded;
             state.removeTimeError = null;
         },
         removeTimeFailed(state, error) {
-            state.removeTimeState = DestinationState.failed;
+            state.removeTimeState = RequestState.failed;
             state.removeTimeError = error;
         },
         setLastRemovedDay(state, value) {
@@ -203,6 +229,54 @@ export default {
             state.timesetHasReverse = result.timesetHasReverse;
             state.timesetHasDuplicate = result.timesetHasDuplicate;
             state.timesetId = result.timesetId;
+        },
+        resetTimeRequesting(state) {
+            state.resetTimeState = RequestState.requesting;
+            state.resetTimeError = null;
+        },
+        resetTimeSucceeded(state) {
+            state.resetTimeState = RequestState.succeeded;
+            state.resetTimeError = null;
+        },
+        resetTimeFailed(state, error) {
+            state.resetTimeState = RequestState.failed;
+            state.resetTimeError = error;
+        },
+        addTimeRequesting(state) {
+            state.addTimeState = RequestState.requesting;
+            state.addTimeError = null;
+        },
+        addTimeSucceeded(state) {
+            state.addTimeState = RequestState.succeeded;
+            state.addTimeError = null;
+        },
+        addTimeFailed(state, error) {
+            state.addTimeState = RequestState.failed;
+            state.addTimeError = error;
+        },
+        setActiveTimeForm(state, value) {
+            state.activeTimeForm = value;
+        },
+        resetAlerts(state) {
+            state.showAlerts.duplicate = true;
+            state.showAlerts.compatible = true;
+            state.showAlerts.reverse = true;
+            state.showAlerts.defined = true;
+        },
+        setShowAlertDuplicate(state, value) {
+            state.showAlerts.duplicate = value;
+        },
+        setShowAlertCompatible(state, value) {
+            state.showAlerts.compatible = value;
+        },
+        setShowAlertReverse(state, value) {
+            state.showAlerts.reverse = value;
+        },
+        setShowAlertDefined(state, value) {
+            state.showAlerts.defined = value;
+        },
+        resetAddTimeState(state) {
+            state.addTimeState = RequestState.button;
         }
     },
     actions: {
@@ -402,27 +476,6 @@ export default {
                 });
             }
         },
-        setActiveForm(context, value) {
-            context.commit('setActiveForm', value);
-        },
-        setFormType(context, value) {
-            context.commit('setFormType', value);
-        },
-        setDestinationsetId(context, value) {
-            context.commit('setDestinationsetId', value);
-        },
-        setGroupName(context, value) {
-            context.commit('setGroupName', value);
-        },
-        setPriority(context, value) {
-            context.commit('setPriority', value);
-        },
-        resetFormState(context) {
-            context.commit('resetFormState');
-        },
-        resetDestinationState(context) {
-            context.commit('resetDestinationState');
-        },
         loadTimesetTimes(context, options) {
             loadTimesetTimes({
                 timeset: options.timeset,
@@ -441,28 +494,64 @@ export default {
                 delete time.from;
                 delete time.to;
             });
-            return new Promise(() => {
-                deleteTimeFromTimeset({
-                    subscriberId: context.getters.getSubscriberId,
-                    timesetId: context.getters.getTimesetId,
-                    times: clonedTimes
-                    }).then(() => {
-                        context.commit('setLastRemovedDay', options.removedDay);
-                        context.commit('removeTimeSucceeded');
-                    }).catch((err) => {
-                        context.commit('removeTimeFailed', err.message);
-                    });
-            });
+            deleteTimeFromTimeset({
+                subscriberId: context.getters.getSubscriberId,
+                timesetId: context.getters.getTimesetId,
+                times: clonedTimes
+                }).then(() => {
+                    context.commit('setLastRemovedDay', options.removedDay);
+                    context.commit('removeTimeSucceeded');
+                }).catch((err) => {
+                    context.commit('removeTimeFailed', err.message);
+                });
         },
         deleteTimesetById(context) {
             context.commit('removeTimeRequesting');
-            return new Promise(() => {
-                deleteTimesetById(context.getters.getTimesetId).then(() => {
-                        context.commit('removeTimeSucceeded');
-                    }).catch((err) => {
-                        context.commit('removeTimeFailed', err.message);
-                    });
-            });
+            deleteTimesetById(context.getters.getTimesetId).then(() => {
+                    context.commit('resetAddTimeState');
+                    context.commit('setActiveTimeForm', false);
+                    context.commit('removeTimeSucceeded');
+                }).catch((err) => {
+                    context.commit('removeTimeFailed', err.message);
+                });
+        },
+        resetTimesetByName(context, name) {
+            context.commit('resetTimeRequesting');
+            resetTimesetByName({
+                id: context.getters.getSubscriberId,
+                name: name
+                }).then(() => {
+                    context.commit('resetAddTimeState');
+                    context.commit('resetTimeSucceeded');
+                }).catch((err) => {
+                    context.commit('resetTimeFailed', err.message);
+                });
+        },
+        createTimesetWithTime(context, options) {
+            context.commit('addTimeRequesting');
+            createTimesetWithTime({
+                    time: options.time,
+                    weekday: options.weekday,
+                    name: options.name,
+                    subscriberId: context.getters.getSubscriberId
+                }).then(() => {
+                    context.commit('addTimeSucceeded');
+                }).catch((err) => {
+                    context.commit('addTimeFailed', err.message);
+                });
+        },
+        appendTimeToTimeset(context, options) {
+            context.commit('addTimeRequesting');
+            appendTimeToTimeset({
+                    time: options.time,
+                    weekday: options.weekday,
+                    id: context.getters.getTimesetId,
+                    subscriberId: context.getters.getSubscriberId
+                }).then(() => {
+                    context.commit('addTimeSucceeded');
+                }).catch((err) => {
+                    context.commit('addTimeFailed', err.message);
+                });
         }
     }
 };

src/themes/app.variables.styl

@@ -37,3 +37,7 @@ $layout-aside-right-width = 320px
 $layout-footer-shadow = $no-shadow
 
 $tooltip-background = $primary
+
+$csc-subtitle-font-size = 18px
+$csc-subtitle-line-height = 2rem
+$csc-subtitle-font-weight = 400

t/api/call-forward.js

@@ -8,9 +8,8 @@ import { getMappings, getSourcesets, getTimesets,
     deleteDestinationFromDestinationset,
     addDestinationToDestinationset,
     convertTimesetToWeekdays,
-    getHoursFromRange,
-    getDaysFromRange,
-    deleteTimeFromTimeset } from '../../src/api/call-forward';
+    deleteTimeFromTimeset,
+    convertAddTime } from '../../src/api/call-forward';
 import { assert } from 'chai';
 
 Vue.use(VueResource);
@@ -686,4 +685,166 @@ describe('CallForward', function() {
 
     });
 
+    it('should attempt to convert added time, where both to and from are full hours', function(){
+
+        let options = {
+            time: {
+                from: "02:00",
+                to: "04:00"
+            },
+            weekday: 1
+        };
+        let data = [{
+            hour: "2-3",
+            wday: 1
+        }];
+
+        assert.deepEqual(convertAddTime(options), data);
+
+    });
+
+    it('should attempt to convert added time, where both to and from has same hour', function(){
+
+        let options = {
+            time: {
+                from: "06:00",
+                to: "06:16"
+            },
+            weekday: 1
+        };
+        let data = [{
+            hour: "6",
+            minute: "0-15",
+            wday: 1
+        }];
+
+        assert.deepEqual(convertAddTime(options), data);
+
+    });
+
+    it('should attempt to convert added time, where to is not zero and from is next full hour', function(){
+
+        let options = {
+            time: {
+                from: "04:15",
+                to: "05:00"
+            },
+            weekday: 1
+        };
+        let data = [{
+            hour: "4",
+            minute: "15-59",
+            wday: 1
+        }];
+
+        assert.deepEqual(convertAddTime(options), data);
+
+    });
+
+    it('should attempt to convert added time, where both to and from is not zero and to hour is one larger than from hour', function(){
+
+        let options = {
+            time: {
+                from: "04:15",
+                to: "05:20"
+            },
+            weekday: 1
+        };
+        let data = [
+            {
+                hour: "4",
+                minute: "15-59",
+                wday: 1
+            },
+            {
+                hour: "5",
+                minute: "0-19",
+                wday: 1
+            }
+        ];
+
+        assert.deepEqual(convertAddTime(options), data);
+
+    });
+
+    it('should attempt to convert added time, where both to and from is not zero', function(){
+
+        let options = {
+            time: {
+                from: "04:20",
+                to: "06:40"
+            },
+            weekday: 1
+        };
+        let data = [
+            {
+                hour: "4",
+                minute: "20-59",
+                wday: 1
+            },
+            {
+                hour: "5-5",
+                wday: 1
+            },
+            {
+                hour: "6",
+                minute: "0-39",
+                wday: 1
+            }
+        ];
+
+        assert.deepEqual(convertAddTime(options), data);
+
+    });
+
+    it('should attempt to convert added time, where from minute not zero and to minute zero', function(){
+
+        let options = {
+            time: {
+                from: "04:15",
+                to: "06:00"
+            },
+            weekday: 1
+        };
+        let data = [
+            {
+                hour: "4",
+                minute: "15-59",
+                wday: 1
+            },
+            {
+                hour: "5-5",
+                wday: 1
+            }
+        ];
+
+        assert.deepEqual(convertAddTime(options), data);
+
+    });
+
+    it('should attempt to convert added time, where from minute zero and to minute not zero', function(){
+
+        let options = {
+            time: {
+                from: "04:00",
+                to: "06:20"
+            },
+            weekday: 1
+        };
+        let data = [
+            {
+                hour: "5-5",
+                wday: 1
+            },
+            {
+                hour: "6",
+                minute: "0-19",
+                wday: 1
+            }
+        ];
+
+        assert.deepEqual(convertAddTime(options), data);
+
+    });
+
 });