Skip to content

Commit

Permalink
Merge "Partial-Bug: #1554673 Added blockGrid template to be able to d…
Browse files Browse the repository at this point in the history 
…isplay a grid inside details" into R3.0
  • Loading branch information
@opencontrail-ci-admin
Zuul authored and opencontrail-ci-admin committed Apr 19, 2016
2 parents 70dfd57 + cd87393 commit 4ad84a5
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 32 deletions.
119 changes: 95 additions & 24 deletions webroot/js/common/core.utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -490,7 +490,7 @@ define(['underscore'], function (_) {

/* Detail Template Generator*/

this.generateBlockListKeyValueTemplate = function (config, app, parentConfig) {
this.generateBlockListTemplate = function (config, app, parentConfig) {
var template = '' +
'{{#IfCompare requestState "' + cowc.DATA_REQUEST_STATE_SUCCESS_NOT_EMPTY + '" operator="!==" }}' +
'{{#IfCompare requestState "' + cowc.DATA_REQUEST_STATE_FETCHING + '" operator="===" }}' +
Expand All @@ -503,33 +503,89 @@ define(['underscore'], function (_) {
'<p>' + cowm.DATA_SUCCESS_EMPTY + '</p>' +
'{{/IfCompare}} ' +
'{{else}}' +
'<ul class="item-list">';
self.generateBlockListKeyValueTemplate(config, app, parentConfig, 'data') +
'{{/IfCompare}}';

return template;
};

this.generateBlockListKeyValueTemplate = function (config, app, parentConfig, objectAccessor) {
var template = '<ul class="item-list">';

$.each(config, function (configKey, configValue) {
template += '' +
'{{#IfValidJSONValueByPath "' + configValue.key + '" data ' + configKey + '}}' +
'{{#IfValidJSONValueByPath "' + configValue.key + '" ' + objectAccessor + ' ' + configKey + '}}' +
'<li>' +
'<label class="inline row-fluid">' +
'<span class="key span5 ' + (parentConfig.keyClass != null ? parentConfig.keyClass : '') +
' ' + (configValue.keyClass != null ? configValue.keyClass : '')+'"> {{getLabel "' +
configValue.label + '" "' + configValue.key + '" "' + app + '"}} </span>' +
'<span class="value span7 ' + (parentConfig.valueClass != null ? parentConfig.valueClass : '') +
' ' + (configValue.valueClass != null ? configValue.valueClass : '')+'">{{{getValueByConfig data config=\'' + JSON.stringify(configValue) + '\'}}}</span>';

template += '</label>' +
' ' + (configValue.valueClass != null ? configValue.valueClass : '')+'">' + self.getValueByConfig(configValue, app, objectAccessor) + '</span>'+
'</label>' +
'</li>' +
'{{/IfValidJSONValueByPath}}';
});

template += '</ul>' +
'{{/IfCompare}}';
template += '</ul>';

return template;
};

this.getValueByConfig = function(configValue, app, objectAccessor) {
var templateGenerator = configValue.templateGenerator;
if (templateGenerator === 'TextGenerator' || templateGenerator === 'LinkGenerator' || templateGenerator === 'json') {
return '{{{getValueByConfig ' + objectAccessor + ' config=\'' + encodeURIComponent(JSON.stringify(configValue)) + '\'}}}';
} else {
return self.generateInnerTemplate(configValue, app, objectAccessor);
}

};

this.generateBlockGridHeaderTemplate = function (config, app, parentConfig) {
var template = '<div class="detail-block-grid-header"><div class="detail-block-grid-row">';

$.each(config, function (configKey, configValue) {
template += '<div class="detail-block-grid-cell"' +
(contrail.checkIfKeyExistInObject(true, configValue, 'templateGeneratorConfig.width') ?
'style="width: ' + configValue.templateGeneratorConfig.width + 'px;"' : '') + '>' +
'<div style="width: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 20px;">' + cowl.get(configValue.key, app) + '</div></div>';
});

template += '</div></div>';

return template;
};

this.generateBlockGridBodyTemplate = function (config, app, objectAccessor) {
var objectAccessor = contrail.checkIfExist(objectAccessor) ? objectAccessor : 'data',
template = '<div class="detail-block-grid-body">' +
'{{#each ' + objectAccessor + '.' + config.key + '}} ' +
'<div class="detail-block-grid-row">' +
'';

$.each(config.templateGeneratorConfig.dataColumn, function (configKey, configValue) {
template += '<div class="detail-block-grid-cell" ' +
(contrail.checkIfKeyExistInObject(true, configValue, 'templateGeneratorConfig.width') ?
'style="width: ' + configValue.templateGeneratorConfig.width + 'px;"' : '') + '>' +
'<div style="width: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 20px;" ' +
'title="{{{getValueByConfig this config=\'' + encodeURIComponent(JSON.stringify(configValue)) + '\'}}}">' +
'{{{getValueByConfig this config=\'' + encodeURIComponent(JSON.stringify(configValue)) + '\'}}}</div>' +
'</div>';
});

template += '' +
'</div> ' +
'{{/each}}' +
'</div>';

return template;
};

this.generateInnerTemplate = function (config, app) {
this.generateInnerTemplate = function (config, app, objectAccessor) {
var template, templateObj,
templateGenerator = config.templateGenerator, templateGeneratorConfig = config.templateGeneratorConfig;
templateGenerator = config.templateGenerator, templateGeneratorConfig = config.templateGeneratorConfig,
objectAccessor = contrail.checkIfExist(objectAccessor) ? objectAccessor : 'data';

switch (templateGenerator) {
case 'RowSectionTemplateGenerator':
Expand Down Expand Up @@ -564,7 +620,6 @@ define(['underscore'], function (_) {

case 'BlockListTemplateGenerator':
var template = '';

if (config.theme == cowc.THEME_DETAIL_WIDGET) {
template = '' +
'<div class="detail-block-list-content widget-box transparent">' +
Expand All @@ -588,7 +643,7 @@ define(['underscore'], function (_) {
'<div class="widget-body">' +
'<div class="widget-main row-fluid">' +
'<div class="list-view">' +
self.generateBlockListKeyValueTemplate(config.templateGeneratorConfig, app, config) +
self.generateBlockListTemplate(config.templateGeneratorConfig, app, config) +
'</div>' +
'<div class="advanced-view hide">' +
'{{{formatGridJSON2HTML this.data' +
Expand All @@ -603,35 +658,51 @@ define(['underscore'], function (_) {
} else {
template = '<div class="detail-block-list-content row-fluid">' +
'<h6>' + config.title + '</h6>' +
self.generateBlockListKeyValueTemplate(config.templateGeneratorConfig, app, config) +
self.generateBlockListTemplate(config.templateGeneratorConfig, app, config) +
'<br/></div>';
}

templateObj = $(template);
break;

case 'BlockGridTemplateGenerator':
case 'BlockArrayListTemplateGenerator':
var template = '<div>' +
'{{#IfValidJSONValueByPathLength "' + config.key + '" this}} ' +
'<div class="detail-block-grid-content row-fluid">' +
'{{#IfValidJSONValueByPathLength "' + objectAccessor + '.' + config.key + '" this}} ' +
'<div class="detail-block-array-list-content row-fluid">' +
(contrail.checkIfExist(config.title) ? '<h6>' + config.title + '</h6>' : '') +
'<div class="row-fluid">' +
'{{#each ' + config.key + '}} ' +
'<div class="row-fluid detail-block-array-list">' +
'{{#each ' + objectAccessor + '.' + config.key + '}} ' +
'{{#IfCompare @index 0 operator="%2"}} ' +
'{{#IfCompare @index 0 operator="!="}}' +
'</div>' +
'<div class="row-fluid block-grid-row">' +
'<div class="row-fluid">' +
'{{else}}' +
'<div class="row-fluid block-grid-row">' +
'<div class="row-fluid">' +
'{{/IfCompare}}' +
'{{/IfCompare}}' +
'<div class="span6">' +
'<div class="row-fluid">' +
self.generateBlockListKeyValueTemplate(config.templateGeneratorConfig.dataColumn, app, config) +
'<div class="row-fluid detail-block-array-list-item"> ' +
'<div class="row-fluid title">' + cowl.get(config.templateGeneratorConfig.titleColumn.key, app) + ': {{{getValueByConfig this config=\'' + encodeURIComponent(JSON.stringify(config.templateGeneratorConfig.titleColumn)) + '\'}}}</div>' +
'<div class="row-fluid data">' + self.generateBlockListKeyValueTemplate(config.templateGeneratorConfig.dataColumn, app, config, 'this') + '</div>' +
'</div>' +
'</div>' +
'{{/each}} </div>' +
'</div></div> {{/IfValidJSONValueByPathLength}} </div>';
'{{/each}}' +
'</div> {{/IfValidJSONValueByPathLength}} </div>';

templateObj = $(template);
break;

case 'BlockGridTemplateGenerator':
var template = '<div>' +
'{{#IfValidJSONValueByPathLength "' + config.key + '" ' + objectAccessor + '}} ' +
'<div class="row-fluid">' +
(contrail.checkIfExist(config.title) ? '<h6>' + config.title + '</h6>' : '') +
'<div class="row-fluid">' +
'<div class="detail-block-grid">' +
self.generateBlockGridHeaderTemplate(config.templateGeneratorConfig.dataColumn, app, config) +
self.generateBlockGridBodyTemplate(config, app, objectAccessor) +
'</div>' +
'</div></div>{{/IfValidJSONValueByPathLength}} </div>';

templateObj = $(template);
break;
Expand Down
6 changes: 3 additions & 3 deletions webroot/js/handlebars-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ Handlebars.registerHelper('getJSONValueByPath', function (path, obj) {
});

Handlebars.registerHelper('getValueByConfig', function (obj, options) {
var config = $.parseJSON(options.hash.config),
var config = $.parseJSON(decodeURIComponent(options.hash.config)),
key = config.key,
value = cowu.getJSONValueByPath(key, obj),
templateGenerator = config.templateGenerator,
Expand Down Expand Up @@ -259,15 +259,15 @@ Handlebars.registerHelper('getValueByConfig', function (obj, options) {
if(linkTemplate != null) {
hrefLink = linkTemplate({key: vValue, params: params});
}
hrefLinkArray.push('<a class="value-link" target="_blank" href="' + hrefLink + '">' + vValue + '</a>');
hrefLinkArray.push('<a class="value-link" target="_blank" href="' + encodeURI(hrefLink) + '">' + vValue + '</a>');
});

returnValue = hrefLinkArray.join('');
} else {
if(linkTemplate != null) {
hrefLink = linkTemplate({key: value, params: params});
}
returnValue = '<a class="value-link" target="_blank" href="' + hrefLink + '">' + value + '</a>';
returnValue = '<a class="value-link" target="_blank" href="' + encodeURI(hrefLink) + '">' + value + '</a>';
}
break;

Expand Down
11 changes: 6 additions & 5 deletions webroot/test/ui/js/grid/GridView.test.suite.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,11 +284,12 @@ define([

//generate one using the template and data from the model
//since the data is already present, request state is set to SUCCESS_NOT_EMPTY
var detailsHtml = Handlebars.compile(viewConfigBody.options.detail.template)({
data: gridItems[0],
ignoreKeys: ['cgrid'],
requestState: cowc.DATA_REQUEST_STATE_SUCCESS_NOT_EMPTY
});
var detailsHtmlObj = $(Handlebars.compile(viewConfigBody.options.detail.template)({
data: gridItems[0],
ignoreKeys: ['cgrid'],
requestState: cowc.DATA_REQUEST_STATE_SUCCESS_NOT_EMPTY
})),
detailsHtml = detailsHtmlObj.prop('outerHTML');

equal(domDetailsHtml, detailsHtml,
"Details row html content should be equal to the one generated from view config template");
Expand Down

0 comments on commit 4ad84a5

Please sign in to comment.