traxxx-web/components/actors/merge.vue

<template>
	<Dialog
		:title="`Merge '${actor.name}'`"
		@close="emit('close')"
	>
		<div class="dialog-body">
			<div
				v-if="targetActor"
				class="target"
			>
				<span class="target-name">
					<span class="target-id">#{{ targetActor.id }}</span>
					{{ targetActor.name }}
				</span>

				<Icon
					icon="cross2"
					@click="targetActor = null"
				/>
			</div>

			<template v-else>
				<VDropdown
					:triggers="[]"
					:shown="actorResults.length > 0"
					:auto-hide="false"
				>
					<input
						ref="actorInput"
						v-model="actorQuery"
						class="input"
						@input="searchActors"
					>

					<template #popper>
						<ul
							class="results nolist"
						>
							<li
								v-for="actorResult in actorResults"
								:key="`actor-result-${actorResult.id}`"
								v-close-popper
								class="result-item"
								@click="selectActor(actorResult)"
							>
								<div class="result-label">
									<span class="result-id">#{{ actorResult.id }}</span> {{ actorResult.name }}
								</div>
							</li>
						</ul>
					</template>
				</VDropdown>
			</template>

			<div class="dialog-actions">
				<button
					type="submit"
					class="button button-primary"
					:disabled="!targetActor"
					@click="merge"
				>Merge</button>
			</div>
		</div>
	</Dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';

import Dialog from '#/components/dialog/dialog.vue';

import { get, post } from '#/src/api.js';

const props = defineProps({
	actor: {
		type: Object,
		default: null,
	},
});

const emit = defineEmits(['close']);

const targetActor = ref(null);
const actorInput = ref(null);
const actorQuery = ref('');
const actorResults = ref([]);

async function searchActors() {
	const res = await get('/actors', {
		q: `${actorQuery.value}*`, // return partial matches
		limit: 10,
	});

	actorResults.value = res.actors;
}

async function merge() {
	console.log('MERGE', props.actor.id, targetActor.value.id);
}

function selectActor(actor) {
	targetActor.value = actor;
	actorQuery.value = '';
	actorResults.value = [];
}

onMounted(() => {
	actorInput.value.focus();
});
</script>

<style scoped>
.dialog-body {
	width: 15rem;
	max-width: 100%;
	padding: 1rem;
}

.dialog-actions {
	margin-top: 1rem;

	.button {
		width: 100%;
	}
}

.target {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.icon {
		padding: .25rem .75rem;
		fill: var(--glass);

		&:hover {
			fill: var(--error);
			cursor: pointer;
		}
	}
}

.target-id {
	font-family: monospace;
	font-size: 1rem;
}

.results {
	padding: .25rem 0;
}

.result-item {
	display: flex;
	padding: .25rem .5rem;

	&:hover {
		cursor: pointer;
		color: var(--primary);
	}
}

.result-id {
	font-family: monospace;
	font-size: 1rem;
}
</style>