[pmg-devel] [PATCH pmg-gui v2] fix #2677: show more info on multiple selected mails

[Dominik Csapak]

show how many mails are selected, and a short overview like this:

Multiple E-Mails selected (4)

sender1 <sender1 at example.com>
 * subject1
 * subject2

sender2 <sender2 at example.com>
 * subject3
 * subject4

also fix the padding on multiSelect

Co-authored-by: Thomas Lamprecht <t.lamprecht at proxmox.com>
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
changes from v1:
* use XTemplate for showing the preview
   this makes the logic much nicer, and we do not need to
   string manipulate/concatenate manually
* basically uses the exact style @Thomas proposed in his review
  (thus the co-authored-by)

 js/SpamQuarantine.js | 35 ++++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/js/SpamQuarantine.js b/js/SpamQuarantine.js
index 60fbae8..0f09eb7 100644
--- a/js/SpamQuarantine.js
+++ b/js/SpamQuarantine.js
@@ -72,13 +72,14 @@ Ext.define('PMG.SpamQuarantine', {
 
 	    var url = '/api2/htmlmail/quarantine/content?id=' + rec.data.id + ((raw)?'&raw=1':'');
 	    preview.setDisabled(false);
+	    preview.setBodyStyle('padding', '0px');
 	    this.lookupReference('raw').setDisabled(false);
 	    this.lookupReference('spam').setDisabled(false);
 	    this.lookupReference('download').setDisabled(false);
 	    preview.update("<iframe frameborder=0 width=100% height=100% sandbox='allow-same-origin' src='" + url +"'></iframe>");
 	},
 
-	multiSelect: function() {
+	multiSelect: function(selection) {
 	    var preview = this.lookupReference('preview');
 	    var raw = this.lookupReference('raw');
 	    var spam = this.lookupReference('spam');
@@ -87,7 +88,24 @@ Ext.define('PMG.SpamQuarantine', {
 	    var download = this.lookupReference('download');
 
 	    preview.setDisabled(false);
-	    preview.update('<h3>' + gettext('Multiple E-Mails selected') + '</h3>');
+	    preview.setBodyStyle('padding', '10px');
+
+	    let data = {
+		title: `${gettext('Multiple E-Mails selected')} (${selection.length})`,
+		senders: {},
+	    };
+
+	    selection.forEach((mail) => {
+		let sender = Ext.String.htmlEncode(mail.data.from);
+		if (!data.senders[sender]) {
+		    data.senders[sender] = [];
+		}
+		let subject = Ext.String.htmlEncode(mail.data.subject);
+		subject = Ext.String.ellipsis(subject, 103);
+		data.senders[sender].push(subject);
+	    });
+
+	    preview.update(this.previewtemplate.apply(data));
 	    raw.setDisabled(true);
 	    spam.setDisabled(true);
 	    spam.setPressed(false);
@@ -154,7 +172,7 @@ Ext.define('PMG.SpamQuarantine', {
 	    var list = this.lookupReference('list');
 	    var selection = list.selModel.getSelection();
 	    if (selection.length > 1) {
-		me.multiSelect();
+		me.multiSelect(selection);
 		return;
 	    }
 
@@ -216,6 +234,17 @@ Ext.define('PMG.SpamQuarantine', {
 
 	init: function(view) {
 	    this.lookup('list').cselect = view.cselect;
+	    this.previewtemplate = new Ext.XTemplate(
+		'<h3>{title}</h3>',
+		'<tpl foreach="senders">',
+		'   <b class="bold">{$}</b>',
+		'   <ul style="margin-top:0px">',
+		'   <tpl for=".">',
+		'	<li>{.}</li>',
+		'   </tpl>',
+		'   </ul>',
+		'</tpl>',
+	    );
 	},
 
 	control: {
-- 
2.20.1