Merge pull request 'UI - Mitarbeiter Bearbeiten View' (#29) from Browser-Mitarbeiter-bearbeiten-UI into main

Reviewed-on: #29

public/Delete-button.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.681 2.41458C11.7194 2.55015 11.874 2.66 12.0286 2.66H15.0175C15.5603 2.66 16 3.05682 16 3.54666C16 3.95141 15.6996 4.29181 15.2906 4.39869L14.7774 17.1327C14.7358 18.1687 13.7807 19 12.6294 19H3.37062C2.22147 19 1.26424 18.1678 1.22258 17.1327L0.709425 4.39869C0.300438 4.29181 0 3.95141 0 3.54666C0 3.05682 0.439696 2.66 0.982467 2.66H3.97141C4.12602 2.66 4.28173 2.54817 4.31901 2.41458L4.52844 1.65557C4.78831 0.717461 5.80587 0 6.87606 0H9.12388C10.1952 0 11.2116 0.717436 11.4715 1.65557L11.681 2.41458ZM7.29835 6.71337V15.3267C7.29835 15.676 7.61305 15.96 8.00011 15.96C8.38718 15.96 8.70187 15.676 8.70187 15.3267V6.71337C8.70187 6.36405 8.38718 6.08004 8.00011 6.08004C7.61305 6.08004 7.29835 6.36405 7.29835 6.71337ZM4.07025 6.73217L4.35095 15.3455C4.36301 15.6948 4.68648 15.9699 5.07354 15.96C5.46061 15.9491 5.76542 15.6572 5.75448 15.3079L5.47377 6.69458C5.46171 6.34526 5.13824 6.07016 4.75118 6.08004C4.36412 6.09093 4.0593 6.38285 4.07025 6.73217ZM10.5265 6.69457L10.2458 15.3078C10.2348 15.6572 10.5396 15.9491 10.9267 15.96C11.3137 15.9699 11.6372 15.6948 11.6493 15.3454L11.93 6.73216C11.9409 6.38284 11.6361 6.09093 11.249 6.08003C10.862 6.07014 10.5385 6.34525 10.5265 6.69457ZM6.41553 2.66H9.58441C9.66117 2.66 9.70941 2.60558 9.69077 2.53829L9.56467 2.08505C9.5241 1.93661 9.29274 1.77332 9.12388 1.77332H6.87606C6.7072 1.77332 6.47583 1.93661 6.43527 2.08505L6.30917 2.53829C6.29053 2.60657 6.33877 2.66 6.41553 2.66H6.41553Z" fill="#EB5757"/>
+</svg>

src/app/app.component.html

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

src/app/app.component.ts

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

src/app/components/login-view/login-view.component.css

@@ -3,15 +3,17 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh; /* Use height instead of min-height */
+  height: 100vh;
   background-color: #f0f0f0;
 }
 
 .container {
   text-align: center;
+  padding: 20px;
+  border: 1px solid #ccc;
   border-radius: 5px;
   background-color: #fff;
-  width: 300px; /* Set a maximum width for the container */
+  width: 300px;
 }
 
 h1 {
@@ -24,7 +26,7 @@ label {
   display: block;
   margin-bottom: 5px;
   color: #aaa;
-  text-align: center; /* Center labels horizontally */
+  text-align: center;
 }
 
 input[type="text"],
@@ -49,6 +51,6 @@ button {
 }
 
 .logo-image {
-  width: 25%; /* Reduce width to 25% of its original size */
+  width: 25%;
-  height: auto; /* Maintain aspect ratio */
+  height: auto;
 }

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

@@ -0,0 +1,119 @@
+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: 2rem;
+  margin-bottom: 20px;
+}
+
+.back-button {
+  background-color: #ccc;
+  color: #333;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 3px;
+  margin-bottom: 15px;
+}
+
+.user-info {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+label {
+  margin-bottom: 5px;
+}
+
+input[type="text"] {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+}
+
+input[type="text"]::placeholder {
+  color: #999;
+}
+
+.save-button {
+  background-color: #007bff;
+  color: #fff;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.skills-container {
+  border: 1px solid #ccc;
+  padding: 20px;
+  border-radius: 3px;
+}
+
+.skill-controls select {
+  padding: 10px 10px;
+  border: none;
+  border-radius: 3px;
+  background-color: #007bff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.skill-list {
+  list-style: none;
+  padding: 0;
+}
+
+.skill-list li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.skill-icon {
+  margin-right: 5px;
+}
+
+.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-skill-button{
+  background-color: #06a63b;
+  color: #fff;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-left: 10px;
+}
+

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

@@ -0,0 +1,49 @@
+<div class="container">
+  <button class="back-button">Back</button>
+  <div class="user-info">
+    <div class="form-group">
+      <label for="firstName">First Name</label>
+      <input type="text" id="firstName" placeholder="First Name">
+    </div>
+    <div class="form-group">
+      <label for="lastName">Last Name</label>
+      <input type="text" id="lastName" placeholder="Last Name">
+    </div>
+    <div class="form-group">
+      <label for="street">Street</label>
+      <input type="text" id="street" placeholder="Street">
+    </div>
+    <div class="form-group">
+      <label for="postcode">Postcode</label>
+      <input type="text" id="postcode" placeholder="Postcode">
+    </div>
+    <div class="form-group">
+      <label for="city">City</label>
+      <input type="text" id="city" placeholder="City">
+    </div>
+    <div class="form-group">
+      <label for="phone">Phone Number</label>
+      <input type="text" id="phone" placeholder="Phone Number">
+    </div>
+  </div>
+
+  <div class="skills-container">
+    <h2>Skills</h2>
+    <ul class="skill-list">
+      <li>
+        <span class="skill-name">Skill 1</span>
+        <button class="delete-skill-button">
+          <img src="Delete-button.svg" alt="Delete">
+        </button>
+      </li>
+    </ul>
+    <div class="skill-controls">
+      <select>
+        <option value="">Option 1</option>
+        <option value="">Option 2</option>
+      </select>
+      <button class="add-skill-button">Add qualification</button>
+    </div>
+  </div>
+  <button class="save-button">Save</button>
+</div>

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

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

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

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