TT#17150 Csc reminder inactive/active and API

What has been done:
 1. When not connected to API, the toggle icon labels have wrong
    color, should be reverse. Works when API is connected. Investigate
 2. Implement ability to edit the reminder even if it's inactive
 3. Grab inactive/active status from API instead of creating dummy
    value in model
 4. Remove seconds in the dropdown and input
 5. Add save button and logic
 6. Creation of default reminder in case does not exist for the
    user

Change-Id: Id224109af714532f576b870a3624099f8a6ee972
changes/74/14074/7
Robert Axelsen 8 years ago committed by Carlo
parent d46c3967ae
commit 17498c91ee

@ -18,45 +18,63 @@ Ext.define('NgcpCsc.model.Reminder', {
}, {
name: "recur",
mapping: function(data) {
if(data && data._embedded && data._embedded['ngcp:reminders'] && data._embedded['ngcp:reminders'].length > 0){
if (data && data._embedded && data._embedded['ngcp:reminders'] && data._embedded['ngcp:reminders'].length > 0) {
return data._embedded['ngcp:reminders'][0].recur;
}
}
}, {
name: "time",
type: 'date',
dateFormat: 'H:i:s',
dateFormat: 'H:i',
mapping: function(data) {
if(data && data._embedded && data._embedded['ngcp:reminders'] && data._embedded['ngcp:reminders'].length > 0){
return data._embedded['ngcp:reminders'][0].time;
if (data && data._embedded && data._embedded['ngcp:reminders'] && data._embedded['ngcp:reminders'].length > 0) {
return data._embedded['ngcp:reminders'][0].time.substr(0,5);
}
}
}, {
name: "reminder_status",
name: "active",
mapping: function(data) {
return true;
if (data && data._embedded && data._embedded['ngcp:reminders'] && data._embedded['ngcp:reminders'].length > 0) {
return data._embedded['ngcp:reminders'][0].active;
} else {
return false;
}
}
}, {
name: "subscriber_id",
mapping: function(data) {
if(data && data._embedded && data._embedded['ngcp:reminders'] && data._embedded['ngcp:reminders'].length > 0){
if (data && data._embedded && data._embedded['ngcp:reminders'] && data._embedded['ngcp:reminders'].length > 0) {
return data._embedded['ngcp:reminders'][0].subscriber_id;
}
}
}],
// this replace the temprary Model ID in VM links
onLoad: function() {
if(this.data && this.data._embedded && this.data._embedded['ngcp:reminders'] && this.data._embedded['ngcp:reminders'].length > 0){
if (this.data && this.data._embedded && this.data._embedded['ngcp:reminders'] && this.data._embedded['ngcp:reminders'].length > 0) {
this.set("id", this.data._embedded['ngcp:reminders'][0].id);
this.commit();
}else{
// in case there are no reminders in DB for the current subscriber,
// a default one needs to be created
Ext.Ajax.request({
url: '/api/reminders/',
method: 'POST',
jsonData: {
subscriber_id: localStorage.getItem('subscriber_id'),
time: '00:00',
recur : 'never'
},
success: function(p1, p2){
this.load(); // in order to fetch the id of the newly created reminder
},
scope: this
});
}
},
proxy: {
type: 'ngcp-api',
route: 'reminders',
params: 'subscriber_id=' + localStorage.getItem('subscriber_id') // this must exist in /api/subscribers/ response
params: 'subscriber_id=' + localStorage.getItem('subscriber_id')
}
});

@ -2133,6 +2133,13 @@ Ext.define('Ngcp.csc.locales', {
fr: 'Successfully saved.',
sp: 'Successfully saved.'
},
no_changes: {
en: 'No changes to save.',
it: 'No changes to save.',
de: 'No changes to save.',
fr: 'No changes to save.',
sp: 'No changes to save.'
},
save_unsuccess: {
en: 'Something went wrong. Please retry later',
it: 'Something went wrong. Please retry later',

@ -27,3 +27,10 @@
display: inline;
}
}
.reminder-form {
.x-form-item-label-text,
.x-form-cb-label {
color: grey;
}
}

@ -17,7 +17,6 @@ Ext.define('NgcpCsc.view.pages.reminder.Reminder', {
initComponent: function() {
var vm = this.getViewModel();
var submoduleStates = vm.get('reminder.reminder_status') ? [' grey', 'on', ''] : ['', 'off', ' grey'];
this.dockedItems = [{
xtype: 'toolbar',
@ -36,33 +35,40 @@ Ext.define('NgcpCsc.view.pages.reminder.Reminder', {
{
xtype: 'panel',
margin: '0 0 15 0',
html: '<div id="toggleReminderActive" class="toggle-section">' +
'<span id="toggleTextPrefixReminder" class="toggle-prefix' + submoduleStates[0] + '">' + Ngcp.csc.locales.reminder.active[localStorage.getItem('languageSelected')] + '</span>' +
'<div class="toggle-icon" data-callback="toggleReminderActive"><i id="iconAllowBlock-reminder" class="pointer toggle-icon ' + Ngcp.csc.icons.toggle[submoduleStates[1] + '2x'] + '" aria-hidden="true" data-qtip="' + Ngcp.csc.locales.reminder.activate_or_deactivate[submoduleStates[1]][localStorage.getItem('languageSelected')] + '"></i></div>' +
'<span id="toggleTextSuffixReminder" class="toggle-suffix' + submoduleStates[2] + '">' + Ngcp.csc.locales.reminder.inactive[localStorage.getItem('languageSelected')] + '</span>' +
'</div>'
bind: {
html: '<div id="toggleReminderActive" class="toggle-section">' +
'<span id="toggleTextPrefixReminder" class="toggle-prefix{reminder.active ? "" : " grey"}">' + Ngcp.csc.locales.reminder.active[localStorage.getItem('languageSelected')] + '</span>' +
// XXX: Cvenusino: When adding the new reminder.active
// value to the model, I discovered a bug with
// submoduleStates array always ending up with same
// initial value, as the variable was initialized before
// the API request had returned a callback and created a
// value. I tried to use "autoLoad: true" without any
// success. I adopted the method below instead, but now
// we aren't able to use localization on initial render.
// Do you have any suggestions on how to better solve
// this?
'<div class="toggle-icon" data-callback="toggleReminderActive"><i id="iconAllowBlock-reminder" class="pointer toggle-icon x-fa fa-toggle-{reminder.active ? "off" : "on"} fa-2x" aria-hidden="true" data-qtip="{reminder.active ? "Set reminder to inactive" : "Set reminder to active"}"></i></div>' +
'<span id="toggleTextSuffixReminder" class="toggle-suffix{reminder.active ? " grey" : ""}">' + Ngcp.csc.locales.reminder.inactive[localStorage.getItem('languageSelected')] + '</span>' +
'</div>'
}
}, {
xtype: 'form',
reference: 'reminderForm',
layout: 'responsivecolumn',
defaults:{
listeners: {
change: 'saveReminder',
blur: 'saveReminder'
}
},
userCls: 'reminder-form',
items: [{
flex: 1,
userCls: 'small-100 big-50',
xtype: 'timefield',
fieldLabel: Ngcp.csc.locales.reminder.time[localStorage.getItem('languageSelected')],
format: 'H:i:s',
minValue: '00:00:00',
maxValue: '23:55:00',
increment: 5,
format: 'H:i',
minValue: '00:00',
maxValue: '23:45',
increment: 15,
editable: true,
bind: {
value: '{reminder.time}',
disabled: '{!reminder.reminder_status}'
value: '{reminder.time}'
}
}, {
flex: 1,
@ -74,8 +80,7 @@ Ext.define('NgcpCsc.view.pages.reminder.Reminder', {
columns: 1,
simpleValue: true,
bind: {
value: '{reminder.recur}',
disabled: '{!reminder.reminder_status}'
value: '{reminder.recur}'
},
defaults: {
name: 'value'
@ -90,6 +95,10 @@ Ext.define('NgcpCsc.view.pages.reminder.Reminder', {
boxLabel: Ngcp.csc.locales.reminder.always[localStorage.getItem('languageSelected')],
inputValue: 'always'
}]
}, {
xtype: 'button',
html: Ngcp.csc.locales.common.save_caps[localStorage.getItem('languageSelected')],
handler: 'saveReminder'
}]
}]
}]

@ -2,22 +2,10 @@ Ext.define('NgcpCsc.view.pages.reminder.ReminderController', {
extend: 'Ext.app.ViewController',
alias: 'controller.reminder',
clickActiveInactiveButton: function() {
var vm = this.getViewModel();
var currentReminderIsMode = vm.get('reminder.reminder_status');
switch (currentReminderIsMode) {
case false:
this.fireEvent('showmessage', true, Ngcp.csc.locales.reminder.reminder_set_to_inactive[localStorage.getItem('languageSelected')]);
break;
case true:
this.fireEvent('showmessage', true, Ngcp.csc.locales.reminder.reminder_set_to_active[localStorage.getItem('languageSelected')]);
break;
};
},
saveReminder: function() {
var me = this;
var reminderRec = this.getViewModel().get('reminder');
var totalCount = reminderRec.get('total_count');
Ext.defer(function() {
if (reminderRec.dirty) {
reminderRec.save({
@ -31,8 +19,10 @@ Ext.define('NgcpCsc.view.pages.reminder.ReminderController', {
// do something whether the save succeeded or failed
}
});
} else {
me.fireEvent('showmessage', false, Ngcp.csc.locales.common.no_changes[localStorage.getItem('languageSelected')]);
}
}, 1);
}, 1);
},
onIconClicked: function(event, el) {
@ -48,17 +38,22 @@ Ext.define('NgcpCsc.view.pages.reminder.ReminderController', {
var dataset = event.target.dataset;
var prefixElementClassList = document.getElementById('toggleTextPrefixReminder').classList;
var suffixElementClassList = document.getElementById('toggleTextSuffixReminder').classList;
var currentValue = vm.get('reminder.reminder_status');
var currentValue = vm.get('reminder.active');
var newValueToUse = currentValue ? false : true;
var currentFontValueSuffix = currentValue ? 'off' : 'on';
var newFontClassSuffix = currentValue ? 'on' : 'off';
vm.set('reminder.reminder_status', newValueToUse);
var reminderForm = this.lookupReference('reminderForm');
vm.set('reminder.active', newValueToUse);
classList.remove('fa-toggle-' + currentFontValueSuffix);
classList.add('fa-toggle-' + newFontClassSuffix);
prefixElementClassList.toggle('grey');
suffixElementClassList.toggle('grey');
dataset.qtip = Ngcp.csc.locales.reminder.activate_or_deactivate[newFontClassSuffix][localStorage.getItem('languageSelected')];
this.clickActiveInactiveButton();
if (reminderForm.getUserCls() == 'reminder-form') {
reminderForm.setUserCls(null);
} else {
reminderForm.setUserCls('reminder-form');
}
}
});

@ -1,11 +1,15 @@
Ext.define('NgcpCsc.view.pages.account.ReminderModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.reminder',
session: true,
links: {
reminder: {
type: 'NgcpCsc.model.Reminder',
id: Ext.id()
}
}
});

Loading…
Cancel
Save