UI: User Login, Mitarbeiterübersichts Page

Reviewed-on: #26

compose.yml

@@ -0,0 +1,29 @@
+volumes:
+  employee_postgres_data:
+    driver: local
+
+services:
+  postgres-employee:
+    container_name: postgres_employee
+    image: postgres:13.3
+    volumes:
+      - employee_postgres_data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_DB: employee_db
+      POSTGRES_USER: employee
+      POSTGRES_PASSWORD: secret
+    ports:
+      - "5432:5432"
+
+  employee:
+    container_name: employee
+    image: berndheidemann/employee-management-service:1.1.3
+    #    image: berndheidemann/employee-management-service_without_keycloak:1.1
+    environment:
+      spring.datasource.url: jdbc:postgresql://postgres-employee:5432/employee_db
+      spring.datasource.username: employee
+      spring.datasource.password: secret
+    ports:
+      - "8089:8089"
+    depends_on:
+      - postgres-employee

public/logo.svg

@@ -0,0 +1 @@
+<svg fill="none" height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><rect fill="white" fill-opacity="0.01" height="48" width="48"></rect><path d="M24 20C28.4183 20 32 16.4183 32 12C32 7.58172 28.4183 4 24 4C19.5817 4 16 7.58172 16 12C16 16.4183 19.5817 20 24 20Z" fill="#2F88FF" stroke="black" stroke-linejoin="round" stroke-width="4"></path><path d="M24 20V38" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"></path><path d="M16 32H12L4 44H44L36 32H32" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"></path></svg>

src/app/app.component.css

@@ -0,0 +1,5 @@
+
+:host {
+  display: block;
+  height: 100vh;
+}

src/app/app.component.ts

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

src/app/components/employee-detail/employee-detail.component.html

@@ -0,0 +1,28 @@
+<div class="d-flex flex-col" style="height: 100%;">
+  <app-navigation-bar></app-navigation-bar>
+  <div class="p-3" style="width: 100%;">
+    <a href="" class="btn btn-primary">Zurück</a>
+    <div class="row align-items-start pt-3">
+      <div class="col">
+        <h1>Name des Mitarbeiters</h1>
+        <p><strong>Straße: </strong>Straße des Benutzers</p>
+        <p><strong>Postleitzahl: </strong>Postleitzahl des Benutzers</p>
+        <p><strong>Stadt: </strong>Stadt des Benutzers</p>
+        <p><strong>Telefonnummer: </strong>Telefonnummer des Benutzers</p>
+        <button class="btn btn-danger">Löschen</button>
+        <button class="ms-3 btn btn-primary">Bearbeiten</button>
+      </div>
+      <div class="col">
+        <h2>Qualifikationen</h2>
+        <ul class="list-group" style="width: fit-content;">
+          <li class="list-group-item">Qualifikation 1</li>
+          <li class="list-group-item">Qualifikation 2</li>
+          <li class="list-group-item">Qualifikation 3</li>
+          <li class="list-group-item">Qualifikation 4</li>
+          <li class="list-group-item">Qualifikation 5</li>
+        </ul>
+      </div>
+    </div>
+
+  </div>
+</div>

src/app/components/employee-detail/employee-detail.component.spec.ts

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

src/app/components/employee-detail/employee-detail.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { NavigationBarComponent } from '../navigation-bar/navigation-bar.component';
+
+@Component({
+  selector: 'app-employee-detail',
+  standalone: true,
+  imports: [NavigationBarComponent],
+  templateUrl: './employee-detail.component.html',
+  styleUrl: './employee-detail.component.css'
+})
+export class EmployeeDetailComponent {
+
+}

src/app/components/navigation-bar/navigation-bar.component.css

@@ -0,0 +1,5 @@
+:host {
+display: block;
+  height: 100%;
+  width: 300px;
+}

src/app/components/navigation-bar/navigation-bar.component.html

@@ -0,0 +1,24 @@
+<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-light border-end border-primary" style="width: 300px; height: 100%;">
+    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-black text-decoration-none">
+      <img src="logo.svg" class="bi pe-none me-2" width="40" height="32"/>
+      <span class="fs-4">Hi-Tec GmbH</span>
+    </a>
+    <hr>
+    <ul class="nav nav-pills flex-column mb-auto">
+      <li class="nav-item">
+        <a href="#" class="nav-link active text-black" aria-current="page">
+          Dashboard
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link text-black">
+          Mitarbeiterverwaltung
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link text-black">
+          Qualifikationsverwaltung
+        </a>
+      </li>
+    </ul>
+  </div>

src/app/components/navigation-bar/navigation-bar.component.spec.ts

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

src/app/components/navigation-bar/navigation-bar.component.ts

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

src/styles.css

@@ -1 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
+.container{
+    min-height:100vh;
+}
+
+html, body {
+  min-height: 100%;
+  height: auto;
+  margin: 0;
+}