traxxx-web/components/actors/add.vue

<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>