refactor: remove unused styleUrl properties from components

Reviewed-on: http://git.simonis.lol/angular/ems-frontend/pulls/47
Co-authored-by: Jan-Marlon Leibl <jleibl@proton.me>
Co-committed-by: Jan-Marlon Leibl <jleibl@proton.me>

src/app/app.component.html

@@ -1,10 +1,4 @@
 <main class="container mx-auto px-4 py-8 max-w-6xl">
-  <div class="flex justify-between items-center mb-8">
+  <h1 class="text-3xl font-bold text-gray-900 mb-8">{{ title }}</h1>
-    <h1 class="text-3xl font-extrabold text-gray-900">{{ title }}</h1>
-    <button mat-flat-button class="!bg-red-600 !text-white" (click)="logout()">
-      <mat-icon>logout</mat-icon>
-      <span class="ml-1">Logout</span>
-    </button>
-  </div>
   <router-outlet></router-outlet>
 </main>

src/app/app.component.ts

@@ -1,22 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
-import { AuthService } from './services/auth.service';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-root',
-  imports: [CommonModule, RouterOutlet, MatButtonModule, MatIconModule],
+  imports: [CommonModule, RouterOutlet],
   templateUrl: './app.component.html',
   standalone: true,
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
   title = 'Employee Management System';
-
-  constructor(private authService: AuthService) {}
-
-  logout(): void {
-    this.authService.logout();
-  }
 }

src/app/employee/table/table.component.html

@@ -40,34 +40,7 @@
           </button>
         </div>
 
-        @if (!employees || employees.length === 0) {
+        @if (employees) {
-          <div class="!bg-gray-50 !rounded-lg !p-8">
-            <div class="!text-center !max-w-sm !mx-auto">
-              <div
-                class="!bg-blue-100 !rounded-full !w-16 !h-16 !flex !items-center !justify-center !mx-auto !mb-4"
-              >
-                <mat-icon class="!text-blue-600 !w-8 !h-8 !text-3xl"
-                  >people</mat-icon
-                >
-              </div>
-              <h3 class="!text-gray-900 !font-medium !text-lg !mb-2">
-                No employees found
-              </h3>
-              <p class="!text-gray-600 !mb-6">
-                Get started by adding your first employee to the directory.
-              </p>
-              <button
-                mat-flat-button
-                color="primary"
-                class="!bg-blue-600 !text-white"
-                (click)="showCreateEmployeeModal()"
-              >
-                <mat-icon class="!mr-2">add</mat-icon>
-                Add Employee
-              </button>
-            </div>
-          </div>
-        } @else {
           <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
             <table mat-table [dataSource]="employees" matSort class="!w-full">
               <ng-container matColumnDef="name">
@@ -139,6 +112,13 @@
               <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
             </table>
           </div>
+        } @else {
+          <mat-card class="!text-center !py-8">
+            <mat-card-content>
+              <mat-icon class="!w-8 !h-8 !text-gray-400 !mb-4">people</mat-icon>
+              <p class="!text-gray-600">No employees found</p>
+            </mat-card-content>
+          </mat-card>
         }
       </div>
     }

src/app/qualification/table/table.component.html

@@ -40,34 +40,7 @@
           </button>
         </div>
 
-        @if (!qualifications || qualifications.length === 0) {
+        @if (qualifications) {
-          <div class="!bg-gray-50 !rounded-lg !p-8">
-            <div class="!text-center !max-w-sm !mx-auto">
-              <div
-                class="!bg-blue-100 !rounded-full !w-16 !h-16 !flex !items-center !justify-center !mx-auto !mb-4"
-              >
-                <mat-icon class="!text-blue-600 !w-8 !h-8 !text-3xl"
-                  >school</mat-icon
-                >
-              </div>
-              <h3 class="!text-gray-900 !font-medium !text-lg !mb-2">
-                No qualifications found
-              </h3>
-              <p class="!text-gray-600 !mb-6">
-                Get started by adding your first qualification to the directory.
-              </p>
-              <button
-                mat-flat-button
-                color="primary"
-                class="!bg-blue-600 !text-white"
-                (click)="openCreateModal()"
-              >
-                <mat-icon class="!mr-2">add</mat-icon>
-                Add Qualification
-              </button>
-            </div>
-          </div>
-        } @else {
           <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
             <table
               mat-table
@@ -146,6 +119,13 @@
               <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
             </table>
           </div>
+        } @else {
+          <mat-card class="!text-center !py-8">
+            <mat-card-content>
+              <mat-icon class="!w-8 !h-8 !text-gray-400 !mb-4">school</mat-icon>
+              <p class="!text-gray-600">No qualifications found</p>
+            </mat-card-content>
+          </mat-card>
         }
       </div>
     }

src/app/services/auth.service.ts

@@ -16,8 +16,4 @@ export class AuthService {
 
     return false;
   }
-
-  public logout(): void {
-    this.keycloakService.logout();
-  }
 }

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Employee Management System</title>
+    <title>Lf10StarterNew</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />