66 lines
1.8 KiB
Vue
66 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import type { Issue } from '@/api/issue.api.ts'
|
|
|
|
enum Icons {
|
|
highest = 'mdi-chevron-double-up',
|
|
high = 'mdi-chevron-up',
|
|
eq = 'mdi-equal',
|
|
low = 'mdi-chevron-down',
|
|
lowest = 'mdi-chevron-double-down',
|
|
}
|
|
|
|
interface Props {
|
|
value?: number
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const emit = defineEmits<{ changed: [value: Issue['priority']] }>()
|
|
|
|
const priorityList = ref([
|
|
{ icon: Icons.highest, value: 4 },
|
|
{ icon: Icons.high, value: 3 },
|
|
{ icon: Icons.eq, value: 2 },
|
|
{ icon: Icons.low, value: 1 },
|
|
{ icon: Icons.lowest, value: 0 },
|
|
])
|
|
|
|
const currentIcon = computed(() => priorityList.value.find((el) => el.value === props.value)?.icon ?? Icons.eq)
|
|
|
|
const availablePriorities = computed(() => priorityList.value.filter((el) => el.value !== props.value))
|
|
|
|
function priorityColor(value?: number) {
|
|
if (value === 3 || value === 4) return 'error'
|
|
if (value === 2) return 'success'
|
|
return 'primary'
|
|
}
|
|
|
|
const currentColor = computed(() => priorityColor(props.value))
|
|
|
|
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 density="compact" :icon="currentIcon" :color="currentColor" variant="text" v-bind="activatorProps" />
|
|
</template>
|
|
|
|
<v-list border class="mt-1" select-strategy="single-leaf" density="compact" @update:selected="select">
|
|
<v-list-item nav v-for="el in availablePriorities" :key="el.value" :value="el.value">
|
|
<div class="d-flex justify-center align-center">
|
|
<v-icon size="small" :icon="el.icon" :color="priorityColor(el.value)" />
|
|
</div>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|