feat: add task category constants, labels and colors for task management

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

@@ -166,8 +166,11 @@
             <option value="" disabled [selected]="!taskData.category">
               {{ "addTask.categorySelection" | translate }}
             </option>
-            <option value="User Story">User Story</option>
-            <option value="Technical Task">Technical Task</option>
+            @for (category of CATEGORIES; track category) {
+            <option [value]="category">
+              {{ CATEGORY_LABELS[category] | translate }}
+            </option>
+            }
           </select>
           <img
             class="open"

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

@@ -15,7 +15,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { AuthService } from '../../services/auth.service';
 import { firstValueFrom, map, Subject, takeUntil } from 'rxjs';
-import { TaskService } from '../../services/task.service';
 import { ApiService } from '../../services/api.service';
 import { UpdateNotifierService } from '../../services/update-notifier.service';
 import { ToastNotificationService } from '../../services/toast-notification.service';
@@ -24,6 +23,10 @@ import {
   PRIORITIES,
   PRIORITY_LABELS,
 } from '../../constants/task-priority.constants';
+import {
+  CATEGORIES,
+  CATEGORY_LABELS,
+} from '../../constants/task-category.constants';
 
 @Component({
   selector: 'app-add-task',
@@ -46,6 +49,8 @@ export class AddTaskComponent implements OnInit, OnDestroy {
 
   readonly PRIORITIES = PRIORITIES;
   readonly PRIORITY_LABELS = PRIORITY_LABELS;
+  readonly CATEGORIES = CATEGORIES;
+  readonly CATEGORY_LABELS = CATEGORY_LABELS;
 
   currentDate: string = new Date().toISOString().split('T')[0];
   dateInPast: boolean = false;
@@ -55,7 +60,6 @@ export class AddTaskComponent implements OnInit, OnDestroy {
 
   constructor(
     private overlayService: OverlayService,
-    private taskService: TaskService,
     private apiService: ApiService,
     private authService: AuthService,
     private updateNotifierService: UpdateNotifierService,

src/app/components/board/board.component.html

@@ -44,6 +44,7 @@
 
   <div class="content">
     <div class="status">
+      <!-- Loop through statuses -->
       @for (status of STATUSES; track status) {
       <div
         class="column"

src/app/components/board/board.component.ts

@@ -22,6 +22,10 @@ import { ToastNotificationService } from '../../services/toast-notification.serv
 import { ResizeService } from '../../services/resize.service';
 import { HeadlineComponent } from '../../shared/components/headline/headline.component';
 import { STATUS_LABELS, STATUSES } from '../../constants/task-status.constants';
+import {
+  CATEGORIES,
+  CATEGORY_LABELS,
+} from '../../constants/task-category.constants';
 
 @Component({
   selector: 'app-board',

src/app/components/board/task/task.component.html

@@ -12,9 +12,9 @@
       <div class="header">
         <div
           class="category"
-          [style.background-color]="categoryColors.get(task.category)"
+          [style.backgroundColor]="categoryColors[task.category]"
         >
-          <p>{{ task.category }}</p>
+          <p>{{ CATEGORY_LABELS[task.category] | translate }}</p>
         </div>
 
         <!-- If the user is on a mobile device, show the menu button -->

src/app/components/board/task/task.component.ts

@@ -17,11 +17,16 @@ import { Router } from '@angular/router';
 import { TaskMenuComponent } from './task-menu/task-menu.component';
 import { ResizeService } from '../../../services/resize.service';
 import { take } from 'rxjs';
+import {
+  CATEGORY_COLORS,
+  CATEGORY_LABELS,
+} from '../../../constants/task-category.constants';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-task',
   standalone: true,
-  imports: [CommonModule, TaskMenuComponent],
+  imports: [CommonModule, TranslateModule, TaskMenuComponent],
   templateUrl: './task.component.html',
   styleUrl: './task.component.scss',
 })
@@ -29,6 +34,8 @@ export class TaskComponent {
   @Input() task!: Task;
   @Output() updateStatusEmitter = new EventEmitter<TaskMoveEvent>();
 
+  readonly CATEGORY_LABELS = CATEGORY_LABELS;
+  readonly categoryColors = CATEGORY_COLORS;
   readonly DISABLE_DRAG_BREAKPOINT = 667;
   readonly DIALOG_OFFSET_X = 25;
   readonly DIALOG_OFFSET_Y = 10;
@@ -36,10 +43,6 @@ export class TaskComponent {
   pageViewMedia$ = this.resizeService.pageViewMedia$;
 
   assignees: Assignee[] = [];
-  categoryColors = new Map<string, string>([
-    ['User Story', '#0038ff'],
-    ['Technical Task', '#20d7c2'],
-  ]);
 
   mobileMenuOpen = false;
   disableDrag = false;

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

@@ -0,0 +1,16 @@
+import { TaskCategory } from '../interfaces/task.interface';
+
+export const CATEGORIES: TaskCategory[] = [
+  TaskCategory.USER_STORY,
+  TaskCategory.TECHNICAL_TASK,
+];
+
+export const CATEGORY_LABELS: Record<TaskCategory, string> = {
+  [TaskCategory.USER_STORY]: 'taskCategory.userStory',
+  [TaskCategory.TECHNICAL_TASK]: 'taskCategory.technicalTask',
+};
+
+export const CATEGORY_COLORS: Record<TaskCategory, string> = {
+  [TaskCategory.USER_STORY]: '#0038ff',
+  [TaskCategory.TECHNICAL_TASK]: '#20d7c2',
+};

src/app/shared/components/overlay/task-overlay/task-overlay.component.html

@@ -8,9 +8,9 @@
   <div class="header">
     <div
       class="category"
-      [style.background-color]="categoryColors.get(task.category)"
+      [style.backgroundColor]="categoryColors[task.category]"
     >
-      {{ task.category }}
+      <p>{{ CATEGORY_LABELS[task.category] | translate }}</p>
     </div>
     @if (overlayMobile) {
     <app-btn-back></app-btn-back>
@@ -34,7 +34,7 @@
     </div>
     <div class="priority">
       <p>{{ "addTask.priority" | translate }}:</p>
-      {{ capitalizeFirstLetter(task.priority) }}
+      {{ PRIORITY_LABELS[task.priority] | translate }}
       <div class="priority-bg priority-{{ task.priority }}"></div>
     </div>
 

src/app/shared/components/overlay/task-overlay/task-overlay.component.ts

@@ -19,6 +19,11 @@ import { map, Subject, takeUntil } from 'rxjs';
 import { ApiService } from '../../../../services/api.service';
 import { UpdateNotifierService } from '../../../../services/update-notifier.service';
 import { ToastNotificationService } from '../../../../services/toast-notification.service';
+import {
+  CATEGORY_COLORS,
+  CATEGORY_LABELS,
+} from '../../../../constants/task-category.constants';
+import { PRIORITY_LABELS } from '../../../../constants/task-priority.constants';
 
 @Component({
   selector: 'app-task-overlay',
@@ -31,6 +36,10 @@ export class TaskOverlayComponent implements OnInit, OnDestroy {
   @Input() overlayData: string = '';
   @Output() closeDialogEmitter = new EventEmitter<boolean>();
 
+  readonly CATEGORY_LABELS = CATEGORY_LABELS;
+  readonly PRIORITY_LABELS = PRIORITY_LABELS;
+  readonly categoryColors = CATEGORY_COLORS;
+
   task: Task | null = null;
   overlayMobile: boolean = false;
   currentUserId: string = '';
@@ -49,11 +58,6 @@ export class TaskOverlayComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute
   ) {}
 
-  categoryColors = new Map<string, string>([
-    ['User Story', '#0038ff'],
-    ['Technical Task', '#20d7c2'],
-  ]);
-
   ngOnInit(): void {
     this.setCurrentUserId();
     this.setOverlayDataFromRoute();
@@ -175,16 +179,9 @@ export class TaskOverlayComponent implements OnInit, OnDestroy {
       );
   }
 
-  /**
-   * Capitalizes the first letter of a given string.
-   *
-   * This function takes a string as an argument and returns a new string
-   * with the first letter capitalized.
-   * @param data The string to capitalize.
-   * @returns {string} A new string with the first letter capitalized.
-   */
-  capitalizeFirstLetter(data: string) {
-    return data.charAt(0).toUpperCase() + data.slice(1);
+  capitalizeFirstLetter(value: string): string {
+    if (!value) return '';
+    return value.charAt(0).toUpperCase() + value.slice(1);
   }
 
   toggleConfirmDialog() {

src/assets/i18n/de.json

@@ -134,6 +134,10 @@
     "medium": "Mittel",
     "urgent": "Dringend"
   },
+  "taskCategory": {
+    "userStory": "Benutzergeschichte",
+    "technicalTask": "Technischer Auftrag"
+  },
   "addTask": {
     "headline": "Aufgabe",
     "title": "Titel",

src/assets/i18n/en.json

@@ -134,6 +134,10 @@
     "medium": "Medium",
     "low": "Low"
   },
+  "taskCategory": {
+    "userStory": "User Story",
+    "technicalTask": "Technical Task"
+  },
   "addTask": {
     "headline": "Add Task",
     "title": "Title",