Added delete option to scene edits.

pages/scene/edit/+Page.vue

@@ -73,7 +73,7 @@
 								v-if="item.note"
 								v-tooltip="item.note"
 								icon="info2"
-								class="item-note"
+								class="item-note noselect"
 							/>
 						</div>
 
@@ -81,6 +81,7 @@
 							<Icon
 								v-if="!item.forced"
 								icon="pencil5"
+								class="noselect"
 								:class="{ active: editing.has(item.key) }"
 								@click="toggleField(item)"
 							/>
@@ -134,6 +135,15 @@
 							:disabled="!editing.has(item.key)"
 						/>
 
+						<Checkbox
+							v-if="item.type === 'checkbox'"
+							:label="item.checkboxLabel"
+							:checked="edits[item.key]"
+							:disabled="!editing.has(item.key)"
+							class="checkbox delete"
+							@change="(checked) => setDelete(checked)"
+						/>
+
 						<div
 							v-if="item.type === 'date'"
 							class="date"
@@ -210,9 +220,10 @@
 				<div class="editor-actions">
 					<Checkbox
 						v-if="user.role !== 'user'"
+						v-tooltip="isApplyDisabled && editing.has('delete') ? 'Delete must be approved by an admin' : null"
 						label="Approve and apply immediately"
 						:checked="apply"
-						:disabled="editing.size === 0"
+						:disabled="isApplyDisabled"
 						@change="(checked) => apply = checked"
 					/>
 
@@ -241,10 +252,7 @@ import EditTags from '#/components/edit/tags.vue';
 import EditMovies from '#/components/edit/movies.vue';
 import Checkbox from '#/components/form/checkbox.vue';
 
-import {
-	// get,
-	post,
-} from '#/src/api.js';
+import { post } from '#/src/api.js';
 
 const pageContext = inject('pageContext');
 
@@ -310,12 +318,20 @@ const fields = computed(() => [
 	},
 	...(user.role === 'user'
 		? []
-		: [{
-			key: 'comment',
-			type: 'text',
-			placeholder: 'Do NOT use this field to summarize and clarify your revision. This field is for permanent notes and comments regarding the scene or database entry itself.',
-			value: scene.value.comment,
-		}]),
+		: [
+			{
+				key: 'comment',
+				type: 'text',
+				placeholder: 'Do NOT use this field to summarize and clarify your revision. This field is for permanent notes and comments regarding the scene or database entry itself.',
+				value: scene.value.comment,
+			},
+			{
+				key: 'delete',
+				type: 'checkbox',
+				checkboxLabel: 'Remove this scene from the database',
+				value: false,
+			},
+		]),
 ]);
 
 function simplifyArray(field) {
@@ -332,6 +348,9 @@ const comment = ref(null);
 const apply = ref(user.role !== 'user');
 const submitted = ref(false);
 
+const userCanDelete = user.abilities.some((ability) => ability.subject === 'scene' && ability.action === 'delete');
+const isApplyDisabled = computed(() => editing.value.size === 0 || (edits.value.delete && !userCanDelete));
+
 const keyMap = {
 	date: {
 		date: 'date',
@@ -359,6 +378,14 @@ function setDuration(unit, event) {
 	edits.value.duration[timeUnits.indexOf(unit)] = Number(event.target.value);
 }
 
+function setDelete(checked) {
+	edits.value.delete = checked;
+
+	if (!userCanDelete) {
+		apply.value = false;
+	}
+}
+
 async function submit() {
 	try {
 		await post('/revisions/scenes', {
@@ -417,6 +444,10 @@ async function submit() {
 	display: flex;
 	align-items: center;
 	padding: .25rem 1rem;
+
+	.value.disabled {
+		color: var(--glass);
+	}
 }
 
 .key {
@@ -488,7 +519,7 @@ async function submit() {
 	}
 }
 
-.item-note{
+.item-note {
 	fill: var(--glass);
 	padding: .5rem .75rem;
 	cursor: help;
@@ -518,6 +549,25 @@ async function submit() {
 	}
 }
 
+.checkbox.delete {
+	display: inline-flex;
+	gap: 1rem;
+	align-items: center;
+	font-weight: bold;
+}
+
+.value.disabled .delete {
+	:deep(.check-checkbox) + .check {
+		background: var(--glass-weak-30);
+	}
+}
+
+.value:not(.disabled) .delete {
+	:deep(.check-checkbox:checked) + .check {
+		background: var(--error);
+	}
+}
+
 .editor-actions {
 	display: flex;
 	flex-direction: column;
@@ -540,6 +590,27 @@ async function submit() {
 	line-height: 1.5;
 }
 
+.delete-title {
+	display: block;
+	margin-top: .5rem;
+	max-width: 25rem;
+}
+
+.dialog-body {
+	padding: 1rem;
+}
+
+.dialog-section {
+	margin-bottom: 1rem;
+	text-align: center;
+}
+
+.dialog-actions {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
 @media(--small) {
 	.row {
 		flex-direction: column;