nest-parrot
Version:
Parrot built on react
271 lines (263 loc) • 7.53 kB
JSX
(function (context, $) {
var $demo = $pt.getService(context, '$demo');
var painter = function () {
var modelTemplate = {};
var model = $pt.createModel(modelTemplate);
var modelCode = $demo.convertModelCreatorToString({
variable: 'model',
template: modelTemplate
});
var compCode = $demo.convertComponentCreatorToString({
tag: 'NSearchText',
model: 'model',
layout: 'layout'
});
var mockSearch = {
url: "/test",
response: function (settings) {
var request = settings.data;
var code = request.code;
this.responseText = {
code: code,
name: code.replace("code", "name")
}
}
};
$pt.mock(mockSearch);
var mockAdvancedSearch = {
url: "/test/query",
response: function (settings) {
var items = [];
var request = settings.data;
if (request.pageIndex) {
for (var index = 0; index < 10; index++) {
items.push({
code: "code" + (request.countPerPage * (request.pageIndex - 1) + index + 1),
name: "name" + (request.countPerPage * (request.pageIndex - 1) + index + 1)
});
}
} else {
items = [{code: "code01", name: "name01"},
{code: "code02", name: "name02"},
{code: "code03", name: "name03"},
{code: "code04", name: "name04"},
{code: "code05", name: "name05"},
{code: "code06", name: "name06"},
{code: "code07", name: "name07"},
{code: "code08", name: "name08"},
{code: "code09", name: "name09"},
{code: "code10", name: "name10"}
];
}
this.responseText = {
items: items,
criteria: {
pageIndex: request.pageIndex ? request.pageIndex : 1,
pageCount: 5,
countPerPage: 10,
name: "abcde"
}
};
}
};
$pt.mock(mockAdvancedSearch);
var all = {
defaultOptions: function () {
var layoutTemplate = {
comp: {
searchTriggerDigits: 6,
searchUrl: '/test',
advancedUrl: '/test/query'
}
};
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layoutTemplate
});
return {
id: 'code-search-default',
title: 'Default',
desc: <span>A simple code search box.<br/>
Set <code>labelPropId</code> to initial label value by data model,
or send remote request to retrieve label by code value.
Text of code will be set to data model if this attribute defined.<br/>
Remote request may cause the performance issue in some scenarios, so set <code>labelPropId</code> is recommended.</span>,
xml: {
width: 6,
xml: <NSearchText model={model} layout={$pt.createCellLayout('value', layoutTemplate)}/>
},
code: [modelCode, layoutCode, compCode],
index: 10
};
},
customize: function () {
var layoutTemplate = {
comp: {
searchTriggerDigits: 6,
searchUrl: '/test',
searchDialogModel: {
name: null,
countPerPage: 10,
pageIndex: 1,
items: null,
criteria: {
pageIndex: 1,
pageCount: 1,
countPerPage: 10
}
},
searchDialogLayout: function () {
var _this = this;
return {
name: {
label: 'Code',
comp: {
type: $pt.ComponentConstants.Text
},
pos: {
row: 10,
col: 10,
width: 6
}
},
button: {
comp: {
type: $pt.ComponentConstants.Button,
icon: 'search',
style: 'danger',
click: function (model) {
var currentModel = $.extend({}, model.getCurrentModel());
delete currentModel.items;
delete currentModel.criteria;
$pt.doPost('/test/query', currentModel, {
done: function (data) {
if (typeof data === 'string') {
data = JSON.parse(data);
}
model.mergeCurrentModel(data);
model.set('criteria_url', '/test/query');
console.debug(model.getCurrentModel());
this.state.searchDialog.forceUpdate();
}.bind(_this)
});
}
},
css: {
comp: 'pull-right pull-down'
},
pos: {
row: 10,
col: 20,
width: 6
}
},
items: {
label: NSearchText.ADVANCED_SEARCH_DIALOG_RESULT_TITLE,
comp: {
type: $pt.ComponentConstants.Table,
indexable: true,
searchable: false,
rowOperations: {
icon: "check",
click: function (row) {
_this.pickupAdvancedResultItem(row);
_this.state.searchDialog.hide();
}
},
pageable: true,
criteria: "criteria",
columns: [{
title: 'Code',
width: 200,
data: "code"
}, {
title: 'Name',
width: 400,
data: "name"
}]
},
pos: {
row: 20,
col: 10,
width: 12
}
}
};
}
}
};
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layoutTemplate
});
return {
id: 'code-search-customize',
title: 'Customize',
desc: 'Search box with customized advanced search dialog.',
xml: {
width: 6,
xml: <NSearchText model={model} layout={$pt.createCellLayout('value', layoutTemplate)}/>
},
code: [modelCode, layoutCode, compCode],
index: 20
};
},
constants: function () {
return {
id: 'code-search-constants',
title: 'Constants',
desc: <span>Available constants. Constants must be change before construct component.'<br/>
<code>NSearchText.SEARCH_PROXY</code> and <code>NSearchText.ADVANCED_SEARCH_PROXY</code>
are functions which proxy the remote request data. Before send to remote,
set these proxy functions to change the format of post data JSON.<br/>
<code>NSearchText.ADVANCED_SEARCH_PROXY_CALLBACK</code> is function which proxy the remote response.
</span>,
index: 30,
code: $demo.convertJSON({
variable: 'NSearchText',
json: {
statics: {
ADVANCED_SEARCH_BUTTON_ICON: 'search',
ADVANCED_SEARCH_DIALOG_NAME_LABEL: 'Name',
ADVANCED_SEARCH_DIALOG_BUTTON_TEXT: 'Search',
ADVANCED_SEARCH_DIALOG_CODE_LABEL: 'Code',
ADVANCED_SEARCH_DIALOG_RESULT_TITLE: 'Search Result',
NOT_FOUND: 'Not Found',
SEARCH_PROXY: null,
SEARCH_PROXY_CALLBACK: null,
ADVANCED_SEARCH_PROXY: null
}
}
})
};
},
mock: function () {
return $demo.convertMockJSONToExample({
id: 'code-search-mock',
index: 50,
mock: [mockSearch, mockAdvancedSearch]
});
},
css: function () {
return $demo.convertCSSJSONToExample({
id: 'code-search-css',
index: 40,
css: {
comp: 'your-class-name',
'normal-line': 'your-class-name',
'focus-line': 'your-class-name'
}
});
}
};
return $demo.convertToExampleList(all);
};
var renderer = $pt.getService($demo, 'renderer');
renderer.formCodeSearch = function () {
React.render(<ExampleList title='Form Code Search'
formType='$pt.ComponentConstants.Search'
items={painter()}/>, document.getElementById('main'));
};
}(this, jQuery));