66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { postCollection, extractFormErrorFromField } from './api.js'
|
|
|
|
const emit = defineEmits(['created'])
|
|
|
|
const collection = ref({
|
|
name: '',
|
|
})
|
|
const addingCollection = ref(false)
|
|
const errors = ref(null)
|
|
const error = computed(() => {
|
|
return extractFormErrorFromField('Name', errors.value)
|
|
})
|
|
const vFocus = {
|
|
mounted: (el) => el.focus(),
|
|
}
|
|
|
|
function onButtonClick() {
|
|
if (addingCollection.value) {
|
|
createCollection()
|
|
} else {
|
|
addingCollection.value = true
|
|
}
|
|
}
|
|
|
|
function createCollection() {
|
|
postCollection(collection.value).then((res) => {
|
|
if (res.ok) {
|
|
addingCollection.value = false
|
|
collection.value.name = ''
|
|
res.json().then((json) => emit('created', json.id))
|
|
} else {
|
|
res.json().then((json) => (errors.value = json))
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="field has-addons">
|
|
<div v-if="addingCollection" class="control">
|
|
<input
|
|
:class="'input is-medium ' + (error ? 'is-danger' : '')"
|
|
v-focus
|
|
@keyup.enter="createCollection()"
|
|
type="text"
|
|
maxlength="300"
|
|
v-model="collection.name"
|
|
:placeholder="$t('collections.name')"
|
|
/>
|
|
<p v-if="error" class="help is-danger">{{ error }}</p>
|
|
</div>
|
|
<div class="control">
|
|
<button @click="onButtonClick" class="button is-medium mb-2">
|
|
<span class="icon" :title="$t('collections.add')">
|
|
<b-icon-check v-if="addingCollection" />
|
|
<b-icon-plus v-else />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|