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

[Thomas Lamprecht]

On 4/22/20 10:26 AM, Dominik Csapak wrote:
> show how many mails are selected, and a short overview like this:
> 
> sender1
>  subject1
>  subject2
> 
> sender2
>  subject3
>  subject4
> 
> also fix the padding on multiSelect
> 

Quite nicely (concise) implemented, some issues with the outcome, namely:
* the same <b>old issue we had last week or so with Firefox
* no ellipsis of subject, would do the same as the mailinfo viewer does
* above promises indentation, there is no indentation

How about the following rather quickly hacked together on top - I did the
s/selectionsummary/summary/ only to make some lines not overlong, had nothing
against that variable name (FYI):

----8<----
diff --git a/js/SpamQuarantine.js b/js/SpamQuarantine.js
index b6e5460..6598e0e 100644
--- a/js/SpamQuarantine.js
+++ b/js/SpamQuarantine.js
@@ -91,16 +91,17 @@ Ext.define('PMG.SpamQuarantine', {
            preview.setBodyStyle('padding', '10px');
            let previewtext = `<h3>${gettext('Multiple E-Mails selected')} (${selection.length})</h3>`;
 
-           let selectionsummary = {};
+           let summary = {};
            selection.forEach((mail) => {
                let sender = Ext.htmlEncode(mail.data.from);
-               if (!selectionsummary[sender]) {
-                   selectionsummary[sender] = `<b>${sender}</b>`;
+               if (!summary[sender]) {
+                   summary[sender] = `<b class="bold">${sender}</b><ul style="margin-top:0px;">`;
                }
-               selectionsummary[sender] += `<br>${Ext.htmlEncode(mail.data.subject)}`;
+               let subject = Ext.htmlEncode(mail.data.subject);
+               subject = Ext.util.Format.ellipsis(subject, 103);
+               summary[sender] += `<li>${subject}</li>`;
            });
-
-           previewtext += Object.values(selectionsummary).join('<br><br>');
+           previewtext += Object.values(summary).join('</ul>');
 
            preview.update(previewtext);
            raw.setDisabled(true);
---

It uses lists which have nice "inter margins" between other <ul>, ellipsises
text and adds the bold class again.

We could also sort the outcome by sender, as now it's not really stable.
E.g., selecting a few mails from top to bottom, then deselecting and selecting
again from top will move stuff around - nothing bad or so though.

I mean this is only relevant for rather huge spam queues anyway, maybe others
find that even not as useful as I when I requested it..

> Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
> ---
>  js/SpamQuarantine.js | 21 ++++++++++++++++++---
>  1 file changed, 18 insertions(+), 3 deletions(-)
> 
> diff --git a/js/SpamQuarantine.js b/js/SpamQuarantine.js
> index 60fbae8..b6e5460 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,21 @@ 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 previewtext = `<h3>${gettext('Multiple E-Mails selected')} (${selection.length})</h3>`;
> +
> +	    let selectionsummary = {};
> +	    selection.forEach((mail) => {
> +		let sender = Ext.htmlEncode(mail.data.from);
> +		if (!selectionsummary[sender]) {
> +		    selectionsummary[sender] = `<b>${sender}</b>`;
> +		}
> +		selectionsummary[sender] += `<br>${Ext.htmlEncode(mail.data.subject)}`;
> +	    });
> +
> +	    previewtext += Object.values(selectionsummary).join('<br><br>');
> +
> +	    preview.update(previewtext);
>  	    raw.setDisabled(true);
>  	    spam.setDisabled(true);
>  	    spam.setPressed(false);
> @@ -154,7 +169,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;
>  	    }
>  
>