@fc3/mmcadi 0.1.0 → 0.1.2

package/dist/src/server/result-serializer/action.js

@@ -0,0 +1,778 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const errors_1 = require("./../../lib/errors/index.js");
+const base_1 = __importDefault(require("./base.js"));
+const custom_page_type_1 = __importDefault(require("./../enum/custom-page-type.js"));
+const permission_type_1 = __importDefault(require("./../../enum/permission-type.js"));
+const page_type_1 = __importDefault(require("./../../client/enum/page-type.js"));
+const get_block_permissions_1 = __importDefault(require("./../utility/get-block-permissions.js"));
+const get_path_for_folder_block_1 = __importDefault(require("./../utility/get-path-for-folder-block.js"));
+const validate_path_1 = __importDefault(require("./../utility/validate-path.js"));
+const color_1 = __importDefault(require("./../../enum/color.js"));
+const get_hex_for_color_1 = __importDefault(require("./../utility/get-hex-for-color.js"));
+const create_date_1 = __importDefault(require("./../utility/create-date.js"));
+const default_role_1 = __importDefault(require("./../../enum/default-role.js"));
+const emoji_1 = __importDefault(require("./../../enum/emoji.js"));
+const time_place_options_1 = __importDefault(require("./common/time-place-options.js"));
+const get_label_for_time_place_visibility_1 = __importDefault(require("./../utility/get-label-for-time-place-visibility.js"));
+const time_place_visibility_1 = __importDefault(require("./../../enum/time-place-visibility.js"));
+const get_element_id_for_block_1 = __importDefault(require("./../utility/get-element-id-for-block.js"));
+const get_emoji_for_block_type_1 = __importDefault(require("./../utility/get-emoji-for-block-type.js"));
+const block_type_1 = __importDefault(require("./../../enum/block-type.js"));
+const action_type_1 = __importDefault(require("./../../enum/action-type.js"));
+const block_result_serializer_1 = __importDefault(require("./../factory/block-result-serializer.js"));
+function getBlockIdForAction(action, action_metadata) {
+    const { block, metadata } = buildBlockAndMetadataForAction(action, action_metadata);
+    return (0, get_element_id_for_block_1.default)(block, metadata);
+}
+function getPrivacyEmojiForRole(role, roles) {
+    switch (role) {
+        case default_role_1.default.PUBLIC:
+            return emoji_1.default.GRID_GLOBE;
+        case default_role_1.default.CREATOR:
+            return emoji_1.default.LOCKED;
+        default:
+            return emoji_1.default.WINDOW;
+    }
+}
+function serializeColorInputs(attribute, selected_color) {
+    const colors = Object.values(color_1.default);
+    const serialized_colors = colors.map((color) => {
+        const hex = (0, get_hex_for_color_1.default)(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, metadata) {
+    const { action_type } = action;
+    if (action_type === action_type_1.default.EDIT_BLOCK) {
+        const { block } = action;
+        if (block === undefined) {
+            throw new errors_1.InvariantViolation(`
+				Received an EditBlockAction with no block specified
+			`);
+        }
+        return block;
+    }
+    const { block_type, create_role, read_role, update_role, delete_role } = action;
+    const permissions = {
+        [permission_type_1.default.CREATE]: create_role,
+        [permission_type_1.default.READ]: read_role,
+        [permission_type_1.default.UPDATE]: update_role,
+        [permission_type_1.default.DELETE]: delete_role
+    };
+    const { account } = metadata;
+    const { settings } = account;
+    const { default_time_place_visibility: visibility } = settings;
+    const created_at = Date.now();
+    const time = time_place_visibility_1.default.TIME;
+    const place = time_place_visibility_1.default.PLACE;
+    const both = time_place_visibility_1.default.BOTH;
+    const show_place = visibility === place || visibility === both;
+    const show_time = visibility === time || visibility === both;
+    switch (block_type) {
+        case block_type_1.default.AUDIO:
+            return {
+                block_type: block_type_1.default.AUDIO,
+                show_place,
+                show_time,
+                created_at,
+                files: [],
+                permissions
+            };
+        case block_type_1.default.IMAGE:
+            return {
+                block_type: block_type_1.default.IMAGE,
+                show_place,
+                show_time,
+                created_at,
+                files: [],
+                permissions
+            };
+        case block_type_1.default.NOTE:
+            return {
+                block_type: block_type_1.default.NOTE,
+                show_place,
+                show_time,
+                created_at,
+                text: '',
+                permissions
+            };
+        case block_type_1.default.TODO:
+            return {
+                block_type: block_type_1.default.TODO,
+                show_place,
+                show_time,
+                created_at,
+                completed_at: null,
+                title: '',
+                permissions
+            };
+        case block_type_1.default.HEADER:
+            return {
+                block_type: block_type_1.default.HEADER,
+                show_place,
+                show_time,
+                created_at,
+                title: '',
+                permissions
+            };
+        case block_type_1.default.FOLDER:
+            return {
+                block_type: block_type_1.default.FOLDER,
+                show_place,
+                show_time,
+                created_at,
+                title: '',
+                subtitle: '',
+                emoji: emoji_1.default.FOLDER,
+                color: color_1.default.GREY,
+                permissions
+            };
+        case block_type_1.default.LINK:
+            return {
+                block_type: block_type_1.default.LINK,
+                show_place,
+                show_time,
+                created_at,
+                href: '',
+                label: '',
+                color: color_1.default.GREY,
+                permissions
+            };
+        case block_type_1.default.MULTI_COLUMN:
+            return {
+                block_type: block_type_1.default.MULTI_COLUMN,
+                show_place,
+                show_time,
+                created_at,
+                children: [],
+                max_columns: 3,
+                permissions
+            };
+        default:
+            throw new errors_1.InvariantViolation(`Unsupported block type: ${block_type}`);
+    }
+}
+function buildMetadataForAction(action, action_metadata) {
+    const { path, editing, index_path } = action;
+    const { roles, account } = action_metadata;
+    const creator_username = '0xfc3';
+    (0, validate_path_1.default)(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, action_metadata) {
+    const block = buildBlockForAction(action, action_metadata);
+    const metadata = buildMetadataForAction(action, action_metadata);
+    return {
+        block,
+        metadata
+    };
+}
+class ActionResultSerializer extends base_1.default {
+    constructor(result, metadata, path, referrer_url, session) {
+        super(result, path, referrer_url, session);
+        this.metadata = metadata;
+    }
+    getTitle() {
+        const { action_type, path } = this.getResult();
+        return `applying action ${action_type} to page ${path}`;
+    }
+    getPageType() {
+        const { action_type } = this.getResult();
+        switch (action_type) {
+            case action_type_1.default.ADD_BLOCK:
+                return page_type_1.default.SELECT_BLOCK_TYPE;
+            case action_type_1.default.DELETE_BLOCK:
+                return page_type_1.default.CONFIRM_DELETE_BLOCK;
+            case action_type_1.default.EDIT_BLOCK:
+                return page_type_1.default.EDIT_BLOCK;
+            default:
+                throw new errors_1.InvariantViolation(`
+					Unsupported action type when mapping to page type: ${action_type}
+				`);
+        }
+    }
+    serializeSections() {
+        const action = this.getResult();
+        const { action_type } = action;
+        switch (action_type) {
+            case action_type_1.default.ADD_BLOCK:
+                return this.serializeAddBlock(action);
+            case action_type_1.default.DELETE_BLOCK:
+                return this.serializeDeleteBlock(action);
+            case action_type_1.default.EDIT_BLOCK:
+                return this.serializeModifiableBlock(action);
+            default:
+                throw new errors_1.InvariantViolation(`
+					Invalid action type: ${action_type}
+				`);
+        }
+    }
+    serializeAddBlock(action) {
+        const { block_type } = action;
+        if (block_type === undefined) {
+            return this.serializeUnselectedBlockType(action);
+        }
+        return this.serializeModifiableBlock(action);
+    }
+    serializeModifiableBlock(action) {
+        const metadata = this.getMetadata();
+        const { block_type } = buildBlockForAction(action, metadata);
+        switch (block_type) {
+            case block_type_1.default.NOTE:
+                return this.serializeModifiableNoteBlock(action);
+            case block_type_1.default.TODO:
+                return this.serializeModifiableTodoBlock(action);
+            case block_type_1.default.IMAGE:
+                return this.serializeModifiableImageBlock(action);
+            case block_type_1.default.AUDIO:
+                return this.serializeModifiableAudioBlock(action);
+            case block_type_1.default.HEADER:
+                return this.serializeModifiableHeaderBlock(action);
+            case block_type_1.default.FOLDER:
+                return this.serializeModifiableFolderBlock(action);
+            case block_type_1.default.MULTI_COLUMN:
+                return this.serializeModifiableMultiColumnBlock(action);
+            case block_type_1.default.LINK:
+                return this.serializeModifiableLinkBlock(action);
+            default:
+                throw new errors_1.InvariantViolation(`
+					Invalid block type: ${block_type}
+				`);
+        }
+    }
+    serializeUnselectedBlockType(action) {
+        const { path, editing, index_path } = action;
+        function serializeBlockLink(block_type, last = false) {
+            const offset_class = last ? '' : 'mb-8';
+            const emoji = (0, get_emoji_for_block_type_1.default)(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=${action_type_1.default.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_1.default.BOOKS} add block:</h2>
+				<ul>
+					${serializeBlockLink(block_type_1.default.NOTE)}
+					${serializeBlockLink(block_type_1.default.IMAGE)}
+					${serializeBlockLink(block_type_1.default.AUDIO)}
+					${serializeBlockLink(block_type_1.default.TODO)}
+					${serializeBlockLink(block_type_1.default.HEADER)}
+					${serializeBlockLink(block_type_1.default.LINK)}
+					${serializeBlockLink(block_type_1.default.FOLDER)}
+					${serializeBlockLink(block_type_1.default.MULTI_COLUMN)}
+				</ul>
+			</section>
+
+			<!--
+			<section>
+				<h2>create page:</h2>
+				<ul>
+					<li>
+						<a href="/actions?action_type=${action_type_1.default.CREATE_PAGE}&custom_page_type=${custom_page_type_1.default.BLANK}" class="biglink align-left">
+							${emoji_1.default.DOCUMENT} blank
+						</a>
+					</li>
+					<li class="mt-8">
+						<a href="/actions?action_type=${action_type_1.default.CREATE_PAGE}&custom_page_type=${custom_page_type_1.default.FORM}" class="biglink align-left">
+							${emoji_1.default.RECEIPT} form
+						</a>
+					<li class="mt-8">
+					</li>
+						<a href="/actions?action_type=${action_type_1.default.CREATE_PAGE}&custom_page_type=${custom_page_type_1.default.PRODUCT}" class="biglink align-left">
+							${emoji_1.default.SHOPPING_BAGS} product
+						</a>
+					</li>
+				</ul>
+			</section>
+			-->
+		`;
+    }
+    serializeModifiableImageBlock(action) {
+        const { path } = action;
+        return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${emoji_1.default.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>
+		`);
+    }
+    serializeModifiableAudioBlock(action) {
+        const { path } = action;
+        return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${emoji_1.default.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>
+		`);
+    }
+    serializeModifiableTodoBlock(action) {
+        const { path, action_type } = action;
+        const is_adding = action_type === action_type_1.default.ADD_BLOCK;
+        const verb = is_adding ? 'adding' : 'updating';
+        const metadata = this.getMetadata();
+        const block = buildBlockForAction(action, metadata);
+        const todo_block = block;
+        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_1.default.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>
+		`);
+    }
+    serializeModifiableNoteBlock(action) {
+        const { path, action_type } = action;
+        const is_adding = action_type === action_type_1.default.ADD_BLOCK;
+        const verb = is_adding ? 'adding' : 'updating';
+        const metadata = this.getMetadata();
+        const block = buildBlockForAction(action, metadata);
+        const { text } = block;
+        return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${emoji_1.default.NOTEPAD} ${verb} text on page: [${path}]</legend>
+				<textarea id="text-input" name="text" placeholder="${text}" autofocus autocomplete="off">${text}</textarea>
+			</fieldset>
+		`);
+    }
+    serializeModifiableHeaderBlock(action) {
+        const { path } = action;
+        return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${emoji_1.default.PLACARD} adding title to page: [${path}]</legend>
+				<input name="title" type="text" placeholder="your title here" autofocus autocomplete="off" />
+			</fieldset>
+		`);
+    }
+    serializeModifiableLinkBlock(action) {
+        const metadata = this.getMetadata();
+        const block = buildBlockForAction(action, metadata);
+        const link_block = block;
+        const { label, href, color } = link_block;
+        const color_inputs = serializeColorInputs('color', color);
+        return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${emoji_1.default.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_1.default.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_1.default.PALETTE} link color</legend>
+				<div class="pt-8">
+					${color_inputs}
+				</div>
+			</fieldset>
+		`);
+    }
+    serializeModifiableMultiColumnBlock(action) {
+        const { path } = action;
+        const metadata = this.getMetadata();
+        const { block } = buildBlockAndMetadataForAction(action, metadata);
+        const { max_columns } = block;
+        return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${emoji_1.default.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>
+		`);
+    }
+    serializeModifiableFolderBlock(action) {
+        const { action_type, path } = action;
+        const is_adding = action_type === action_type_1.default.ADD_BLOCK;
+        const adjective = is_adding ? 'new' : 'updated';
+        const metadata = this.getMetadata();
+        const block = buildBlockForAction(action, metadata);
+        const folder_block = block;
+        const { title, subtitle, emoji, color } = folder_block;
+        const block_id = getBlockIdForAction(action, metadata);
+        const folder_path = (0, get_path_for_folder_block_1.default)({
+            base_path: path,
+            block: folder_block
+        });
+        const color_inputs = serializeColorInputs('color', color);
+        return this.wrapModifyBlockAction(action, `
+			<fieldset>
+				<legend>${emoji_1.default.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_1.default.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_1.default.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_1.default.PALETTE} link color</legend>
+				<div class="pt-8">
+					${color_inputs}
+				</div>
+			</fieldset>
+		`);
+    }
+    wrapModifyBlockAction(action, block_specific_markup) {
+        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 block_result_serializer_1.default(block, updated_metadata, session);
+        const serializer = factory.create();
+        const block_preview = serializer.serializeContent();
+        const selected_color = block.color || color_1.default.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_1.default.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_1.default.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_1.default.LEFT_ARROW_UNICODE} cancel
+									</a>
+								</td>
+
+								<td>
+									<button class="biglink green" type="submit">
+										submit ${emoji_1.default.RIGHT_ARROW_UNICODE}
+									</button>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</form>
+			</section>
+		`;
+    }
+    renderPermissionsSection(block) {
+        const permissions = (0, get_block_permissions_1.default)(block);
+        const permission_types = Object.keys(permissions);
+        const { roles } = this.getMetadata();
+        const permission_rows = [];
+        const summary_emojis = [];
+        function renderPermissionOptions(selected_role) {
+            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 errors_1.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>
+		`;
+    }
+    renderTimePlaceSection(block) {
+        const current_visibility = (() => {
+            if (block.show_time && block.show_place) {
+                return time_place_visibility_1.default.BOTH;
+            }
+            if (block.show_time) {
+                return time_place_visibility_1.default.TIME;
+            }
+            if (block.show_place) {
+                return time_place_visibility_1.default.PLACE;
+            }
+            return time_place_visibility_1.default.NONE;
+        })();
+        const label = (0, get_label_for_time_place_visibility_1.default)(current_visibility);
+        const options = (0, time_place_options_1.default)(current_visibility);
+        return `
+			<details>
+				<summary>time and place
+					<span class="summary-label">
+						${label}
+					</span>
+				</summary>
+
+				${options}
+			</details>
+		`;
+    }
+    serializeDeleteBlock(action) {
+        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 block_result_serializer_1.default(block, block_metadata, session);
+        const serializer = factory.create();
+        const serialized_block = serializer.serializeContent();
+        const block_type = 'title';
+        const created_date = (0, create_date_1.default)(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="${action_type_1.default.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_1.default.LEFT_ARROW_UNICODE} cancel
+									</a>
+								</td>
+
+								<td>
+									<button class="biglink red" type="submit">
+										delete ${emoji_1.default.RIGHT_ARROW_UNICODE}
+									</button>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</form>
+			</section>
+		`;
+    }
+    getRoles() {
+        const { roles } = this.getMetadata();
+        return roles;
+    }
+    getAccount() {
+        const { account } = this.getMetadata();
+        return account;
+    }
+    getMetadata() {
+        return this.metadata;
+    }
+}
+exports.default = ActionResultSerializer;
+//# sourceMappingURL=action.js.map