From aac137f8a496fbf699d97d16e94c09fd707c64d6 Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Sun, 3 Mar 2019 15:03:08 +0000
Subject: [PATCH] Task Priorities (#19)

---
 src/components/lists/ShowList.vue  | 31 +++++++++++++++++++++++++++++-
 src/components/lists/ShowTasks.vue | 17 ++++++++++++++--
 src/main.js                        |  2 ++
 src/models/priorities.json         |  8 ++++++++
 src/styles/tasks.scss              | 18 +++++++++++++++++
 todo.md                            |  4 ++--
 6 files changed, 75 insertions(+), 5 deletions(-)
 create mode 100644 src/models/priorities.json

diff --git a/src/components/lists/ShowList.vue b/src/components/lists/ShowList.vue
index d34a72451..14968a35e 100644
--- a/src/components/lists/ShowList.vue
+++ b/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,
diff --git a/src/components/lists/ShowTasks.vue b/src/components/lists/ShowTasks.vue
index 6463e6d6d..ea247a19c 100644
--- a/src/components/lists/ShowTasks.vue
+++ b/src/components/lists/ShowTasks.vue
@@ -20,9 +20,20 @@
 						</label>
 					</div>
 					<span class="tasktext">
-							{{l.text}}
-							<i v-if="l.dueDate > 0" :class="{'overdue': (new Date(l.dueDate * 1000) <= new Date())}"> - Due on {{formatUnixDate(l.dueDate)}}</i>
+						{{l.text}}
+						<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: {
diff --git a/src/main.js b/src/main.js
index dc0c5d1c2..9067f11b1 100644
--- a/src/main.js
+++ b/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)
 
diff --git a/src/models/priorities.json b/src/models/priorities.json
new file mode 100644
index 000000000..8a781e2ef
--- /dev/null
+++ b/src/models/priorities.json
@@ -0,0 +1,8 @@
+{
+  "UNSET": 0,
+  "LOW": 1,
+  "MEDIUM": 2,
+  "HIGH": 3,
+  "URGENT": 4,
+  "DO_NOW": 5
+}
\ No newline at end of file
diff --git a/src/styles/tasks.scss b/src/styles/tasks.scss
index 077f44da7..09e5e5214 100644
--- a/src/styles/tasks.scss
+++ b/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%;
+    }
+  }
 }
\ No newline at end of file
diff --git a/todo.md b/todo.md
index 4be6ca71d..04caaac8e 100644
--- a/todo.md
+++ b/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
-  * [ ] Sachen mit hoher Prio irgendwie hervorheben (rotes Dreieck zb)
+* [x] Priorities
+  * [x] Highlight tasks with high priority
 * [ ] Assignees
 * [ ] Labels
 * [ ] Timeline/Calendar view -> Dazu tasks die in einem Bestimmten Bereich due sind, macht dann das Frontend