Server: Refactor table structure

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

@@ -3,7 +3,7 @@ import Router from '../../utils/Router';
 import { RouteType } from '../../utils/types';
 import { AppContext } from '../../utils/types';
 import defaultView from '../../utils/defaultView';
-import { makeTablePagination, makeTableView, Row, Table } from '../../utils/views/table';
+import { makeTablePagination, makeTableView, Row, Table, renderUserIcon } from '../../utils/views/table';
 import { PaginationOrderDir } from '../../models/utils/pagination';
 import { formatDateTime } from '../../utils/time';
 import { adminEmailsUrl, adminEmailUrl, adminUserUrl } from '../../utils/urlUtils';
@@ -69,40 +69,39 @@ router.get('admin/emails', async (_path: SubPath, ctx: AppContext) => {
 				error = d.error ? d.error : '(Unspecified error)';
 			}
 
-			const row: Row = [
-				{
-					value: d.id.toString(),
-				},
-				{
-					value: senderName,
-					url: sender.email ? `mailto:${escape(sender.email)}` : '',
-				},
-				{
-					value: d.recipient_name || d.recipient_email,
-					url: `mailto:${escape(d.recipient_email)}`,
-				},
-				{
-					value: d.recipient_id,
-					url: d.recipient_id ? adminUserUrl(d.recipient_id) : '',
-					render: (): string => {
-						return '<i class="fas fa-user-alt"></i>';
+			const row: Row = {
+				items: [
+					{
+						value: d.id.toString(),
 					},
-				},
-				{
-					value: substrWithEllipsis(d.subject, 0, 32),
-					url: adminEmailUrl(d.id),
-				},
-				{
-					value: formatDateTime(d.created_time),
-				},
-				{
-					value: formatDateTime(d.sent_time),
-				},
-				{
-					value: error,
-				},
-
-			];
+					{
+						value: senderName,
+						url: sender.email ? `mailto:${escape(sender.email)}` : '',
+					},
+					{
+						value: d.recipient_name || d.recipient_email,
+						url: `mailto:${escape(d.recipient_email)}`,
+					},
+					{
+						value: d.recipient_id,
+						url: d.recipient_id ? adminUserUrl(d.recipient_id) : '',
+						render: renderUserIcon,
+					},
+					{
+						value: substrWithEllipsis(d.subject, 0, 32),
+						url: adminEmailUrl(d.id),
+					},
+					{
+						value: formatDateTime(d.created_time),
+					},
+					{
+						value: formatDateTime(d.sent_time),
+					},
+					{
+						value: error,
+					},
+				],
+			};
 
 			return row;
 		}),

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

@@ -64,31 +64,33 @@ router.get('admin/tasks', async (_path: SubPath, ctx: AppContext) => {
 		const state = taskService.taskState(taskId);
 		const events = await taskService.taskLastEvents(taskId);
 
-		taskRows.push([
-			{
-				value: `checkbox_${taskId}`,
-				checkbox: true,
-			},
-			{
-				value: taskId.toString(),
-			},
-			{
-				value: task.description,
-			},
-			{
-				value: task.schedule,
-				hint: prettyCron.toString(task.schedule),
-			},
-			{
-				value: yesOrNo(state.running),
-			},
-			{
-				value: events.taskStarted ? formatDateTime(events.taskStarted.created_time) : '-',
-			},
-			{
-				value: events.taskCompleted ? formatDateTime(events.taskCompleted.created_time) : '-',
-			},
-		]);
+		taskRows.push({
+			items: [
+				{
+					value: `checkbox_${taskId}`,
+					checkbox: true,
+				},
+				{
+					value: taskId.toString(),
+				},
+				{
+					value: task.description,
+				},
+				{
+					value: task.schedule,
+					hint: prettyCron.toString(task.schedule),
+				},
+				{
+					value: yesOrNo(state.running),
+				},
+				{
+					value: events.taskStarted ? formatDateTime(events.taskStarted.created_time) : '-',
+				},
+				{
+					value: events.taskCompleted ? formatDateTime(events.taskCompleted.created_time) : '-',
+				},
+			],
+		});
 	}
 
 	const table: Table = {

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

@@ -71,38 +71,40 @@ router.get('admin/user_deletions', async (_path: SubPath, ctx: AppContext) => {
 		rows: page.items.map(d => {
 			const isDone = d.end_time && d.success;
 
-			const row: Row = [
-				{
-					value: `checkbox_${d.id}`,
-					checkbox: true,
-				},
-				{
-					value: isDone ? d.user_id : users.find(u => u.id === d.user_id).email,
-					stretch: true,
-					url: isDone ? '' : userUrl(d.user_id),
-				},
-				{
-					value: yesOrNo(d.process_data),
-				},
-				{
-					value: yesOrNo(d.process_account),
-				},
-				{
-					value: formatDateTime(d.scheduled_time),
-				},
-				{
-					value: formatDateTime(d.start_time),
-				},
-				{
-					value: formatDateTime(d.end_time),
-				},
-				{
-					value: d.end_time ? yesOrNo(d.success) : '-',
-				},
-				{
-					value: d.error,
-				},
-			];
+			const row: Row = {
+				items: [
+					{
+						value: `checkbox_${d.id}`,
+						checkbox: true,
+					},
+					{
+						value: isDone ? d.user_id : users.find(u => u.id === d.user_id).email,
+						stretch: true,
+						url: isDone ? '' : userUrl(d.user_id),
+					},
+					{
+						value: yesOrNo(d.process_data),
+					},
+					{
+						value: yesOrNo(d.process_account),
+					},
+					{
+						value: formatDateTime(d.scheduled_time),
+					},
+					{
+						value: formatDateTime(d.start_time),
+					},
+					{
+						value: formatDateTime(d.end_time),
+					},
+					{
+						value: d.end_time ? yesOrNo(d.success) : '-',
+					},
+					{
+						value: d.error,
+					},
+				],
+			};
 
 			return row;
 		}),

packages/server/src/routes/index/changes.ts

@@ -41,19 +41,21 @@ router.get('changes', async (_path: SubPath, ctx: AppContext) => {
 			},
 		],
 		rows: paginatedChanges.items.map(change => {
-			const row: Row = [
-				{
-					value: change.item_name,
-					stretch: true,
-					url: showItemUrls(config()) ? (items.find(i => i.id === change.item_id) ? ctx.joplin.models.item().itemContentUrl(change.item_id) : '') : null,
-				},
-				{
-					value: changeTypeToString(change.type),
-				},
-				{
-					value: formatDateTime(change.updated_time),
-				},
-			];
+			const row: Row = {
+				items: [
+					{
+						value: change.item_name,
+						stretch: true,
+						url: showItemUrls(config()) ? (items.find(i => i.id === change.item_id) ? ctx.joplin.models.item().itemContentUrl(change.item_id) : '') : null,
+					},
+					{
+						value: changeTypeToString(change.type),
+					},
+					{
+						value: formatDateTime(change.updated_time),
+					},
+				],
+			};
 
 			return row;
 		}),

packages/server/src/routes/index/items.ts

@@ -44,22 +44,24 @@ router.get('items', async (_path: SubPath, ctx: AppContext) => {
 			},
 		],
 		rows: paginatedItems.items.map(item => {
-			const row: Row = [
-				{
-					value: item.name,
-					stretch: true,
-					url: showItemUrls(config()) ? `${config().userContentBaseUrl}/items/${item.id}/content` : null,
-				},
-				{
-					value: formatBytes(item.content_size),
-				},
-				{
-					value: item.mime_type || 'binary',
-				},
-				{
-					value: formatDateTime(item.updated_time),
-				},
-			];
+			const row: Row = {
+				items: [
+					{
+						value: item.name,
+						stretch: true,
+						url: showItemUrls(config()) ? `${config().userContentBaseUrl}/items/${item.id}/content` : null,
+					},
+					{
+						value: formatBytes(item.content_size),
+					},
+					{
+						value: item.mime_type || 'binary',
+					},
+					{
+						value: formatDateTime(item.updated_time),
+					},
+				],
+			};
 
 			return row;
 		}),

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

@@ -47,7 +47,10 @@ interface RowItem {
 	render?: RowItemRenderCallback;
 }
 
-export type Row = RowItem[];
+export interface Row {
+	classNames?: string[];
+	items: RowItem[];
+}
 
 interface RowItemView {
 	value: string;
@@ -58,7 +61,10 @@ interface RowItemView {
 	hint: string;
 }
 
-type RowView = RowItemView[];
+interface RowView {
+	classNames: string[];
+	items: RowItemView[];
+}
 
 export interface Table {
 	headers: Header[];
@@ -97,16 +103,19 @@ function makeHeaderView(header: Header, parentBaseUrl: string, baseUrlQuery: Pag
 }
 
 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,
-			hint: rowItem.hint,
-		};
-	});
+	return {
+		classNames: row.classNames,
+		items: row.items.map(rowItem => {
+			return {
+				value: rowItem.value,
+				valueHtml: rowItem.render ? rowItem.render() : '',
+				classNames: [rowItem.stretch ? 'stretch' : 'nowrap'],
+				url: rowItem.url,
+				checkbox: rowItem.checkbox,
+				hint: rowItem.hint,
+			};
+		}),
+	};
 }
 
 export function makeTableView(table: Table): TableView {
@@ -132,3 +141,7 @@ export function makeTableView(table: Table): TableView {
 export function tablePartials(): string[] {
 	return ['pagination', 'table', 'tableHeader', 'tableRowItem'];
 }
+
+export const renderUserIcon = () => {
+	return '<i class="fas fa-user-alt"></i>';
+};

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

@@ -9,10 +9,10 @@
 		</thead>
 		<tbody>
 			{{#rows}}
-				<tr>
-					{{#.}}
+				<tr class="{{#classNames}}{{.}} {{/classNames}}">
+					{{#items}}
 						{{>tableRowItem}}
-					{{/.}}
+					{{/items}}
 				</tr>
 			{{/rows}}
 		</tbody>