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

src/components/IssueFilter.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import AssigneeFilter from '@/components/AssigneeFilter.vue'
 import TextFilter from '@/components/TextFilter.vue'
 import StatusFilter from '@/components/StatusFilter.vue'
+import ProjectMenu from '@/components/ProjectMenu.vue'
 
 interface Props {
   text?: string | null
@@ -30,7 +31,8 @@ function onStatusChanged(alias: string) {
 </script>
 
 <template>
-  <div class="filter-grid ga-2 align-center">
+  <div class="filter-grid ga-4 align-center">
+    <project-menu />
     <text-filter :model-value="text" @update:model-value="emit('update:text', $event)" />
     <status-filter :status="status" @changed="onStatusChanged" />
     <assignee-filter :selected="selectedAssignees" @changed="onAssigneeChanged" />
@@ -41,6 +43,6 @@ function onStatusChanged(alias: string) {
 <style scoped lang="scss">
 .filter-grid {
   display: grid;
-  grid-template-columns: 1fr auto auto auto;
+  grid-template-columns: auto 1fr auto auto auto;
 }
 </style>