Task Priorities (#19)

src/components/lists/ShowList.vue

@@ -41,7 +41,18 @@
 							</div>
 							<span class="tasktext" :class="{ 'done': l.done}">
 								{{l.text}}
-							<i v-if="l.dueDate > 0" :class="{'overdue': (l.dueDate <= new Date())}"> - Due on {{new Date(l.dueDate).toLocaleString()}}</i>
+								<i v-if="l.dueDate > 0" :class="{'overdue': (l.dueDate <= new Date())}"> - Due on {{new Date(l.dueDate).toLocaleString()}}</i>
+								<span v-if="l.priority >= priorities.HIGH" class="high-priority" :class="{'not-so-high': l.priority === priorities.HIGH}">
+									<span class="icon">
+										<icon icon="exclamation"/>
+									</span>
+									<template v-if="l.priority === priorities.HIGH">High</template>
+									<template v-if="l.priority === priorities.URGENT">Urgent</template>
+									<template v-if="l.priority === priorities.DO_NOW">DO NOW</template>
+									<span class="icon" v-if="l.priority === priorities.DO_NOW">
+										<icon icon="exclamation"/>
+									</span>
+								</span>
 							</span>
 						</label>
 						<div @click="editTask(l.id)" class="icon settings">
@@ -156,6 +167,22 @@
 									</div>
 								</div>
 
+								<div class="field">
+									<label class="label" for="">Priority</label>
+									<div class="control priority-select">
+										<div class="select">
+											<select v-model="taskEditTask.priority">
+												<option :value="priorities.UNSET">Unset</option>
+												<option :value="priorities.LOW">Low</option>
+												<option :value="priorities.MEDIUM">Medium</option>
+												<option :value="priorities.HIGH">High</option>
+												<option :value="priorities.URGENT">Urgent</option>
+												<option :value="priorities.DO_NOW">DO NOW</option>
+											</select>
+										</div>
+									</div>
+								</div>
+
 								<div class="field">
 									<label class="label" for="subtasks">Subtasks</label>
 									<div class="tasks noborder" v-if="taskEditTask.subtasks && taskEditTask.subtasks.length > 0">
@@ -210,6 +237,7 @@
 	import TaskService from '../../services/task'
 	import TaskModel from '../../models/task'
 	import ListModel from '../../models/list'
+	import priorities from '../../models/priorities'
 
 	export default {
 		data() {
@@ -218,6 +246,7 @@
 				listService: ListService,
 				taskService: TaskService,
 
+				priorities: priorities,
 				list: {},
 				newTask: TaskModel,
 				isTaskEdit: false,

src/components/lists/ShowTasks.vue

@@ -20,9 +20,20 @@
 						</label>
 					</div>
 					<span class="tasktext">
-							{{l.text}}
+						{{l.text}}
-							<i v-if="l.dueDate > 0" :class="{'overdue': (new Date(l.dueDate * 1000) <= new Date())}"> - Due on {{formatUnixDate(l.dueDate)}}</i>
+						<i v-if="l.dueDate > 0" :class="{'overdue': (new Date(l.dueDate * 1000) <= new Date())}"> - Due on {{formatUnixDate(l.dueDate)}}</i>
+						<span v-if="l.priority >= priorities.HIGH" class="high-priority" :class="{'not-so-high': l.priority === priorities.HIGH}">
+							<span class="icon">
+								<icon icon="exclamation"/>
+							</span>
+							<template v-if="l.priority === priorities.HIGH">High</template>
+							<template v-if="l.priority === priorities.URGENT">Urgent</template>
+							<template v-if="l.priority === priorities.DO_NOW">DO NOW</template>
+							<span class="icon" v-if="l.priority === priorities.DO_NOW">
+								<icon icon="exclamation"/>
+							</span>
 						</span>
+					</span>
 				</label>
 			</div>
 		</div>
@@ -33,6 +44,7 @@
 	import {HTTP} from '../../http-common'
 	import message from '../../message'
 	import TaskService from '../../services/task'
+	import priorities from '../../models/priorities'
 
 	export default {
 		name: "ShowTasks",
@@ -42,6 +54,7 @@
 				tasks: [],
 				hasUndoneTasks: false,
 				taskService: TaskService,
+				priorities: priorities,
 			}
 		},
 		props: {

src/main.js

@@ -40,6 +40,7 @@ import { faCalendar } from '@fortawesome/free-solid-svg-icons'
 import { faBars } from '@fortawesome/free-solid-svg-icons'
 import { faPowerOff } from '@fortawesome/free-solid-svg-icons'
 import { faCalendarWeek } from '@fortawesome/free-solid-svg-icons'
+import { faExclamation } from '@fortawesome/free-solid-svg-icons'
 import { faTimesCircle } from '@fortawesome/free-regular-svg-icons'
 import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -64,6 +65,7 @@ library.add(faBars)
 library.add(faPowerOff)
 library.add(faCalendarWeek)
 library.add(faCalendarAlt)
+library.add(faExclamation)
 
 Vue.component('icon', FontAwesomeIcon)
 

src/models/priorities.json

@@ -0,0 +1,8 @@
+{
+  "UNSET": 0,
+  "LOW": 1,
+  "MEDIUM": 2,
+  "HIGH": 3,
+  "URGENT": 4,
+  "DO_NOW": 5
+}

src/styles/tasks.scss

@@ -54,6 +54,18 @@
           color: $red;
         }
       }
+
+      .high-priority{
+        color: $red;
+
+        .icon {
+          vertical-align: middle;
+        }
+
+        &.not-so-high {
+          color: $orange;
+        }
+      }
     }
 
     input[type="checkbox"] {
@@ -102,4 +114,10 @@
       }
     }
   }
+
+  .priority-select{
+    .select, select{
+      width: 100%;
+    }
+  }
 }

todo.md

@@ -89,8 +89,8 @@
   * [ ] Users with access to a namespace
   * [ ] Teams with access to a list
   * [ ] Teams with access to a namespace
-* [ ] Priorities
+* [x] Priorities
-  * [ ] Sachen mit hoher Prio irgendwie hervorheben (rotes Dreieck zb)
+  * [x] Highlight tasks with high priority
 * [ ] Assignees
 * [ ] Labels
 * [ ] Timeline/Calendar view -> Dazu tasks die in einem Bestimmten Bereich due sind, macht dann das Frontend