pandora/static/js/groupsDialog.js

217 lines
6.3 KiB
JavaScript
Raw Normal View History

2014-10-01 13:53:09 +00:00
'use strict';
pandora.ui.groupsDialog = function(options) {
var that = Ox.Dialog({
buttons: [
Ox.Button({
title: Ox._('Done')
})
.bindEvent({
click: function() {
that.close();
}
})
],
closeButton: true,
content: Ox.LoadingScreen().start(),
height: 256,
removeOnClose: true,
title: Ox._('Manage Groups'),
width: 584 + Ox.UI.SCROLLBAR_SIZE
}),
isItem = options.type == 'item',
$content,
$label,
$groups = [],
$checkboxes = [],
$inputs = [],
$labels = [],
$removeButtons = [],
$addButton,
groups,
selectedGroups;
pandora.api[isItem ? 'get' : 'getUser']({
id: options.id,
keys: ['groups']
}, function(result) {
selectedGroups = result.data.groups;
renderGroups();
});
function addGroup() {
// disableElements();
pandora.api.addGroup({name: Ox._('Untitled')}, function(result) {
renderGroups(result.data.id);
});
}
function disableElements() {
$checkboxes.concat($inputs).concat($removeButtons).concat($addButton)
.forEach(function($element) {
$element.options({disabled: true});
});
}
function edit(id) {
selectedGroups = groups.filter(function(group, index) {
return $checkboxes[index].value();
}).map(function(group) {
return group.name;
});
// disableElements();
Ox.Request.clearCache(isItem ? 'get' : 'getUser');
pandora.api[isItem ? 'edit' : 'editUser']({
id: options.id,
groups: selectedGroups
}, function(result) {
// enableElements();
updateLabel(id);
that.triggerEvent('groups', {groups: selectedGroups});
});
}
function editGroup(id, name) {
// disableElements();
pandora.api.editGroup({id: id, name: name}, function(result) {
renderGroups();
});
}
function enableElements() {
$checkboxes.concat($inputs).concat($removeButtons).concat($addButton)
.forEach(function($element) {
$element.options({disabled: false});
});
}
function getLabelTitle(group) {
return (group.items ? Ox.formatNumber(group.items) : Ox._('No'))
+ ' ' + Ox._(group.items == 1 ? 'item' : 'items') + ', '
+ (group.users ? Ox.formatNumber(group.users) : Ox._('No'))
+ ' ' + Ox._(group.users == 1 ? 'user' : 'users');
}
function removeGroup(id) {
// disableElements();
pandora.api.removeGroup({id: id}, function(result) {
var index = Ox.getIndexById(groups, id),
name = groups[index].name;
groups.splice(index, 1);
index = selectedGroups.indexOf(name);
if (index > -1) {
selectedGroups.splice(index, 1);
that.triggerEvent('groups', {groups: selectedGroups});
}
renderGroups();
});
}
function renderGroup(group, index) {
var $group = $groups[index] = Ox.$('<div>')
.appendTo($content);
$checkboxes[index] = Ox.Checkbox({
value: Ox.contains(selectedGroups, group.name)
})
.css({
float: 'left',
margin: '4px'
})
.bindEvent({
change: function() {
edit(group.id);
}
})
.appendTo($group);
$inputs[index] = Ox.Input({
value: group.name,
width: 192
})
.css({
float: 'left',
margin: '4px'
})
.bindEvent({
change: function(data) {
editGroup(group.id, data.value);
}
})
.appendTo($group);
$labels[index] = Ox.Label({
title: getLabelTitle(group),
width: 192
})
.css({
float: 'left',
margin: '4px'
})
.appendTo($group),
$removeButtons[index] = Ox.Button({
title: Ox._('Remove Group'),
width: 128
})
.css({
float: 'left',
margin: '4px'
})
.bindEvent({
click: function() {
removeGroup(group.id);
}
})
.appendTo($group);
}
function renderGroups(focusInput) {
Ox.Request.clearCache('getGroups');
pandora.api.getGroups(function(result) {
groups = Ox.sortBy(result.data.groups, 'name');
$content = Ox.Element().css({margin: '12px'});
$label = Ox.Label({
textAlign: 'center',
title: Ox._(
isItem ? pandora.site.itemName.singular : 'User'
) + ': ' + options.name,
width: 552
})
.css({
margin: '4px'
})
.appendTo($content);
groups.forEach(renderGroup);
$addButton = Ox.Button({
title: Ox._('Add Group'),
width: 128
})
.css({
float: 'left',
margin: '4px 4px 4px 428px'
})
.bindEvent({
click: addGroup
})
.appendTo($content);
that.options({content: $content});
if (focusInput) {
$inputs[Ox.getIndexById(groups, focusInput)].focusInput(true);
}
});
}
function updateLabel(id) {
Ox.Request.clearCache('getGroup');
pandora.api.getGroup({id: id}, function(result) {
$labels[Ox.getIndexById(groups, id)].options({
title: getLabelTitle(result.data)
});
});
}
return that;
};