tildefriends/apps/wiki/tf-collection.js

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

class TfCollectionElement extends LitElement {
	static get properties() {
		return {
			whoami: {type: String},
			category: {type: String},
			collection: {type: Object},
			selected_id: {type: String},
			is_creating: {type: Boolean},
			is_renaming: {type: Boolean},
		};
	}

	on_create(event) {
		let name = this.shadowRoot.getElementById('create_name').value;
		this.dispatchEvent(
			new CustomEvent('create', {
				bubbles: true,
				detail: {
					name: name,
				},
			})
		);
		this.is_creating = false;
	}

	on_rename(event) {
		let id = this.shadowRoot.getElementById('select').value;
		let name = this.shadowRoot.getElementById('rename_name').value;
		this.dispatchEvent(
			new CustomEvent('rename', {
				bubbles: true,
				detail: {
					id: id,
					value: this.collection[id],
					name: name,
				},
			})
		);
		this.is_renaming = false;
	}

	on_tombstone(event) {
		let id = this.shadowRoot.getElementById('select').value;
		if (
			confirm(`Are you sure you want to delete '${this.collection[id].name}'?`)
		) {
			this.dispatchEvent(
				new CustomEvent('tombstone', {
					bubbles: true,
					detail: {
						id: id,
						value: this.collection[id],
					},
				})
			);
		}
	}

	on_selected(event) {
		let id = event.srcElement.value;
		this.selected_id = id != '' ? id : undefined;
		this.dispatchEvent(
			new CustomEvent('change', {
				bubbles: true,
				detail: {
					id: id,
					value: this.collection[id],
				},
			})
		);
	}

	render() {
		let self = this;
		return html`
			<link rel="stylesheet" href="tildefriends.css"/>
			<span class="inline-flex-row">
				<select @change=${this.on_selected} id="select" value=${this.selected_id}>
					<option value="" ?selected=${this.selected_id === ''} disabled hidden>(select ${this.category})</option>
					${Object.values(this.collection ?? {})
						.sort((x, y) => x.name.localeCompare(y.name))
						.map(
							(x) =>
								html`<option
									value=${x.id}
									?selected=${this.selected_id === x.id}
								>
									${x.name}
								</option>`
						)}
				</select>
				<span ?hidden=${!this.is_renaming || !this.whoami}>
					<span class="inline-flex-row" style="margin-left: 8px; margin-right: 8px">
						<label for="rename_name">🏷Rename to:</label>
						<input type="text" id="rename_name"></input>
						<button @click=${this.on_rename}>Rename ${this.type}</button>
						<button @click=${() => (self.is_renaming = false)}>x</button>
					</span>
				</span>
				<button class="yellow" @click=${() => (self.is_renaming = true)} ?disabled=${this.is_renaming || !this.selected_id} ?hidden=${!this.whoami}>🏷</button>
				<button class="red" @click=${self.on_tombstone} ?disabled=${!this.selected_id} ?hidden=${!this.whoami}>🪦</button>
				<span ?hidden=${!this.is_creating || !this.whoami}>
					<label for="create_name">New ${this.type} name:</label>
					<input type="text" id="create_name"></input>
					<button @click=${this.on_create}>Create ${this.type}</button>
					<button @click=${() => (self.is_creating = false)}>x</button>
				</span>
				<button class="green" @click=${() => (self.is_creating = true)} ?hidden=${this.is_creating || !this.whoami}>+</button>
			</span>
		`;
	}
}

customElements.define('tf-collection', TfCollectionElement);