home page

src/components/IssueCreate.vue

@@ -3,9 +3,12 @@ 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)
@@ -15,10 +18,9 @@ const newIssue = reactive({
 })
 
 const onCreate = async () => {
-  const project = projectStore.current
-  if (!project) return
+  if (!current.value) return
 
-  const created = await issueStore.create({ ...newIssue, projectId: project.id, key: project.key })
+  const created = await issueStore.create({ ...newIssue, projectId: current.value.id, key: current.value.key })
   if (!created) return
 
   emit('created', created)
@@ -29,7 +31,7 @@ const onCreate = async () => {
 </script>
 
 <template>
-  <v-list-item v-if="showForm && projectStore.current">
+  <v-list-item v-if="showForm && current">
     <template #prepend>
       <v-menu v-if="false">
         <template v-slot:activator="{ props }">
@@ -58,7 +60,7 @@ const onCreate = async () => {
       </div>
     </template>
   </v-list-item>
-  <v-list-item v-else-if="showForm && !projectStore.current">
+  <v-list-item v-else-if="showForm && !current">
     <div>
       <v-alert closable density="compact" @click:close="showForm = false">
         Select or create project