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

Feature: Dashboard #19

Merged
SZUT-Rajbir merged 1 commit from feature/dashboard into trunk 2025-01-15 07:46:58 +00:00
Conversation 0 Commits 1 Files changed 3 +141 -16
3 changed files with 141 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 3bffc414ec - Show all commits

66
src/app/views/dashboard/dashboard.component.html
View file

@ -1,4 +1,62 @@
<a mat-flat-button routerLink="/employee/new">New Employee</a>
<a mat-flat-button routerLink="/employee/1">Edit Employee 3</a>
<button mat-flat-button (click)="testInfo()">Test Info</button>
<button mat-flat-button (click)="testError()">Test Error</button>
<div class="dashboard">
@if (auth.$user|async; as user) {
<div class="dashboard__action-row">
<mat-form-field>
<mat-label>Search</mat-label>
<input matInput>
</mat-form-field>
<mat-form-field>
<mat-label>Qualification</mat-label>
<mat-select>
@for (skill of ($qualifications|async); track skill) {
<mat-option [value]="skill">{{skill.skill}}</mat-option>
}
</mat-select>
</mat-form-field>
<button mat-fab class="shadowless" routerLink="employee/new">
<mat-icon>add</mat-icon>
</button>
</div>
<mat-table [dataSource]="employeeDataSource" class="dashboard__employees">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>Id</th>
<td mat-cell *matCellDef="let employee">{{ employee.id }}</td>
</ng-container>
<ng-container matColumnDef="first-name">
<th mat-header-cell *matHeaderCellDef>First Name</th>
<td mat-cell *matCellDef="let employee">{{ employee.firstName }}</td>
</ng-container>
<ng-container matColumnDef="last-name">
<th mat-header-cell *matHeaderCellDef>Last Name</th>
<td mat-cell *matCellDef="let employee">{{ employee.lastName }}</td>
</ng-container>
<ng-container matColumnDef="skills">
<th mat-header-cell *matHeaderCellDef>Skills</th>
<td mat-cell *matCellDef="let employee">
<ul>
@for (skill of employee.skillSet; track skill) {
<li>{{ skill.skill }}</li>
}
</ul>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let employee">
<button mat-mini-fab class="shadowless" routerLink="employee/{{employee.id}}">
<mat-icon>edit</mat-icon>
</button>
<button mat-mini-fab class="shadowless warn">
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="employeesDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: employeesDisplayedColumns;"></tr>
</mat-table>
} @else {
<p>Log in to see more!</p>
}
</div>

49
src/app/views/dashboard/dashboard.component.scss
View file

@ -0,0 +1,49 @@
.dashboard {
display: flex;
flex-direction: column;
gap: 1rem;
&__action-row {
display: flex;
gap: 1rem;
:first-child {
flex-grow: 1;
}
}
&__employees {
width: 100%;
tr {
display: flex;
width: 100%;
.mat-column-id{
width: 4rem;
}
.mat-column-first-name, .mat-column-last-name, .mat-column-skills {
width: 0;
flex-grow: 1;
}
ul{
margin: 0;
}
th.mat-column-actions{
width: calc(40px * 2 + 1rem);
}
td.mat-column-actions{
gap: 1rem;
display: flex;
padding: 0;
padding-top: 0.25rem;
align-items: start;
}
}
}
}

42
src/app/views/dashboard/dashboard.component.ts
View file

@ -1,20 +1,38 @@
import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { RouterLink } from '@angular/router';
import { NotificationService, NotificationType } from '@core/notification/notification.service';
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {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 {RouterLink} from '@angular/router';
import {AuthService} from '@core/auth/auth.service';
import {Employee, EmployeeService, Qualification, QualificationService} from '@core/ems';
import {Observable} from 'rxjs';
@Component({
selector: 'app-dashboard',
imports: [MatButtonModule, RouterLink],
imports: [MatButtonModule, MatSelectModule, MatFormFieldModule, MatTableModule, ReactiveFormsModule, MatInputModule, MatIcon, RouterLink, AsyncPipe],
templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.scss'
})
export class DashboardComponent {
constructor(private notifications: NotificationService) { }
testInfo() {
this.notifications.publish('Cake', NotificationType.Information);
}
testError() {
this.notifications.publish('Cake', NotificationType.Error);
}}
employeeDataSource: MatTableDataSource<Employee> = new MatTableDataSource<Employee>([]);
employeesDisplayedColumns = ['id', 'first-name', 'last-name', 'skills', 'actions'];
$qualifications: Observable<Array<Qualification> | undefined>;
constructor(
protected auth: AuthService,
private employeeService: EmployeeService,
private qualificationService: QualificationService
) {
this.$qualifications= this.qualificationService.getAllQualifications();
this.employeeService.getAllEmployees().subscribe((employees) => {
this.employeeDataSource = new MatTableDataSource(employees);
});
}
}