85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue'
|
|
import { useIssueStore } from '@/stores/issue.ts'
|
|
import { useProjectStore } from '@/stores/project.ts'
|
|
import type { Issue } from '@/api/issue.api.ts'
|
|
import { storeToRefs } from 'pinia'
|
|
|
|
const issueStore = useIssueStore()
|
|
const projectStore = useProjectStore()
|
|
const { current } = storeToRefs(projectStore)
|
|
|
|
const emit = defineEmits<{ created: [issue: Issue] }>()
|
|
|
|
const showForm = ref(false)
|
|
const newIssue = reactive({
|
|
key: '',
|
|
title: '',
|
|
})
|
|
|
|
const onCreate = async () => {
|
|
if (!current.value) return
|
|
|
|
const created = await issueStore.create({ ...newIssue, projectId: current.value.id, key: current.value.key })
|
|
if (!created) return
|
|
|
|
emit('created', created)
|
|
newIssue.key = ''
|
|
newIssue.title = ''
|
|
showForm.value = false
|
|
}
|
|
|
|
const onCancel = () => {
|
|
showForm.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-list-item v-if="showForm && current">
|
|
<template #prepend>
|
|
<v-menu v-if="false">
|
|
<template v-slot:activator="{ props }">
|
|
<v-icon v-bind="props" icon="mdi-square" />
|
|
</template>
|
|
|
|
<v-list select-strategy="single-leaf">
|
|
<v-list-item v-for="(el, idx) in ['aaa', 'bbb']" :key="idx" :value="el">
|
|
<v-list-item-title>{{ el }}</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</template>
|
|
|
|
<template #title>
|
|
<div class="d-flex ga-2 align-center">
|
|
<v-text-field
|
|
v-model="newIssue.title"
|
|
variant="filled"
|
|
placeholder="Describe your issue"
|
|
autofocus
|
|
@keyup.enter="onCreate"
|
|
@keyup.esc="onCancel"
|
|
/>
|
|
<v-btn density="compact" variant="tonal" text="Create" @click="onCreate" />
|
|
<v-btn density="compact" variant="text" icon="mdi-close" @click="onCancel" />
|
|
</div>
|
|
</template>
|
|
</v-list-item>
|
|
<v-list-item v-else-if="showForm && !current">
|
|
<div>
|
|
<v-alert closable density="compact" @click:close="onCancel">
|
|
Select or create project
|
|
<router-link class="text-decoration-none text-link text-capitalize" to="/settings/projects">HERE</router-link>.
|
|
</v-alert>
|
|
</div>
|
|
</v-list-item>
|
|
<v-list-item v-else class="d-flex justify-center" @click="showForm = !showForm">
|
|
<div class="d-flex ga-2 align-center">
|
|
<v-icon icon="mdi-plus" />
|
|
<div>add issue</div>
|
|
</div>
|
|
</v-list-item>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|