62 lines
1.1 KiB
Vue
62 lines
1.1 KiB
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: `Created stash '${stashName.value}'`,
|
||
|
|
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>
|