mirror of https://github.com/rancher/api-ui.git
Fix display issues and filtering
This commit is contained in:
Vincent Fiduccia
parent
05d20d0792
commit
e486d92c85
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "gdapi-ui",
|
||||
"version": "1.2.3",
|
||||
"version": "1.2.4",
|
||||
"dependencies": {
|
||||
"gd-assets": "1.0.x"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -214,25 +214,26 @@ LI {
|
|||
font-family: "Monaco", "Andale Mono", "Courier New", "Courier", monospace;
|
||||
}
|
||||
|
||||
#json {
|
||||
.json {
|
||||
font-family: "Monaco", "Andale Mono", "Courier New", "Courier", monospace;
|
||||
white-space: pre-wrap;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
#json LI {
|
||||
.json LI {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
#json UL {
|
||||
.json UL {
|
||||
list-style: none;
|
||||
margin: 0 0 0 2em;
|
||||
margin: 0 0 0 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#json LI .icon {
|
||||
.json LI .icon {
|
||||
position: relative;
|
||||
left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
H1 {
|
||||
|
|
|
|||
|
|
@ -10,10 +10,12 @@ function HTMLApi(data, docs, user, cb)
|
|||
|
||||
this._reqModal = null;
|
||||
this._editSchema = null;
|
||||
this._editData = null;
|
||||
this._lastMethod = null;
|
||||
this._lastBody = null;
|
||||
this._lastMode = null;
|
||||
this._lastType = null;
|
||||
this._lastOpt = null;
|
||||
this._lastRequestBody = null;
|
||||
|
||||
this._referenceDropdownLimit = 100;
|
||||
this._magicNull = "__-*NULL*-__";
|
||||
|
|
@ -381,7 +383,7 @@ HTMLApi.prototype.actionLoad = function(name, obj, body)
|
|||
{
|
||||
var self = this;
|
||||
|
||||
this._lastBody = body||this._lastBody||{};
|
||||
this._lastRequestBody = body||this._lastRequestBody||{};
|
||||
|
||||
if ( !obj )
|
||||
obj = this._data;
|
||||
|
|
@ -416,7 +418,7 @@ HTMLApi.prototype.actionLoad = function(name, obj, body)
|
|||
|
||||
var tpl = {};
|
||||
var mode = 'action';
|
||||
tpl.fields = self._flattenFields(mode, actionInput, self._lastBody);
|
||||
tpl.fields = self._flattenFields(mode, actionInput, self._lastRequestBody);
|
||||
tpl.hasFields = tpl.fields.length > 0;
|
||||
tpl.mode = mode;
|
||||
tpl.createTypes = false;
|
||||
|
|
@ -428,7 +430,7 @@ HTMLApi.prototype.actionLoad = function(name, obj, body)
|
|||
|
||||
var html = Handlebars.templates['edit'](tpl);
|
||||
var popinActions = [
|
||||
{id: 'ok', text: 'Show Request', /*on_enter: true, */ onClick: function() { self.showRequest('POST',actionInput,retry,url); }.bind(self) },
|
||||
{id: 'ok', text: 'Show Request', /*on_enter: true, */ onClick: function() { self.showRequest(mode,'POST',actionInput,retry,url); }.bind(self) },
|
||||
{id: 'cancel', text: 'Cancel', cancel: true }
|
||||
];
|
||||
|
||||
|
|
@ -507,27 +509,38 @@ HTMLApi.prototype.filterAdd = function(name, modifier, value, before)
|
|||
if ( !name )
|
||||
{
|
||||
// Get the first filter name
|
||||
name = schemaFilters[ Object.keys(schemaFilters)[0] ];
|
||||
name = Object.keys(schemaFilters)[0];
|
||||
}
|
||||
|
||||
if ( !modifier && schemaFilters[name] && schemaFilters[name]['modifiers'] )
|
||||
{
|
||||
modifier = schemaFilters[name]['modifiers'][0];
|
||||
}
|
||||
|
||||
if ( !modifier )
|
||||
modifier = 'eq';
|
||||
|
||||
var cur = {
|
||||
name: name,
|
||||
modifier: modifier || 'eq',
|
||||
modifier: modifier,
|
||||
value: value || ''
|
||||
};
|
||||
|
||||
html = Handlebars.templates['filter']({
|
||||
var html = Handlebars.templates['filter']({
|
||||
allFilterSchema: schemaFilters,
|
||||
thisFilterSchema: schemaFilters[name],
|
||||
cur: cur
|
||||
});
|
||||
|
||||
var $elem = $(html);
|
||||
if( before )
|
||||
$(before).before(html);
|
||||
$elem = $(before).before($elem);
|
||||
else
|
||||
$('#filter-body').append(html);
|
||||
$lem = $('#filter-body').append($elem);
|
||||
|
||||
$('#no-filters').hide();
|
||||
this.modifierChange($elem);
|
||||
return $elem;
|
||||
}
|
||||
|
||||
HTMLApi.prototype.filterRemove = function(elem)
|
||||
|
|
@ -552,24 +565,36 @@ HTMLApi.prototype.filterChange = function(elem)
|
|||
var value = $('#'+prefix+'_value').val();
|
||||
|
||||
this.filterRemove(elem);
|
||||
this.filterAdd(name, modifier, value, next);
|
||||
$elem = this.filterAdd(name, modifier, value, next);
|
||||
}
|
||||
|
||||
HTMLApi.prototype.modifierChange = function(elem)
|
||||
HTMLApi.prototype.modifierChange = function(inElem)
|
||||
{
|
||||
var $elem = $(elem);
|
||||
var modifier = $elem.val();
|
||||
var $row = $elem.parents('.filter');
|
||||
var prefix = $row.data('prefix');
|
||||
var $input = $(prefix+'_value');
|
||||
var $elem, $row, prefix;
|
||||
if ( inElem.tagName == 'select' )
|
||||
{
|
||||
$elem = $(inElem);
|
||||
$row = $elem.parents('.filter');
|
||||
prefix = $row.data('prefix');
|
||||
}
|
||||
else
|
||||
{
|
||||
$row = $(inElem);
|
||||
prefix = $row.data('prefix');
|
||||
$elem = $('#'+prefix+'_modifier');
|
||||
}
|
||||
|
||||
$input.toggle( (modifier != 'null' && modifier != 'notnull') );
|
||||
var modifier = $elem.val();
|
||||
var $input = $('#'+prefix+'_value');
|
||||
var on = (modifier != 'null' && modifier != 'notnull');
|
||||
|
||||
$input.toggle(on);
|
||||
}
|
||||
|
||||
HTMLApi.prototype.filterApply = function(clear)
|
||||
{
|
||||
var $rows = $('#filters DIV.filter');
|
||||
var $row,name,modifier,value;
|
||||
var $row,prefix,name,modifier,value;
|
||||
|
||||
var query = '';
|
||||
|
||||
|
|
@ -722,7 +747,7 @@ HTMLApi.prototype.request = function(method,body,opt,really)
|
|||
opt = opt || {};
|
||||
|
||||
this._lastOpt = opt;
|
||||
this._lastBody = body;
|
||||
this._lastRequestBody = body;
|
||||
this._lastMethod = method;
|
||||
|
||||
var url = opt.url || this._data.links.self || window.location.href;
|
||||
|
|
@ -872,7 +897,7 @@ HTMLApi.prototype.requestDone = function(err, body, res)
|
|||
if ( body.links && body.links.self )
|
||||
selfUrl = body.links.self;
|
||||
|
||||
out = this._formatter.valueToHTML(body)
|
||||
out = '<div class="json">'+this._formatter.valueToHTML(body)+'</div>';
|
||||
}
|
||||
else
|
||||
{
|
||||
|
|
@ -963,6 +988,7 @@ HTMLApi.prototype.create = function()
|
|||
}
|
||||
}
|
||||
|
||||
this._lastMode = 'create';
|
||||
if ( this._data.createTypes )
|
||||
{
|
||||
// Make sure the selected type exists in the createTypes list
|
||||
|
|
@ -971,7 +997,7 @@ HTMLApi.prototype.create = function()
|
|||
type = Object.keys(this._data.createTypes)[0];
|
||||
|
||||
this._lastType = type;
|
||||
this._lastBody = data;
|
||||
this._lastRequestBody = data;
|
||||
this.createTypeChanged(type,true);
|
||||
}
|
||||
else
|
||||
|
|
@ -1062,6 +1088,7 @@ HTMLApi.prototype.showEdit = function(data,update,schema,url)
|
|||
|
||||
this.loadReferenceOptions(schema, display);
|
||||
this._editSchema = schema;
|
||||
this._editData = data;
|
||||
|
||||
function display()
|
||||
{
|
||||
|
|
@ -1088,14 +1115,14 @@ HTMLApi.prototype.showEdit = function(data,update,schema,url)
|
|||
|
||||
var retry = function()
|
||||
{
|
||||
self.showEdit(self._lastBody||data, update, schema, url);
|
||||
self.showEdit(self._lastRequestBody||data, update, schema, url);
|
||||
}
|
||||
|
||||
var title = (update ? 'Edit' : 'Create') +' '+ schema.id;
|
||||
var html = Handlebars.templates['edit'](tpl);
|
||||
var method = (update ? 'PUT' : 'POST');
|
||||
var popinActions = [
|
||||
{id: 'ok', text: 'Show Request', /*on_enter: true, */ onClick: function() { self.showRequest(method,schema,retry,url); }.bind(self) },
|
||||
{id: 'ok', text: 'Show Request', /*on_enter: true, */ onClick: function() { self.showRequest(mode, method,schema,retry,url); }.bind(self) },
|
||||
{id: 'cancel', text: 'Cancel', cancel: true }
|
||||
];
|
||||
|
||||
|
|
@ -1281,12 +1308,12 @@ HTMLApi.prototype.createTypeChanged = function(type,first)
|
|||
// Save the current values
|
||||
if ( first !== true )
|
||||
{
|
||||
var values = self.getEditValues(null, schema);
|
||||
self._lastBody = values.body;
|
||||
var values = self.getFormValues(self._lastMode, null, schema);
|
||||
self._lastRequestBody = values.body;
|
||||
}
|
||||
|
||||
self._lastType = type;
|
||||
self.showEdit(self._lastBody, false, schema, this._data.createTypes[type] );
|
||||
self.showEdit(self._lastRequestBody, false, schema, this._data.createTypes[type] );
|
||||
}
|
||||
|
||||
HTMLApi.prototype._flattenInputs = function($form)
|
||||
|
|
@ -1379,7 +1406,7 @@ HTMLApi.prototype._flattenInputs = function($form)
|
|||
return inputs;
|
||||
}
|
||||
|
||||
HTMLApi.prototype.getEditValues = function(method, schema)
|
||||
HTMLApi.prototype.getFormValues = function(mode, method, schema)
|
||||
{
|
||||
var $form = $('#edit-form')
|
||||
var inputs = this._flattenInputs($form);
|
||||
|
|
@ -1397,15 +1424,12 @@ HTMLApi.prototype.getEditValues = function(method, schema)
|
|||
if ( k.match(this._magicNullRegex) )
|
||||
continue;
|
||||
|
||||
// Only u
|
||||
|
||||
// Set the value to the magicNull if the checkbox is checked
|
||||
if ( inputs[k+this._magicNull] )
|
||||
v = this._magicNull;
|
||||
|
||||
// _flattenInputs won't have a value for unchecked ones.
|
||||
// Set a false value for unchecked boolean inputs that were on the page
|
||||
// if ( field.type == 'boolean' && v === undefined && $('INPUT[name="'+k+'"]', $form)[0] )
|
||||
// v = false;
|
||||
|
||||
if ( field._typeList[0] == 'array' )
|
||||
{
|
||||
if ( !v || v.length == 0 )
|
||||
|
|
@ -1466,9 +1490,9 @@ HTMLApi.prototype.getEditValues = function(method, schema)
|
|||
};
|
||||
}
|
||||
|
||||
HTMLApi.prototype.showRequest = function(method, schema, retry, url)
|
||||
HTMLApi.prototype.showRequest = function(mode, method, schema, retry, url)
|
||||
{
|
||||
var values = this.getEditValues(method,schema);
|
||||
var values = this.getFormValues(mode,method,schema);
|
||||
|
||||
var opt = {blobs: values.blobs};
|
||||
|
||||
|
|
|
|||
|
|
@ -205,7 +205,7 @@ JSONFormatter.prototype = {
|
|||
|
||||
// Convert a whole JSON value / JSONP response into a formatted HTML document
|
||||
jsonToHTML: function(json, callback, uri) {
|
||||
var output = '<div id="json">' +
|
||||
var output = '<div id="json" class="json">' +
|
||||
this.valueToHTML(json) +
|
||||
'</div>';
|
||||
if (callback) {
|
||||
|
|
@ -240,7 +240,7 @@ JSONFormatter.prototype = {
|
|||
|
||||
var output = '<div id="error">' + stringbundle.GetStringFromName('errorParsing') + '</div>' +
|
||||
'<h1>' + stringbundle.GetStringFromName('docContents') + ':</h1>' +
|
||||
'<div id="json">' + this.htmlEncode(data) + '</div>';
|
||||
'<div id="json" class="json">' + this.htmlEncode(data) + '</div>';
|
||||
return this.toHTML(output, uri + ' - Error');
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -102,4 +102,4 @@
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<div id="json"></div>
|
||||
<div id="json" class="json"></div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<div class="filter" data-prefix="filter_{{cur.id}}">
|
||||
<div class="filter" data-prefix="filter_{{cur.name}}">
|
||||
<input type="button" onclick="htmlapi.filterRemove(this)" value="-">
|
||||
|
||||
<select id="filter_{{cur.id}}_name" onchange="htmlapi.filterChange(this)">
|
||||
<select id="filter_{{cur.name}}_name" onchange="htmlapi.filterChange(this)">
|
||||
{{#eachProperty allFilterSchema}}
|
||||
<option value="{{key}}" {{#ifEqual key ../cur.name}} SELECTED{{/ifEqual}}>{{key}}</option>
|
||||
{{/eachProperty}}
|
||||
</select>
|
||||
|
||||
{{#if thisFilterSchema.modifiers}}
|
||||
<select id="filter_{{cur.id}}_modifier" onchange="htmlapi.modifierChange(this);">
|
||||
<select id="filter_{{cur.name}}_modifier" onchange="htmlapi.modifierChange(this);">
|
||||
{{#each thisFilterSchema.modifiers}}
|
||||
<option value="{{.}}" {{#ifEqual ../cur.modifier .}} SELECTED{{/ifEqual}}>
|
||||
{{#ifEqual . "eq" }}={{/ifEqual}}
|
||||
|
|
@ -27,18 +27,18 @@
|
|||
{{/each}}
|
||||
</select>
|
||||
{{else}}
|
||||
<input type="hidden" id="filter_{{cur.id}}_modifier" value=""/>
|
||||
<input type="hidden" id="filter_{{cur.name}}_modifier" value=""/>
|
||||
=
|
||||
{{/if}}
|
||||
|
||||
{{#if thisFilterSchema.options}}
|
||||
<select id="filter_{{cur.id}}_value">
|
||||
<select id="filter_{{cur.name}}_value">
|
||||
<option value=""></option>
|
||||
{{#eachProperty thisFilterSchema.options}}
|
||||
<option value="{{value}}" {{#ifEqual value cur.value}} SELECTED{{/ifEqual}}>{{value}}</option>
|
||||
{{/eachProperty}}
|
||||
</select>
|
||||
{{else}}
|
||||
<input type="text" id="filter_{{cur.id}}_value" value="{{cur.value}}" />
|
||||
<input type="text" id="filter_{{cur.name}}_value" value="{{cur.value}}" />
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
--{{boundary}}--
|
||||
{{else}}
|
||||
{{#if prettyBody}}
|
||||
{{{prettyBody}}}
|
||||
<div class="json">{{{prettyBody}}}</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue