Merge pull request 'UI - Qualifikation Bearbeiten View' (#30) from Qualiofikation-Bearbeiten-UI into main

Reviewed-on: #30

src/app/app.component.html

@@ -1 +1 @@
-<app-mitarbeiter-bearbeiten-view></app-mitarbeiter-bearbeiten-view>
+<app-qualifikaton-bearbeiten-view></app-qualifikaton-bearbeiten-view>

src/app/app.component.ts

@@ -10,11 +10,14 @@ import { EmployeeDetailComponent } from './components/employee-detail/employee-d
 import {
   MitarbeiterBearbeitenViewComponent
 } from "./components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component";
+import {
+  QualifikatonBearbeitenViewComponent
+} from "./components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent, MitarbeiterBearbeitenViewComponent],
+  imports: [RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent, MitarbeiterBearbeitenViewComponent, QualifikatonBearbeitenViewComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.css

@@ -61,6 +61,7 @@ input[type="text"]::placeholder {
   border-radius: 3px;
   cursor: pointer;
   margin-top: 10px;
+  width: 100%;
 }
 
 .skills-container {

src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.css

@@ -0,0 +1,130 @@
+body {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 20px;
+  background-color: #f0f0f0;
+}
+
+.container {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #fff;
+}
+
+h1, h2 {
+  font-size: 1.8rem;
+  margin-bottom: 15px;
+}
+
+.back-button {
+  background-color: #ccc;
+  color: #333;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 3px;
+  margin-bottom: 15px;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 1px;
+}
+
+.employee-list {
+  list-style: none;
+  padding: 0;
+}
+
+.employee-list li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.employee-icon {
+  margin-right: 5px;
+}
+
+.add-employee-section {
+  margin-top: 15px;
+}
+
+.add-employee-section select {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  margin-right: 10px;
+}
+
+.add-employee-button {
+  background-color: #007bff;
+  color: #fff;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.save-button {
+  background-color: #007bff;
+  color: #fff;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-top: 20px;
+  display: block;
+  width: 100%;
+}
+
+.delete-skill-button {
+  color: #fff;
+  padding: 5px 8px;
+  border: none;
+  cursor: pointer;
+  margin-left: 10px;
+  border-radius: 3px;
+}
+
+.delete-skill-button img {
+  width: 15px;
+  height: 15px;
+}
+
+.add-employee-section {
+  margin-top: 15px;
+}
+
+.add-employee-section label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+.add-employee-section input[type="text"] {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+}
+
+.employee-container {
+  border: 1px solid #ccc;
+  padding: 20px;
+  border-radius: 1px;
+  margin-bottom: 20px;
+}

src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.html

@@ -0,0 +1,30 @@
+<div class="container">
+  <button class="back-button">Back</button>
+
+  <div class="form-group">
+    <label for="name">Name</label>
+    <input type="text" id="name" value="(Hier kommt name der gewählten qualification hin)">
+  </div>
+
+  <div class="employee-container">
+    <h2>Employees possessing the qualification</h2>
+
+    <ul class="employee-list">
+      <li>
+        <span class="employee-name">Employee 1</span>
+        <button class="delete-skill-button">
+          <img src="Delete-button.svg" alt="Delete">
+        </button>
+      </li>
+    </ul>
+
+    <div class="add-employee-section">
+      <label for="employeeSearch">Search for employee</label>
+      <input type="text" id="employeeSearch" placeholder="Lastname of employee">
+      <button class="add-employee-button">Add employee</button>
+    </div>
+  </div>
+
+  <button class="save-button">Save</button>
+</div>
+

src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.spec.ts

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

src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-qualifikaton-bearbeiten-view',
+  standalone: true,
+  imports: [],
+  templateUrl: './qualifikaton-bearbeiten-view.component.html',
+  styleUrl: './qualifikaton-bearbeiten-view.component.css'
+})
+export class QualifikatonBearbeitenViewComponent {
+
+}