forked from 0x2620/pandora
Entity link UI
This commit is contained in:
parent
5a17f77f7a
commit
00746ed7d9
1 changed files with 108 additions and 16 deletions
|
|
@ -1,5 +1,82 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
// cribbed from documentsPanel.js, TODO: refactor
|
||||||
|
var entitiesInput = function(width, defaultType, max) {
|
||||||
|
var labelWidth = 80;
|
||||||
|
|
||||||
|
if (!defaultType) {
|
||||||
|
defaultType = pandora.site.entities[0].id;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Ox.ArrayInput({
|
||||||
|
input: {
|
||||||
|
get: function(width) {
|
||||||
|
var $input = Ox.FormElementGroup({
|
||||||
|
elements: [
|
||||||
|
Ox.Select({
|
||||||
|
items: pandora.site.entities.map(function(entity) {
|
||||||
|
return {
|
||||||
|
id: entity.id,
|
||||||
|
title: entity.title
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
overlap: 'right',
|
||||||
|
width: labelWidth
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
change: function() {
|
||||||
|
var v = $input.value();
|
||||||
|
$input.value({type: v.type, name: ''});
|
||||||
|
$input.options('elements')[1].focusInput();
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
Ox.Input({
|
||||||
|
autocomplete: function(value, callback) {
|
||||||
|
pandora.api.autocompleteEntities({
|
||||||
|
key: $input.value().type,
|
||||||
|
operator: '=',
|
||||||
|
range: [0, 10],
|
||||||
|
value: value
|
||||||
|
}, function(result) {
|
||||||
|
callback(result.data.items);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
autocompleteReplace: true,
|
||||||
|
autocompleteSelect: true,
|
||||||
|
autocompleteSelectSubmit: true,
|
||||||
|
width: width - labelWidth
|
||||||
|
})
|
||||||
|
],
|
||||||
|
width: width,
|
||||||
|
split: function(value) {
|
||||||
|
return [value.type || defaultType, value.name || ''];
|
||||||
|
},
|
||||||
|
join: function(value) {
|
||||||
|
return {type: value[0], name: value[1]};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return $input;
|
||||||
|
},
|
||||||
|
getEmpty: function(value) {
|
||||||
|
var type = (value && value[0]) || defaultType;
|
||||||
|
return {type: type, name: ''};
|
||||||
|
},
|
||||||
|
isEmpty: function(value) {
|
||||||
|
return !value.name;
|
||||||
|
},
|
||||||
|
setWidth: function($input, width) {
|
||||||
|
$input.options('elements')[1].options({
|
||||||
|
width: width - labelWidth
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
width: width,
|
||||||
|
max: max || 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
pandora.ui.entitiesDialog = function(options) {
|
pandora.ui.entitiesDialog = function(options) {
|
||||||
|
|
||||||
var dialogHeight = Math.round((window.innerHeight - 48) * 0.9),
|
var dialogHeight = Math.round((window.innerHeight - 48) * 0.9),
|
||||||
|
|
@ -372,6 +449,7 @@ pandora.ui.entitiesDialog = function(options) {
|
||||||
$form.empty()
|
$form.empty()
|
||||||
keys.forEach(function(key, index) {
|
keys.forEach(function(key, index) {
|
||||||
var defaultValue = void 0,
|
var defaultValue = void 0,
|
||||||
|
value = result.data[key.id],
|
||||||
$label = Ox.Label({
|
$label = Ox.Label({
|
||||||
title: Ox._(key.title),
|
title: Ox._(key.title),
|
||||||
width: width
|
width: width
|
||||||
|
|
@ -397,29 +475,42 @@ pandora.ui.entitiesDialog = function(options) {
|
||||||
height: width,
|
height: width,
|
||||||
type: 'textarea'
|
type: 'textarea'
|
||||||
});
|
});
|
||||||
|
} else if (key.type[0] === 'entity') {
|
||||||
|
$input = entitiesInput(width, type, key.max || 0);
|
||||||
|
defaultValue = [];
|
||||||
|
|
||||||
|
$input.bindEvent({
|
||||||
|
submit: function(data) {
|
||||||
|
$input.triggerEvent('change', data);
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var change = function(data, eventName) {
|
||||||
|
console.log(eventName, data);
|
||||||
|
pandora.api.editEntity(Ox.extend({
|
||||||
|
id: id
|
||||||
|
}, key.id, data.value), function(result) {
|
||||||
|
Ox.Request.clearCache('findEntities');
|
||||||
|
Ox.Request.clearCache('getEntity');
|
||||||
|
if (key.id == 'name') {
|
||||||
|
$input.value(result.data.name);
|
||||||
|
$list.reloadList(true);
|
||||||
|
} else if (key.id == 'alternativeNames') {
|
||||||
|
$input.value(result.data.alternativeNames);
|
||||||
|
}
|
||||||
|
renderEntity();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
$input.options({
|
$input.options({
|
||||||
disabled: key.id == 'id',
|
disabled: key.id == 'id',
|
||||||
value: result.data[key.id] || defaultValue,
|
value: value || defaultValue,
|
||||||
width: width
|
width: width
|
||||||
})
|
})
|
||||||
.css({margin: '4px'})
|
.css({margin: '4px'})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
change: function(data) {
|
change: change,
|
||||||
pandora.api.editEntity(Ox.extend({
|
|
||||||
id: id
|
|
||||||
}, key.id, data.value), function(result) {
|
|
||||||
Ox.Request.clearCache('findEntities');
|
|
||||||
Ox.Request.clearCache('getEntity');
|
|
||||||
if (key.id == 'name') {
|
|
||||||
$input.value(result.data.name);
|
|
||||||
$list.reloadList(true);
|
|
||||||
} else if (key.id == 'alternativeNames') {
|
|
||||||
$input.value(result.data.alternativeNames);
|
|
||||||
}
|
|
||||||
renderEntity();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
.appendTo($form);
|
.appendTo($form);
|
||||||
$labels.push($label);
|
$labels.push($label);
|
||||||
|
|
@ -467,3 +558,4 @@ pandora.ui.entitiesDialog = function(options) {
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
}());
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue