qualificationPage gebaut

src/app/Interfaces/qualifications.ts

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

src/app/app.component.html

@@ -1,3 +1,24 @@
-<app-header></app-header>
+<!--@if ($employees | async; as employees) {
+    <mat-tree #tree [dataSource]="employees" [childrenAccessor]="childrenAccessor">
+        <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+            {{ node.firstName }}
+            @if (tree.isExpanded(node)) {
+                <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.id">
+                    <mat-icon>expand_more</mat-icon>
+                </button>
+                <ul>
+                    @for (entry of node | keyvalue; track entry) {
+                        <li>{{ entry.key }}: <code>{{ entry.value }}</code></li>
+                    }
+                </ul>
+            } @else {
+                <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.id">
+                    <mat-icon>chevron_right</mat-icon>
+                </button>
+            }
+        </mat-tree-node>
+    </mat-tree>
+}
+-->
 
 <router-outlet/>

src/app/app.component.ts

@@ -1,11 +1,16 @@
 import {Component} from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import {HeaderComponent} from '@app/header/header.component';
+import {MatIcon} from "@angular/material/icon";
+import {MatTree, MatTreeNode, MatTreeNodeDef, MatTreeNodePadding, MatTreeNodeToggle} from "@angular/material/tree";
+import {AsyncPipe, KeyValuePipe} from "@angular/common";
+import {MatIconButton} from "@angular/material/button";
 
 @Component({
     selector: 'app-root',
-    imports: [RouterOutlet, HeaderComponent],
+    imports: [RouterOutlet, HeaderComponent, MatIcon, MatTree, AsyncPipe, MatTreeNodeDef, MatTreeNode, MatTreeNodePadding, KeyValuePipe, MatIconButton, MatTreeNodeToggle],
     templateUrl: './app.component.html',
+    standalone: true,
     styleUrl: './app.component.scss'
 })
 export class AppComponent{

src/app/app.config.ts

@@ -5,7 +5,7 @@ import { provideRouter } from '@angular/router';
 import { routes } from '@app/app.routes';
 import { OpenAPI } from '@core/ems/core/OpenAPI';
 OpenAPI.BASE = 'http://localhost:8080';
-OpenAPI.TOKEN = 'eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIzUFQ0dldiNno5MnlQWk1EWnBqT1U0RjFVN0lwNi1ELUlqQWVGczJPbGU0In0.eyJleHAiOjE3MzQ1MjA4MzgsImlhdCI6MTczNDUxNzIzOCwianRpIjoiODVkM2NlNDQtM2QwMS00MDFkLTlhY2YtZjFhZTMwNzQzMDRmIiwiaXNzIjoiaHR0cHM6Ly9rZXljbG9hay5zenV0LmRldi9hdXRoL3JlYWxtcy9zenV0IiwiYXVkIjoiYWNjb3VudCIsInN1YiI6IjU1NDZjZDIxLTk4NTQtNDMyZi1hNDY3LTRkZTNlZWRmNTg4OSIsInR5cCI6IkJlYXJlciIsImF6cCI6ImVtcGxveWVlLW1hbmFnZW1lbnQtc2VydmljZSIsInNlc3Npb25fc3RhdGUiOiJiOWI3OGQ0ZS1jM2E4LTRiOWQtODdmMy04N2FiNzhjYzQyYTMiLCJhY3IiOiIxIiwiYWxsb3dlZC1vcmlnaW5zIjpbImh0dHA6Ly9sb2NhbGhvc3Q6NDIwMCJdLCJyZWFsbV9hY2Nlc3MiOnsicm9sZXMiOlsicHJvZHVjdF9vd25lciIsIm9mZmxpbmVfYWNjZXNzIiwiZGVmYXVsdC1yb2xlcy1zenV0IiwidW1hX2F1dGhvcml6YXRpb24iLCJ1c2VyIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsIm1hbmFnZS1hY2NvdW50LWxpbmtzIiwidmlldy1wcm9maWxlIl19fSwic2NvcGUiOiJlbWFpbCBwcm9maWxlIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInByZWZlcnJlZF91c2VybmFtZSI6InVzZXIifQ.I3CGELu7IXrh5kYapp-v54c-R8hNqZOtvpmR98NhoTCrOVUoA-V16ayhF42qQ3Pj2YymxENpQWHR1-BTFQOJmAhQKBzvKWgOHuiLCPr8NkMGWFQ520BcJdipbGnsM8tmXuLE9FWezHA7LEGVkwY2gTbQMLEPq8v8hrtIf76F2Dq34BIG3Nq_6QlG10rG_Heqta6kWWe2p4DJmebdpvAeW2qvTLD4x89oIhtYXSiRIiVS2uAur5XuJcjpbv8UXWx11zVX7KelZEXky92q_xPKerFMOGt6up5MkCijJBhVWewSWNldaix7_jKTXCp70Gtu4sgCIuoojKp9Nts942RZjw';
+OpenAPI.TOKEN = 'eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIzUFQ0dldiNno5MnlQWk1EWnBqT1U0RjFVN0lwNi1ELUlqQWVGczJPbGU0In0.eyJleHAiOjE3MzQ1Mjc2NjIsImlhdCI6MTczNDUyNDA2MiwianRpIjoiZGUxNmI4NGMtZWFiOS00Yzg0LWJmNDMtMzg5NDEyMzJmYjY5IiwiaXNzIjoiaHR0cHM6Ly9rZXljbG9hay5zenV0LmRldi9hdXRoL3JlYWxtcy9zenV0IiwiYXVkIjoiYWNjb3VudCIsInN1YiI6IjU1NDZjZDIxLTk4NTQtNDMyZi1hNDY3LTRkZTNlZWRmNTg4OSIsInR5cCI6IkJlYXJlciIsImF6cCI6ImVtcGxveWVlLW1hbmFnZW1lbnQtc2VydmljZSIsInNlc3Npb25fc3RhdGUiOiJlODIxNzhjNi02ZTAwLTQwOTEtYTA4Mi01MTRhYjE1N2QwNzYiLCJhY3IiOiIxIiwiYWxsb3dlZC1vcmlnaW5zIjpbImh0dHA6Ly9sb2NhbGhvc3Q6NDIwMCJdLCJyZWFsbV9hY2Nlc3MiOnsicm9sZXMiOlsicHJvZHVjdF9vd25lciIsIm9mZmxpbmVfYWNjZXNzIiwiZGVmYXVsdC1yb2xlcy1zenV0IiwidW1hX2F1dGhvcml6YXRpb24iLCJ1c2VyIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsIm1hbmFnZS1hY2NvdW50LWxpbmtzIiwidmlldy1wcm9maWxlIl19fSwic2NvcGUiOiJlbWFpbCBwcm9maWxlIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInByZWZlcnJlZF91c2VybmFtZSI6InVzZXIifQ.MRP09-6Q7r22TKmrvSn7Tox_IEQXNjbfHJHXky6jshtZSjGzhsYFPEVsy0W_RYX2IIj59owZ2XKEC5fzvtk2NsOyyXXWIUmS9Nxwpqo5qOZCmjFMOjHi8exBYDKoOg2wKfjMMkyk6s0BqTfSNlLz9lxf21oRrYGPN5rXO1ZgaNOr-mHJi5UUQDtBgoMlaM3IA3eaixGjK_ZnoEyB5Sb4V-iXLnSvhcXylEP8eOQcT_eJhq4sQluBdPtT8KY-oIWC7k3HwjeXQWqIjRSwFyQPBDtp4QPMgVbV0vgHWJvz2lEaPCPo21W2dmCVxYhthqv0mFBzxiKau5391Y49jmeNuw';
 
 export const appConfig: ApplicationConfig = {
     providers: [

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/qualifications/qualifications.component";
 
-export const routes: Routes = [{path: '', component: DashboardComponent, title: 'Home'}];
+export const routes: Routes = [
+    {path: 'qualifications', component: QualificationsComponent, title: "qualifications"},
+    {path: '', component: DashboardComponent, title: 'Home'}
+];

src/app/header/header.component.ts

@@ -14,6 +14,7 @@ import {Router, RouterLink} from '@angular/router';
         MatButton,
     ],
     templateUrl: './header.component.html',
+    standalone: true,
     styleUrl: './header.component.scss'
 })
 export class HeaderComponent implements OnInit {

src/app/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/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/qualifications/qualifications.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QualificationsComponent } from './qualifications.component';
+
+describe('QualificationsComponent', () => {
+  let component: QualificationsComponent;
+  let fixture: ComponentFixture<QualificationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [QualificationsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(QualificationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/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)
+
+  }
+}

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)
+  }
+}