qualificationPage gebaut

src/app/Interfaces/qualifications.ts

@@ -0,0 +1,4 @@
+export interface Qualifications {
+    id: number;
+    title: string;
+}

src/app/app.routes.ts

@@ -1,4 +1,8 @@
 import {Routes} from '@angular/router';
 import {DashboardComponent} from '@app/views/dashboard/dashboard.component';
+import {QualificationsComponent} from "@app/views/qualifications/qualifications.component";
 
-export const routes: Routes = [{path: '', component: DashboardComponent, title: 'Home'}];
+export const routes: Routes = [
+    {path: '', component: DashboardComponent, title: 'Home'},
+    {path: 'qualifications', component: QualificationsComponent, title: "Qualifications"},
+];

src/app/header/header.component.ts

@@ -19,6 +19,7 @@ import {AuthService} from '@core/auth/auth.service';
         TitleCasePipe,
     ],
     templateUrl: './header.component.html',
+    standalone: true,
     styleUrl: './header.component.scss'
 })
 export class HeaderComponent implements OnInit {

src/app/services/qualification.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { QualificationService } from './qualification.service';
+
+describe('QualificationService', () => {
+  let service: QualificationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(QualificationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/qualification.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import {Qualifications} from "@app/Interfaces/qualifications";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class QualificationService {
+  qualifications = [
+    {
+      id: 15,
+      title: 'Java'},
+    {
+      id: 16,
+      title: 'Angular'},
+    {
+      id: 17,
+      title: 'CSS'},
+    {
+      id: 18,
+      title: 'Windows'},
+    {
+      id: 19,
+      title: 'Linux'},
+    {
+      id: 20,
+      title: 'Yes'},
+  ]
+
+  constructor() { }
+  deleteQualification(qualifications: Qualifications){
+    this.qualifications = this.qualifications.filter(t => t!== qualifications)
+  }
+}

src/app/views/qualifications/qualifications.component.html

@@ -0,0 +1,74 @@
+<div class="headbar">
+    <h1>
+        Qualification-List
+    </h1>
+    <form>
+        <div class="search-container">
+            <i class="material-icons searchIcon">search</i>
+            <input type="text" placeholder="Search..." class="search-input" />
+        </div>
+    </form>
+</div>
+
+
+
+
+<table class="table table-striped table-hover">
+    <thead>
+    <tr>
+        <th>Id</th>
+        <th>Bezeichnung</th>
+    </tr>
+    </thead>
+    <tbody>
+        @for(qualification of qualificationModel; track qualificationModel){
+            <tr>
+                <td>
+                    <input type="checkbox">
+                </td>
+                <td>{{qualification.id}}</td>
+                <td>{{qualification.title}}</td>
+                <td>
+                    <button class="material-icons" (click)="delete(qualification)">
+                        delete
+                    </button>
+                </td>
+            </tr>
+        }
+    </tbody>
+</table>
+
+
+<div>
+    <h3>Qualification hinzufügen</h3>
+
+    <form name="newTodoForm" #newTodoForm="ngForm">
+
+        <div class="mb-2">
+            <label for="newTodoTitle"></label>
+            Todo Name:
+            <input class="formControl"
+                   id="newTodoTitle"
+                   name="newTodoTitle"
+                   type="text"
+                   required
+            >
+        </div>
+
+        <div class="mb-2">
+            <label for="newTodoCategory"></label>
+            Kategorie:
+            <input class="formControl"
+                   id="newTodoCategory"
+                   name="newTodoCategory"
+                   type="text"
+                   required
+            >
+        </div>
+
+        <button type="submit"
+                class="btn btn-primary"
+                (click)="save(); newTodoForm.resetForm()"
+                [disabled]="!newTodoForm.valid">absenden</button>
+    </form>
+</div>

src/app/views/qualifications/qualifications.component.scss

@@ -0,0 +1,25 @@
+.search-container{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px solid black;
+  background: lightgray;
+  margin-top: 0.5rem;
+
+}
+.headbar{
+  display: flex;
+  justify-content: space-between;
+  margin-left: 7rem;
+  margin-right: 3rem;
+  margin-top: 1rem;
+}
+.search-input{
+  border: none;
+  padding: 6px;
+  font-size: 17px;
+}
+.searchIcon{
+  margin-right: 0.5rem;
+  margin-left: 0.5rem;
+}

src/app/views/qualifications/qualifications.component.ts

@@ -0,0 +1,34 @@
+import {Component, Input} from '@angular/core';
+import {FormsModule} from "@angular/forms";
+import {Qualifications} from "@app/Interfaces/qualifications";
+import {QualificationService} from "@app/services/qualification.service";
+
+@Component({
+  selector: 'app-qualifications',
+  imports: [
+    FormsModule
+  ],
+  templateUrl: './qualifications.component.html',
+  standalone: true,
+  styleUrl: './qualifications.component.scss'
+})
+export class QualificationsComponent {
+  qualificationModel: Qualifications[] | undefined;
+  options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }
+
+  constructor(private qualificationService: QualificationService) {
+    this.qualificationModel=this.qualificationService.qualifications
+  }
+  save() {
+
+  }
+
+  delete(qualification: Qualifications) {
+    this.qualificationService.deleteQualification(qualification)
+
+  }
+}