init

src/components/IssueCreate.vue

@@ -0,0 +1,69 @@
+<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'
+
+const issueStore = useIssueStore()
+const projectStore = useProjectStore()
+const emit = defineEmits<{ created: [issue: Issue] }>()
+
+const showForm = ref(false)
+const newIssue = reactive({
+  key: 'type',
+  title: '',
+})
+
+const onCreate = async () => {
+  const projectId = projectStore.current?.id
+  if (!projectId) return
+
+  const created = await issueStore.create({ ...newIssue, projectId })
+  if (!created) return
+
+  emit('created', created)
+  newIssue.title = ''
+  showForm.value = false
+}
+</script>
+
+<template>
+  <v-list-item v-if="showForm" class="">
+    <template #prepend>
+      <v-menu v-if="true">
+        <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"
+        />
+        <v-btn density="compact" variant="tonal" text="Create" @click="onCreate" />
+        <v-btn density="compact" variant="text" icon="mdi-close" @click="showForm = false" />
+      </div>
+    </template>
+  </v-list-item>
+  <v-list-item class="d-flex justify-center" v-else @click="showForm = !showForm">
+    <div class="d-flex ga-2 align-center">
+      <v-icon icon="mdi-plus" />
+      <div>add issue</div>
+    </div>
+    <!--    <v-btn density="compact" variant="plain" prepend-icon="mdi-plus"> create </v-btn>-->
+  </v-list-item>
+</template>
+
+<style scoped lang="scss"></style>