From 5dc78fe03ed41396b1579aecc56c8aca88f06bc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ole=20K=C3=BCck?= Date: Wed, 8 Jan 2025 12:24:18 +0100 Subject: [PATCH] qualificationPage gebaut --- src/app/Interfaces/qualifications.ts | 4 + src/app/app.routes.ts | 6 +- src/app/header/header.component.ts | 1 + .../qualifications.component.html | 74 +++++++++++++++++++ .../qualifications.component.scss | 25 +++++++ .../qualifications.component.spec.ts | 23 ++++++ .../qualifications.component.ts | 34 +++++++++ .../services/qualification.service.spec.ts | 16 ++++ src/app/services/qualification.service.ts | 33 +++++++++ 9 files changed, 215 insertions(+), 1 deletion(-) create mode 100644 src/app/Interfaces/qualifications.ts create mode 100644 src/app/qualifications/qualifications.component.html create mode 100644 src/app/qualifications/qualifications.component.scss create mode 100644 src/app/qualifications/qualifications.component.spec.ts create mode 100644 src/app/qualifications/qualifications.component.ts create mode 100644 src/app/services/qualification.service.spec.ts create mode 100644 src/app/services/qualification.service.ts diff --git a/src/app/Interfaces/qualifications.ts b/src/app/Interfaces/qualifications.ts new file mode 100644 index 0000000..f6d89c5 --- /dev/null +++ b/src/app/Interfaces/qualifications.ts @@ -0,0 +1,4 @@ +export interface Qualifications { + id: number; + title: string; +} diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 087641c..dc02991 100644 --- a/src/app/app.routes.ts +++ b/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'} +]; diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 3e08782..5fc8908 100644 --- a/src/app/header/header.component.ts +++ b/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 { diff --git a/src/app/qualifications/qualifications.component.html b/src/app/qualifications/qualifications.component.html new file mode 100644 index 0000000..a4aa577 --- /dev/null +++ b/src/app/qualifications/qualifications.component.html @@ -0,0 +1,74 @@ +
+

+ Qualification-List +

+
+
+ search + +
+
+
+ + + + + + + + + + + + + @for(qualification of qualificationModel; track qualificationModel){ + + + + + + + } + +
IdBezeichnung
+ + {{qualification.id}}{{qualification.title}} + +
+ + +
+

Qualification hinzufügen

+ +
+ +
+ + Todo Name: + +
+ +
+ + Kategorie: + +
+ + +
+
diff --git a/src/app/qualifications/qualifications.component.scss b/src/app/qualifications/qualifications.component.scss new file mode 100644 index 0000000..32d556d --- /dev/null +++ b/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; +} diff --git a/src/app/qualifications/qualifications.component.spec.ts b/src/app/qualifications/qualifications.component.spec.ts new file mode 100644 index 0000000..1808d67 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [QualificationsComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(QualificationsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/qualifications/qualifications.component.ts b/src/app/qualifications/qualifications.component.ts new file mode 100644 index 0000000..cfc334d --- /dev/null +++ b/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) + + } +} diff --git a/src/app/services/qualification.service.spec.ts b/src/app/services/qualification.service.spec.ts new file mode 100644 index 0000000..2a878e3 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/services/qualification.service.ts b/src/app/services/qualification.service.ts new file mode 100644 index 0000000..6d31274 --- /dev/null +++ b/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) + } +}