Feature: Dashboard - layout, style

src/app/views/dashboard/dashboard.component.html

@@ -1,4 +1,61 @@
-<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>
+                    <mat-option>Angular</mat-option>
+                    <mat-option>Java</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>

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;
+      }
+
+    }
+  }
+}

src/app/views/dashboard/dashboard.component.ts

@@ -1,20 +1,44 @@
+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} from '@core/ems';
 import {NotificationService, NotificationType} from '@core/notification/notification.service';
 
 @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) { }
+
+    employeeDataSource: MatTableDataSource<Employee> = new MatTableDataSource<Employee>([]);
+    employeesDisplayedColumns = ['id', 'first-name', 'last-name', 'skills', 'actions'];
+
+    constructor(
+        private notifications: NotificationService,
+        protected auth: AuthService,
+        private employeeService: EmployeeService
+    ) {
+        this.employeeService.getAllEmployees().subscribe((employees) => {
+            this.employeeDataSource = new MatTableDataSource(employees);
+
+        });
+    }
+
     testInfo() {
         this.notifications.publish('Cake', NotificationType.Information);
     }
 
     testError() {
         this.notifications.publish('Cake', NotificationType.Error);
-    }}
+    }
+}