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,7 +69,8 @@ router.get('admin/emails', async (_path: SubPath, ctx: AppContext) => {
 				error = d.error ? d.error : '(Unspecified error)';
 			}
 
-			const row: Row = [
+			const row: Row = {
+				items: [
 					{
 						value: d.id.toString(),
 					},
@@ -84,9 +85,7 @@ router.get('admin/emails', async (_path: SubPath, ctx: AppContext) => {
 					{
 						value: d.recipient_id,
 						url: d.recipient_id ? adminUserUrl(d.recipient_id) : '',
-					render: (): string => {
-						return '<i class="fas fa-user-alt"></i>';
-					},
+						render: renderUserIcon,
 					},
 					{
 						value: substrWithEllipsis(d.subject, 0, 32),
@@ -101,8 +100,8 @@ router.get('admin/emails', async (_path: SubPath, ctx: AppContext) => {
 					{
 						value: error,
 					},
-
-			];
+				],
+			};
 
 			return row;
 		}),

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

@@ -64,7 +64,8 @@ router.get('admin/tasks', async (_path: SubPath, ctx: AppContext) => {
 		const state = taskService.taskState(taskId);
 		const events = await taskService.taskLastEvents(taskId);
 
-		taskRows.push([
+		taskRows.push({
+			items: [
 				{
 					value: `checkbox_${taskId}`,
 					checkbox: true,
@@ -88,7 +89,8 @@ router.get('admin/tasks', async (_path: SubPath, ctx: AppContext) => {
 				{
 					value: events.taskCompleted ? formatDateTime(events.taskCompleted.created_time) : '-',
 				},
-		]);
+			],
+		});
 	}
 
 	const table: Table = {

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

@@ -71,7 +71,8 @@ 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 = [
+			const row: Row = {
+				items: [
 					{
 						value: `checkbox_${d.id}`,
 						checkbox: true,
@@ -102,7 +103,8 @@ router.get('admin/user_deletions', async (_path: SubPath, ctx: AppContext) => {
 					{
 						value: d.error,
 					},
-			];
+				],
+			};
 
 			return row;
 		}),

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

@@ -41,7 +41,8 @@ router.get('changes', async (_path: SubPath, ctx: AppContext) => {
 			},
 		],
 		rows: paginatedChanges.items.map(change => {
-			const row: Row = [
+			const row: Row = {
+				items: [
 					{
 						value: change.item_name,
 						stretch: true,
@@ -53,7 +54,8 @@ router.get('changes', async (_path: SubPath, ctx: AppContext) => {
 					{
 						value: formatDateTime(change.updated_time),
 					},
-			];
+				],
+			};
 
 			return row;
 		}),

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

@@ -44,7 +44,8 @@ router.get('items', async (_path: SubPath, ctx: AppContext) => {
 			},
 		],
 		rows: paginatedItems.items.map(item => {
-			const row: Row = [
+			const row: Row = {
+				items: [
 					{
 						value: item.name,
 						stretch: true,
@@ -59,7 +60,8 @@ router.get('items', async (_path: SubPath, ctx: AppContext) => {
 					{
 						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,7 +103,9 @@ function makeHeaderView(header: Header, parentBaseUrl: string, baseUrlQuery: Pag
 }
 
 function makeRowView(row: Row): RowView {
-	return row.map(rowItem => {
+	return {
+		classNames: row.classNames,
+		items: row.items.map(rowItem => {
 			return {
 				value: rowItem.value,
 				valueHtml: rowItem.render ? rowItem.render() : '',
@@ -106,7 +114,8 @@ function makeRowView(row: Row): RowView {
 				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>