init

src/components/ProjectMenu.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useProjectStore } from '@/stores/project.ts'
+
+const projectStore = useProjectStore()
+const { projects, current } = storeToRefs(projectStore)
+
+const currentProjectName = computed(() => current.value?.name ?? 'Select project')
+const selected = computed(() => (current.value ? [current.value.id] : []))
+
+function select(value: unknown) {
+  console.log(value)
+  const id = Array.isArray(value) ? value[0] : value
+  const project = projects.value.find((el) => el.id === id)
+
+  if (!project) {
+    throw new Error(`Project ${id} not found`)
+  }
+  projectStore.select(project)
+}
+
+onMounted(async () => {
+  await projectStore.list({ page: 1, limit: 100 })
+  await projectStore.restoreCurrent()
+
+  if (!current.value && projects.value[0]) {
+    projectStore.select(projects.value[0])
+  }
+})
+</script>
+
+<template>
+  <div v-if="projects.length" class="">
+    <v-menu>
+      <template v-slot:activator="{ props }">
+        <v-btn border density="comfortable" variant="flat" :text="currentProjectName" v-bind="props" />
+      </template>
+
+      <v-list
+        width="12rem"
+        class="mt-1"
+        border
+        select-strategy="single-leaf"
+        density="compact"
+        :selected="selected"
+        mandatory
+        @update:selected="select"
+      >
+        <v-list-item slim v-for="project in projects" :key="project.id" :value="project.id">
+          <v-list-item-title>
+            <v-chip size="small" color="primary" variant="flat" density="compact">{{ project.key }}</v-chip>
+            {{ project.name }}
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>