68 lines
2.8 KiB
HTML
68 lines
2.8 KiB
HTML
|
<form class="employee-detail" [formGroup]="employeeForm" appearance="outline">
|
||
|
|
<div class="employee-detail__info-view">
|
||
|
|
<div class="employee-detail__info-view__base">
|
||
|
|
<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>
|
||
|
|
<table mat-table [dataSource]="skillsDataSource" class="employee-detail__info-view__skills">
|
||
|
|
<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"> {{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">
|
||
|
|
<mat-icon>delete</mat-icon>
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</ng-container>
|
||
|
|
|
||
|
|
|
||
|
|
<tr mat-header-row *matHeaderRowDef="skillsDisplayedColumns"></tr>
|
||
|
|
<tr mat-row *matRowDef="let row; columns: skillsDisplayedColumns;"></tr>
|
||
|
|
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="employee-detail__action-row">
|
||
|
|
<button mat-flat-button (click)="onAbort()" class="abort">Abort</button>
|
||
|
|
@if (isNewEmployee) {
|
||
|
|
<button mat-flat-button (click)="onCreate()">Create</button>
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
<button mat-flat-button (click)="onSave()">Save</button>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</form>
|