73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<template>
|
|
<div class="new-bucket">
|
|
<input
|
|
v-if="hasNewBucketInput"
|
|
:class="{'is-loading': loading}"
|
|
:disabled="loading || undefined"
|
|
@blur="hasNewBucketInput = false"
|
|
@keyup.enter="createNewBucket"
|
|
@keyup.esc="($event.target as HTMLInputElement).blur()"
|
|
class="input"
|
|
:placeholder="$t('list.kanban.addBucketPlaceholder')"
|
|
type="text"
|
|
v-focus.always
|
|
v-model="newBucketTitle"
|
|
/>
|
|
<x-button
|
|
v-else
|
|
@click="hasNewBucketInput = true"
|
|
:shadow="false"
|
|
class="is-transparent is-fullwidth has-text-centered"
|
|
variant="secondary"
|
|
icon="plus"
|
|
>
|
|
{{ $t('list.kanban.addBucket') }}
|
|
</x-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref, computed} from 'vue'
|
|
import BucketModel from '@/models/bucket'
|
|
import {useStore} from 'vuex'
|
|
|
|
const props = defineProps<{
|
|
listId: number
|
|
}>()
|
|
|
|
const store = useStore()
|
|
const loading = computed(() => store.state.loading && store.state.loadingModule === 'kanban')
|
|
|
|
const hasNewBucketInput = ref(false)
|
|
|
|
const newBucketTitle = ref('')
|
|
async function createNewBucket() {
|
|
if (newBucketTitle.value === '') {
|
|
return
|
|
}
|
|
|
|
await store.dispatch('kanban/createBucket', new BucketModel({
|
|
title: newBucketTitle.value,
|
|
listId: props.listId,
|
|
}))
|
|
newBucketTitle.value = ''
|
|
hasNewBucketInput.value = false
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.new-bucket {
|
|
// Because of reasons, this button ignores the margin we gave it to the right.
|
|
// To make it still look like it has some, we modify the container to have a padding of 1rem,
|
|
// which is the same as the margin it should have. Then we make the container itself bigger
|
|
// to hide the fact we just made the button smaller.
|
|
min-width: calc(var(--bucket-width) + 1rem);
|
|
background: transparent;
|
|
padding-right: 1rem;
|
|
|
|
.button {
|
|
background: var(--grey-100);
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style> |