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