Added date precision to release date edit.

pages/scene/edit/+Page.vue

@@ -111,30 +111,44 @@
 
 						<input
 							v-if="item.type === 'string'"
-							:value="edits[item.key] || item.value"
+							v-model="edits[item.key]"
 							class="string input"
 							:disabled="!editing.has(item.key)"
-							@input="setValue(item, $event)"
 						>
 
 						<textarea
 							v-if="item.type === 'text'"
-							:value="edits[item.key] || item.value"
+							v-model="edits[item.key]"
 							:placeholder="item.placeholder"
 							rows="3"
 							class="text input"
 							:disabled="!editing.has(item.key)"
-							@input="setValue(item, $event)"
 						/>
 
-						<input
+						<div
 							v-if="item.type === 'date'"
-							type="datetime-local"
+							class="date"
-							:value="edits[item.key] || item.value"
-							class="date input"
-							:disabled="!editing.has(item.key)"
-							@input="setValue(item, $event)"
 						>
+							<input
+								v-model="edits[item.key].date"
+								type="datetime-local"
+								class="date input"
+								:disabled="!editing.has(item.key)"
+							>
+
+							<select
+								v-if="item.value.precision"
+								v-model="edits[item.key].precision"
+								class="input"
+								:disabled="!editing.has(item.key)"
+							>
+								<option value="minute">Minute</option>
+								<option value="hour">Hour</option>
+								<option value="day">Day</option>
+								<option value="month">Month</option>
+								<option value="year">Year</option>
+							</select>
+						</div>
 
 						<div
 							v-if="item.type === 'duration'"
@@ -257,9 +271,12 @@ const fields = computed(() => [
 	{
 		key: 'date',
 		type: 'date',
-		value: scene.value.date
+		value: {
-			? format(scene.value.date, 'yyyy-MM-dd hh:mm')
+			date: scene.value.date
-			: null,
+				? format(scene.value.date, 'yyyy-MM-dd hh:mm')
+				: null,
+			precision: scene.value.datePrecision,
+		},
 	},
 	{
 		key: 'duration',
@@ -270,9 +287,12 @@ const fields = computed(() => [
 		key: 'productionDate',
 		label: 'production date',
 		type: 'date',
-		value: scene.value.productionDate
+		value: {
-			? format(scene.value.productionDate, 'yyyy-MM-dd hh:mm')
+			date: scene.value.productionDate
-			: null,
+				? format(scene.value.productionDate, 'yyyy-MM-dd hh:mm')
+				: null,
+			precision: scene.value.productionDatePrecision, // not currently implemented
+		},
 	},
 	...(user.role === 'user'
 		? []
@@ -284,32 +304,40 @@ const fields = computed(() => [
 		}]),
 ]);
 
+function simplifyArray(value) {
+	if (Array.isArray(value)) {
+		return value.map((item) => item.hash || item.id);
+	}
+
+	return value;
+}
+
 const editing = ref(new Set());
-const edits = ref({});
+const edits = ref(Object.fromEntries(fields.value.map((field) => [field.key, simplifyArray(field.value)])));
 const comment = ref(null);
 const apply = ref(user.role !== 'user');
 const submitted = ref(false);
 
+const keyMap = {
+	date: {
+		date: 'date',
+		precision: 'datePrecision',
+	},
+	productionDate: {
+		date: 'productionDate',
+		precision: 'productionDatePrecision',
+	},
+};
+
 function toggleField(item) {
 	if (editing.value.has(item.key)) {
 		editing.value.delete(item.key);
-		delete edits.value[item.key];
+		// delete edits.value[item.key];
 
 		return;
 	}
 
 	editing.value.add(item.key);
-
-	if (Array.isArray(item.value)) {
-		edits.value[item.key] = item.value.map((value) => value.hash || value.id);
-		return;
-	}
-
-	edits.value[item.key] = item.value;
-}
-
-function setValue(item, event) {
-	edits.value[item.key] = event.target.value;
 }
 
 const timeUnits = ['h', 'm', 's'];
@@ -323,7 +351,13 @@ async function submit() {
 		await post('/revisions/scenes', {
 			sceneId: scene.value.id,
 			edits: {
-				...edits.value,
+				...Object.fromEntries(Array.from(editing.value).flatMap((key) => {
+					if (edits.value[key] && typeof edits.value[key] === 'object' && !Array.isArray(edits.value[key])) {
+						return Object.entries(edits.value[key]).map(([valueKey, value]) => [keyMap[key]?.[valueKey] || valueKey, value]);
+					}
+
+					return [[key, edits.value[key]]];
+				})),
 				duration: edits.value.duration
 					? (((edits.value.duration[0] || 0) * 3600) + ((edits.value.duration[1] || 0) * 60) + (edits.value.duration[2] || 0)) || null
 					: undefined,
@@ -415,6 +449,12 @@ async function submit() {
 	}
 }
 
+.date {
+	.input {
+		width: auto;
+	}
+}
+
 .item-actions {
 	.icon {
 		padding: .25rem 1rem;

src/scenes.js

@@ -706,6 +706,7 @@ export async function fetchSceneRevisions(revisionId, filters = {}, reqUser) {
 }
 
 const keyMap = {
+	datePrecision: 'date_precision',
 	productionDate: 'production_date',
 	productionLocation: 'production_location',
 	productionCity: 'production_city',
@@ -784,6 +785,7 @@ async function applySceneRevision(revisionIds) {
 					'title',
 					'description',
 					'date',
+					'datePrecision',
 					'duration',
 					'productionDate',
 					'productionLocation',