TT#23168 CSC Reminder module

Change-Id: Idb195edd13b9b1bc75dc130b31d5a6c6e29275bf

package.json

@@ -41,6 +41,7 @@
     "colors": "^1.1.2",
     "connect-history-api-fallback": "^1.1.0",
     "css-loader": "^0.28.7",
+    "dateformat": "3.0.2",
     "es6-promise": "^4.1.1",
     "eslint": "^4.8.0",
     "eslint-config-standard": "^10.2.1",

src/api/reminder.js

@@ -0,0 +1,68 @@
+import Vue from 'vue';
+
+export function createReminder(id) {
+    var data = {
+        subscriber_id: id,
+        time: '00:00',
+        recur: 'never',
+        active: false
+    };
+    return new Promise((resolve, reject) => {
+        Vue.http.post('/api/reminders/', data).then((result) => {
+            var reminderID = result.headers.map.location[0].split('/')[3]; // another option would be to refetch api/reminders
+            resolve(reminderID);
+        }).catch((err) => {
+            reject(err);
+        });
+    });
+}
+
+export function getReminder(id, value) {
+    return new Promise((resolve, reject) => {
+        Vue.http.get('/api/reminders/', {
+            params: {
+                supplier_id: id
+            }
+        }).then((result) => {
+            resolve(JSON.parse(result.body));
+        }).catch((err) => {
+            reject(err);
+        });
+    });
+}
+
+export function enableReminder(id) {
+    return patchReminder(id, '/active', true);
+}
+
+export function disableReminder(id) {
+    return patchReminder(id, '/active', false);
+}
+
+export function setTime(id, time) {
+    return patchReminder(id, '/time', time);
+}
+
+export function setRecurrence(id, recurrence) {
+    return patchReminder(id, '/recur', recurrence);
+}
+
+function patchReminder(id, field, value) {
+    return new Promise((resolve, reject) => {
+        var data = [{
+            "op": "replace",
+            "path": field,
+            "value": value
+        }];
+        var patchHeaders = {
+            headers: {
+                'Content-Type': 'application/json-patch+json'
+            }
+        };
+        Vue.http.patch('/api/reminders/' + id, data, patchHeaders).then((result) => {
+            resolve();
+        }).catch((err) => {
+            reject(err);
+        });
+    });
+}

src/components/pages/Reminder/Reminder.vue

@@ -0,0 +1,125 @@
+<template>
+<page title="Reminder">
+    <q-field class="reminder-field">
+        <q-toggle :label="( 'Reminder' + (active ? ' enabled':' disabled'))" @input="toggleReminder()" v-model="active" />
+    </q-field>
+    <q-field class="reminder-field">
+        <q-datetime type="time" :disable="!active" no-clear=true v-model="timeConverted" placeholder="Time of the day" @change="changeTime()" />
+    </q-field>
+    <q-field class="reminder-field">
+        <q-option-group :disable="!active" color="positive" type="radio" v-model="recurrence" @change="changeRecurrence()" :options="[
+      { label: 'Only once', value: 'never' },
+      { label: 'On weekdays', value: 'weekdays' },
+      { label: 'Always', value: 'always' }
+    ]" />
+    </q-field>
+</page>
+</template>
+
+<script>
+import {
+    startLoading,
+    stopLoading,
+    showGlobalError
+} from '../../../helpers/ui'
+import Page from '../../Page'
+import {
+    QField,
+    QToggle,
+    QDatetime,
+    QOptionGroup,
+    date,
+    Toast
+} from 'quasar-framework'
+export default {
+    data() {
+        return {
+            active: false,
+            time: undefined,
+            recurrence: 'never'
+        }
+    },
+    mounted() {
+        this.$store.dispatch('reminder/loadReminder').then(() => {
+            this.active = this.$store.state.reminder.active;
+            this.time = this.$store.state.reminder.time;
+            this.recurrence = this.$store.state.reminder.recurrence;
+        }).catch((err) => {
+            console.log(err);
+        });
+    },
+    components: {
+        Page,
+        QToggle,
+        Toast,
+        QDatetime,
+        QOptionGroup,
+        QField
+    },
+    computed: {
+        timeConverted: {
+            get: function() {
+                var computedTime;
+                if (this.time) {
+                    computedTime = date.buildDate({
+                        hours: this.time.split(':')[0],
+                        minutes: this.time.split(':')[1],
+                        seconds: '00'
+                    });
+                } else {
+                    computedTime = date.buildDate({
+                        hours: '00',
+                        minutes: '00',
+                        seconds: '00'
+                    });
+                }
+                return computedTime;
+            },
+            set: function(newValue) {
+                this.time = date.formatDate(newValue, 'HH:mm:ss');
+            }
+        }
+    },
+    methods: {
+        toggleReminder() {
+            this.$store.dispatch('reminder/toggleReminder', this.active).then(() => {
+                Toast.create({
+                    html: 'Reminder ' + ((this.active) ? 'enabled' : 'disabled'),
+                    color: 'white',
+                    bgColor: '#68A44E'
+                });
+            }).catch((err) => {
+                console.log(err);
+            });
+        },
+        changeTime() {
+            this.$store.dispatch('reminder/changeTime', this.time).then(() => {
+                Toast.create({
+                    html: 'Time updated!',
+                    color: 'white',
+                    bgColor: '#68A44E'
+                });
+            }).catch((err) => {
+                console.log(err);
+            });
+        },
+        changeRecurrence() {
+            this.$store.dispatch('reminder/changeRecurrence', this.recurrence).then(() => {
+                Toast.create({
+                    html: 'Recurrence updated!',
+                    color: 'white',
+                    bgColor: '#68A44E'
+                });
+            }).catch((err) => {
+                console.log(err);
+            });
+        }
+    }
+}
+</script>
+
+<style>
+.reminder-field {
+    margin-bottom: 40px;
+}
+</style>

src/routes.js

@@ -34,7 +34,7 @@ export default [
             },
             {
                 path: 'reminder',
-                component: require('./components/pages/Reminder').default},
+                component: require('./components/pages/Reminder/Reminder').default},
             {
                 path: 'pbx-configuration/groups',
                 component: require('./components/pages/PbxConfiguration/Groups').default

src/store/index.js

@@ -7,6 +7,7 @@ import Vuex from 'vuex'
 import UserModule from './user'
 import PbxGroupsModule from './pbx-groups'
 import CallBlockingModule from './call-blocking'
+import ReminderModule from './reminder'
 
 var rtcEngineClient = null;
 var rtcEngineNetwork = null;
@@ -17,7 +18,8 @@ export const store = new Vuex.Store({
     modules: {
         user: UserModule,
         pbxGroups: PbxGroupsModule,
-        callBlocking: CallBlockingModule
+        callBlocking: CallBlockingModule,
+        reminder: ReminderModule
     },
     state: {
         rtcEngineConnected: false

src/store/reminder.js

@@ -0,0 +1,102 @@
+'use strict';
+
+import _ from 'lodash';
+import {
+    getReminder,
+    createReminder,
+    enableReminder,
+    disableReminder,
+    setTime,
+    setRecurrence
+} from '../api/reminder';
+
+
+export default {
+    namespaced: true,
+    state: {},
+    getters: {},
+    mutations: {
+        enableReminder(state) {
+            state.active = true;
+        },
+        disableReminder(state) {
+            state.active = false;
+        },
+        setTime(state, newTime) {
+            state.time = newTime;
+        },
+        setRecurrence(state, recurrence) {
+            state.recurrence = recurrence;
+        },
+        reminderLoaded(state, options) {
+            state.reminderID = options.id;
+            state.active = options.active;
+            state.time = options.time;
+            state.recurrence = options.recur;
+        },
+        reminderCreated(state, reminderID) {
+            state.reminderID = reminderID;
+        }
+    },
+    actions: {
+        loadReminder(context) {
+            return new Promise((resolve, reject) => {
+                getReminder(localStorage.getItem('subscriberId')).then((result) => {
+                    if (result.total_count > 0) {
+                        context.commit('reminderLoaded', result._embedded['ngcp:reminders'][0]); // open to suggestions on how to extract data here
+                    }else{
+                        // If no default reminder is set, then we need to create it.
+                        createReminder(localStorage.getItem('subscriberId')).then((result) => {
+                            context.commit('reminderCreated', result);
+                            resolve();
+                        }).catch((err) => {
+                            reject(err);
+                        });
+                    }
+                    resolve();
+                }).catch((err) => {
+                    reject(err);
+                });
+            });
+        },
+        toggleReminder(context, enabled) {
+            return new Promise((resolve, reject) => {
+                if(enabled === true){
+                    enableReminder(context.state.reminderID).then((result) => {
+                        context.commit('enableReminder');
+                        resolve();
+                    }).catch((err) => {
+                        reject(err);
+                    });
+                }else{
+                    disableReminder(context.state.reminderID).then((result) => {
+                        context.commit('disableReminder');
+                        resolve();
+                    }).catch((err) => {
+                        reject(err);
+                    });
+                }
+            });
+        },
+        changeTime(context, time) {
+            return new Promise((resolve, reject) => {
+                setTime(context.state.reminderID, time).then((result) => {
+                    context.commit('setTime', time);
+                    resolve();
+                }).catch((err) => {
+                    reject(err);
+                });
+            });
+        },
+        changeRecurrence(context, recurrence) {
+            return new Promise((resolve, reject) => {
+                setRecurrence(context.state.reminderID, recurrence).then((result) => {
+                    context.commit('setRecurrence', recurrence);
+                    resolve();
+                }).catch((err) => {
+                    reject(err);
+                });
+            });
+        }
+    }
+};