From 3bffc414ecc08a24c302331409aeb205bebb4a36 Mon Sep 17 00:00:00 2001
From: Rajbir Singh <rajbir.singh@hmmh.de>
Date: Tue, 14 Jan 2025 11:45:13 +0100
Subject: [PATCH] Feature: Dashboard - layout, style

---
 .../views/dashboard/dashboard.component.html  | 66 +++++++++++++++++--
 .../views/dashboard/dashboard.component.scss  | 49 ++++++++++++++
 .../views/dashboard/dashboard.component.ts    | 42 ++++++++----
 3 files changed, 141 insertions(+), 16 deletions(-)

diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index cbd75c0..f2a8445 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -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>
diff --git a/src/app/views/dashboard/dashboard.component.scss b/src/app/views/dashboard/dashboard.component.scss
index e69de29..2fefe01 100644
--- a/src/app/views/dashboard/dashboard.component.scss
+++ b/src/app/views/dashboard/dashboard.component.scss
@@ -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;
+      }
+
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index a021d25..98b8a57 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -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);
+
+        });
+    }
+}