tildefriends/apps/issues/script.js

import {LitElement, html, unsafeHTML} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';
import * as tfutils from './tf-utils.js';

const k_project = '%Hr+4xEVtjplidSKBlRWi4Aw/0Tfw7B+1OR9BzlDKmOI=.sha256';

class TfIdPickerElement extends LitElement {
	static get properties() {
		return {
			ids: {type: Array},
			selected: {type: String},
		};
	}

	constructor() {
		super();
		this.load();
	}

	async load() {
		this.selected = await tfrpc.rpc.localStorageGet('whoami');
		this.ids = (await tfrpc.rpc.getIdentities()) || [];
	}

	changed(event) {
		this.selected = event.srcElement.value;
		tfrpc.rpc.localStorageSet('whoami', this.selected);
	}

	render() {
		if (this.ids) {
			return html`
				<select @change=${this.changed} style="max-width: 100%">
					${(this.ids).map(id => html`<option ?selected=${id == this.selected} value=${id}>${id}</option>`)}
				</select>
			`;
		} else {
			return html`<div>Loading...</div>`;
		}
	}
}
customElements.define('tf-id-picker', TfIdPickerElement);

class TfComposeElement extends LitElement {
	static get properties() {
		return {
			value: {type: String},
		};
	}

	input() {
		let input = this.renderRoot.getElementById('input');
		let preview = this.renderRoot.getElementById('preview');
		if (input && preview) {
			preview.innerHTML = tfutils.markdown(input.value);
		}
	}

	submit() {
		this.dispatchEvent(new CustomEvent('tf-submit', {
			bubbles: true,
			composed: true,
			detail: {
				value: this.renderRoot.getElementById('input').value,
			},
		}));
		this.renderRoot.getElementById('input').value = '';
		this.input();
	}

	render() {
		return html`
			<div style="display: flex; flex-direction: row">
				<textarea id="input" @input=${this.input} style="flex: 1 1">${this.value}</textarea>
				<div id="preview" style="flex: 1 1"></div>
			</div>
			<input type="submit" value="Submit" @click=${this.submit}></input>
		`;
	}
}
customElements.define('tf-compose', TfComposeElement);

class TfIssuesAppElement extends LitElement {
	static get properties() {
		return {
			issues: {type: Array},
			selected: {type: Object},
		};
	}

	constructor() {
		super();
		this.issues = [];
		this.load();
	}

	async load() {
		let issues = {};
		let messages = await tfrpc.rpc.query(`
			WITH issues AS (SELECT messages.* FROM messages_refs JOIN messages ON
				messages.id = messages_refs.message
				WHERE messages_refs.ref = ? AND json_extract(messages.content, '$.type') = 'issue'),
			edits AS (SELECT messages.* FROM issues JOIN messages_refs ON
				issues.id = messages_refs.ref JOIN messages ON
				messages.id = messages_refs.message
				WHERE json_extract(messages.content, '$.type') IN ('issue-edit', 'post'))
			SELECT * FROM issues
			UNION
			SELECT * FROM edits ORDER BY timestamp
		`, [k_project]);
		for (let message of messages) {
			let content = JSON.parse(message.content);
			switch (content.type) {
				case 'issue':
					issues[message.id] = {
						id: message.id,
						author: message.author,
						text: content.text,
						updates: [],
						created: message.timestamp,
						open: true,
					};
					break;
				case 'issue-edit':
				case 'post':
					for (let issue of (content.issues || [])) {
						if (issues[issue.link]) {
							if (issue.open !== undefined) {
								issues[issue.link].open = issue.open;
								message.open = issue.open;
							}
							issues[issue.link].updates.push(message);
							issues[issue.link].updated = message.timestamp;
						}
					}
					break;
			}
		}
		this.issues = Object.values(issues).sort((x, y) => y.created - x.created);
		if (this.selected) {
			for (let issue of this.issues) {
				if (issue.id == this.selected.id) {
					this.selected = issue;
				}
			}
		}
	}

	render_issue_table_row(issue) {
		return html`
			<tr>
				<td>${issue.open ? 'open' : 'closed'}</td>
				<td style="max-width: 8em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">${issue.author}</td>
				<td style="max-width: 40em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer" @click=${() => this.selected = issue}>
					${issue.text.split('\n')?.[0]}
				</td>
				<td>${new Date(issue.created).toLocaleDateString()}</td>
			</tr>
		`;
	}

	render_update(update) {
		let content = JSON.parse(update.content);
		let message;
		if (content.text) {
			message = unsafeHTML(tfutils.markdown(content.text));
		}
		return html`
			<div style="border-left: 2px solid #fff; padding-left: 8px">
				<div>${new Date(update.timestamp).toLocaleString()}</div>
				<div>${update.author}</div>
				<div>${message}</div>
				<div>${update.open !== undefined ? (update.open ? 'issue opened' : 'issue closed') : undefined}</div>
			</div>
		`;
	}

	async set_open(id, open) {
		if (confirm(`Are you sure you want to ${open ? 'open' : 'close'} this issue?`)) {
			let whoami = this.shadowRoot.getElementById('picker').selected;
			await tfrpc.rpc.appendMessage(whoami, {
				type: 'issue-edit',
				issues: [
					{
						link: id,
						open: open,
					},
				],
			});
			await this.load();
		}
	}

	async create_issue(event) {
		let whoami = this.shadowRoot.getElementById('picker').selected;
		await tfrpc.rpc.appendMessage(whoami, {
			type: 'issue',
			project: k_project,
			text: event.detail.value,
		});
		await this.load();
	}

	async reply_to_issue(event) {
		let whoami = this.shadowRoot.getElementById('picker').selected;
		await tfrpc.rpc.appendMessage(whoami, {
			type: 'post',
			text: event.detail.value,
			issues: [
				{
					link: this.selected.id,
				},
			],
		});
		await this.load();
	}

	render() {
		let header = html`
			<h1>Tilde Friends Issues</h1>
			<tf-id-picker id="picker"></tf-id-picker>
		`;
		if (this.selected) {
			return html`
				${header}
				<div>
					<input type="button" value="Back" @click=${() => this.selected = undefined}></input>
					${this.selected.open ?
						html`<input type="button" value="Close Issue" @click=${() => this.set_open(this.selected.id, false)}></input>` :
						html`<input type="button" value="Reopen Issue" @click=${() => this.set_open(this.selected.id, true)}></input>`}
				</div>
				<div>${new Date(this.selected.created).toLocaleString()}</div>
				<div>${this.selected.author}</div>
				<div>${this.selected.id}</div>
				<div>${unsafeHTML(tfutils.markdown(this.selected.text))}</div>
				${this.selected.updates.map(x => this.render_update(x))}
				<tf-compose @tf-submit=${this.reply_to_issue}></tf-compose>
			`;
		} else {
			return html`
				${header}
				<h2>New Issue</h2>
				<tf-compose @tf-submit=${this.create_issue}></tf-compose>
				<table>
					<tr>
						<th>Status</th>
						<th>Author</th>
						<th>Title</th>
						<th>Date</th>
					</tr>
					${this.issues.map(x => this.render_issue_table_row(x))}
				</table>
			`;
		}
	}
}

customElements.define('tf-issues-app', TfIssuesAppElement);