Incremental step toward removing answer stylers
The VFormat system fulfills the same purpose. This is a small step toward removing that system; it will first attempt formatting, and fall back to any available answer stylers. The validator/formatters will be extracted into liza.master
commit
30b33e56c9
|
@ -20,6 +20,7 @@
|
|||
"devDependencies": {
|
||||
"chai": ">=1.9.1",
|
||||
"mocha": ">=1.18.2",
|
||||
"sinon": ">=1.17.4",
|
||||
"es6-promise": "~3"
|
||||
},
|
||||
|
||||
|
|
|
@ -84,44 +84,6 @@ module.exports = Class( 'ElementStyler',
|
|||
|
||||
|
||||
_answerStyles: {
|
||||
'currency': function( value )
|
||||
{
|
||||
var pre = '$';
|
||||
|
||||
if ( !value )
|
||||
{
|
||||
value = 0;
|
||||
}
|
||||
else if ( value < 0 )
|
||||
{
|
||||
value *= -1;
|
||||
pre = '-$';
|
||||
}
|
||||
|
||||
var formatter = this._getAnswerStyler( 'number' );
|
||||
|
||||
return pre + formatter.call( this, ( +value ).toFixed( 2 ) );
|
||||
},
|
||||
|
||||
'dollars': function( value )
|
||||
{
|
||||
var formatter = this._getAnswerStyler( 'currency' );
|
||||
|
||||
return formatter.call( this, ( +value ).toFixed( 0 ) );
|
||||
},
|
||||
|
||||
'float': function( value )
|
||||
{
|
||||
if ( !value )
|
||||
{
|
||||
value = 0;
|
||||
}
|
||||
|
||||
var formatter = this._getAnswerStyler( 'number' );
|
||||
|
||||
return formatter.call( this, ( +value ).toFixed( 2 ) );
|
||||
},
|
||||
|
||||
'limit': function( value, _, default_val )
|
||||
{
|
||||
value = ( value + '' ).replace( ',', '' );
|
||||
|
@ -254,7 +216,6 @@ module.exports = Class( 'ElementStyler',
|
|||
return ret;
|
||||
},
|
||||
|
||||
|
||||
'includeExclude': function( value, _, default_val )
|
||||
{
|
||||
// use the default if no value
|
||||
|
@ -268,7 +229,6 @@ module.exports = Class( 'ElementStyler',
|
|||
: 'Included';
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
* display as a limit, rejected or default if available
|
||||
*/
|
||||
|
@ -298,31 +258,6 @@ module.exports = Class( 'ElementStyler',
|
|||
return ret;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* format thousands
|
||||
*/
|
||||
'number': function( value )
|
||||
{
|
||||
var str = value.toString().split( '.' );
|
||||
var len = str[0].length,
|
||||
ret = '';
|
||||
|
||||
for ( var i = 0; i < len; i++ )
|
||||
{
|
||||
ret += str[0].charAt( i );
|
||||
|
||||
if ( ( ( len - i ) % 3 ) === 1 )
|
||||
{
|
||||
ret += ',';
|
||||
}
|
||||
}
|
||||
|
||||
str[0] = ret.replace( /,$/, '' );
|
||||
|
||||
return str.join( '.' )
|
||||
},
|
||||
|
||||
'state': function( value )
|
||||
{
|
||||
return State.getName( value );
|
||||
|
@ -367,27 +302,6 @@ module.exports = Class( 'ElementStyler',
|
|||
: val;
|
||||
},
|
||||
|
||||
'manualDate': function( value )
|
||||
{
|
||||
if( value.replace )
|
||||
{
|
||||
return value.replace(
|
||||
/^([0-9]{4})-([0-9]+)-([0-9]+)$/,
|
||||
'$2/$3/$1'
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
'date': function( value )
|
||||
{
|
||||
var data = value.split( '-' );
|
||||
|
||||
// m/d/y
|
||||
return data[1] + '/' + data[2] + '/' + data[0];
|
||||
},
|
||||
|
||||
'dateTime': function( value )
|
||||
{
|
||||
var ret_val = new Date( ( +value ) * 1000 );
|
||||
|
|
|
@ -407,14 +407,7 @@ module.exports = Class( 'StepUi' )
|
|||
return;
|
||||
}
|
||||
|
||||
// give the UI a chance to update the DOM; otherwise, the
|
||||
// answer elements we update may no longer be used (this also
|
||||
// has performance benefits since it allows repainting before
|
||||
// potentially heavy processing)
|
||||
setTimeout( function()
|
||||
{
|
||||
_self._updateAnswerFieldData( data );
|
||||
}, 25 );
|
||||
_self.answerDataUpdate( data );
|
||||
} );
|
||||
|
||||
doUpdate( bucket.getData() );
|
||||
|
@ -442,6 +435,43 @@ module.exports = Class( 'StepUi' )
|
|||
},
|
||||
|
||||
|
||||
/**
|
||||
* Update and style answer field data
|
||||
*
|
||||
* @param {Object} data key-value diff
|
||||
*
|
||||
* @return {undefined}
|
||||
*/
|
||||
'virtual protected answerDataUpdate': function( data )
|
||||
{
|
||||
var _self = this;
|
||||
|
||||
var data_fmt = _self._formatter.format( data );
|
||||
|
||||
// give the UI a chance to update the DOM; otherwise, the
|
||||
// answer elements we update may no longer be used (this also
|
||||
// has performance benefits since it allows repainting before
|
||||
// potentially heavy processing)
|
||||
setTimeout( function()
|
||||
{
|
||||
_self._updateAnswerFieldData( data_fmt );
|
||||
}, 25 );
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Retrieve answer DOM context
|
||||
*
|
||||
* @param {string} name field name
|
||||
*
|
||||
* @return {jQuery} DOM context
|
||||
*/
|
||||
'virtual protected getAnswerContext': function( name )
|
||||
{
|
||||
return this._answerContext[ name ];
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Update DOM answer fields with respective datum in diff DATA
|
||||
*
|
||||
|
@ -458,7 +488,7 @@ module.exports = Class( 'StepUi' )
|
|||
// changed
|
||||
for ( var name in data )
|
||||
{
|
||||
if ( !( this._answerContext[ name ] ) )
|
||||
if ( !( this.getAnswerContext( name ) ) )
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
@ -473,7 +503,7 @@ module.exports = Class( 'StepUi' )
|
|||
// update every index on the DOM
|
||||
i = this.styler.getAnswerElementByName(
|
||||
name, undefined, undefined,
|
||||
this._answerContext[ name ]
|
||||
this.getAnswerContext( name )
|
||||
).length;
|
||||
}
|
||||
|
||||
|
@ -515,7 +545,7 @@ module.exports = Class( 'StepUi' )
|
|||
// if we've already found an element for this ref, then it is
|
||||
// referenced in multiple places; simply store the context as the
|
||||
// entire step
|
||||
if ( _self._answerContext[ ref_id ] )
|
||||
if ( _self.getAnswerContext( ref_id ) )
|
||||
{
|
||||
_self._answerContext[ ref_id ] = _self.$content;
|
||||
return;
|
||||
|
@ -545,7 +575,7 @@ module.exports = Class( 'StepUi' )
|
|||
'private _updateAnswer': function( name, index, value )
|
||||
{
|
||||
var $element = this.styler.getAnswerElementByName(
|
||||
name, index, null, ( this._answerContext[ name ] || this.$content )
|
||||
name, index, null, ( this.getAnswerContext( name ) || this.$content )
|
||||
);
|
||||
|
||||
var i = $element.length;
|
||||
|
|
|
@ -0,0 +1,138 @@
|
|||
/**
|
||||
* Test case for GeneralStepUi
|
||||
*
|
||||
* Copyright (C) 2016 LoVullo Associates, Inc.
|
||||
*
|
||||
* This file is part of the Liza Data Collection Framework
|
||||
*
|
||||
* Liza is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
var Sut = require( '../../../' ).ui.step.GeneralStepUi,
|
||||
expect = require( 'chai' ).expect,
|
||||
sinon = require( 'sinon' ),
|
||||
Class = require( 'easejs' ).Class;
|
||||
|
||||
|
||||
describe( 'ui.GeneralStepUi', function()
|
||||
{
|
||||
describe( 'on answer data change', function()
|
||||
{
|
||||
it( 'will attempt pre-style with formatter', function( done )
|
||||
{
|
||||
var orig_data = {
|
||||
foo: [ "orig" ],
|
||||
},
|
||||
fmt_data = {
|
||||
foo: [ "formatted" ],
|
||||
};
|
||||
|
||||
var formatter = createFormatter(),
|
||||
mock_fmt = sinon.mock( formatter );
|
||||
|
||||
mock_fmt.expects( 'format' )
|
||||
.once()
|
||||
.withExactArgs( orig_data )
|
||||
.returns( fmt_data );
|
||||
|
||||
createSut( formatter, function( name, value )
|
||||
{
|
||||
// by the time the answer data makes its way to the
|
||||
// element styler, it should have already been
|
||||
// formatted
|
||||
expect( name ).to.equal( 'foo' );
|
||||
expect( value ).to.equal( fmt_data.foo[ 0 ] );
|
||||
|
||||
mock_fmt.verify();
|
||||
done();
|
||||
} ).answerDataUpdate( orig_data );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Create new SUT with formatter FORMATTER and generated element
|
||||
* styler
|
||||
*
|
||||
* @param {Object} formatter validator/formatter mock
|
||||
* @param {function(string,*)} style_callback styler styleAnswer method dfn
|
||||
*
|
||||
* @return {Sut}
|
||||
*/
|
||||
function createSut( formatter, style_callback )
|
||||
{
|
||||
return Sut.extend(
|
||||
{
|
||||
// visibility escalation
|
||||
'override answerDataUpdate': function( data )
|
||||
{
|
||||
return this.__super( data );
|
||||
},
|
||||
|
||||
'override getAnswerContext': function( name )
|
||||
{
|
||||
return {};
|
||||
},
|
||||
} )(
|
||||
{},
|
||||
createElementStyler( style_callback ),
|
||||
formatter
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create mock ElementStyler
|
||||
*
|
||||
* styleAnswer method is defined by STYLE_CALLBACK
|
||||
*
|
||||
* @return {Object} ElementStyler mock
|
||||
*/
|
||||
function createElementStyler( style_callback )
|
||||
{
|
||||
return {
|
||||
getAnswerElementByName: function()
|
||||
{
|
||||
// jQuery element
|
||||
return {
|
||||
attributes: [],
|
||||
length: 1,
|
||||
|
||||
text: function() {},
|
||||
}
|
||||
},
|
||||
|
||||
styleAnswer: style_callback,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create mock validator/formatter
|
||||
*
|
||||
* The only method provided is `format', which contains no definition;
|
||||
* it is expected to be mocked by the caller.
|
||||
*
|
||||
* @param {Object}
|
||||
*/
|
||||
function createFormatter( expected, return_data )
|
||||
{
|
||||
return {
|
||||
format: function()
|
||||
{
|
||||
},
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue