add mail interface to users dialog

This commit is contained in:
rolux 2011-12-18 09:27:15 +00:00
commit bea69a918c
10 changed files with 632 additions and 232 deletions

View file

@ -83,6 +83,28 @@ pandora.ui.preferencesDialog = function() {
})
);
} else {
$content.append(
Ox.Checkbox({
checked: pandora.user.newsletter,
id: 'newsletter',
label: 'Newsletter',
labelWidth: 80,
title: pandora.user.newsletter ? 'Subscribed' : 'Unsubscribed',
width: 240
})
.bindEvent({
change: function(data) {
this.options({
title: this.options('title') == 'Subscribed' ? 'Unsubscribed' : 'Subscribed'
});
pandora.user.newsletter = data.checked;
pandora.api.editPreferences({
newsletter: pandora.user.newsletter
});
}
})
.css({position: 'absolute', left: '96px', top: '16px'})
);
$content.append(
Ox.Button({
title: 'Reset UI Settings',
@ -94,26 +116,8 @@ pandora.ui.preferencesDialog = function() {
pandora.$ui.appPanel.reload();
}
})
.css({position: 'absolute', left: '96px', top: '16px'})
.css({position: 'absolute', left: '96px', top: '46px'})
);
/*
content.append(Ox.FormElementGroup({
elements: [
Ox.Checkbox({
checked: true ,
id: 'showEpisodes',
title: 'Show Episodes',
width: 320
}),
Ox.Checkbox({
checked: true ,
id: 'newsletter',
title: 'Receive Newsletter',
width: 320
})
]
}));
*/
}
return $content;
},
@ -127,7 +131,7 @@ pandora.ui.preferencesDialog = function() {
}).bindEvent({
click: function() {
$dialog.close();
pandora.URL.update();
pandora.UI.set({page: ''});
}
})
],

View file

@ -4,8 +4,9 @@
pandora.ui.usersDialog = function() {
var height = Math.round((window.innerHeight - 48) * 0.9),
width = Math.round(window.innerWidth * 0.9),
var dialogHeight = Math.round((window.innerHeight - 48) * 0.9),
dialogWidth = Math.round(window.innerWidth * 0.9),
formWidth = 256,
numberOfUsers = 0,
userLevels = ['member', 'friend', 'staff', 'admin'],
@ -77,9 +78,8 @@ pandora.ui.usersDialog = function() {
},
id: 'disabled',
operator: '-',
title: $('<img>').attr({
src: Ox.UI.getImageURL('symbolCheck')
}),
title: 'Enabled',
titleImage: 'check',
visible: true,
width: 16
},
@ -126,6 +126,26 @@ pandora.ui.usersDialog = function() {
visible: true,
width: 60
},
{
format: function(value) {
return $('<img>')
.attr({
src: Ox.UI.getImageURL('symbolMail')
})
.css({
width: '10px',
height: '10px',
padding: '3px',
opacity: +value
});
},
id: 'newsletter',
title: 'Newsletter',
titleImage: 'mail',
operator: '-',
visible: true,
width: 16
},
{
id: 'numberoflists',
align: 'right',
@ -222,7 +242,7 @@ pandora.ui.usersDialog = function() {
columnsVisible: true,
items: pandora.api.findUsers,
keys: ['notes'],
max: 1,
max: -1,
scrollbarVisible: true,
sort: [{key: 'lastseen', operator: '-'}]
})
@ -241,135 +261,156 @@ pandora.ui.usersDialog = function() {
)
);
},
select: function(data) {
var values;
$user.empty();
if (data.ids.length) {
values = $list.value(data.ids[0]);
if(values.level != 'guest') {
$userLabel.options({
title: values.username + ' &lt;' + values.email + '&gt;'
});
$user.append(renderUserForm(values));
} else {
$userLabel.options({title: 'Guest'});
}
} else {
$userLabel.options({title: 'No user selected'});
}
}
select: selectUsers
}),
$userLabel = Ox.Label({
$formLabel = Ox.Label({
textAlign: 'center',
title: 'No user selected',
width: 248
width: 212
})
.css({margin: '4px'}),
.css({float: 'left', margin: '4px 2px 4px 4px'}),
$user = Ox.Element({}),
that = Ox.Dialog({
buttons: [
Ox.Button({
title: 'Export E-Mail Addresses'
})
.css({margin: '4px 4px 4px 0'})
.bindEvent({
click: function() {
pandora.api.findUsers({
query: {conditions: [], operator: '&'},
keys: ['email', 'username'],
range: [0, numberOfUsers],
sort: [{key: 'username', operator: '+'}]
}, function(result) {
var $dialog = Ox.Dialog({
buttons: [
Ox.Button({
title: 'Close'
})
.bindEvent({
click: function() {
$dialog.close();
}
})
],
content: Ox.Element()
.addClass('OxSelectable')
.css({margin: '16px'})
.html(
result.data.items.filter(function(item) {
return item.email;
}).map(function(item) {
return item.username + ' &lt;' + item.email + '&gt;';
}).join(', ')
),
removeOnClose: true,
title: 'E-Mail Addresses'
})
.open();
});
}
}),
Ox.Button({
id: 'done',
title: 'Done',
width: 48
}).bindEvent({
click: function() {
Ox.Request.clearCache('findUsers');
that.close();
}
})
],
closeButton: true,
content: Ox.SplitPanel({
elements: [
$formButton = Ox.ButtonGroup({
buttons: [
{
element: Ox.SplitPanel({
id: 'edit',
selected: true,
title: 'edit',
tooltip: 'Edit'
},
{
id: 'mail',
title: 'mail',
tooltip: 'Mail'
}
],
selectable: true,
type: 'image'
})
.css({float: 'left', margin: '4px 4px 4px 2px'})
.bindEvent({
change: selectForm
}),
$form = Ox.Element({}),
$editForm,
$mailForm = renderMailForm(),
$content = Ox.SplitPanel({
elements: [
{
element: Ox.SplitPanel({
elements: [
{
element: Ox.Bar({size: 24})
.append($guestsCheckbox)
.append($findElement),
size: 24
},
{
element: $list
}
],
orientation: 'vertical'
})
},
{
element: Ox.SplitPanel({
elements: [
{
element: Ox.Bar({size: 24})
.append($guestsCheckbox)
.append($findElement),
.append($formLabel)
.append($formButton),
size: 24
},
{
element: $list
element: $form
}
],
orientation: 'vertical'
})
},
{
element: Ox.SplitPanel({
elements: [
{
element: Ox.Bar({size: 24})
.append($userLabel),
size: 24
},
{
element: $user
}
],
orientation: 'vertical'
.bindEvent({
resize: setWidth
}),
size: 256
}
],
orientation: 'horizontal'
}),
height: height,
maximizeButton: true,
minHeight: 256,
minWidth: 512,
padding: 0,
removeOnClose: true,
title: 'Manage Users',
width: width
resizable: true,
resize: [256, 384, 512],
size: 256
}
],
orientation: 'horizontal'
}),
that = Ox.Dialog({
buttons: [
Ox.Button({
title: 'Export E-Mail Addresses'
})
.css({margin: '4px 4px 4px 0'})
.bindEvent({
click: function() {
pandora.api.findUsers({
query: {conditions: [], operator: '&'},
keys: ['email', 'username'],
range: [0, numberOfUsers],
sort: [{key: 'username', operator: '+'}]
}, function(result) {
var $dialog = Ox.Dialog({
buttons: [
Ox.Button({
title: 'Close'
})
.bindEvent({
click: function() {
$dialog.close();
}
})
],
content: Ox.Element()
.addClass('OxSelectable')
.css({margin: '16px'})
.html(
result.data.items.filter(function(item) {
return item.email;
}).map(function(item) {
return item.username + ' &lt;' + item.email + '&gt;';
}).join(', ')
),
removeOnClose: true,
title: 'E-Mail Addresses'
})
.open();
});
}
}),
Ox.Button({
id: 'done',
title: 'Done',
width: 48
}).bindEvent({
click: function() {
Ox.Request.clearCache('findUsers');
that.close();
}
})
],
closeButton: true,
content: $content,
height: dialogHeight,
maximizeButton: true,
minHeight: 256,
minWidth: 512,
padding: 0,
removeOnClose: true,
title: 'Manage Users',
width: dialogWidth
})
.bindEvent({
resize: setHeight
}),
$status = $('<div>')
.css({
position: 'absolute',
@ -383,95 +424,366 @@ pandora.ui.usersDialog = function() {
})
.appendTo(that.$element.find('.OxButtonsbar'));
function getFormItemById(id) {
var ret;
Ox.forEach((
$formButton.value() == 'edit' ? $editForm : $mailForm
).options('items'), function($item) {
if ($item.options('id') == id) {
ret = $item;
return false;
}
});
return ret;
};
function renderUserForm(userData) {
var $checkbox;
function getTo() {
return $list.options('selected').map(function(id) {
return $list.value(id);
}).filter(function(user) {
return user.level != 'guest' && (
$mailForm.values().include == 'users' || user.newsletter
);
}).map(function(user) {
return user.username;
});
}
function renderEditForm() {
var user = $list.value($list.options('selected')[0]);
return Ox.Form({
items: [
$checkbox = Ox.Checkbox({
checked: !userData.disabled,
id: 'status',
label: 'Status',
labelWidth: 80,
title: 'Enabled',
width: 240
})
.bindEvent({
change: function(data) {
// fixme: it would be really nice to have "this" here
$checkbox.options({title: userData.checked ? 'Enabled' : 'Disabled'})
}
}),
Ox.Input({
id: 'username',
label: 'Username',
labelWidth: 80,
value: userData.username,
width: 240
})
.bindEvent({
submit: function(data) {
}
}),
Ox.Input({
id: 'email',
label: 'E-Mail',
labelWidth: 80,
value: userData.email,
width: 240
})
.bindEvent({
submit: function(data) {
}
}),
Ox.Select({
id: 'level',
items: userLevels.map(function(level) {
return {
checked: level == userData.level,
id: level,
title: Ox.toTitleCase(level)
};
}),
label: 'Level',
items: [
Ox.Checkbox({
checked: !user.disabled,
id: 'status',
label: 'Status',
labelWidth: 80,
width: 240
}),
/*
Ox.Label({
title: 'Notes'
}),
*/
Ox.Input({
height: 120,
id: 'notes',
placeholder: 'Notes',
type: 'textarea',
value: userData.notes,
width: 240
title: !user.disabled ? 'Enabled' : 'Disabled',
width: formWidth - 16
})
],
width: 240
})
.css({margin: '8px'})
.bindEvent({
change: function(event) {
var data = {id: userData.id}, key, value;
if (event.id == 'status') {
data.disabled = !event.data.checked;
} else if (event.id == 'level') {
data.level = event.data.selected[0].id;
} else {
data[event.id] = event.data.value;
}
$list.value(userData.id, event.id, data[event.id]);
pandora.api.editUser(data, function(result) {
Ox.Request.clearCache('findUsers');
});
.bindEvent({
change: function(data) {
this.options({
title: this.options('title') == 'Enabled'
? 'Disabled' : 'Enabled'
});
}
}),
Ox.Input({
id: 'username',
label: 'Username',
labelWidth: 80,
value: user.username,
width: formWidth - 16
})
.bindEvent({
submit: function(data) {
}
}),
Ox.Input({
id: 'email',
label: 'E-Mail',
labelWidth: 80,
value: user.email,
width: formWidth - 16
})
.bindEvent({
submit: function(data) {
}
}),
Ox.Select({
id: 'level',
items: userLevels.map(function(level) {
return {
checked: level == user.level,
id: level,
title: Ox.toTitleCase(level)
};
}),
label: 'Level',
labelWidth: 80,
width: formWidth - 16
}),
Ox.Checkbox({
checked: user.newsletter,
id: 'newsletter',
label: 'Newsletter',
labelWidth: 80,
title: user.newsletter ? 'Subscribed' : 'Unsubscribed',
width: formWidth - 16
})
.bindEvent({
change: function(data) {
this.options({
title: this.options('title') == 'Subscribed'
? 'Unsubscribed' : 'Subscribed'
});
}
}),
Ox.Input({
height: dialogHeight - 160,
id: 'notes',
placeholder: 'Notes',
type: 'textarea',
value: user.notes,
width: formWidth - 16
})
],
width: 240
})
.css({margin: '8px'})
.bindEvent({
change: function(event) {
var data = {id: user.id}, key, value;
if (event.id == 'status') {
data.disabled = !event.data.checked;
} else if (event.id == 'level') {
data.level = event.data.selected[0].id;
} else if (event.id == 'newsletter') {
data.newsletter = event.data.checked;
} else {
data[event.id] = event.data.value;
}
});
$list.value(user.id, event.id, data[event.id]);
pandora.api.editUser(data, function(result) {
Ox.Request.clearCache('findUsers');
});
}
});
}
function renderMailForm() {
return Ox.Form({
items: [
Ox.Input({
disabled: true,
id: 'from',
label: 'From',
labelWidth: 80,
value: pandora.site.site.name + ' <' + pandora.site.site.email.contact + '>',
width: formWidth - 16
}),
Ox.Input({
disabled: true,
id: 'to',
label: 'To',
labelWidth: 80,
value: '',
width: formWidth - 16
}),
Ox.Select({
id: 'include',
items: [
{id: 'users', title: 'All users'},
{id: 'subscribers', title: 'Subscribers only'},
],
label: 'Include',
labelWidth: 80,
width: formWidth - 16
})
.bindEvent({
change: function() {
setTo();
setSend();
}
}),
Ox.Input({
id: 'subject',
label: 'Subject',
labelWidth: 80,
value: pandora.site.site.email.prefix + ' ',
width: formWidth - 16
})
.bindEvent({
change: setSend
}),
Ox.Input({
height: dialogHeight - 208,
id: 'message',
placeholder: 'Message',
type: 'textarea',
value: '\n\n' + pandora.site.site.email.footer,
width: formWidth - 16
})
.bindEvent({
change: setSend
}),
Ox.Select({
id: 'insert',
items: [
{id: 'username', title: 'Username'},
{id: 'email', title: 'E-Mail address'},
],
selectable: false,
title: 'Insert...',
width: formWidth - 16
})
.bindEvent({
click: function(data) {
var $input = getFormItemById('message'),
textarea = $input.find('textarea')[0],
value = $input.options('value');
$input.options({
value: value.substr(0, textarea.selectionStart)
+ '{' + data.id + '}'
+ value.substr(textarea.selectionEnd)
})
.focusInput(textarea.selectionStart + data.id.length + 2);
}
}),
Ox.Checkbox({
checked: false,
id: 'receipt',
title: 'Send a receipt to ' + pandora.user.email,
width: formWidth - 16
}),
Ox.Button({
disabled: true,
id: 'send',
title: 'Send',
width: 64
})
.bindEvent({
click: sendMail
})
],
width: formWidth - 16
})
.css({margin: '8px', textAlign: 'right'});
}
function selectForm(data) {
var selected;
if (data.selected[0] == 'edit') {
$mailForm.detach();
selected = $list.options('selected');
if (selected.length == 1 && selected[0].level != 'guest') {
$form.append($editForm = renderEditForm());
}
} else {
setTo();
setSend();
setWidth();
$editForm && $editForm.remove();
$form.append($mailForm);
}
}
function selectUsers(data) {
var users = $list.options('selected').map(function(id) {
return $list.value(id);
});
setLabel();
if ($formButton.value() == 'edit') {
$form.empty();
if (data.ids.length == 1) {
if (users[0].level != 'guest') {
$form.append($editForm = renderEditForm());
}
}
} else {
setTo();
setSend();
}
}
function sendMail() {
pandora.api.mail({
to: getTo(),
subject: getFormItemById('subject').options('value'),
message: getFormItemById('message').options('value'),
receipt: getFormItemById('receipt').value()
}, function(result) {
var title = result.status.code == 200
? 'Message Sent'
: 'Application Error',
message = result.status.code == 200
? 'Your message has been sent.'
: 'Your message could not be sent. Please try again.',
$dialog = Ox.Dialog({
buttons: [
Ox.Button({
id: 'close',
title: 'Close'
})
.bindEvent({
click: function() {
$dialog.close();
}
})
],
// FIXME: we need a template for this type of dialog
content: Ox.Element()
.append(
$('<img>')
.attr({src: '/static/png/icon64.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
$('<div>')
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
.html(message)
),
height: 128,
keys: {enter: 'close', escape: 'close'},
removeOnClose: true,
title: title,
width: 304
}).open();
});
}
function setHeight(data) {
var form = $formButton.options('value'),
$item = getFormItemById(form == 'edit' ? 'notes' : 'message');
Ox.print('$ITEM', $item)
dialogHeight = data.height;
$item && $item.options({
height: dialogHeight - (form == 'edit' ? 160 : 208)
});
}
function setLabel() {
var users = $list.options('selected').map(function(id) {
return $list.value(id);
}),
title = users.length == 0 ? 'No user selected'
: users.length == 1 ? (
users[0].level == 'guest'
? 'Guest'
: users[0].username + ' &lt;' + users[0].email + '&gt;'
)
: users.length + ' users selected';
$formLabel.options({title: title});
}
function setSend() {
getFormItemById('send').options({
disabled: getFormItemById('to').options('value') == 'No recipients'
|| getFormItemById('subject').options('value') === ''
|| getFormItemById('message').options('value') === ''
});
}
function setTo() {
var recipients = getTo().length;
$mailForm.values({
to: (recipients || 'No') + ' recipient' + (recipients == 1 ? '' : 's')
});
}
function setWidth() {
formWidth = $content.size(1);
$formLabel.options({width: formWidth - 44});
(
$formButton.value() == 'edit' ? $editForm : $mailForm
).options('items').forEach(function($item) {
if ($item.options('id') != 'send') {
$item.options({width: formWidth - 16});
}
});
}
function updateList() {