feat(navigation): add navigation bar to employee views #79
6 changed files with 117 additions and 108 deletions
|
|
@ -1,49 +1,52 @@
|
|||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="dropdown position-absolute top-0 end-0 m-3">
|
||||
<button class="btn align-items-center d-flex" type="button" id="userDropdown" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<img src="user.svg" alt="User Icon" class="rounded-circle" style="width: 30px; height: 30px;">
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
|
||||
<li><a class="dropdown-item" href="/logout">Log out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1>Employees</h1>
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
<form [formGroup]="searchForm">
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Search employee" formControlName="search">
|
||||
<button (click)="submit()">Search</button>
|
||||
<div class="d-flex flex-row">
|
||||
<app-navigation-bar [route]="'employee'" class="row" style="height: 100vh;"></app-navigation-bar>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="dropdown position-absolute top-0 end-0 m-3">
|
||||
<button class="btn align-items-center d-flex" type="button" id="userDropdown" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<img src="user.svg" alt="User Icon" class="rounded-circle" style="width: 30px; height: 30px;">
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
|
||||
<li><a class="dropdown-item" href="/logout">Log out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<p class="text-body-tertiary">Search for a propertiy of an Employee. eg. First Name</p>
|
||||
</form>
|
||||
<button (click)="createEmployee()" class="add-button">Add employee</button>
|
||||
</div>
|
||||
<h1>Employees</h1>
|
||||
</div>
|
||||
|
||||
<table class="employee-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><span class="sortable">First Name</span></th>
|
||||
<th><span class="sortable">Last Name</span></th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (employees) {
|
||||
@for (employee of employees; track employee) {
|
||||
<tr>
|
||||
<td>{{ employee.firstName }}</td>
|
||||
<td>{{ employee.lastName }}</td>
|
||||
<td>
|
||||
<button class="btn btn-primary me-2" (click)="editEmployee(employee.id)">Edit</button>
|
||||
<button class="btn btn-danger" (click)="deleteEmployee(employee.id)">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="header-actions">
|
||||
<form [formGroup]="searchForm">
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Search employee" formControlName="search">
|
||||
<button (click)="submit()">Search</button>
|
||||
</div>
|
||||
<p class="text-body-tertiary">Search for a propertiy of an Employee. eg. First Name</p>
|
||||
</form>
|
||||
<button (click)="createEmployee()" class="add-button">Add employee</button>
|
||||
</div>
|
||||
|
||||
<table class="employee-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><span class="sortable">First Name</span></th>
|
||||
<th><span class="sortable">Last Name</span></th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (employees) {
|
||||
@for (employee of employees; track employee) {
|
||||
<tr>
|
||||
<td>{{ employee.firstName }}</td>
|
||||
<td>{{ employee.lastName }}</td>
|
||||
<td>
|
||||
<button class="btn btn-primary me-2" (click)="editEmployee(employee.id)">Edit</button>
|
||||
<button class="btn btn-danger" (click)="deleteEmployee(employee.id)">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,14 @@ import { EmployeeResponseDTO } from '../../models/mitarbeiter';
|
|||
import { EmployeeService } from '../../service/employee.service';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { NavigationBarComponent } from '../navigation-bar/navigation-bar.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-mitarbeiterverwaltung-view',
|
||||
templateUrl: './mitarbeiterverwaltung-view.component.html',
|
||||
styleUrls: ['./mitarbeiterverwaltung-view.component.css'],
|
||||
standalone: true,
|
||||
imports: [CommonModule, ReactiveFormsModule]
|
||||
imports: [CommonModule, ReactiveFormsModule, NavigationBarComponent]
|
||||
})
|
||||
export class MitarbeiterverwaltungViewComponent implements OnInit {
|
||||
employees: Array<EmployeeResponseDTO> = [];
|
||||
|
|
|
|||
|
|
@ -5,18 +5,13 @@
|
|||
</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']" (click)="employees()" [class.active]="route == 'employee'" class="nav-link text-black" aria-current="page">
|
||||
Mitarbeiterverwaltung
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-black">
|
||||
<a [routerLink]="['/qualifikationsverwaltung']" [class.active]="route == 'skill'" class="nav-link text-black">
|
||||
Qualifikationsverwaltung
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-navigation-bar',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [RouterLink],
|
||||
templateUrl: './navigation-bar.component.html',
|
||||
styleUrl: './navigation-bar.component.css'
|
||||
})
|
||||
export class NavigationBarComponent {
|
||||
constructor(private router: Router) { }
|
||||
@Input() route: string = "";
|
||||
|
||||
employees() {
|
||||
this.router.navigate(['mitarbeiter']);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,57 +1,60 @@
|
|||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="dropdown position-absolute top-0 end-0 m-3">
|
||||
<button class="btn align-items-center d-flex" type="button" id="userDropdown" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<img src="user.svg" alt="User Icon" class="rounded-circle" style="width: 30px; height: 30px;">
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
|
||||
<li><a class="dropdown-item" href="/logout">Log out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1>Qualifications</h1>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="row header-actions">
|
||||
<form [formGroup]="searchForm">
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Search employee" formControlName="search">
|
||||
<button (click)="submit()">Search</button>
|
||||
</div>
|
||||
<p class="text-body-tertiary">Search for a propertiy of a Qualification. eg. Name</p>
|
||||
</form>
|
||||
<div class="d-flex">
|
||||
<button (click)="createSkill()" class="add-button me-auto">Add qualification</button>
|
||||
<div class="d-flex flex-row">
|
||||
<app-navigation-bar [route]="'skill'" class="row" style="height: 100vh;"></app-navigation-bar>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="dropdown position-absolute top-0 end-0 m-3">
|
||||
<button class="btn align-items-center d-flex" type="button" id="userDropdown" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<img src="user.svg" alt="User Icon" class="rounded-circle" style="width: 30px; height: 30px;">
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
|
||||
<li><a class="dropdown-item" href="/logout">Log out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1>Qualifications</h1>
|
||||
</div>
|
||||
|
||||
@if (errorDeletingSkill) {
|
||||
<div class="row">
|
||||
<p class="alert alert-danger">This Qualification can not be deleted because it still has employees.</p>
|
||||
<div class="d-flex flex-column">
|
||||
<div class="row header-actions">
|
||||
<form [formGroup]="searchForm">
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Search employee" formControlName="search">
|
||||
<button (click)="submit()">Search</button>
|
||||
</div>
|
||||
<p class="text-body-tertiary">Search for a propertiy of a Qualification. eg. Name</p>
|
||||
</form>
|
||||
<div class="d-flex">
|
||||
<button (click)="createSkill()" class="add-button me-auto">Add qualification</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (errorDeletingSkill) {
|
||||
<div class="row">
|
||||
<p class="alert alert-danger">This Qualification can not be deleted because it still has employees.</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<table class="employee-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><span class="sortable">Name</span></th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (skills) {
|
||||
@for (skill of skills; track skill) {
|
||||
<tr>
|
||||
<td>{{ skill.skill }}</td>
|
||||
<td>
|
||||
<button class="btn btn-primary me-2" (click)="editSkill(skill.id)">Edit</button>
|
||||
<button class="btn btn-danger" (click)="deleteSkill(skill.id)">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<table class="employee-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><span class="sortable">Name</span></th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (skills) {
|
||||
@for (skill of skills; track skill) {
|
||||
<tr>
|
||||
<td>{{ skill.skill }}</td>
|
||||
<td>
|
||||
<button class="btn btn-primary me-2" (click)="editSkill(skill.id)">Edit</button>
|
||||
<button class="btn btn-danger" (click)="deleteSkill(skill.id)">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,12 @@ import { QualificationGetDTO } from '../../models/skill';
|
|||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { SkillService } from '../../service/skill.service';
|
||||
import { Router } from '@angular/router';
|
||||
import { NavigationBarComponent } from '../navigation-bar/navigation-bar.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-qualifikationsverwaltung',
|
||||
standalone: true,
|
||||
imports: [ReactiveFormsModule],
|
||||
imports: [ReactiveFormsModule, NavigationBarComponent],
|
||||
templateUrl: './qualifikationsverwaltung.component.html',
|
||||
styleUrl: './qualifikationsverwaltung.component.css'
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue