pandora/static/js/entitiesDialog.js

392 lines
11 KiB
JavaScript
Raw Normal View History

2014-11-19 16:04:45 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
pandora.ui.entitiesDialog = function(options) {
var dialogHeight = Math.round((window.innerHeight - 48) * 0.9),
dialogWidth = Math.round(window.innerWidth * 0.9),
2014-11-20 10:03:22 +00:00
selected = [],
2014-11-19 17:55:43 +00:00
type = pandora.site.entities[0].id,
$entitiesSelect = Ox.Select({
items: pandora.site.entities.map(function(type) {
return {
id: type.id,
title: type.title
};
}),
2014-11-19 18:37:13 +00:00
width: 122
2014-11-19 16:04:45 +00:00
})
.bindEvent({
2014-11-19 17:55:43 +00:00
change: function(data) {
// ...
}
})
.css({
2014-11-19 18:37:13 +00:00
float: 'left',
margin: '4px 2px 4px 4px'
2014-11-19 17:55:43 +00:00
}),
$findInput = Ox.Input({
clear: true,
placeholder: 'Find',
2014-11-19 18:37:13 +00:00
width: 122
2014-11-19 17:55:43 +00:00
})
.css({
2014-11-19 19:21:59 +00:00
float: 'right',
2014-11-19 18:37:13 +00:00
margin: '4px 4px 4px 2px'
2014-11-19 17:55:43 +00:00
})
.bindEvent({
2014-11-19 18:11:05 +00:00
change: function(data) {
$list.options({
query: {
conditions: [
{key: 'name', operator: '=', value: data.value}
],
operator: '&'
}
});
2014-11-19 17:55:43 +00:00
}
2014-11-19 16:04:45 +00:00
}),
2014-11-19 17:55:43 +00:00
$listBar = Ox.Bar({size: 24})
2014-11-19 18:37:13 +00:00
.append($entitiesSelect)
2014-11-19 17:55:43 +00:00
.append($findInput),
$list = Ox.TableList({
columns: [
2014-11-20 10:03:22 +00:00
{
id: 'id',
title: 'ID',
operator: '+'
},
{
id: 'name',
title: 'Name',
operator: '+',
visible: true,
width: 256 - Ox.SCROLLBAR_SIZE
}
2014-11-19 17:55:43 +00:00
],
items: function(options, callback) {
pandora.api.findEntities({
2014-11-19 18:05:08 +00:00
keys: options.keys,
2014-11-19 17:55:43 +00:00
query: {
conditions: [
{key: 'type', operator: '==', value: type}
].concat(options.query.conditions),
operator: '&'
},
2014-11-19 18:05:08 +00:00
range: options.range,
sort: options.sort
2014-11-19 17:55:43 +00:00
}, callback);
},
sort: [{key: 'name', operator: '+'}],
scrollbarVisible: true,
unique: 'id',
2014-11-19 18:05:08 +00:00
width: 256 - Ox.SCROLLBAR_SIZE
})
.bindEvent({
init: function(data) {
2014-11-19 18:31:06 +00:00
var text = Ox.formatCount(
data.items,
Ox._('entity'),
Ox._('entities')
)
$listStatus.html(text[0].toUpperCase() + text.slice(1));
2014-11-20 10:03:22 +00:00
},
select: function(data) {
selected = data.ids;
renderEntity();
renderForm();
2014-11-19 18:05:08 +00:00
}
2014-11-19 17:55:43 +00:00
}),
2014-11-19 16:04:45 +00:00
2014-11-19 17:55:43 +00:00
$listStatus = Ox.Element()
.css({
fontSize: '9px',
marginTop: '2px',
textAlign: 'center'
})
.html(Ox._('Loading...')),
2014-11-19 16:04:45 +00:00
2014-11-19 17:55:43 +00:00
$listStatusbar = Ox.Bar({size: 16})
.append($listStatus),
2014-11-19 16:04:45 +00:00
$listPanel = Ox.SplitPanel({
elements: [
2014-11-19 17:58:08 +00:00
{element: $listBar, size: 24},
2014-11-19 17:55:43 +00:00
{element: $list},
{element: $listStatusbar, size: 16}
2014-11-19 16:04:45 +00:00
],
orientation: 'vertical'
2014-11-19 19:21:59 +00:00
})
.bindEvent({
2014-11-20 15:39:33 +00:00
resize: updateList
2014-11-19 16:04:45 +00:00
}),
$entity = Ox.Element(),
2014-11-19 17:55:43 +00:00
$itemMenu = Ox.MenuButton({
items: [
2014-11-19 18:37:13 +00:00
{
'id': 'add',
title: Ox._('Add Entity'),
keyboard: 'control n'
},
{
'id': 'delete',
title: Ox._('Delete Entity...'),
disabled: true,
keyboard: 'delete'
}
2014-11-19 17:55:43 +00:00
],
title: 'set',
tooltip: Ox._('Options'),
type: 'image'
})
.css({
2014-11-19 18:05:08 +00:00
float: 'left',
2014-11-19 17:55:43 +00:00
margin: '4px'
})
.bindEvent({
click: function(data) {
if (data.id == 'add') {
2014-11-19 19:13:17 +00:00
pandora.api.addEntity({
type: type
}, function(result) {
2014-11-19 18:31:06 +00:00
Ox.print('$$$$', result);
Ox.Request.clearCache('findEntities');
$list.reloadList().options({
selected: [result.data.id]
});
})
2014-11-19 17:55:43 +00:00
} else if (data.id == 'delete') {
// ...
}
}
2014-11-19 18:05:08 +00:00
}),
2014-11-19 17:55:43 +00:00
2014-11-19 18:31:06 +00:00
$deselectButton = Ox.Button({
2014-11-19 18:55:32 +00:00
title: 'close',
2014-11-19 18:31:06 +00:00
tooltip: Ox._('Done'),
type: 'image'
})
.css({
float: 'right',
margin: '4px'
})
.hide()
.bindEvent({
click: function() {
2014-11-19 18:55:32 +00:00
pandora.UI.set(
2014-11-19 18:31:06 +00:00
'entitiesSelection.' + type,
[]
2014-11-19 18:55:32 +00:00
);
2014-11-19 18:31:06 +00:00
}
2014-11-19 18:55:32 +00:00
}),
2014-11-19 18:31:06 +00:00
2014-11-19 17:55:43 +00:00
$itemBar = Ox.Bar({size: 24})
2014-11-19 18:31:06 +00:00
.append($itemMenu)
.append($deselectButton),
2014-11-19 17:55:43 +00:00
2014-11-20 10:03:22 +00:00
$labels = [],
$inputs = [],
$form = Ox.Element(),
2014-11-19 17:55:43 +00:00
$itemStatus = Ox.Element()
.css({
fontSize: '9px',
marginTop: '2px',
textAlign: 'center'
})
.html(Ox._('No entity selected')),
$itemStatusbar = Ox.Bar({size: 16})
.append($itemStatus),
2014-11-19 16:04:45 +00:00
2014-11-19 17:55:43 +00:00
$itemPanel = Ox.SplitPanel({
2014-11-19 16:04:45 +00:00
elements: [
2014-11-19 17:55:43 +00:00
{element: $itemBar, size: 24},
2014-11-20 10:03:22 +00:00
{element: $form},
2014-11-19 17:55:43 +00:00
{element: $itemStatusbar, size: 16}
2014-11-19 16:04:45 +00:00
],
orientation: 'vertical'
2014-11-19 19:21:59 +00:00
})
.bindEvent({
2014-11-20 15:39:33 +00:00
resize: updateForm
2014-11-19 16:04:45 +00:00
}),
$content = Ox.SplitPanel({
elements: [
{
2014-11-19 18:37:13 +00:00
element: $listPanel,
2014-11-19 16:04:45 +00:00
resizable: true,
resize: [256, 384, 512],
size: 256
},
{
element: $entity
},
{
2014-11-19 17:55:43 +00:00
element: $itemPanel,
2014-11-19 16:04:45 +00:00
resizable: true,
resize: [256, 384, 512],
size: 256
}
],
orientation: 'horizontal'
2014-11-19 17:55:43 +00:00
}),
2014-11-19 16:04:45 +00:00
2014-11-19 17:55:43 +00:00
that = Ox.Dialog({
buttons: [
Ox.Button({
title: Ox._('Manage Documents...')
})
.bindEvent({
click: function() {
that.close();
(pandora.$ui.documentsDialog || (
pandora.$ui.documentsDialog = pandora.ui.documentsDialog()
)).open();
}
}),
{},
Ox.Button({
title: Ox._('Done'),
width: 48
})
.bindEvent({
click: function() {
that.close();
}
})
],
closeButton: true,
content: $content,
height: dialogHeight,
maximizeButton: true,
minHeight: 256,
minWidth: 512,
padding: 0,
removeOnClose: true,
title: Ox._('Manage Entities'),
width: dialogWidth
})
.bindEvent({
// resize: ...
});
2014-11-19 16:04:45 +00:00
2014-11-20 13:38:28 +00:00
function deleteEntities() {
pandora.ui.deleteEntityDialog(
$list.options('selected').map(function(id) {
return $list.value(id);
}),
function() {
Ox.Request.clearCache();
// ...
$list.reloadList();
}
).open();
}
2014-11-20 10:03:22 +00:00
function renderEntity() {
var id = selected[0];
if (!id) {
$entity.empty();
return;
}
pandora.ui.entity({
id: id,
type: type,
view: 'entity'
}, function(html) {
if (id != selected[0]) {
return;
}
$entity.html(html);
});
}
function renderForm() {
var id = selected[0];
if (!id) {
$form.empty();
return;
}
pandora.api.getEntity({
id: id
}, function(data) {
if (id != selected[0]) {
return;
}
var keys = Ox.getObjectById(pandora.site.entities, type).keys;
$form.empty()
keys.forEach(function(key) {
var $label = Ox.Label({
title: Ox._(key.title),
width: 248
})
.css({
margin: '4px'
})
.appendTo($form),
$input;
if (key.type == 'document') {
$input = Ox.Input({autovalidate: /[A-Z]/});
} else if (key.type == 'float') {
$input = Ox.Input({type: 'float'});
} else if (key.type == 'int') {
$input = Ox.Input({type: 'int'});
} else if (key.type == 'string') {
$input = Ox.Input();
} else if (key.type[0] == 'string') {
$input = Ox.ArrayInput();
} else if (key.type == 'text') {
$input = Ox.Input({height: 248, type: 'textarea'});
}
$input.options({
2014-11-20 13:19:46 +00:00
value: data.key,
2014-11-20 10:03:22 +00:00
width: 248
})
.bindEvent({
change: function(data) {
pandora.api.editEntity(Ox.extend({
id: id
}, key.id, data.value), function(result) {
// ...
});
}
2014-11-20 15:34:12 +00:00
})
.appendTo($form);
2014-11-20 10:03:22 +00:00
$labels.push($label);
$inputs.push($input);
});
});
}
2014-11-20 15:39:33 +00:00
function updateForm() {
var width = $content.options('elements')[2].size - 8;
$labels.forEach(function($label) {
$label.options({width: width});
});
$inputs.forEach(function($input) {
$input.options({width: width});
})
}
function updateList() {
var width = $content.options('elements')[0].size;
$entitiesSelect.options({width: Math.ceil((size - 12) / 2)});
$findInput.options({width: Math.floor((size - 12) / 2)});
$list.size();
}
2014-11-19 16:04:45 +00:00
return that;
2014-11-20 13:19:46 +00:00
};