62 lines
1.7 KiB
Vue
62 lines
1.7 KiB
Vue
<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) {
|
|
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="d-flex align-center ga-2">
|
|
Project:
|
|
<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>
|