')
.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(
+ $('
![]()
')
+ .attr({src: '/static/png/icon64.png'})
+ .css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
+ )
+ .append(
+ $('
')
+ .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 + ' <' + users[0].email + '>'
+ )
+ : 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() {