SZUT/EMS
5
0
Fork 0
Code Issues 1 Pull requests Projects 1 Activity Actions

WIP
All checks were successful
Quality Check / Linting (push) Successful in 21s
Details

Browse source
This commit is contained in:
Dominik Säume 2025-01-09 10:44:02 +01:00
parent d2225ad6b0
commit 0a78aeece3
4 changed files with 256 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/app/app.routes.ts
View file

@ -1,4 +1,10 @@
import {Routes} from '@angular/router';
import {DashboardComponent} from '@app/views/dashboard/dashboard.component';
import { Routes } from '@angular/router';
import { DashboardComponent } from '@app/views/dashboard/dashboard.component';
export const routes: Routes = [{path: '', component: DashboardComponent, title: 'Home'}];
import { EmployeeDetailComponent } from './views/employee-detail/employee-detail.component';
export const routes: Routes = [
{ path: '', component: DashboardComponent, title: 'Home' },
{ path: 'employee/new', component: EmployeeDetailComponent, title: 'New Employee' },
{ path: 'employee/:id', component: EmployeeDetailComponent, title: 'Edit Employee' }
];

82
src/app/views/employee-detail/employee-detail.component.html Normal file
View file

@ -0,0 +1,82 @@
<form class="employee-detail" [formGroup]="employeeForm" appearance="outline">
<div class="employee-detail__info-view">
<div class="employee-detail__info-view__base">
<h2>Info</h2>
<mat-form-field>
<mat-label>First Name</mat-label>
<input matInput formControlName="firstName">
</mat-form-field>
<mat-form-field>
<mat-label>Last Name</mat-label>
<input matInput formControlName="lastName">
</mat-form-field>
<mat-form-field>
<mat-label>Postcode</mat-label>
<mat-icon matSuffix>money</mat-icon>
<input matInput formControlName="postcode">
</mat-form-field>
<mat-form-field>
<mat-label>City</mat-label>
<mat-icon matSuffix>location_city</mat-icon>
<input matInput formControlName="city">
</mat-form-field>
<mat-form-field>
<mat-label>Street</mat-label>
<mat-icon matSuffix>house</mat-icon>
<input matInput formControlName="street">
</mat-form-field>
<mat-form-field>
<mat-label>Phone</mat-label>
<mat-icon matSuffix>phone</mat-icon>
<input matInput formControlName="phone">
</mat-form-field>
</div>
<div class="employee-detail__info-view__skills">
<h2>Skills</h2>
<div class="employee-detail__info-view__skills__action-row">
<mat-form-field>
<mat-label>Skill</mat-label>
<mat-select [disabled]="!($unusedSkills | async)?.length">
@for (skill of ($unusedSkills|async); track skill) {
<mat-option [value]="skill.skill">{{skill.skill}}</mat-option>
}
</mat-select>
</mat-form-field>
<button mat-fab class="shadowless">
<mat-icon>add</mat-icon>
</button>
</div>
<mat-table [dataSource]="skillsDataSource">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>Id</th>
<td mat-cell *matCellDef="let skill">{{skill.id}}</td>
</ng-container>
<ng-container matColumnDef="skill">
<th mat-header-cell *matHeaderCellDef>Skill</th>
<td mat-cell *matCellDef="let skill">
<p>{{skill.skill}}
</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<button mat-mini-fab class="warn shadowless">
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: skillsDisplayedColumns;"></tr>
</mat-table>
</div>
</div>
<div class="employee-detail__action-row">
<a mat-flat-button class="abort" routerLink="/">Abort</a>
@if (isNewEmployee) {
<button mat-flat-button (click)="onCreate()">Create</button>
}
@else {
<button mat-flat-button (click)="onSave()">Save</button>
}
</div>
</form>

82
src/app/views/employee-detail/employee-detail.component.scss Normal file
View file

@ -0,0 +1,82 @@
@use '@angular/material' as mat;
.employee-detail {
display: flex;
flex-direction: column;
gap: 1rem;
&__info-view {
display: flex;
gap: 2rem;
>* {
min-width: 0;
flex-basis: 0;
flex-grow: 1;
}
&__base {
display: flex;
flex-direction: column;
input {
font-size: var(--mat-sys-body-large-size);
}
}
&__skills {
height: fit-content;
width: 100%;
&__action-row {
display: flex;
gap: 1rem;
mat-form-field:first-of-type {
flex-grow: 1;
}
}
p {
font-size: var(--mat-sys-body-large-size);
margin: 0;
}
tr {
height: 76px;
td.mat-column-skill {
width: 100%;
padding-top: 28px;
padding-bottom: 28px;
}
td.mat-column-action {
width: 0;
vertical-align: middle;
padding-left: 24px;
padding-right: 8px;
}
&:first-of-type {
height: 66px;
td.mat-column-skill {
padding-top: 0;
padding-bottom: 0;
}
td.mat-column-action {
padding-top: 10px;
vertical-align: unset;
}
}
}
}
}
&__action-row {
display: flex;
justify-content: space-between;
}
}

83
src/app/views/employee-detail/employee-detail.component.ts Normal file
View file

@ -0,0 +1,83 @@
import { AsyncPipe } from '@angular/common';
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIcon } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { Employee, EmployeeService, Qualification, QualificationService } from '@core/ems';
import { map, Observable } from 'rxjs';
@Component({
selector: 'app-employee-detail',
imports: [
AsyncPipe,
MatIcon,
RouterLink,
MatButtonModule,
MatInputModule,
MatSelectModule,
MatTableModule,
MatFormFieldModule,
ReactiveFormsModule,
],
templateUrl: './employee-detail.component.html',
styleUrl: './employee-detail.component.scss'
})
export class EmployeeDetailComponent {
isNewEmployee: boolean;
employeeForm: FormGroup;
skillsDataSource: MatTableDataSource<Qualification> = new MatTableDataSource<Qualification>([]);
skillsDisplayedColumns = ['skill', 'action'];
$unusedSkills: Observable<Array<Qualification> | undefined>;
constructor(
private route: ActivatedRoute,
private employeeService: EmployeeService,
private qualificationService: QualificationService,
private formBuilder: FormBuilder
) {
const idParam = this.route.snapshot.paramMap.get('id');
this.isNewEmployee = idParam == null;
this.employeeForm = this.formBuilder.group<Employee>({
id: 0,
firstName: '',
lastName: '',
postcode: '',
city: '',
street: '',
phone: '',
skillSet: []
});
this.$unusedSkills = this.qualificationService.getAllQualifications();
if (this.isNewEmployee) {
return;
}
const id = parseInt(idParam as string);
this.employeeService.getEmployee({ id }).subscribe((employee) => {
this.employeeForm = this.formBuilder.group<Employee>(employee);
this.skillsDataSource = new MatTableDataSource<Qualification>(employee.skillSet);
this.$unusedSkills = this.qualificationService.getAllQualifications().pipe(
map((allSkills: Array<Qualification>) => {
const usedSkillIds = new Set(employee.skillSet.map(skill => skill.id));
return allSkills?.filter(skill => !usedSkillIds.has(skill.id));
})
);
});
}
onCreate() {
}
onSave() {
}
}