forked from 0x2620/pandora
add groups dialog
This commit is contained in:
rolux
parent
bb8bef991f
commit
01c398d7cb
1 changed files with 217 additions and 0 deletions
217
static/js/groupsDialog.js
Normal file
217
static/js/groupsDialog.js
Normal file
|
|
@ -0,0 +1,217 @@
|
||||||
|
'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) {
|
||||||
|
Ox.print('GROUP', result.data, Ox.getIndexById(groups, id));
|
||||||
|
$labels[Ox.getIndexById(groups, id)].options({
|
||||||
|
title: getLabelTitle(result.data)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return that;
|
||||||
|
|
||||||
|
};
|
||||||
Loading…
Reference in a new issue