init

src/components/StatusMenu.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useStatusStore } from '@/stores/status.ts'
+import { computed } from 'vue'
+import type { Issue } from '@/api/issue.api.ts'
+
+interface Props {
+  value?: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{ changed: [value: Issue['status']] }>()
+
+const statusStore = useStatusStore()
+
+const currentStatusName = computed(() => {
+  return statusStore.statuses?.find((el) => el.alias === props.value)?.name ?? props.value
+})
+
+const currentStatusColor = computed(() => {
+  return statusStore.statuses?.find((el) => el.alias === props.value)?.color ?? 'white'
+})
+
+const select = (value: unknown) => {
+  if (Array.isArray(value)) {
+    emit('changed', value[0])
+  }
+}
+</script>
+
+<template>
+  <div class="">
+    <v-menu>
+      <template v-slot:activator="{ props: activatorProps }">
+        <v-btn
+          slim
+          :color="currentStatusColor"
+          density="compact"
+          variant="flat"
+          v-bind="activatorProps"
+          :text="currentStatusName"
+        />
+      </template>
+
+      <v-list border width="12rem" class="" select-strategy="single-leaf" density="compact" @update:selected="select">
+        <v-list-item slim v-for="(el, idx) in statusStore.statuses" :key="idx" :value="el.alias">
+          <v-list-item-title>{{ el.name }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>