Browser-Dashboard-UI #64

Open
dorian wants to merge 2 commits from Browser-Dashboard-UI into main
8 changed files with 70 additions and 48 deletions

View file

@ -0,0 +1,11 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {routes} from "./app.routes";
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

View file

@ -1,25 +1,26 @@
import {Component} from '@angular/core';
import {RouterOutlet} from '@angular/router';
import { Component } from '@angular/core';
import {RouterModule, RouterOutlet} from '@angular/router';
import {LoginViewComponent} from "./components/login-view/login-view.component";
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';
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";
import {
QualifikatonBearbeitenViewComponent
} from "./components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component";
import {AppRoutingModule} from "./app-routing.module";
import {QualifikatonDetailComponent} from "./components/qualifikaton-detail/qualifikaton-detail.component";
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent, MitarbeiterBearbeitenViewComponent, QualifikatonBearbeitenViewComponent, QualifikatonDetailComponent],
imports: [AppRoutingModule, RouterModule, RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent, MitarbeiterBearbeitenViewComponent, QualifikatonBearbeitenViewComponent, QualifikatonDetailComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})

View file

@ -1,3 +1,5 @@
<div class="d-flex flex-col" style="height: 100%;">
<app-navigation-bar></app-navigation-bar>
<div class="container">
<div class="header">
<div class="dropdown position-absolute top-0 end-0 m-3">
@ -47,3 +49,4 @@
</tbody>
</table>
</div>
</div>

View file

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

View file

@ -1,22 +1,17 @@
<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">
<a routerLink="/" 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">
<a routerLink="/mitarbeiter" routerLinkActive="active" class="nav-link text-black">
Mitarbeiterverwaltung
</a>
</li>
<li>
<a href="#" class="nav-link text-black">
<a routerLink="/qualifikationbearbeiten" routerLinkActive="active" class="nav-link text-black">
Qualifikationsverwaltung
</a>
</li>

View file

@ -1,9 +1,13 @@
import { Component } from '@angular/core';
import {RouterLink, RouterLinkActive} from "@angular/router";
@Component({
selector: 'app-navigation-bar',
standalone: true,
imports: [],
imports: [
RouterLink,
RouterLinkActive
],
templateUrl: './navigation-bar.component.html',
styleUrl: './navigation-bar.component.css'
})

View file

@ -1,36 +1,38 @@
<div class="container">
<button class="back-button">Back</button>
<div class="d-flex flex-col" style="height: 100%;">
<app-navigation-bar></app-navigation-bar>
<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>
<button class="delete-skill-button">
<img src="Delete-button.svg" alt="Delete">
</button>
<span class="employee-name">Max Mustermann</span>
</li>
<li>
<button class="delete-skill-button">
<img src="Delete-button.svg" alt="Delete">
</button>
<span class="employee-name">Mehdi Boudjoudi</span>
</li>
</ul>
<div class="add-employee-section">
<label for="employeeSearch">Search for employee</label>
<input type="text" id="employeeSearch" placeholder="Last name of employee">
<button class="add-employee-button">Add employee</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>
<button class="delete-skill-button">
<img src="Delete-button.svg" alt="Delete">
</button>
<span class="employee-name">Max Mustermann</span>
</li>
<li>
<button class="delete-skill-button">
<img src="Delete-button.svg" alt="Delete">
</button>
<span class="employee-name">Mehdi Boudjoudi</span>
</li>
</ul>
<div class="add-employee-section">
<label for="employeeSearch">Search for employee</label>
<input type="text" id="employeeSearch" placeholder="Last name of employee">
<button class="add-employee-button">Add employee</button>
</div>
</div>
<button class="save-button">Save</button>
</div>
<button class="save-button">Save</button>
</div>

View file

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