feat: simplify priority handling

src/components/AppSidebar/MultiselectOption.vue

@@ -23,7 +23,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<div :class="optionClass" class="multiselect-picker-option">
+	<div :style="{'color': color}" :class="optionClass" class="multiselect-picker-option">
 		<span class="multiselect-picker-option__icon">
 			<component :is="icon" :size="20" />
 		</span>
@@ -49,6 +49,10 @@ export default {
 			type: String,
 			default: null,
 		},
+		color: {
+			type: String,
+			default: null,
+		},
 	},
 }
 </script>

src/main.js

@@ -34,6 +34,7 @@ import Delete from 'vue-material-design-icons/Delete.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import EyeOff from 'vue-material-design-icons/EyeOff.vue'
 import Pulse from 'vue-material-design-icons/Pulse.vue'
+import Star from 'vue-material-design-icons/Star.vue'
 import TrendingUp from 'vue-material-design-icons/TrendingUp.vue'
 
 import { createApp } from 'vue'
@@ -59,6 +60,7 @@ const Tasks = createApp(App)
 	.component('IconEye', Eye)
 	.component('IconEyeOff', EyeOff)
 	.component('IconPulse', Pulse)
+	.component('IconStar', Star)
 	.component('IconTrendingUp', TrendingUp)
 	.provide('$OCA', OCA)
 	.provide('$appVersion', appVersion)

src/store/tasks.js

@@ -386,8 +386,12 @@ const mutations = {
 	 * @param {Task} task The task
 	 */
 	toggleStarred(state, task) {
-		if (+task.priority < 1 || +task.priority > 4) {
+		if (task.priority === 0) {
 			task.priority = 1
+		} else if (task.priority < 5) {
+			task.priority = 5
+		} else if (task.priority === 5) {
+			task.priority = 9
 		} else {
 			task.priority = 0
 		}

src/views/AppSidebar.vue

@@ -166,19 +166,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 					:placeholder="t('tasks', 'Select a status')"
 					icon="IconPulse"
 					@change-value="changeStatus" />
-				<SliderItem v-show="!readOnly || task.priority"
-					:value="task.priority"
-					:property-string="priorityString"
-					:read-only="readOnly"
-					:min-value="0"
-					:max-value="9"
-					:color="priorityColor"
-					:task="task"
-					@set-value="({task, value}) => setPriority({ task, priority: value })">
-					<template #icon>
-						<Star :size="20" />
-					</template>
-				</SliderItem>
+				<MultiselectItem v-show="!readOnly || priority"
+					:value="priorityOptions.find( _ => _.value === priority )"
+					:options="priorityOptions"
+					:disabled="readOnly"
+					:placeholder="t('tasks', 'Select a priority')"
+					icon="IconStar"
+					@change-value="changePriority" />
 				<SliderItem v-show="!readOnly || task.complete"
 					:value="task.complete"
 					:property-string="completeString"
@@ -300,7 +294,6 @@ import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Percent from 'vue-material-design-icons/Percent.vue'
 import Pin from 'vue-material-design-icons/Pin.vue'
 import PinOff from 'vue-material-design-icons/PinOff.vue'
-import Star from 'vue-material-design-icons/Star.vue'
 import TextBoxOutline from 'vue-material-design-icons/TextBoxOutline.vue'
 import Undo from 'vue-material-design-icons/Undo.vue'
 import Web from 'vue-material-design-icons/Web.vue'
@@ -328,7 +321,6 @@ export default {
 		Percent,
 		Pin,
 		PinOff,
-		Star,
 		TextBoxOutline,
 		Undo,
 		Web,
@@ -612,29 +604,17 @@ export default {
 		showAllDayToggle() {
 			return !this.readOnly && (this.task.due || this.task.start || this.editingStart || this.editingDue)
 		},
-		priorityColor() {
-			if (+this.task.priority > 5) {
-				return '#4271a6'
-			}
-			if (+this.task.priority === 5) {
-				return '#fd0'
-			}
-			if (+this.task.priority > 0) {
-				return '#b3312d'
-			}
-			return null
-		},
-		priorityString() {
+		priority() {
 			if (+this.task.priority > 5) {
-				return t('tasks', 'Priority {priority}: low', { priority: this.task.priority })
+				return 9
 			}
 			if (+this.task.priority === 5) {
-				return t('tasks', 'Priority {priority}: medium', { priority: this.task.priority })
+				return 5
 			}
 			if (+this.task.priority > 0) {
-				return t('tasks', 'Priority {priority}: high', { priority: this.task.priority })
+				return 1
 			}
-			return t('tasks', 'No priority assigned')
+			return 0
 		},
 		priorityClass() {
 			if (+this.task.priority > 5) {
@@ -648,6 +628,41 @@ export default {
 			}
 			return null
 		},
+		priorityOptions() {
+			const priorityOptions = [
+				{
+					displayName: t('tasks', 'High'),
+					value: 1,
+					icon: 'IconStar',
+					optionClass: 'active',
+					color: '#b3312d',
+				},
+				{
+					displayName: t('tasks', 'Medium'),
+					value: 5,
+					icon: 'IconStar',
+					optionClass: 'active',
+					color: '#fd0',
+				},
+				{
+					displayName: t('tasks', 'Low'),
+					value: 9,
+					icon: 'IconStar',
+					optionClass: 'active',
+					color: '#4271a6',
+				},
+			]
+			if (this.task.priority) {
+				return priorityOptions.concat([{
+					displayName: t('tasks', 'Clear priority'),
+					value: null,
+					icon: 'IconDelete',
+					optionClass: 'center',
+					color: null,
+				}])
+			}
+			return priorityOptions
+		},
 		completeString() {
 			return t('tasks', '{percent} % completed', { percent: this.task.complete })
 		},
@@ -825,6 +840,10 @@ export default {
 			this.setStatus({ task: this.task, status: status.type })
 		},
 
+		changePriority(priority) {
+			this.setPriority({ task: this.task, priority: priority.value })
+		},
+
 		/**
 		 * Sets the tags of a task
 		 *