feat: add task priority constants and labels for task management

src/app/components/add-task/add-task.component.html

@@ -25,6 +25,7 @@
       }"
     >
       <div class="left-side">
+        <!-- Title -->
         <div class="title">
           <div class="headline">
             {{ "addTask.title" | translate }}<span class="red-dot">*</span>
@@ -49,6 +50,8 @@
             }
           </div>
         </div>
+
+        <!-- Description -->
         <div class="description">
           <div class="headline">
             {{ "addTask.description" | translate
@@ -75,14 +78,19 @@
             }
           </div>
         </div>
+
+        <!-- Assignees -->
         <app-assigned
           [taskCreator]="taskData.creator"
           [currentAssignees]="taskData.assignees"
           (assignedChange)="receiveAssigned($event)"
         ></app-assigned>
       </div>
+
       <div class="middle-spacer"><div class="line"></div></div>
+
       <div class="right-side">
+        <!-- Date -->
         <div
           class="date"
           [ngStyle]="{
@@ -111,62 +119,39 @@
             }
           </div>
         </div>
+
+        <!-- Priority -->
         <div class="priority">
           <div class="headline">{{ "addTask.priority" | translate }}</div>
           <div class="btns">
+            @for (priority of PRIORITIES; track priority) {
             <button
               type="button"
               class="btn"
               [ngClass]="{
-                'btn-active': taskData.priority == 'urgent'
+                'btn-active': taskData.priority === priority
               }"
               [ngStyle]="{
                 'background-color':
-                  taskData.priority == 'urgent' ? 'red' : 'white'
+                  taskData.priority === priority
+                    ? getPriorityColor(priority)
+                    : 'white'
               }"
-              (click)="togglePriority('urgent')"
+              (click)="togglePriority(priority)"
             >
               <div class="btn-text">
-                <span>{{ "addTask.urgent" | translate }}</span>
-                <img src="./../../../assets/img/urgent.svg" alt="" />
-              </div>
-            </button>
-            <button
-              type="button"
-              class="btn"
-              [ngClass]="{
-                'btn-active': taskData.priority == 'medium'
-              }"
-              [ngStyle]="{
-                'background-color':
-                  taskData.priority == 'medium' ? 'orange' : 'white'
-              }"
-              (click)="togglePriority('medium')"
-            >
-              <div class="btn-text">
-                <span>{{ "addTask.medium" | translate }}</span>
-                <img src="./../../../assets/img/medium.svg" alt="" />
-              </div>
-            </button>
-            <button
-              type="button"
-              class="btn"
-              [ngClass]="{
-                'btn-active': taskData.priority == 'low'
-              }"
-              [ngStyle]="{
-                'background-color':
-                  taskData.priority == 'low' ? 'green' : 'white'
-              }"
-              (click)="togglePriority('low')"
-            >
-              <div class="btn-text">
-                <span>{{ "addTask.low" | translate }}</span>
-                <img src="./../../../assets/img/low.svg" alt="" />
+                <span>{{ PRIORITY_LABELS[priority] | translate }}</span>
+                <img
+                  [src]="getPriorityIcon(priority)"
+                  [alt]="priority + ' icon'"
+                />
               </div>
             </button>
+            }
           </div>
         </div>
+
+        <!-- Category -->
         <div class="category">
           <div class="headline">
             {{ "addTask.category" | translate }}<span class="red-dot">*</span>
@@ -195,6 +180,8 @@
             }
           </div>
         </div>
+
+        <!-- Subtasks -->
         <div class="subtask">
           <div class="headline">{{ "addTask.subtask" | translate }}</div>
           <input

src/app/components/add-task/add-task.component.ts

@@ -2,7 +2,13 @@ import { CommonModule } from '@angular/common';
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
 import { AssignedComponent } from './assigned/assigned.component';
-import { Subtask, Task, TaskStatus } from '../../interfaces/task.interface';
+import {
+  Subtask,
+  Task,
+  TaskCategory,
+  TaskPriority,
+  TaskStatus,
+} from '../../interfaces/task.interface';
 import { OverlayService } from '../../services/overlay.service';
 import { FormBtnComponent } from '../../shared/components/buttons/form-btn/form-btn.component';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -14,6 +20,10 @@ import { ApiService } from '../../services/api.service';
 import { UpdateNotifierService } from '../../services/update-notifier.service';
 import { ToastNotificationService } from '../../services/toast-notification.service';
 import { HeadlineComponent } from '../../shared/components/headline/headline.component';
+import {
+  PRIORITIES,
+  PRIORITY_LABELS,
+} from '../../constants/task-priority.constants';
 
 @Component({
   selector: 'app-add-task',
@@ -34,6 +44,9 @@ export class AddTaskComponent implements OnInit, OnDestroy {
   @Input() overlayType: string = '';
   @Input() overlayMobile: boolean = false;
 
+  readonly PRIORITIES = PRIORITIES;
+  readonly PRIORITY_LABELS = PRIORITY_LABELS;
+
   currentDate: string = new Date().toISOString().split('T')[0];
   dateInPast: boolean = false;
   subtaskValue: string = '';
@@ -54,9 +67,9 @@ export class AddTaskComponent implements OnInit, OnDestroy {
   taskData: Task = {
     title: '',
     description: '',
-    category: '',
-    status: this.taskService.getStatuses()[0],
-    priority: this.taskService.getPriorities()[0],
+    category: TaskCategory.USER_STORY,
+    status: TaskStatus.TODO,
+    priority: TaskPriority.LOW,
     subtasks: [],
     assignees: [],
     userData: [],
@@ -128,11 +141,35 @@ export class AddTaskComponent implements OnInit, OnDestroy {
     });
   }
 
-  /**
-   * Loads any existing task data from local storage and assigns it to the taskData object.
-   * If no task data is present in local storage, this method saves the current taskData object to local storage.
-   * @returns {void}
-   */
+  getPriorityColor(priority: TaskPriority): string {
+    switch (priority) {
+      case TaskPriority.URGENT:
+        return 'red';
+      case TaskPriority.MEDIUM:
+        return 'orange';
+      case TaskPriority.LOW:
+        return 'green';
+      default:
+        return 'white';
+    }
+  }
+
+  getPriorityIcon(priority: TaskPriority): string {
+    switch (priority) {
+      case TaskPriority.URGENT:
+        return './../../../assets/img/urgent.svg';
+      case TaskPriority.MEDIUM:
+        return './../../../assets/img/medium.svg';
+      case TaskPriority.LOW:
+        return './../../../assets/img/low.svg';
+      default:
+        return '';
+    }
+  }
+
+  togglePriority(priority: TaskPriority): void {
+    this.taskData.priority = priority;
+  }
 
   /**
    * Gets the task data from the Firebase service for the given task id.
@@ -194,19 +231,6 @@ export class AddTaskComponent implements OnInit, OnDestroy {
       : (this.dateInPast = false);
   }
 
-  /**
-   * Toggles the priority of the task between the given priority and the current priority.
-   * If the given priority is different from the current priority, it sets the priority to the given priority,
-   * otherwise it keeps the current priority.
-   * After setting the priority, it saves the task data.
-   * @param priority the priority to toggle to
-   */
-  togglePriority(priority: string) {
-    this.taskData.priority !== priority
-      ? (this.taskData.priority = priority)
-      : this.taskData.priority;
-  }
-
   /**
    * Removes the task data from local storage and resets the form and form data.
    * @param form the form to reset
@@ -246,7 +270,7 @@ export class AddTaskComponent implements OnInit, OnDestroy {
    */
   clearFormData() {
     this.taskData.date = this.currentDate;
-    this.taskData.category = '';
+    this.taskData.category = TaskCategory.USER_STORY;
     this.taskData.assignees = [];
     this.taskData.subtasks = [];
   }

src/app/constants/task-priority.constants.ts

@@ -0,0 +1,13 @@
+import { TaskPriority } from '../interfaces/task.interface';
+
+export const PRIORITIES: TaskPriority[] = [
+  TaskPriority.LOW,
+  TaskPriority.MEDIUM,
+  TaskPriority.URGENT,
+];
+
+export const PRIORITY_LABELS: Record<TaskPriority, string> = {
+  [TaskPriority.LOW]: 'taskPriority.low',
+  [TaskPriority.MEDIUM]: 'taskPriority.medium',
+  [TaskPriority.URGENT]: 'taskPriority.urgent',
+};

src/app/interfaces/task.interface.ts

@@ -9,15 +9,26 @@ export enum TaskStatus {
   DONE = 'done',
 }
 
+export enum TaskPriority {
+  LOW = 'low',
+  MEDIUM = 'medium',
+  URGENT = 'urgent',
+}
+
+export enum TaskCategory {
+  USER_STORY = 'User Story',
+  TECHNICAL_TASK = 'Technical Task',
+}
+
 // Interfaces
 
 export interface Task {
   id?: string;
   title: string;
   description: string;
-  category: string;
+  category: TaskCategory;
   status: TaskStatus;
-  priority: string;
+  priority: TaskPriority;
   subtasks: Subtask[];
   assignees: Assignee[];
   userData: UserSummary[];

src/app/services/task.service.ts

@@ -1,30 +1,19 @@
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { ApiService } from './api.service';
-import { Task, TaskStatus } from '../interfaces/task.interface';
+import {
+  Task,
+  TaskCategory,
+  TaskPriority,
+  TaskStatus,
+} from '../interfaces/task.interface';
 import { catchError, map, switchMap } from 'rxjs/operators';
 import { UserSummary } from '../interfaces/user.interface';
 
 @Injectable({ providedIn: 'root' })
 export class TaskService {
-  private readonly statuses: TaskStatus[] = [
-    TaskStatus.TODO,
-    TaskStatus.IN_PROGRESS,
-    TaskStatus.AWAIT_FEEDBACK,
-    TaskStatus.DONE,
-  ];
-  private readonly priorities = ['low', 'medium', 'high'];
-
   constructor(private apiService: ApiService) {}
 
-  getStatuses(): TaskStatus[] {
-    return this.statuses;
-  }
-
-  getPriorities(): string[] {
-    return this.priorities;
-  }
-
   getTasks(): Observable<Task[]> {
     return this.fetchTasks();
   }

src/assets/i18n/de.json

@@ -129,6 +129,11 @@
     "awaitFeedback": "Warte auf Rückmeldung",
     "done": "Erledigt"
   },
+  "taskPriority": {
+    "low": "Niedrig",
+    "medium": "Mittel",
+    "urgent": "Dringend"
+  },
   "addTask": {
     "headline": "Aufgabe",
     "title": "Titel",
@@ -140,9 +145,6 @@
     "date": "Stichtag",
     "priority": "Priorität",
     "creator": "Ersteller",
-    "urgent": "Dringend",
-    "medium": "Mittel",
-    "low": "Niedrig",
     "category": "Kategorie",
     "categorySelection": "Kategorie wählen",
     "subtask": "Unteraufgaben",

src/assets/i18n/en.json

@@ -129,6 +129,11 @@
     "awaitFeedback": "Await feedback",
     "done": "Done"
   },
+  "taskPriority": {
+    "urgent": "Urgent",
+    "medium": "Medium",
+    "low": "Low"
+  },
   "addTask": {
     "headline": "Add Task",
     "title": "Title",
@@ -140,9 +145,6 @@
     "date": "Due date",
     "priority": "Priority",
     "creator": "Creator",
-    "urgent": "Urgent",
-    "medium": "Medium",
-    "low": "Low",
     "category": "Category",
     "categorySelection": "Select task category",
     "subtask": "Subtasks",