traxxx-web/components/stashes/create.vue

<template>
	<Dialog
		title="New stash"
		@close="emit('close')"
		@open="stashNameInput?.focus()"
	>
		<form
			class="dialog-body"
			@submit.prevent="createStash"
		>
			<input
				ref="stashNameInput"
				v-model="stashName"
				maxlength="24"
				placeholder="Stash name"
				class="input"
			>

			<button
				class="button button-submit"
			>Create stash</button>
		</form>
	</Dialog>
</template>

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

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

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

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

const stashName = ref(null);
const stashNameInput = ref(null);

async function createStash() {
	const newStash = await post('/stashes', {
		name: stashName.value,
		public: false,
	}, {
		successFeedback: `Stash '${stashName.value}' created`,
		errorFeedback: `Failed to create stash '${stashName.value}'`,
		appendErrorMessage: true,
	});

	emit('created', newStash);
	stashName.value = null;
}
</script>

<style scoped>
.dialog-body {
	padding: 1rem;

	.input {
		margin-bottom: .5rem;
	}
}
</style>