added translation

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

@@ -8,7 +8,7 @@
     class="headline"
     [ngStyle]="{ display: overlayData !== '' ? 'none' : 'block' }"
   >
-    <div class="title">Add Task</div>
+    <div class="title">{{ "addTask.headline" | translate }}</div>
   </div>
 
   <form
@@ -26,7 +26,7 @@
     >
       <div class="left-side">
         <div class="title">
-          <p>Title<span class="red-dot">*</span></p>
+          <p>{{ "addTask.title" | translate }}<span class="red-dot">*</span></p>
           <input
             type="text"
             id="title"
@@ -34,7 +34,9 @@
             #title="ngModel"
             (input)="saveTaskData()"
             placeholder="{{
-              taskData.title ? taskData.title : 'Enter a title'
+              taskData.title
+                ? taskData.title
+                : ('addTask.titleFormField' | translate)
             }}"
             [(ngModel)]="taskData.title"
             autocomplete="off"
@@ -42,12 +44,15 @@
           />
           <div class="error-msg">
             @if (!title.valid && title.touched) {
-            <p>You must enter a title.</p>
+            <p>{{ "addTask.titleError" | translate }}</p>
             }
           </div>
         </div>
         <div class="description">
-          <p>Description<span class="red-dot">*</span></p>
+          <p>
+            {{ "addTask.description" | translate
+            }}<span class="red-dot">*</span>
+          </p>
           <textarea
             id="description"
             rows="5"
@@ -58,7 +63,7 @@
             placeholder="{{
               taskData.description
                 ? taskData.description
-                : 'Enter a description'
+                : ('addTask.descriptionFormField' | translate)
             }}"
             [(ngModel)]="taskData.description"
             autocomplete="off"
@@ -66,18 +71,18 @@
           ></textarea>
           <div class="error-msg">
             @if (!description.valid && description.touched) {
-            <p>You must enter a description. (min. 10 letters)</p>
+            <p>{{ "addTask.descriptionError" | translate }}</p>
             }
           </div>
         </div>
         <div class="assigned">
-          <p>Assigned to</p>
+          <p>{{ "addTask.assigned" | translate }}</p>
           <input
             #searchField
             id="search-assigned"
             class="search-assigned"
             name="search"
-            placeholder="Search..."
+            placeholder="{{ 'addTask.assignedFormField' | translate }}"
             type="text"
             [(ngModel)]="searchValue"
             (input)="searchTask()"
@@ -134,7 +139,7 @@
             'margin-top': overlayMobile ? '28px' : ''
           }"
         >
-          <p>Due date<span class="red-dot">*</span></p>
+          <p>{{ "addTask.date" | translate }}<span class="red-dot">*</span></p>
           <input
             type="date"
             id="date"
@@ -148,14 +153,14 @@
           />
           <div class="error-msg">
             @if (!date.valid && date.touched) {
-            <p>You must enter a date.</p>
+            <p>{{ "addTask.dateError0" | translate }}</p>
             } @if (dateInPast && date.valid) {
-            <p>The date must be in the future</p>
+            <p>{{ "addTask.dateError1" | translate }}</p>
             }
           </div>
         </div>
         <div class="priority">
-          <p>Prio</p>
+          <p>{{ "addTask.priority" | translate }}</p>
           <div class="btns">
             <button
               type="button"
@@ -170,7 +175,7 @@
               (click)="tooglePriority('urgent')"
             >
               <div class="btn-text">
-                <span>Urgent</span>
+                <span>{{ "addTask.urgent" | translate }}</span>
                 <img src="./../../../assets/img/urgent.svg" alt="" />
               </div>
             </button>
@@ -187,7 +192,7 @@
               (click)="tooglePriority('medium')"
             >
               <div class="btn-text">
-                <span>Medium</span>
+                <span>{{ "addTask.medium" | translate }}</span>
                 <img src="./../../../assets/img/medium.svg" alt="" />
               </div>
             </button>
@@ -204,14 +209,16 @@
               (click)="tooglePriority('low')"
             >
               <div class="btn-text">
-                <span>Low</span>
+                <span>{{ "addTask.low" | translate }}</span>
                 <img src="./../../../assets/img/low.svg" alt="" />
               </div>
             </button>
           </div>
         </div>
         <div class="category">
-          <p>Category<span class="red-dot">*</span></p>
+          <p>
+            {{ "addTask.category" | translate }}<span class="red-dot">*</span>
+          </p>
           <select
             id="category"
             name="category"
@@ -221,7 +228,7 @@
             required
           >
             <option value="" disabled [selected]="!taskData.category">
-              Select task category
+              {{ "addTask.categorySelection" | translate }}
             </option>
             <option value="User Story">User Story</option>
             <option value="Technical Task">Technical Task</option>
@@ -233,18 +240,18 @@
           />
           <div class="error-msg">
             @if (!category.valid && category.touched) {
-            <p>You must select a category</p>
+            <p>{{ "addTask.categoryError" | translate }}</p>
             }
           </div>
         </div>
         <div class="subtask">
-          <p>Subtasks</p>
+          <p>{{ "addTask.subtask" | translate }}</p>
           <input
             type="text"
             id="subtask"
             name="subtask"
             #subtask="ngModel"
-            placeholder="Add new subtask"
+            placeholder="{{ 'addTask.subtaskFormField' | translate }}"
             [(ngModel)]="subtaskValue"
             autocomplete="off"
           />
@@ -290,7 +297,7 @@
       <app-form-btn
         [class]="'btn-clear'"
         [type]="'button'"
-        [value]="'Clear'"
+        [value]="'addTask.clear' | translate"
         [img]="'close'"
         [ngStyle]="{
           display:
@@ -303,7 +310,7 @@
       <app-form-btn
         [class]="'btn-delete'"
         [type]="'button'"
-        [value]="'Delete'"
+        [value]="'addTask.delete' | translate"
         [ngStyle]="{
           display:
             overlayData !== '' && overlayType !== 'addTaskOverlay'
@@ -316,7 +323,10 @@
         [type]="'submit'"
         [img]="'check'"
         [imgFilter]="'none'"
-        [value]="overlayData.toString() !== '' ? 'Update Task' : 'Create Task'"
+        [value]="
+          (overlayData.toString() !== '' ? 'addTask.update' : 'addTask.create')
+            | translate
+        "
         [disabled]="
           title.invalid ||
           !taskData.title ||

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

@@ -8,11 +8,18 @@ import { Task } from '../../interfaces/task.interface';
 import { OverlayService } from '../../services/overlay.service';
 import { FormBtnComponent } from '../../shared/components/buttons/form-btn/form-btn.component';
 import { ActivatedRoute } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-add-task',
   standalone: true,
-  imports: [FormsModule, CommonModule, AssignedComponent, FormBtnComponent],
+  imports: [
+    FormsModule,
+    CommonModule,
+    AssignedComponent,
+    FormBtnComponent,
+    TranslateModule,
+  ],
   templateUrl: './add-task.component.html',
   styleUrl: './add-task.component.scss',
 })

src/assets/i18n/de.json

@@ -95,6 +95,33 @@
     "findTask": "Aufgabe suchen",
     "noTasks": "Keine Aufgaben"
   },
+  "addTask": {
+    "headline": "Aufgabe",
+    "title": "Titel",
+    "titleFormField": "Geben Sie einen Titel ein...",
+    "description": "Beschreibung",
+    "descriptionFormField": "Geben Sie eine Beschreibung ein...",
+    "assigned": "Zugewiesen an",
+    "assignedFormField": "Suche...",
+    "date": "Fälligkeitsdatum",
+    "priority": "Priorität",
+    "urgent": "Dringend",
+    "medium": "Mittel",
+    "low": "Niedrig",
+    "category": "Kategorie",
+    "categorySelection": "Aufgabenkategorie wählen",
+    "subtask": "Unteraufgaben",
+    "subtaskFormField": "Neue Unteraufgabe hinzufügen",
+    "clear": "Neu",
+    "delete": "Löschen",
+    "update": "Aufgabe aktualisieren",
+    "create": "Aufgabe erstellen",
+    "titleError": "Sie müssen einen Titel eingeben!",
+    "descriptionError": "Sie müssen eine Beschreibung eingeben! (mind. 10 Buchstaben)",
+    "dateError0": "Sie müssen ein Datum eingeben!",
+    "dateError1": "Das Datum muss in der Zukunft liegen!",
+    "categoryError": "Sie müssen eine Kategorie auswählen!"
+  },
   "help": {
     "header": "Hilfe",
     "welcome": "Willkommen auf der Hilfeseite für Join, Ihrem Leitfaden für die Verwendung unseres Kanban-Projektmanagement-Tools. Hier erhalten Sie einen Überblick darüber, was Join ist, wie Sie davon profitieren können und wie Sie es verwenden.",

src/assets/i18n/en.json

@@ -95,6 +95,33 @@
     "findTask": "Find Task",
     "noTasks": "No tasks"
   },
+  "addTask": {
+    "headline": "Add Task",
+    "title": "Title",
+    "titleFormField": "Enter a title...",
+    "description": "Description",
+    "descriptionFormField": "Enter a description...",
+    "assigned": "Assigned to",
+    "assignedFormField": "Search...",
+    "date": "Due date",
+    "priority": "Priority",
+    "urgent": "Urgent",
+    "medium": "Medium",
+    "low": "Low",
+    "category": "Category",
+    "categorySelection": "Select task category",
+    "subtask": "Subtasks",
+    "subtaskFormField": "Add new subtask",
+    "clear": "Clear",
+    "delete": "Delete",
+    "update": "Update Task",
+    "create": "Create Task",
+    "titleError": "You must enter a title!",
+    "descriptionError": "You must enter a description! (min. 10 letters)",
+    "dateError0": "You must enter a date!",
+    "dateError1": "The date must be in the future!",
+    "categoryError": "You must select a category!"
+  },
   "help": {
     "header": "Help",
     "welcome": "Welcome to the help page for Join, your guide to using our kanban project management tool. Here, we'll provide an overview of what Join is, how it can benefit you, and how to use it.",