Enhance employee and qualification forms with hints and improved layouts (#37)

- Added hints to input fields in create and edit employee forms for better user guidance.
- Updated the layout of dialog actions in employee and qualification forms for improved usability.
- Enhanced delete confirmation dialogs for qualifications and employees with better styling and error handling.
- Improved the display of employee details and qualifications with better formatting and structure.

These changes aim to improve user experience and accessibility across the application.

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

src/app/employee/edit/edit.component.html

@@ -6,34 +6,40 @@
         <mat-form-field class="!w-full">
           <mat-label>First Name</mat-label>
           <input matInput formControlName="firstName" required>
+          <mat-hint>Enter the first name</mat-hint>
         </mat-form-field>
 
         <mat-form-field class="!w-full">
           <mat-label>Last Name</mat-label>
           <input matInput formControlName="lastName" required>
+          <mat-hint>Enter the last name</mat-hint>
         </mat-form-field>
       </div>
 
       <mat-form-field class="!w-full">
         <mat-label>Street</mat-label>
         <input matInput formControlName="street" required>
+        <mat-hint>Enter the street address</mat-hint>
       </mat-form-field>
 
       <div class="flex gap-x-4">
         <mat-form-field class="!w-full">
           <mat-label>City</mat-label>
           <input matInput formControlName="city" required>
+          <mat-hint>Enter the city</mat-hint>
         </mat-form-field>
 
         <mat-form-field class="!w-1/2">
           <mat-label>Postcode</mat-label>
           <input matInput formControlName="postcode" minlength="5" maxlength="5" type="number" required>
+          <mat-hint>Enter postcode</mat-hint>
         </mat-form-field>
       </div>
 
       <mat-form-field class="!w-full">
         <mat-label>Phone</mat-label>
         <input matInput formControlName="phone" required>
+        <mat-hint>Enter phone number</mat-hint>
       </mat-form-field>
 
       <mat-form-field class="!w-full">
@@ -43,11 +49,21 @@
             {{qualification.skill}}
           </mat-option>
         </mat-select>
+        <mat-hint>Select qualifications</mat-hint>
       </mat-form-field>
 
-      <mat-dialog-actions align="end">
-        <button mat-button mat-dialog-close>Cancel</button>
-        <button mat-flat-button color="primary" type="submit">Submit</button>
+      <mat-dialog-actions align="end" class="!px-0 !mb-0 flex flex-col sm:flex-row w-full gap-3">
+        <button mat-button 
+                mat-dialog-close
+                class="text-sm md:text-base hover:bg-gray-100 py-2 px-6 rounded-md w-full sm:flex-1">
+          Cancel
+        </button>
+        <button mat-flat-button 
+                color="primary" 
+                type="submit"
+                class="!ml-0 text-sm md:text-base py-2 px-6 rounded-md w-full sm:flex-1">
+          Submit
+        </button>
       </mat-dialog-actions>
     </div>
   </form>

src/app/employee/edit/edit.component.ts

@@ -9,7 +9,7 @@ import {
   MatDialogTitle
 } from "@angular/material/dialog";
 import {NgForOf, NgIf} from "@angular/common";
-import {MatFormField} from "@angular/material/form-field";
+import {MatFormField, MatHint} from "@angular/material/form-field";
 import {MatInput, MatLabel} from "@angular/material/input";
 import {MatButton} from "@angular/material/button";
 import {Employee} from "../Employee";
@@ -33,7 +33,8 @@ import {MatOption, MatSelect} from "@angular/material/select";
     MatLabel,
     MatSelect,
     MatOption,
-    NgForOf
+    NgForOf,
+    MatHint
   ],
   templateUrl: './edit.component.html',
   standalone: true,