Expanded edit fields. Added revision history to scene and user pages.

pages/scene/edit/+Page.vue

@@ -1,6 +1,40 @@
 <template>
 	<div class="editor">
-		<form @submit.prevent>
+		<p
+			v-if="submitted"
+			class="submitted"
+		>
+			<template v-if="apply">Your revision has been submitted. Thank you for your contribution!</template>
+			<template v-else>Your revision has been submitted for review. Thank you for your contribution!</template>
+
+			<ul>
+				<li>
+					<a
+						:href="`/scene/${scene.id}/${scene.slug}`"
+						class="link"
+					>Return to scene</a>
+				</li>
+
+				<li>
+					<a
+						:href="`/scene/edit/${scene.id}`"
+						class="link"
+					>Make another edit</a>
+				</li>
+
+				<li>
+					<a
+						:href="`/user/${user.username}`"
+						class="link"
+					>Go to profile</a>
+				</li>
+			</ul>
+		</p>
+
+		<form
+			v-else
+			@submit.prevent
+		>
 			<div class="editor-header">
 				<h2 class="heading ellipsis">Edit scene #{{ scene.id }}</h2>
 
@@ -52,6 +86,15 @@
 							@tags="(tags) => { edits.tags = tags; }"
 						/>
 
+						<EditMovies
+							v-if="item.type === 'movies'"
+							:scene="scene"
+							:item="item"
+							:edits="edits"
+							:editing="editing"
+							@movies="(movies) => { edits.movies = movies; }"
+						/>
+
 						<input
 							v-if="item.type === 'string'"
 							:value="edits[item.key] || item.value"
@@ -128,13 +171,24 @@
 				</div>
 
 				<div class="editor-actions">
+					<Checkbox
+						v-if="user.role !== 'user'"
+						label="Approve and apply immediately"
+						:checked="apply"
+						:disabled="editing.size === 0"
+						@change="(checked) => apply = checked"
+					/>
+
 					<!-- we don't want the return key to submit the form -->
 					<button
 						class="button button-primary"
 						type="button"
 						:disabled="editing.size === 0"
 						@click="submit"
-					>Submit</button>
+					>
+						<template v-if="apply">Submit</template>
+						<template v-else>Submit for review</template>
+					</button>
 				</div>
 			</div>
 		</form>
@@ -147,8 +201,13 @@ import { format } from 'date-fns';
 
 import EditActors from '#/components/edit/actors.vue';
 import EditTags from '#/components/edit/tags.vue';
+import EditMovies from '#/components/edit/movies.vue';
+import Checkbox from '#/components/form/checkbox.vue';
 
-import { get, patch } from '#/src/api.js';
+import {
+	// get,
+	post,
+} from '#/src/api.js';
 
 const pageContext = inject('pageContext');
 
@@ -168,6 +227,11 @@ const fields = computed(() => [
 		type: 'tags',
 		value: scene.value.tags,
 	},
+	{
+		key: 'movies',
+		type: 'movies',
+		value: scene.value.movies,
+	},
 	{
 		key: 'title',
 		type: 'string',
@@ -211,6 +275,8 @@ const fields = computed(() => [
 const editing = ref(new Set());
 const edits = ref({});
 const comment = ref(null);
+const apply = ref(user.role !== 'user');
+const submitted = ref(false);
 
 function toggleField(item) {
 	if (editing.value.has(item.key)) {
@@ -219,6 +285,7 @@ function toggleField(item) {
 
 		return;
 	}
+
 	editing.value.add(item.key);
 
 	if (Array.isArray(item.value)) {
@@ -231,6 +298,8 @@ function toggleField(item) {
 
 function setValue(item, event) {
 	edits.value[item.key] = event.target.value;
+
+	console.log(edits.value);
 }
 
 const timeUnits = ['h', 'm', 's'];
@@ -241,7 +310,8 @@ function setDuration(unit, event) {
 
 async function submit() {
 	try {
-		await patch(`/scenes/${scene.value.id}`, {
+		await post('/revisions', {
+			sceneId: scene.value.id,
 			edits: {
 				...edits.value,
 				duration: edits.value.duration
@@ -249,6 +319,7 @@ async function submit() {
 					: undefined,
 			},
 			comment: comment.value,
+			apply: apply.value,
 		}, {
 			successFeedback: 'Your revision has been submitted for approval.',
 			appendErrorMessage: true,
@@ -258,9 +329,9 @@ async function submit() {
 		edits.value = {};
 		comment.value = null;
 
-		scene.value = await get(`/scenes/${scene.value.id}`);
+		submitted.value = true;
 
-		console.log(scene.value);
+		// scene.value = await get(`/scenes/${scene.value.id}`);
 	} catch (error) {
 		// do nothing
 	}
@@ -270,6 +341,7 @@ async function submit() {
 <style scoped>
 .editor {
 	flex-grow: 1;
+	background: var(--background-dark-10);
 }
 
 .editor-header {
@@ -295,6 +367,10 @@ async function submit() {
 	font-weight: bold;
 }
 
+.input {
+	background: var(--background);
+}
+
 .item-header {
 	display: flex;
 	align-items: center;
@@ -368,8 +444,10 @@ async function submit() {
 
 .editor-actions {
 	display: flex;
+	flex-direction: column;
 	align-items: center;
-	gap: 2rem;
+	gap: 1.5rem;
+	margin: .5rem 0;
 
 	.button {
 		padding: .5rem 1rem;
@@ -377,6 +455,15 @@ async function submit() {
 	}
 }
 
+.submitted {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 1rem;
+	font-weight: bold;
+	line-height: 1.5;
+}
+
 @media(--small) {
 	.row {
 		flex-direction: column;

pages/scene/edit/+route.js

@@ -1 +1 @@
-export default '/scene/@sceneId/*/edit';
+export default '/scene/edit/@sceneId/*';