Close to the general experience I want for editing wiki pages. Bugs galore.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4595 ed5197a5-7fde-0310-b194-c3ffbd925b24

apps/collections.json

@@ -1,5 +1,5 @@
 {
   "type": "tildefriends-app",
   "emoji": "📦",
-  "previous": "&eNhxb2nCe0HSz+sMeiFDY/S8clbarp6P0wmYzBEQ1gI=.sha256"
+  "previous": "&JGlOM9T/I5L3daDq44CL/khzQy5OhBOFO3SXa5pUEnM=.sha256"
 }

apps/collections/app.js

@@ -2,6 +2,10 @@ import * as tfrpc from '/tfrpc.js';
 
 let g_hash;
 
+tfrpc.register(async function getOwnerIdentities() {
+	return ssb.getOwnerIdentities();
+});
+
 tfrpc.register(async function getIdentities() {
 	return ssb.getIdentities();
 });

apps/collections/index.html

@@ -6,7 +6,7 @@
 		<tf-collections-app></tf-collections-app>
 		<script>window.litDisableBundleWarning = true;</script>
 		<script src="tf-collections-app.js" type="module"></script>
-		<script src="tf-collections.js" type="module"></script>
+		<script src="tf-collection.js" type="module"></script>
 		<script src="tf-id-picker.js" type="module"></script>
 		<script src="tf-wiki-doc.js" type="module"></script>
 	</body>

apps/collections/tf-collection.js

@@ -5,11 +5,14 @@ class TfCollectionElement extends LitElement {
 	static get properties() {
 		return {
 			whoami: {type: String},
-			collections: {type: Object},
+			ids: {type: Array},
+			collections: {type: Array},
 			collections_loading: {type: Number},
 			type: {type: String},
 			parent: {type: String},
 			selectname: {type: String},
+			selectid: {type: String},
+			is_creating: {type: Boolean},
 		};
 	}
 
@@ -19,6 +22,7 @@ class TfCollectionElement extends LitElement {
 		this.loaded = this.load();
 		this.type = 'collection';
 		this.collections_loading = 0;
+		console.log('CONSTRUCTOR');
 	}
 
 	process_message(message) {
@@ -36,10 +40,11 @@ class TfCollectionElement extends LitElement {
 
 	async load() {
 		try {
+			console.log('loading...');
 			this.collections_loading++;
-			if (this.whoami) {
-				let following = await tfrpc.rpc.following([this.whoami], 2);
-				this.following = following;
+			if (this.ids) {
+				let visible = this.ids;
+				this.visible = visible;
 				if (this.type) {
 					let collections = await tfrpc.rpc.query(`
 						SELECT messages.id, author, content, timestamp
@@ -48,7 +53,7 @@ class TfCollectionElement extends LitElement {
 							json_extract(content, '$.type') = ?2 AND
 							(?3 IS NULL OR json_extract(content, '$.parent') = ?3)
 						ORDER BY timestamp
-					`, [JSON.stringify(following), this.type, this.parent]);
+					`, [JSON.stringify(visible), this.type, this.parent]);
 					this.by_id = {};
 					for (let collection of collections) {
 						this.process_message(collection);
@@ -56,7 +61,6 @@ class TfCollectionElement extends LitElement {
 					this.collections = Object.values(this.by_id);
 				}
 			}
-			console.log('loaded', this.collections);
 		} finally {
 			this.collections_loading--;
 		}
@@ -77,11 +81,9 @@ class TfCollectionElement extends LitElement {
 	}
 
 	notify_new_message(message) {
-		console.log('got notify new message', message);
-		if (this.following &&
-			this.following.indexOf(message.author) != -1 &&
+		if (this.visible &&
+			this.visible.indexOf(message.author) != -1 &&
 			JSON.parse(message.content).type == this.type) {
-			console.log('processing message', message);
 			this.process_message(message);
 			this.collections = [...Object.values(this.by_id)];
 		}
@@ -110,6 +112,7 @@ class TfCollectionElement extends LitElement {
 	}
 
 	set_selected(id, value, by_user) {
+		this.selectedid = id;
 		this.dispatchEvent(new CustomEvent('selected', {
 			bubbles: true,
 			detail: {
@@ -144,23 +147,36 @@ class TfCollectionElement extends LitElement {
 		`;
 	}
 
+	on_selected(event) {
+		if (this.collections) {
+			for (let collection of this.collections) {
+				if (collection.id === event.srcElement.value) {
+					this.set_selected(collection.id, collection, true);
+					break;
+				}
+			}
+		}
+	}
+
 	render() {
+		let self = this;
 		let state = JSON.stringify([this.whoami, this.ids, this.parent]);
 		if (state !== this.loaded_for) {
 			this.loaded_for = state;
-			console.log('start load', state);
 			this.loaded = this.load();
 		}
 		return html`
-			<h2 style="color: #fff">${this.type}s</h2>
-			<div style="color: #fff">${this.whoami} ${this.selectname}</div>
-			<div>${this.parent}</div>
-			<input type="text" id="create_name"></input><button @click=${this.on_create}>Create ${this.type}</button>
-			${this.collections_loading ? html`<div>Loading...</div>` : html`
-				<ul>
-					${this.collections?.map(x => html`<li>${this.render_collection(x)}</li>`)}
-				</ul>
+			${this.collections_loading > 0 ? html`<div>Loading...</div>` : html`
+				<select @change=${this.on_selected}>
+					${this.collections?.map(x => html`<option value=${x.id} ?selected=${this.selectedid === x.id}>${x.name}</option>`)}
+				</select>
 			`}
+			<span ?hidden=${!this.is_creating}>
+				<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 @click=${() => self.is_creating = true} ?hidden=${this.is_creating}>+</button>
 		`;
 	}
 }

apps/collections/tf-collections-app.js

@@ -5,6 +5,7 @@ class TfCollectionsAppElement extends LitElement {
 	static get properties() {
 		return {
 			ids: {type: Array},
+			owner_ids: {type: Array},
 			whoami: {type: String},
 			wiki: {type: Object},
 			wiki_doc: {type: Object},
@@ -15,6 +16,7 @@ class TfCollectionsAppElement extends LitElement {
 	constructor() {
 		super();
 		this.ids = [];
+		this.owner_ids = [];
 		this.load();
 		let self = this;
 		tfrpc.register(function notify_new_message(message) {
@@ -28,6 +30,7 @@ class TfCollectionsAppElement extends LitElement {
 
 	async load() {
 		this.ids = await tfrpc.rpc.getIdentities();
+		this.owner_ids = await tfrpc.rpc.getOwnerIdentities();
 		this.whoami = await tfrpc.rpc.localStorageGet('collections_whoami');
 	}
 
@@ -103,11 +106,33 @@ class TfCollectionsAppElement extends LitElement {
 		let self = this;
 		console.log('render', this.wiki?.name, this.wiki_doc?.name, this.hash);
 		return html`
-			<h1 style="color: #fff">Hello! ${this.hash}</h1>
+			<div>
 				<tf-id-picker .ids=${this.ids} selected=${this.whoami} @change=${this.on_whoami_changed}></tf-id-picker>
-			<tf-collection whoami=${this.whoami} type="wiki" selectname=${this.hash?.substring(1)?.split('/')?.[0]} @selected=${this.on_wiki_changed}></tf-collection>
-			${this.wiki?.id ? html`<tf-collection id="docs" whoami=${this.whoami} type="wiki-doc" parent=${this.wiki.id} selectname=${this.hash?.split('/')?.[1]} @selected=${this.on_wiki_doc_changed}></tf-collection>` : undefined}
-			${this.wiki_doc && this.wiki_doc.parent === this.wiki?.id ? html`<tf-wiki-doc whoami=${this.whoami} .value=${this.wiki_doc} @publish=${this.on_wiki_publish}></tf-wiki-doc>` : undefined}
+			</div>
+			<div>
+				<tf-collection
+					whoami=${this.whoami}
+					.ids=${this.owner_ids}
+					type="wiki"
+					selectname=${this.hash?.substring(1)?.split('/')?.[0]}
+					@selected=${this.on_wiki_changed}></tf-collection>
+				${this.wiki?.id ? html`
+					<tf-collection
+						id="docs"
+						whoami=${this.whoami}
+						.ids=${this.owner_ids}
+						type="wiki-doc"
+						parent=${this.wiki.id}
+						selectname=${this.hash?.split('/')?.[1]}
+						@selected=${this.on_wiki_doc_changed}></tf-collection>
+				` : undefined}
+			</div>
+			${this.wiki_doc && this.wiki_doc.parent === this.wiki?.id ? html`
+				<tf-wiki-doc
+					whoami=${this.whoami}
+					.value=${this.wiki_doc}
+					@publish=${this.on_wiki_publish}></tf-wiki-doc>
+			` : undefined}
 		`;
 	}
 }

apps/collections/tf-wiki-doc.js

@@ -44,11 +44,12 @@ class TfWikiDocElement extends LitElement {
 			this.load_blob();
 		}
 		return html`
-			<div>WIKI DOC ${this.value.name}</div>
-			<pre>${JSON.stringify(this.value, null, 2)}</pre>
-			<div>
-			<textarea @input=${this.on_edit} .value=${this.blob ?? ''}></textarea>
-			<div>${this.blob}</div>
+			<div style="display: flex; flex-direction: row">
+				<textarea
+					style="flex: 1 1; min-height: 10em"
+					@input=${this.on_edit} .value=${this.blob ?? ''}></textarea>
+				<div style="flex: 1 1">${this.blob}</div>
+			</div>
 			<button ?disabled=${this.blob == this.blob_original} @click=${this.publish}>Publish</button>
 		`;
 	}