From 3380e17caf8c9e7ba698e71beff2c0bf0e661115 Mon Sep 17 00:00:00 2001
From: Maximilian Krug <krugm03@gmail.com>
Date: Mon, 1 Jul 2024 18:32:23 +0200
Subject: [PATCH] feat: added the home button in the header component and
 adjusted the routing

Signed-off-by: Maximilian Krug <krugm03@gmail.com>
#206
---
 apps/frontend/src/app/app.routes.ts           |   4 +
 .../components/header/header.component.html   |   1 +
 .../case-browse/case-browse.component.html    | 108 +++++++++---------
 3 files changed, 62 insertions(+), 51 deletions(-)

diff --git a/apps/frontend/src/app/app.routes.ts b/apps/frontend/src/app/app.routes.ts
index ea37f2a4..2ebba065 100644
--- a/apps/frontend/src/app/app.routes.ts
+++ b/apps/frontend/src/app/app.routes.ts
@@ -20,6 +20,10 @@ export const APP_ROUTES: Route[] = [
 				loadComponent: () =>
 					import('./pages/home/home.component').then((m) => m.HomeComponent),
 			},
+            {
+                path: 'home',
+                redirectTo: '',
+            },
 			{
 				path: 'facilities',
 				data: {
diff --git a/apps/frontend/src/app/components/header/header.component.html b/apps/frontend/src/app/components/header/header.component.html
index 92bf7918..138c30a1 100644
--- a/apps/frontend/src/app/components/header/header.component.html
+++ b/apps/frontend/src/app/components/header/header.component.html
@@ -31,6 +31,7 @@
 	></ix-content-header>
 
 	<ix-menu>
+        <ix-menu-item icon="home" [routerLink]="['/']">Home</ix-menu-item>
 		<ix-menu-item icon="building1" [routerLink]="['/facilities']">Facilities</ix-menu-item>
 		<ix-menu-item icon="tasks-open" [routerLink]="['/cases']">Cases</ix-menu-item>
 
diff --git a/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.html b/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.html
index c92170b2..10463b87 100644
--- a/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.html
+++ b/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.html
@@ -1,29 +1,30 @@
 <div class="absolute top-20 right-4 !z-[50] flex flex-row-reverse gap-x-4">
-	<ix-button [routerLink]="['/cases/create']" icon="plus"> Create Case </ix-button>
+    <ix-button [routerLink]="['/cases/create']" icon="plus"> Create Case</ix-button>
 </div>
 
-<ix-content>
-	<div class="flex flex-col gap-y-2 pb-2">
-		<div class="flex gap-x-2">
-            <ix-toggle-button  ghost class="toggle-pill" (pressedChange)="flipShowStatusOpen()"
-                               [pressed]="showStatusOpen()" [variant]="showStatusOpen() ? 'Primary' : 'Secondary'"
+<ix-content class="pb-16">
+    <div class="flex flex-col gap-y-2 pb-2">
+        <div class="flex gap-x-2">
+            <ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowStatusOpen()"
+                              [pressed]="showStatusOpen()" [variant]="showStatusOpen() ? 'Primary' : 'Secondary'"
             >
                 open
             </ix-toggle-button>
-            <ix-toggle-button  ghost class="toggle-pill" (pressedChange)="flipShowStatusInProgress()"
-                               [pressed]="showStatusInProgress()" [variant]="showStatusInProgress() ? 'Primary' : 'Secondary'"
+            <ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowStatusInProgress()"
+                              [pressed]="showStatusInProgress()"
+                              [variant]="showStatusInProgress() ? 'Primary' : 'Secondary'"
             >
-				in progress
+                in progress
             </ix-toggle-button>
-            <ix-toggle-button  ghost class="toggle-pill" (pressedChange)="flipShowStatusOnHold()"
-                               [pressed]="showStatusOnHold()" [variant]="showStatusOnHold() ? 'Primary' : 'Secondary'"
+            <ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowStatusOnHold()"
+                              [pressed]="showStatusOnHold()" [variant]="showStatusOnHold() ? 'Primary' : 'Secondary'"
             >
-				on hold
-			</ix-toggle-button>
-            <ix-toggle-button  ghost class="toggle-pill" (pressedChange)="flipShowStatusDone()"
-                               [pressed]="showStatusDone()" [variant]="showStatusDone() ? 'Primary' : 'Secondary'"
+                on hold
+            </ix-toggle-button>
+            <ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowStatusDone()"
+                              [pressed]="showStatusDone()" [variant]="showStatusDone() ? 'Primary' : 'Secondary'"
             >
-				done
+                done
             </ix-toggle-button>
             <ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowStatusOverdue()"
                               [pressed]="showStatusOverdue()" [variant]="showStatusOverdue() ? 'Primary' : 'Secondary'"
@@ -31,20 +32,23 @@
                 overdue
             </ix-toggle-button>
             <ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowStatusCancelled()"
-                              [pressed]="showStatusCancelled()" [variant]="showStatusCancelled() ? 'Primary' : 'Secondary'"
+                              [pressed]="showStatusCancelled()"
+                              [variant]="showStatusCancelled() ? 'Primary' : 'Secondary'"
             >
                 cancelled
             </ix-toggle-button>
             <ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowStatusArchived()"
-                              [pressed]="showStatusArchived()" [variant]="showStatusArchived() ? 'Primary' : 'Secondary'"
+                              [pressed]="showStatusArchived()"
+                              [variant]="showStatusArchived() ? 'Primary' : 'Secondary'"
             >
                 archived
             </ix-toggle-button>
-		</div>
+        </div>
 
         <div class="flex gap-x-2">
             <ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowPriorityEmergency()"
-                              [pressed]="showPriorityEmergency()" [variant]="showPriorityEmergency() ? 'Primary' : 'Secondary'"
+                              [pressed]="showPriorityEmergency()"
+                              [variant]="showPriorityEmergency() ? 'Primary' : 'Secondary'"
             >
                 emergencies
             </ix-toggle-button>
@@ -54,7 +58,8 @@
                 high
             </ix-toggle-button>
             <ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowPriorityMedium()"
-                              [pressed]="showPriorityMedium()" [variant]="showPriorityMedium() ? 'Primary' : 'Secondary'"
+                              [pressed]="showPriorityMedium()"
+                              [variant]="showPriorityMedium() ? 'Primary' : 'Secondary'"
             >
                 medium
             </ix-toggle-button>
@@ -77,41 +82,42 @@
                 incident
             </ix-toggle-button>
             <ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowTypeAnnotation()"
-                              [pressed]="showTypeAnnotation()" [variant]="showTypeAnnotation() ? 'Primary' : 'Secondary'"
+                              [pressed]="showTypeAnnotation()"
+                              [variant]="showTypeAnnotation() ? 'Primary' : 'Secondary'"
             >
                 annotation
             </ix-toggle-button>
         </div>
-	</div>
+    </div>
 
-	<table class="table">
-		<thead>
-			<tr>
-				<th scope="col">#</th>
-				<th scope="col">Title</th>
-                <th scope="col">Status</th>
-				<th scope="col">Priority</th>
-                <th scope="col">Type</th>
-				<th scope="col">Due to</th>
-				<th scope="col">Description</th>
-			</tr>
-		</thead>
-		<tbody>
-			@for (_case of _sortedCases(); track _case.id) {
-				<tr
-					[routerLink]="['/cases', _case.id]"
-					class="clickable-row"
-					[ngClass]="getStatusClasses(_case)"
-				>
-					<th scope="row">{{ _case.handle }}</th>
-					<td>{{ _case.title }}</td>
+    <table class="table">
+        <thead>
+        <tr>
+            <th scope="col">#</th>
+            <th scope="col">Title</th>
+            <th scope="col">Status</th>
+            <th scope="col">Priority</th>
+            <th scope="col">Type</th>
+            <th scope="col">Due to</th>
+            <th scope="col">Description</th>
+        </tr>
+        </thead>
+        <tbody>
+            @for (_case of _sortedCases(); track _case.id) {
+                <tr
+                    [routerLink]="['/cases', _case.id]"
+                    class="clickable-row"
+                    [ngClass]="getStatusClasses(_case)"
+                >
+                    <th scope="row">{{ _case.handle }}</th>
+                    <td>{{ _case.title }}</td>
                     <td>{{ _case.status }}</td>
-					<td>{{ _case.priority }}</td>
+                    <td>{{ _case.priority }}</td>
                     <td>{{ _case.type }}</td>
-					<td>{{ _case.dueDate }}</td>
-					<td>{{ _case.description }}</td>
-				</tr>
-			}
-		</tbody>
-	</table>
+                    <td>{{ _case.dueDate }}</td>
+                    <td>{{ _case.description }}</td>
+                </tr>
+            }
+        </tbody>
+    </table>
 </ix-content>