init

src/components/PriorityMenu.vue

@@ -0,0 +1,65 @@
+<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>