feat: simplify priority handling

Signed-off-by: Creighton <creightonfrance@gmail.com>

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"
@@ -612,29 +606,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 +630,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 +842,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
  *