From e7090c9609dc8bac16b3c4b328321be9070a5e40 Mon Sep 17 00:00:00 2001
From: mehdiboudjoudi <m.boudjoudi@neusta.de>
Date: Wed, 18 Dec 2024 12:02:47 +0100
Subject: [PATCH] UI: Mitarbeiter Bearbeiten View

---
 public/Delete-button.svg                      |   3 +
 src/app/app.component.html                    |   2 +-
 src/app/app.component.ts                      |   5 +-
 .../login-view/login-view.component.css       |  12 +-
 .../mitarbeiter-bearbeiten-view.component.css | 119 ++++++++++++++++++
 ...mitarbeiter-bearbeiten-view.component.html |  49 ++++++++
 ...arbeiter-bearbeiten-view.component.spec.ts |  23 ++++
 .../mitarbeiter-bearbeiten-view.component.ts  |  12 ++
 8 files changed, 218 insertions(+), 7 deletions(-)
 create mode 100644 public/Delete-button.svg
 create mode 100644 src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.css
 create mode 100644 src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html
 create mode 100644 src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.spec.ts
 create mode 100644 src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts

diff --git a/public/Delete-button.svg b/public/Delete-button.svg
new file mode 100644
index 0000000..b451d3f
--- /dev/null
+++ b/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>
diff --git a/src/app/app.component.html b/src/app/app.component.html
index ce0f108..98920a5 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1 @@
-<app-mitarbeiterverwaltung-view></app-mitarbeiterverwaltung-view>
+<app-mitarbeiter-bearbeiten-view></app-mitarbeiter-bearbeiten-view>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index febbfd1..2fa9540 100644
--- a/src/app/app.component.ts
+++ b/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'
 })
diff --git a/src/app/components/login-view/login-view.component.css b/src/app/components/login-view/login-view.component.css
index 0ab8228..e8275d5 100644
--- a/src/app/components/login-view/login-view.component.css
+++ b/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 */
-  height: auto; /* Maintain aspect ratio */
+  width: 25%;
+  height: auto;
 }
diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.css b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.css
new file mode 100644
index 0000000..a154b4a
--- /dev/null
+++ b/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;
+}
+
diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html
new file mode 100644
index 0000000..c6ba505
--- /dev/null
+++ b/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>
diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.spec.ts b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.spec.ts
new file mode 100644
index 0000000..89fda7c
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts
new file mode 100644
index 0000000..ccf171e
--- /dev/null
+++ b/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 {
+
+}