Server: Improve admin email UI

packages/server/src/routes/admin/emails.ts

@@ -12,6 +12,7 @@ import { senderInfo } from '../../models/utils/email';
 import { _ } from '@joplin/lib/locale';
 import { View } from '../../services/MustacheService';
 import { markdownBodyToHtml } from '../../services/email/utils';
+const { substrWithEllipsis } = require('@joplin/lib/string-utils');
 
 const router: Router = new Router(RouteType.Web);
 
@@ -19,7 +20,6 @@ router.get('admin/emails', async (_path: SubPath, ctx: AppContext) => {
 	const models = ctx.joplin.models;
 	const pagination = makeTablePagination(ctx.query, 'created_time', PaginationOrderDir.DESC);
 	const page = await models.email().allPaginated(pagination);
-	const users = await models.user().loadByIds(page.items.map(e => e.recipient_name));
 
 	const table: Table = {
 		baseUrl: adminEmailsUrl(),
@@ -82,11 +82,14 @@ router.get('admin/emails', async (_path: SubPath, ctx: AppContext) => {
 					url: `mailto:${escape(d.recipient_email)}`,
 				},
 				{
-					value: d.recipient_id ? (users.find(u => u.id === d.recipient_id)?.email || '(not set)') : '-',
+					value: d.recipient_id,
 					url: d.recipient_id ? adminUserUrl(d.recipient_id) : '',
+					render: (): string => {
+						return '<i class="fas fa-user-alt"></i>';
+					},
 				},
 				{
-					value: d.subject,
+					value: substrWithEllipsis(d.subject, 0, 32),
 					url: adminEmailUrl(d.id),
 				},
 				{
@@ -125,6 +128,7 @@ router.get('admin/emails/:id', async (path: SubPath, ctx: AppContext) => {
 		...defaultView('admin/email', _('Email')),
 		content: {
 			email,
+			emailSentTime: email.sent_time ? formatDateTime(email.sent_time) : null,
 			sender: senderInfo(email.sender_id),
 			bodyHtml: markdownBodyToHtml(email.body),
 		},

packages/server/src/utils/views/table.ts

@@ -36,18 +36,22 @@ interface HeaderView {
 	iconDir: string;
 }
 
+export type RowItemRenderCallback = ()=> string;
+
 interface RowItem {
 	value: string;
 	checkbox?: boolean;
 	url?: string;
 	stretch?: boolean;
 	hint?: string;
+	render?: RowItemRenderCallback;
 }
 
 export type Row = RowItem[];
 
 interface RowItemView {
 	value: string;
+	valueHtml: string;
 	classNames: string[];
 	url: string;
 	checkbox: boolean;
@@ -96,6 +100,7 @@ function makeRowView(row: Row): RowView {
 	return row.map(rowItem => {
 		return {
 			value: rowItem.value,
+			valueHtml: rowItem.render ? rowItem.render() : '',
 			classNames: [rowItem.stretch ? 'stretch' : 'nowrap'],
 			url: rowItem.url,
 			checkbox: rowItem.checkbox,

packages/server/src/views/admin/email.mustache

@@ -1,7 +1,8 @@
 <div class="block">
 	<strong>Subject: </strong> {{email.subject}}<br/>
 	<strong>From: </strong> {{sender.name}} &lt;{{sender.email}}&gt; (Sender ID: {{email.sender_id}})<br/>
-	<strong>To: </strong> {{email.recipient_name}} &lt;{{email.recipient_email}}&gt;{{#email.recipient_id}} (<a href="{{{global.baseUrl}}}/admin/users/{{email.recipient_id}}">User</a>){{/email.recipient_id}}
+	<strong>To: </strong> {{#email.recipient_id}}<a href="{{{global.baseUrl}}}/admin/users/{{email.recipient_id}}">{{/email.recipient_id}}{{email.recipient_name}} &lt;{{email.recipient_email}}&gt;{{#email.recipient_id}}</a>{{/email.recipient_id}}
+	{{#emailSentTime}}<br/><strong>Sent: </strong> {{emailSentTime}}{{/emailSentTime}}
 </div>
 
 <hr/>

packages/server/src/views/partials/tableRowItem.mustache

@@ -3,6 +3,6 @@
 		<input type="checkbox" name="{{value}}"/>
 	{{/checkbox}}
 	{{^checkbox}}
-		{{#url}}<a href="{{.}}"></span>{{/url}}{{#hint}}<abbr title="{{.}}">{{/hint}}{{value}}</a>{{#hint}}</abbr>{{/hint}}
+		{{#url}}<a href="{{.}}"></span>{{/url}}{{#hint}}<abbr title="{{.}}">{{/hint}}{{#valueHtml}}{{{valueHtml}}}{{/valueHtml}}{{^valueHtml}}{{value}}{{/valueHtml}}</a>{{#hint}}</abbr>{{/hint}}
 	{{/checkbox}}
 </td>