@fc3/mmcadi 0.1.0

package/src/server/result-serializer/action.ts

@@ -0,0 +1,939 @@
+import {InvariantViolation} from 'lib/errors';
+import {Session} from 'lib/execution-context';
+
+import BaseResultSerializer from 'server/result-serializer/base';
+import Action from 'type/action';
+import CustomPageType from 'server/enum/custom-page-type';
+import ImageBlock from 'type/block/image';
+import LinkBlock from 'type/block/link';
+import PermissionType from 'enum/permission-type';
+import PageType from 'client/enum/page-type';
+import getBlockPermissions from 'server/utility/get-block-permissions';
+import getPathForFolderBlock from 'server/utility/get-path-for-folder-block';
+import validatePath from 'server/utility/validate-path';
+import Block from 'type/block';
+import Color from 'enum/color';
+import getHexForColor from 'server/utility/get-hex-for-color';
+import createDate from 'server/utility/create-date';
+import NoteBlock from 'type/block/note';
+import DefaultRole from 'enum/default-role';
+import AudioBlock from 'type/block/audio';
+import Account from 'type/account';
+import Emoji from 'enum/emoji';
+import HeaderBlock from 'type/block/header';
+import TodoBlock from 'type/block/todo';
+import serializeTimePlaceOptions from 'server/result-serializer/common/time-place-options';
+import getLabelForTimePlaceVisibility from 'server/utility/get-label-for-time-place-visibility';
+import TimePlaceVisibility from 'enum/time-place-visibility';
+import MultiColumnBlock from 'type/block/multi-column';
+import DeleteBlockAction from 'type/action/delete-block';
+import getElementIdForBlock from 'server/utility/get-element-id-for-block';
+import FolderBlock from 'type/block/folder';
+import BlockMetadata from 'type/block-metadata';
+import AddBlockAction from 'type/action/add-block';
+import EditBlockAction from 'type/action/edit-block';
+import getEmojiForBlockType from 'server/utility/get-emoji-for-block-type';
+import BlockType from 'enum/block-type';
+import ActionType from 'enum/action-type';
+import BlockResultSerializerFactory from 'server/factory/block-result-serializer';
+
+type ModifyBlockAction = AddBlockAction | EditBlockAction;
+
+type BlockAndMetadata = {
+	readonly block: Block;
+	readonly metadata: BlockMetadata;
+};
+
+type ActionMetadata = {
+	readonly account: Account;
+	readonly roles: string[];
+	readonly provider_paths: string[];
+};
+
+function getBlockIdForAction(action: ModifyBlockAction, action_metadata: ActionMetadata): string {
+	const {
+		block,
+		metadata
+	} = buildBlockAndMetadataForAction(action, action_metadata);
+
+	return getElementIdForBlock(block, metadata);
+}
+
+function getPrivacyEmojiForRole(role: string, roles: string[]): Emoji {
+	switch (role) {
+		case DefaultRole.PUBLIC:
+			return Emoji.GRID_GLOBE;
+		case DefaultRole.CREATOR:
+			return Emoji.LOCKED;
+		default:
+			return Emoji.WINDOW;
+	}
+}
+
+function serializeColorInputs(attribute: string, selected_color: Color): string {
+	const colors = Object.values(Color);
+
+	const serialized_colors = colors.map((color) => {
+		const hex = getHexForColor(color);
+		const checked_attribute = color === selected_color ? 'checked' : '';
+
+		return `
+			<input autocomplete="off" class="color-option" type="radio" ${checked_attribute} id="${attribute}-${color}" name="${attribute}" value="${color}" />
+			<label class="mb-0" for="${attribute}-${color}" style="background-color:${hex}">
+				${color}
+			</label>
+		`;
+	});
+
+	return serialized_colors.join('\n');
+}
+
+function buildBlockForAction(action: ModifyBlockAction, metadata: ActionMetadata): Block {
+	const {action_type} = action;
+
+	if (action_type === ActionType.EDIT_BLOCK) {
+		const {block} = action as EditBlockAction;
+
+		if (block === undefined) {
+			throw new InvariantViolation(`
+				Received an EditBlockAction with no block specified
+			`);
+		}
+
+		return block;
+	}
+
+	const {
+		block_type,
+		create_role,
+		read_role,
+		update_role,
+		delete_role
+	} = action as AddBlockAction;
+
+	const permissions = {
+		[PermissionType.CREATE]: create_role,
+		[PermissionType.READ]: read_role,
+		[PermissionType.UPDATE]: update_role,
+		[PermissionType.DELETE]: delete_role
+	};
+
+	const {account} = metadata;
+	const {settings} = account;
+	const {default_time_place_visibility: visibility} = settings;
+	const created_at = Date.now();
+
+	const time = TimePlaceVisibility.TIME;
+	const place = TimePlaceVisibility.PLACE;
+	const both = TimePlaceVisibility.BOTH;
+
+	const show_place = visibility === place || visibility === both;
+	const show_time = visibility === time || visibility === both;
+
+	switch (block_type) {
+		case BlockType.AUDIO:
+			return {
+				block_type: BlockType.AUDIO,
+				show_place,
+				show_time,
+				created_at,
+				files: [],
+				permissions
+			} as AudioBlock;
+
+		case BlockType.IMAGE:
+			return {
+				block_type: BlockType.IMAGE,
+				show_place,
+				show_time,
+				created_at,
+				files: [],
+				permissions
+			} as ImageBlock;
+
+		case BlockType.NOTE:
+			return {
+				block_type: BlockType.NOTE,
+				show_place,
+				show_time,
+				created_at,
+				text: '',
+				permissions
+			} as NoteBlock;
+
+		case BlockType.TODO:
+			return {
+				block_type: BlockType.TODO,
+				show_place,
+				show_time,
+				created_at,
+				completed_at: null,
+				title: '',
+				permissions
+			} as TodoBlock;
+
+		case BlockType.HEADER:
+			return {
+				block_type: BlockType.HEADER,
+				show_place,
+				show_time,
+				created_at,
+				title: '',
+				permissions
+			} as HeaderBlock;
+
+		case BlockType.FOLDER:
+			return {
+				block_type: BlockType.FOLDER,
+				show_place,
+				show_time,
+				created_at,
+				title: '',
+				subtitle: '',
+				emoji: Emoji.FOLDER,
+				color: Color.GREY,
+				permissions
+			} as FolderBlock;
+
+		case BlockType.LINK:
+			return {
+				block_type: BlockType.LINK,
+				show_place,
+				show_time,
+				created_at,
+				href: '',
+				label: '',
+				color: Color.GREY,
+				permissions
+			} as LinkBlock;
+
+		case BlockType.MULTI_COLUMN:
+			return {
+				block_type: BlockType.MULTI_COLUMN,
+				show_place,
+				show_time,
+				created_at,
+				children: [],
+				max_columns: 3,
+				permissions
+			} as MultiColumnBlock;
+
+		default:
+			throw new InvariantViolation(`Unsupported block type: ${block_type}`);
+	}
+}
+
+function buildMetadataForAction(action: ModifyBlockAction, action_metadata: ActionMetadata): BlockMetadata {
+	const {path, editing, index_path} = action;
+	const {roles, account} = action_metadata;
+	const creator_username = '0xfc3';
+
+	validatePath(path);
+
+	return {
+		page_path: path,
+		editing,
+		// TODO: Investigate whether there's a way to preserve this
+		referrer_url: null,
+		index_path,
+		target_index_path: null,
+		roles,
+		account,
+		creator_username
+	};
+}
+
+function buildBlockAndMetadataForAction(action: ModifyBlockAction, action_metadata: ActionMetadata): BlockAndMetadata {
+	const block = buildBlockForAction(action, action_metadata);
+	const metadata = buildMetadataForAction(action, action_metadata);
+
+	return {
+		block,
+		metadata
+	};
+}
+
+
+
+class ActionResultSerializer extends BaseResultSerializer<Partial<Action>> {
+	private metadata: ActionMetadata;
+
+	public constructor(
+		result: Partial<Action>,
+		metadata: ActionMetadata,
+		path: string,
+		referrer_url: string,
+		session: Session
+	) {
+		super(result, path, referrer_url, session);
+
+		this.metadata = metadata;
+	}
+
+	protected getTitle(): string {
+		const {action_type, path} = this.getResult();
+
+		return `applying action ${action_type} to page ${path}`;
+	}
+
+	protected getPageType(): PageType {
+		const {action_type} = this.getResult();
+
+		switch (action_type) {
+			case ActionType.ADD_BLOCK:
+				return PageType.SELECT_BLOCK_TYPE;
+			case ActionType.DELETE_BLOCK:
+				return PageType.CONFIRM_DELETE_BLOCK;
+			case ActionType.EDIT_BLOCK:
+				return PageType.EDIT_BLOCK;
+			default:
+				throw new InvariantViolation(`
+					Unsupported action type when mapping to page type: ${action_type}
+				`);
+		}
+	}
+
+	protected serializeSections(): string {
+		const action = this.getResult();
+		const {action_type} = action;
+
+		switch (action_type) {
+			case ActionType.ADD_BLOCK:
+				return this.serializeAddBlock(action as AddBlockAction);
+
+			case ActionType.DELETE_BLOCK:
+				return this.serializeDeleteBlock(action as DeleteBlockAction);
+
+			case ActionType.EDIT_BLOCK:
+				return this.serializeModifiableBlock(action as EditBlockAction);
+
+			default:
+				throw new InvariantViolation(`
+					Invalid action type: ${action_type}
+				`);
+		}
+	}
+
+	private serializeAddBlock(action: AddBlockAction): string {
+		const {block_type} = action;
+
+		if (block_type === undefined) {
+			return this.serializeUnselectedBlockType(action);
+		}
+
+		return this.serializeModifiableBlock(action);
+	}
+
+	private serializeModifiableBlock(action: ModifyBlockAction): string {
+		const metadata = this.getMetadata();
+		const {block_type} = buildBlockForAction(action, metadata);
+
+		switch (block_type) {
+			case BlockType.NOTE:
+				return this.serializeModifiableNoteBlock(action);
+
+			case BlockType.TODO:
+				return this.serializeModifiableTodoBlock(action);
+
+			case BlockType.IMAGE:
+				return this.serializeModifiableImageBlock(action);
+
+			case BlockType.AUDIO:
+				return this.serializeModifiableAudioBlock(action);
+
+			case BlockType.HEADER:
+				return this.serializeModifiableHeaderBlock(action);
+
+			case BlockType.FOLDER:
+				return this.serializeModifiableFolderBlock(action);
+
+			case BlockType.MULTI_COLUMN:
+				return this.serializeModifiableMultiColumnBlock(action);
+
+			case BlockType.LINK:
+				return this.serializeModifiableLinkBlock(action);
+
+			default:
+				throw new InvariantViolation(`
+					Invalid block type: ${block_type}
+				`);
+		}
+	}
+
+	private serializeUnselectedBlockType(action: AddBlockAction): string {
+		const {path, editing, index_path} = action;
+
+		function serializeBlockLink(block_type: BlockType, last = false): string {
+			const offset_class = last ? '' : 'mb-8';
+			const emoji = getEmojiForBlockType(block_type);
+			const block_type_label = block_type.replace(/_/g, '-');
+			const first_letter = block_type[0];
+
+			return `
+				<li class="${offset_class}">
+					<a id="add-block-${block_type}" href="/actions?action_type=${ActionType.ADD_BLOCK}&editing=${editing}&path=${path}&index_path=${index_path}&block_type=${block_type}" class="biglink yellow align-left">
+						${emoji} ${block_type_label} <span class="half-opacity">[${first_letter}]</span>
+					</a>
+				</li>
+			`;
+		}
+
+		return `
+			<section>
+				<h2>${Emoji.BOOKS} add block:</h2>
+				<ul>
+					${serializeBlockLink(BlockType.NOTE)}
+					${serializeBlockLink(BlockType.IMAGE)}
+					${serializeBlockLink(BlockType.AUDIO)}
+					${serializeBlockLink(BlockType.TODO)}
+					${serializeBlockLink(BlockType.HEADER)}
+					${serializeBlockLink(BlockType.LINK)}
+					${serializeBlockLink(BlockType.FOLDER)}
+					${serializeBlockLink(BlockType.MULTI_COLUMN)}
+				</ul>
+			</section>
+
+			<!--
+			<section>
+				<h2>create page:</h2>
+				<ul>
+					<li>
+						<a href="/actions?action_type=${ActionType.CREATE_PAGE}&custom_page_type=${CustomPageType.BLANK}" class="biglink align-left">
+							${Emoji.DOCUMENT} blank
+						</a>
+					</li>
+					<li class="mt-8">
+						<a href="/actions?action_type=${ActionType.CREATE_PAGE}&custom_page_type=${CustomPageType.FORM}" class="biglink align-left">
+							${Emoji.RECEIPT} form
+						</a>
+					<li class="mt-8">
+					</li>
+						<a href="/actions?action_type=${ActionType.CREATE_PAGE}&custom_page_type=${CustomPageType.PRODUCT}" class="biglink align-left">
+							${Emoji.SHOPPING_BAGS} product
+						</a>
+					</li>
+				</ul>
+			</section>
+			-->
+		`;
+	}
+
+	private serializeModifiableImageBlock(action: ModifyBlockAction): string {
+		const {path} = action;
+
+		return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${Emoji.CAMERA} adding image(s) to page: [${path}]</legend>
+				<div class="file-wrapper">
+					<input id="file-input" type="file" name="files" accept="image/*" multiple />
+					<label class="biglink" for="files">select images</label>
+				</div>
+			</fieldset>
+		`);
+	}
+
+	private serializeModifiableAudioBlock(action: ModifyBlockAction): string {
+		const {path} = action;
+
+		return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${Emoji.MICROPHONE} adding audio to page: [${path}]</legend>
+				<div class="file-wrapper">
+					<input type="file" name="files" accept="audio/*" capture />
+					<label class="biglink" for="files">upload audio</label>
+				</div>
+			</fieldset>
+		`);
+	}
+
+	private serializeModifiableTodoBlock(action: ModifyBlockAction): string {
+		const {path, action_type} = action;
+		const is_adding = action_type === ActionType.ADD_BLOCK;
+		const verb = is_adding ? 'adding' : 'updating';
+		const metadata = this.getMetadata();
+		const block = buildBlockForAction(action, metadata);
+		const todo_block = block as TodoBlock;
+		const title = todo_block.title || '';
+		const placeholder = title || 'enter todo';
+		const {completed_at} = todo_block;
+		const completed = completed_at !== null;
+		const checked_attribute = completed ? 'checked' : '';
+
+		return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${Emoji.COMPLETED_CHECKMARK} ${verb} todo on page: [${path}]</legend>
+				<input id="text-input" name="title" placeholder="${placeholder}" autofocus autocomplete="off" value="${title}" />
+			</fieldset>
+
+			<fieldset>
+				<legend>completed?</legend>
+				<input type="checkbox" name="completed" ${checked_attribute} />
+				<label for="completed">immediately mark this task as complete</label>
+			</fieldset>
+		`);
+	}
+
+	private serializeModifiableNoteBlock(action: ModifyBlockAction): string {
+		const {path, action_type} = action;
+		const is_adding = action_type === ActionType.ADD_BLOCK;
+		const verb = is_adding ? 'adding' : 'updating';
+		const metadata = this.getMetadata();
+		const block = buildBlockForAction(action, metadata);
+		const {text} = block as NoteBlock;
+
+		return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${Emoji.NOTEPAD} ${verb} text on page: [${path}]</legend>
+				<textarea id="text-input" name="text" placeholder="${text}" autofocus autocomplete="off">${text}</textarea>
+			</fieldset>
+		`);
+	}
+
+	private serializeModifiableHeaderBlock(action: ModifyBlockAction): string {
+		const {path} = action;
+
+		return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${Emoji.PLACARD} adding title to page: [${path}]</legend>
+				<input name="title" type="text" placeholder="your title here" autofocus autocomplete="off" />
+			</fieldset>
+		`);
+	}
+
+	private serializeModifiableLinkBlock(action: ModifyBlockAction): string {
+		const metadata = this.getMetadata();
+		const block = buildBlockForAction(action, metadata);
+		const link_block = block as LinkBlock;
+		const {label, href, color} = link_block;
+
+		const color_inputs = serializeColorInputs('color', color);
+
+		return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${Emoji.LINK} link target</legend>
+				<p class="text-smaller half-opacity">
+					the URL where your link should point
+				</p>
+				<input id="href-text-input" name="href" type="text" placeholder="${href}" value="${href}" autofocus autocomplete="off" />
+			</fieldset>
+
+			<fieldset>
+				<legend>${Emoji.SIGN} link label</legend>
+				<p class="text-smaller half-opacity">
+					the text label for your link
+				</p>
+				<input id="label-text-input" name="label" type="text" placeholder="${label}" value="${label}" autocomplete="off" />
+			</fieldset>
+
+			<fieldset>
+				<legend>${Emoji.PALETTE} link color</legend>
+				<div class="pt-8">
+					${color_inputs}
+				</div>
+			</fieldset>
+		`);
+	}
+
+	private serializeModifiableMultiColumnBlock(action: ModifyBlockAction): string {
+		const {path} = action;
+		const metadata = this.getMetadata();
+		const {block} = buildBlockAndMetadataForAction(action, metadata);
+		const {max_columns} = block as MultiColumnBlock;
+
+		return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${Emoji.BAR_CHART} adding multi-column block to page: [${path}]</legend>
+
+				<p>max columns:</p>
+
+				<div class="p-16">
+					<input type="range" min="1" max="8" value="${max_columns}" id="max-columns" name="max_columns" list="column_values" />
+
+					<datalist id="column_values">
+						<option value="1" label="1"></option>
+						<option value="2" label="2"></option>
+						<option value="3" label="3"></option>
+						<option value="4" label="4"></option>
+						<option value="5" label="5"></option>
+						<option value="6" label="6"></option>
+						<option value="7" label="7"></option>
+						<option value="8" label="8"></option>
+					</datalist>
+				</div>
+			</fieldset>
+		`);
+	}
+
+	private serializeModifiableFolderBlock(action: ModifyBlockAction): string {
+		const {action_type, path} = action;
+		const is_adding = action_type === ActionType.ADD_BLOCK;
+		const adjective = is_adding ? 'new' : 'updated';
+		const metadata = this.getMetadata();
+		const block = buildBlockForAction(action, metadata);
+		const folder_block = block as FolderBlock;
+		const {title, subtitle, emoji, color} = folder_block;
+		const block_id = getBlockIdForAction(action, metadata);
+
+		const folder_path = getPathForFolderBlock({
+			base_path: path,
+			block: folder_block
+		});
+
+		const color_inputs = serializeColorInputs('color', color);
+
+		return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${Emoji.FOLDER} folder title</legend>
+				<p class="text-smaller half-opacity">
+					your ${adjective} page will live at:
+				</p>
+				<p class="text-smaller">
+					<code class="text-yellow" id="${block_id}-folder-path-target">${folder_path}</code>
+				</p>
+				<input id="title-text-input" name="title" type="text" placeholder="${title}" value="${title}" autofocus autocomplete="off" />
+			</fieldset>
+
+			<fieldset>
+				<legend>${Emoji.SUN_WITH_FACE} preview emoji</legend>
+				<p class="text-smaller half-opacity">
+					<span class="text-bold">[optional]</span> appears inside the folder button on its parent page
+				</p>
+				<input id="emoji-text-input" name="emoji" type="text" placeholder="${emoji}" value="${emoji}" autocomplete="off" />
+			</fieldset>
+
+			<fieldset>
+				<legend>${Emoji.NOTEPAD} folder subtitle</legend>
+				<p class="text-smaller half-opacity">
+					<span class="text-bold">[optional]</span> appears below the folder name
+				</p>
+				<input id="subtitle-text-input" name="subtitle" type="text" placeholder="${subtitle}" value="${subtitle}" autocomplete="off" />
+			</fieldset>
+
+			<fieldset>
+				<legend>${Emoji.PALETTE} link color</legend>
+				<div class="pt-8">
+					${color_inputs}
+				</div>
+			</fieldset>
+		`);
+	}
+
+	private wrapModifyBlockAction(action: ModifyBlockAction, block_specific_markup: string): string {
+		const {path, editing, action_type, index_path} = action;
+		const action_metadata = this.getMetadata();
+
+		const {
+			block,
+			metadata
+		} = buildBlockAndMetadataForAction(action, action_metadata);
+
+		const {block_type} = block;
+		const session = this.getSession();
+
+		const updated_metadata = {
+			...metadata,
+			editing: false
+		};
+
+		const factory = new BlockResultSerializerFactory(block, updated_metadata, session);
+
+		const serializer = factory.create();
+		const block_preview = serializer.serializeContent();
+		const selected_color = block.color || Color.GREY;
+		const color_inputs = serializeColorInputs('border_color', selected_color);
+		const time_place_section = this.renderTimePlaceSection(block);
+		const permissions_section = this.renderPermissionsSection(block);
+
+		return `
+			<section class="grey">
+				<fieldset>
+					<legend>${Emoji.MAGNIFYING_GLASS} preview</legend>
+					${block_preview}
+				</fieldset>
+
+				<form class="mt-64" enctype="multipart/form-data" method="post" action="/actions?editing=${editing}">
+					<input type="hidden" name="action_type" value="${action_type}" />
+					<input type="hidden" name="path" value="${path}" />
+					<input type="hidden" name="index_path" value="${index_path}" />
+					<input type="hidden" name="block_type" value="${block_type}" />
+
+					${block_specific_markup}
+
+					<fieldset class="mt-64">
+						<legend>${Emoji.GEAR} additional settings</legend>
+
+						<details class="mb-8 clearfix">
+							<summary>
+								<span>border color</span>
+								<span class="summary-label">
+									<span class="icon" style="background-color: ${selected_color}"></span>
+									${selected_color}
+								</span>
+							</summary>
+
+							<p class="mb-32 clearfix">
+								${color_inputs}
+							</p>
+
+							<aside>
+								colors are defined in your <a href="/settings">account settings</a>.
+							</aside>
+						</details>
+
+						${permissions_section}
+						${time_place_section}
+
+					</fieldset>
+
+					<table class="button-row fixed mt-32">
+						<tbody>
+							<tr>
+								<td>
+									<a class="biglink grey" href="${path}?editing=true">
+										${Emoji.LEFT_ARROW_UNICODE} cancel
+									</a>
+								</td>
+
+								<td>
+									<button class="biglink green" type="submit">
+										submit ${Emoji.RIGHT_ARROW_UNICODE}
+									</button>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</form>
+			</section>
+		`;
+	}
+
+	private renderPermissionsSection(block: Block): string {
+		const permissions = getBlockPermissions(block);
+		const permission_types = Object.keys(permissions) as PermissionType[];
+		const {roles} = this.getMetadata();
+
+		const permission_rows: string[] = [];
+		const summary_emojis: string[] = [];
+
+		function renderPermissionOptions(selected_role: string): string {
+			const serialized_options = roles.map((role) => {
+				const selected_attribute = selected_role === role ? 'selected' : '';
+
+				return `
+					<option ${selected_attribute} value="${role}">
+						${role}
+					</option>
+				`;
+			});
+
+			return serialized_options.join('\n');
+		}
+
+		Object.entries(permissions).forEach(([permission_type, role]) => {
+			const emoji = getPrivacyEmojiForRole(role, roles);
+			const options = renderPermissionOptions(role);
+
+			const row = `
+				<tr>
+					<td>
+						${permission_type}
+					</td>
+					<td>
+						<select name="${permission_type}_role" autocomplete="off">
+							${options}
+						</select>
+					</td>
+				</tr>
+			`;
+
+			permission_rows.push(row);
+			summary_emojis.push(emoji);
+		});
+
+		const summary_label = (() => {
+			let role_index = 0;
+
+			while (role_index < roles.length) {
+				const role = roles[role_index++];
+
+				let permission_index = 0;
+
+				while (permission_index < permission_types.length) {
+					const permission_type = permission_types[permission_index++];
+					const assignment = permissions[permission_type];
+
+					if (assignment === role) {
+						return `${role} ${permission_type}`;
+					}
+				}
+			}
+
+			throw new InvariantViolation(`
+				Unable to determine minimum role permission
+			`);
+		})();
+
+		return `
+			<details class="mb-8">
+				<summary>
+					permissions
+					<span class="summary-label">
+						${summary_emojis.join('')} ${summary_label}
+					</span>
+				</summary>
+				<table>
+					<thead>
+						<tr>
+							<th>
+								operation
+							</th>
+							<th>
+								minimum required role
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						${permission_rows.join('\n')}
+					</tbody>
+				</table>
+			</details>
+		`;
+	}
+
+	private renderTimePlaceSection(block: Block): string {
+		const current_visibility = (() => {
+			if (block.show_time && block.show_place) {
+				return TimePlaceVisibility.BOTH;
+			}
+
+			if (block.show_time) {
+				return TimePlaceVisibility.TIME;
+			}
+
+			if (block.show_place) {
+				return TimePlaceVisibility.PLACE;
+			}
+
+			return TimePlaceVisibility.NONE;
+		})();
+
+		const label = getLabelForTimePlaceVisibility(current_visibility);
+		const options = serializeTimePlaceOptions(current_visibility);
+
+		return `
+			<details>
+				<summary>time and place
+					<span class="summary-label">
+						${label}
+					</span>
+				</summary>
+
+				${options}
+			</details>
+		`;
+	}
+
+	private serializeDeleteBlock(action: DeleteBlockAction): string {
+		const {path, block, editing, index_path} = action;
+		const session = this.getSession();
+		const roles = this.getRoles();
+		const account = this.getAccount();
+		const creator_username = '0xfc3';
+
+		const block_metadata = {
+			editing,
+			page_path: path,
+			// We are just displaying the single block;
+			// there's no reason to highlight it.
+			target_index: null,
+			referrer_url: null,
+			roles,
+			account,
+			index_path,
+			target_index_path: null,
+			creator_username
+		};
+
+		const factory = new BlockResultSerializerFactory(block, block_metadata, session);
+		const serializer = factory.create();
+		const serialized_block = serializer.serializeContent();
+		const block_type = 'title';
+		const created_date = createDate(block.created_at);
+		const created_timestamp = created_date.toString();
+
+		return `
+			<section>
+				<h2>really delete this block?</h2>
+
+				${serialized_block}
+
+				<section class="align-left mt-32">
+					<h4 class="mb-8">block metadata</h4>
+					<table style="font-size:75%">
+						<tbody>
+							<tr>
+								<th>
+									type
+								</th>
+								<td class="align-left">
+									${block_type}
+								</td>
+							</tr>
+
+							<tr>
+								<th>
+									created on
+								</th>
+								<td class="align-left">
+									${created_timestamp}
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</section>
+
+				<form id="deletion-form" method="post" action="/actions?editing=${editing}">
+					<input type="hidden" name="action_type" value="${ActionType.DELETE_BLOCK}" />
+					<input type="hidden" name="path" value="${path}" />
+					<input type="hidden" name="index_path" value="${index_path}" />
+
+					<table class="fixed mt-32">
+						<tbody>
+							<tr>
+								<td>
+									<a class="biglink grey" href="${path}?editing=${editing}">
+										${Emoji.LEFT_ARROW_UNICODE} cancel
+									</a>
+								</td>
+
+								<td>
+									<button class="biglink red" type="submit">
+										delete ${Emoji.RIGHT_ARROW_UNICODE}
+									</button>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</form>
+			</section>
+		`;
+	}
+
+	private getRoles(): string[] {
+		const {roles} = this.getMetadata();
+
+		return roles;
+	}
+
+	private getAccount(): Account {
+		const {account} = this.getMetadata();
+
+		return account;
+	}
+
+	private getMetadata(): ActionMetadata {
+		return this.metadata;
+	}
+}
+
+export default ActionResultSerializer;