Merge pull request #55 from toaq/edit

Allow editing entries

core/api.ts

@@ -209,6 +209,32 @@ actions.note = guard(
 	},
 );
 
+actions.edit = guard(
+	true,
+	{
+		id: checks.goodid,
+		body: checks.nobomb,
+		scope: checks.scope,
+	},
+	(ret, i, uname) => {
+		let word = by_id(i.id);
+		if (word.user !== uname) {
+			return ret(flip('you are not the owner of this entry'));
+		}
+		const new_body = replacements(i.body);
+		const body_changed = word.body !== new_body;
+		const scope_changed = word.scope !== i.scope;
+		word.body = new_body;
+		word.scope = i.scope;
+		ret(good({ entry: present(word, uname) }));
+		if (body_changed) {
+			emitter.emit('edit', word);
+		} else if (scope_changed) {
+			emitter.emit('move', word);
+		}
+	},
+);
+
 actions.removenote = guard(
 	true,
 	{

core/search.ts

@@ -80,7 +80,7 @@ export function score(entry: Entry): number {
 
 emitter.on('remove', (_, entry) => cache.splice(cached_index(entry.id), 1));
 emitter.on('create', (_, entry) => cache.push(cacheify(entry)));
-for (let k of ['vote', 'note', 'removenote'])
+for (let k of ['vote', 'note', 'removenote', 'edit', 'move'])
 	emitter.on(k, (_, entry) =>
 		cache.splice(cached_index(entry.id), 1, cacheify(entry)),
 	);

frontend/App.vue

@@ -66,11 +66,13 @@
 		</div>
 		<Result
 			v-for="result in results"
+			:key="result.id"
 			:result="result"
 			:username="username"
 			:theme="theme"
 			@note="s => note(result, s)"
 			@removenote="date => removenote(result, date)"
+			@edit="(body, scope) => edit(result, body, scope)"
 			@uncollapse="
 				results.forEach(r => (r.uncollapsed = false));
 				result.uncollapsed = true;
@@ -145,10 +147,11 @@
 			/>
 			<datalist id="common-languages">
 				<option value="en" />
+				<option value="pl" />
 				<option value="toa" />
+				<option value="tok" />
 				<option value="ja" />
 				<option value="jbo" />
-				<option value="fr" />
 			</datalist>
 		</span>
 		<ul class="controls">
@@ -383,6 +386,15 @@ export default defineComponent({
 			});
 		},
 
+		edit(whom: Entry, body: string, scope: string): void {
+			// Update the entry early to prevent a flash of the old body...
+			this.update_entry(whom, { body, scope });
+			this.apisend({ action: 'edit', id: whom.id, body, scope }, data => {
+				// ...but let the API response have the final word:
+				this.update_entry(whom, data.entry);
+			});
+		},
+
 		create(): void {
 			this.apisend(
 				{

frontend/Result.vue

@@ -29,7 +29,18 @@ defineProps<{
 				>
 			</h2>
 			<span class="info">
+				<input
+					v-if="editing"
+					type="text"
+					size="5"
+					v-model="new_scope"
+					class="scope editing"
+					autocomplete="language"
+					list="common-languages"
+					@keypress.enter.exact.prevent="submit_edit"
+				/>
 				<a
+					v-if="!editing"
 					:href="'#scope:' + result.scope"
 					class="scope"
 					@click="navigate('scope:' + result.scope)"
@@ -46,7 +57,21 @@ defineProps<{
 				}}</span>
 			</span>
 		</div>
-		<p class="body" v-html="fancy_body"></p>
+		<textarea
+			v-if="editing"
+			v-focus
+			class="body editing"
+			rows="1"
+			placeholder="Enter a definition using slots (example: _&hairsp;_&hairsp;_ likes _&hairsp;_&hairsp;_)"
+			@input="set_new_body"
+			:value.sync="new_body"
+			@keypress.enter.exact.prevent="submit_edit"
+			autocomplete="off"
+			autocorrect="on"
+			autocapitalize="on"
+			spellcheck="true"
+		></textarea>
+		<p v-else class="body" v-html="fancy_body"></p>
 		<div class="notes">
 			<p class="note" v-for="note in fancy_notes">
 				<span
@@ -95,7 +120,15 @@ defineProps<{
 				</p>
 			</form>
 		</div>
-		<ul class="controls" v-if="username">
+		<ul class="controls" v-if="username && editing">
+			<li>
+				<input type="button" value="submit" @click="submit_edit" />
+			</li>
+			<li>
+				<input type="button" value="cancel" @click="editing = false" />
+			</li>
+		</ul>
+		<ul class="controls" v-if="username && !editing">
 			<li v-if="!result.uncollapsed">
 				<input type="button" value="add note" @click="$emit('uncollapse')" />
 				<!-- TODO: for some reason this doesn't work on second, third… try. jfc -->
@@ -142,6 +175,9 @@ defineProps<{
 			<li>
 				<input type="button" value="fork" @click="$emit('fork')" />
 			</li>
+			<li v-if="username == result.user">
+				<input type="button" value="edit" @click="start_edit" />
+			</li>
 		</ul>
 	</div>
 </template>
@@ -194,11 +230,34 @@ export default defineComponent({
 			this.$emit('note', this.input);
 			this.input = '';
 		},
+
+		start_edit(): void {
+			this.editing = true;
+			this.new_body = this.result.body;
+			this.new_scope = this.result.scope;
+		},
+
+		set_new_body(event: Event): void {
+			const target = event.target as HTMLTextAreaElement;
+			target.value = this.new_body = shared.replacements(
+				target.value,
+				true,
+				true,
+			);
+		},
+
+		submit_edit(): void {
+			this.$emit('edit', this.new_body, this.new_scope);
+			this.editing = false;
+		},
 	},
 	data() {
 		return {
 			hesitating: false,
 			input: '',
+			editing: false,
+			new_body: '',
+			new_scope: '',
 		};
 	},
 	computed: {

frontend/frontend.ts

@@ -2,4 +2,12 @@ import { createApp } from 'vue';
 import App from './App.vue';
 
 const app: any = createApp(App);
+
+// Define "v-focus" as focusing elements when they are mounted.
+app.directive('focus', {
+	mounted(el) {
+		el.focus();
+	},
+});
+
 app.mount('#container');

frontend/style.css

@@ -182,7 +182,7 @@ footer .controls {
 	margin-left: 0.25em;
 }
 
-.card .scope {
+.card .scope:not(.editing) {
 	color: inherit;
 	opacity: 0.5;
 }
@@ -226,7 +226,7 @@ footer .controls {
 #login input[type='text'],
 #login input[type='password'],
 #create input[type='text'],
-#create textarea {
+textarea {
 	display: block;
 	border: none;
 	border-radius: 0;
@@ -264,7 +264,7 @@ textarea {
 }
 
 #create input[type='text'],
-#create textarea {
+textarea {
 	padding: 0;
 	border: none;
 	resize: none;
@@ -284,6 +284,11 @@ textarea {
 	padding-bottom: 16px;
 }
 
+.editing {
+	color: inherit;
+	background-color: #0000000d;
+}
+
 p.new_note.note input[type='text'] {
 	box-sizing: border-box;
 	width: 100%;

modules/announce.ts

@@ -7,7 +7,15 @@ import request from 'request-promise-native';
 import { Entry, Note } from '../core/commons.js';
 import * as shared from '../frontend/shared/index.js';
 
-type AnnounceEvent = 'create' | 'note' | 'remove' | 'removenote';
+const event_types = [
+	'create',
+	'note',
+	'remove',
+	'removenote',
+	'edit',
+	'move',
+] as const;
+type AnnounceEvent = (typeof event_types)[any];
 
 interface WebhookEmbed {
 	color?: number;
@@ -28,13 +36,20 @@ export function onAnnounceEvent(ev: AnnounceEvent, entry: Entry, note?: Note) {
 		note: 'noted on',
 		remove: 'removed',
 		removenote: 'removed a note on',
+		edit: 'edited',
+		move: 'moved',
 	}[ev];
 	if (!action) {
 		console.log(`!! unexpected action ${action} in announce.entry`);
 		return;
 	}
 
-	const scope = entry.scope !== 'en' ? ` in scope __${entry.scope}__` : '';
+	const scope =
+		ev === 'move'
+			? ` to scope __${entry.scope}__`
+			: entry.scope !== 'en'
+			? ` in scope __${entry.scope}__`
+			: '';
 	const title = note
 		? `*${note.user}* ${action} **${entry.head}**`
 		: `*${entry.user}* ${action} **${entry.head}**${scope}`;
@@ -107,7 +122,7 @@ var options: { enabled: boolean; hook: string };
 var queue: request.Options[] = [];
 export function state_change() {
 	if (enabled !== (options = this ?? {}).enabled)
-		for (const ev of ['create', 'note', 'remove', 'removenote'])
+		for (const ev of event_types)
 			commons.emitter[options.enabled ? 'on' : 'off'](ev, onAnnounceEvent);
 	enabled = options.enabled;
 	if (!enabled) queue.splice(0, queue.length);