Added new actor dialog to admin panel, removed create mode from actor edit page.

components/actors/add.vue

@@ -0,0 +1,175 @@
+<template>
+	<Dialog
+		title="Add actor"
+		@close="emit('close')"
+	>
+		<div
+			v-if="isSubmitted && newActor"
+			class="dialog-body"
+		>
+			<strong>Added '{{ newActor.name }}' (#{{ newActor.id }})</strong>
+
+			<ul
+				v-if="isSubmitted && newActor"
+				class="dialog-body options"
+			>
+				<li class="option">
+					<a
+						:href="`/actor/edit/${newActor.id}/${newActor.slug}`"
+						target="_blank"
+						class="link"
+					>Edit bio</a>
+				</li>
+
+				<li class="option">
+					<a
+						:href="`/actor/${newActor.id}/${newActor.slug}`"
+						target="_blank"
+						class="link"
+					>Go to actor</a>
+				</li>
+
+				<li class="option">
+					<span
+						class="link"
+						@click="newActor = null; isSubmitted = false;"
+					>Add another actor</span>
+				</li>
+			</ul>
+		</div>
+
+		<form
+			v-else
+			class="dialog-body"
+			@submit.prevent="addActor"
+		>
+			<input
+				ref="nameInput"
+				v-model="name"
+				class="input"
+				placeholder="Name"
+				required
+			>
+
+			<select
+				v-model="gender"
+				placeholder="Gender"
+				class="input"
+			>
+				<option value="female">Female</option>
+				<option value="male">Male</option>
+				<option value="transsexual">Transsexual</option>
+				<option value="other">Other</option>
+			</select>
+
+			<Checkbox
+				label="Allow global match"
+				:checked="allowGlobalMatch"
+				@change="(isChecked) => allowGlobalMatch = isChecked"
+			/>
+
+			<div class="dialog-actions">
+				<Ellipsis v-if="isSubmitting" />
+
+				<button
+					v-else
+					class="button button-primary"
+				>Add actor</button>
+			</div>
+		</form>
+	</Dialog>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+import Dialog from '#/components/dialog/dialog.vue';
+import Ellipsis from '#/components/loading/ellipsis.vue';
+import Checkbox from '#/components/form/checkbox.vue';
+
+import { post } from '#/src/api.js';
+import events from '#/src/events.js';
+
+const emit = defineEmits(['close']);
+
+const nameInput = ref(null);
+const isSubmitting = ref(false);
+const isSubmitted = ref(false);
+
+const name = ref(null);
+const gender = ref('female');
+const allowGlobalMatch = ref(true);
+
+const newActor = ref(null);
+
+onMounted(() => {
+	nameInput.value.focus();
+});
+
+async function addActor() {
+	isSubmitting.value = true;
+
+	try {
+		const { actor } = await post('/actors', {
+			actor: {
+				name: name.value,
+				gender: gender.value,
+				allowGlobalMatch: allowGlobalMatch.value,
+			},
+		}, {
+			successFeedback: 'Actor has been added.',
+			appendErrorMessage: true,
+		});
+
+		name.value = null;
+		gender.value = null;
+		allowGlobalMatch.value = true;
+
+		newActor.value = actor;
+	} catch (error) {
+		events.emit('feedback', {
+			type: 'error',
+			message: error.message,
+		});
+	}
+
+	isSubmitting.value = false;
+	isSubmitted.value = true;
+}
+</script>
+
+<style scoped>
+.dialog-body {
+	width: 20rem;
+	max-width: 100%;
+	box-sizing: border-box;
+	padding: 1rem;
+	gap: 1.25rem;
+}
+
+.load-container {
+	width: 100%;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0;
+	height: 2rem;
+}
+
+.options {
+	padding: 0 1.5rem;
+	margin: 0;
+}
+
+.option {
+	cursor: pointer;
+}
+
+.dialog-actions {
+	margin-top: .5rem;
+}
+
+.button-primary {
+	width: 100%;
+}
+</style>