qualificationPage gebaut

src/app/Interfaces/qualifications.ts

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

src/app/app.routes.ts

@@ -1,11 +1,13 @@
 import { Routes } from '@angular/router';
 import { DashboardComponent } from '@app/views/dashboard/dashboard.component';
 import { AuthService } from '@core/auth/auth.service';
+import {QualificationsComponent} from "@app/views/qualifications/qualifications.component";
 
 import { EmployeeDetailComponent } from './views/employee-detail/employee-detail.component';
 
 export const routes: Routes = [
     { path: '', component: DashboardComponent, title: 'Home' },
     { path: 'employee/new', component: EmployeeDetailComponent, title: 'New Employee', canActivate: [AuthService] },
-    { path: 'employee/:id', component: EmployeeDetailComponent, title: 'Edit Employee', canActivate: [AuthService] }
+    { path: 'employee/:id', component: EmployeeDetailComponent, title: 'Edit Employee', canActivate: [AuthService] },
+    {path: 'qualifications', component: QualificationsComponent, title: "Qualifications", canActivate: [AuthService]}
 ];

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/dashboard/Filter.d.ts

@@ -1,8 +0,0 @@
-import {Qualification} from '@core/ems';
-
-interface Filter {
-    fuzzy: string,
-    qualification: Qualification|undefined
-}
-
-export default Filter;

src/app/views/dashboard/dashboard.component.html

@@ -3,14 +3,13 @@
         <div class="dashboard__action-row">
             <mat-form-field>
                 <mat-label>Search</mat-label>
-                <input matInput (keyup)="onFuzzyFilter($event)">
+                <input matInput>
             </mat-form-field>
             <mat-form-field>
                 <mat-label>Qualification</mat-label>
-                <mat-select [(value)]="selectedQualificationFilter" (valueChange)="onFilterUpdate()">
+                <mat-select>
-                    <mat-option>None</mat-option>
                     @for (skill of ($qualifications|async); track skill) {
-                        <mat-option [value]="skill">{{ skill.skill }}</mat-option>
+                        <mat-option [value]="skill">{{skill.skill}}</mat-option>
                     }
                 </mat-select>
             </mat-form-field>

src/app/views/dashboard/dashboard.component.ts

@@ -10,7 +10,6 @@ import {MatSelectModule} from '@angular/material/select';
 import {MatTableDataSource, MatTableModule} from '@angular/material/table';
 import {RouterLink} from '@angular/router';
 import {DeleteModelComponent} from '@app/delete-model/delete-model.component';
-import Filter from '@app/views/dashboard/Filter';
 import {AuthService} from '@core/auth/auth.service';
 import {Employee, EmployeeService, Qualification, QualificationService} from '@core/ems';
 import {NotificationService, NotificationType} from '@core/notification/notification.service';
@@ -23,8 +22,6 @@ import {Observable} from 'rxjs';
     styleUrl: './dashboard.component.scss'
 })
 export class DashboardComponent {
-    selectedQualificationFilter: Qualification | undefined;
-    fuzzyFilter: string = '';
 
     employeeDataSource: MatTableDataSource<Employee> = new MatTableDataSource<Employee>([]);
     employeesDisplayedColumns = ['id', 'first-name', 'last-name', 'skills', 'actions'];
@@ -37,55 +34,31 @@ export class DashboardComponent {
         private dialog: MatDialog,
         private notifications: NotificationService
     ) {
-        this.$qualifications = this.qualificationService.getAllQualifications();
+        this.$qualifications= this.qualificationService.getAllQualifications();
         this.employeeService.getAllEmployees().subscribe((employees) => {
             this.employeeDataSource = new MatTableDataSource(employees);
-            this.employeeDataSource.filterPredicate = (employee: Employee, rawFilter: string): boolean => {
-                const filter = JSON.parse(rawFilter) as Filter;
-                if (filter.fuzzy == '' && filter.qualification == undefined) {
-                    return true;
-                }
-
-                if (
-                    filter.qualification != undefined
-                    && !employee.skillSet.map((skill) => skill.id).includes(filter.qualification.id)
-                ) {
-                    return false;
-                }
-
-                if (
-                    filter.fuzzy != ''
-                    && !employee.id.toString().includes(filter.fuzzy)
-                    && !employee.firstName.toLowerCase().includes(filter.fuzzy)
-                    && !employee.lastName.toLowerCase().includes(filter.fuzzy)
-                ) {
-                    return false;
-                }
-
-                return true;
-            };
 
         });
     }
 
-    onDelete(employee: Employee) {
+    onDelete(employee: Employee){
         const dialogRef = this.dialog.open(DeleteModelComponent, {
-            data: {
+            data:{
-                title: `Delete ${employee.firstName} ${employee.lastName}`,
+                title:`Delete ${employee.firstName} ${employee.lastName}`,
                 description: `Do you really want to delete ${employee.firstName} ${employee.lastName}?`,
                 cancel: 'No',
                 ok: 'Yes',
             }
         });
 
-        dialogRef.afterClosed().subscribe((accepted: boolean) => {
+        dialogRef.afterClosed().subscribe((accepted:boolean) => {
-            if (!accepted) {
+            if (!accepted){
                 return;
             }
-            this.employeeService.deleteEmployee({id: employee.id}).subscribe(() => {
+            this.employeeService.deleteEmployee({id:employee.id}).subscribe(()=> {
                 const data = this.employeeDataSource.data;
                 const i = data.indexOf(employee);
-                if (i != -1) {
+                if (i != -1){
                     data.splice(i, 1);
                     this.employeeDataSource.data = data;
                 }
@@ -93,22 +66,4 @@ export class DashboardComponent {
             });
         });
     }
-
-    onFuzzyFilter(event: KeyboardEvent) {
-        this.fuzzyFilter = (event.target as HTMLInputElement).value;
-        this.onFilterUpdate();
-    }
-
-    onFilterUpdate() {
-        const skill = this.selectedQualificationFilter;
-        const fuzzy = this.fuzzyFilter;
-        if (skill == undefined && fuzzy == '') {
-            this.employeeDataSource.filter = '';
-            return;
-        }
-        this.employeeDataSource.filter = JSON.stringify({
-            qualification: skill,
-            fuzzy: fuzzy.toLowerCase()
-        } as Filter);
-    }
 }

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