From d0a3530d837388b02b5d3b989385aa2bfc8e8668 Mon Sep 17 00:00:00 2001
From: Martin Maul <martin.maul@doubleslash.de>
Date: Fri, 21 Jun 2024 11:13:02 +0200
Subject: [PATCH] chore(uux): 912 added checkmark to view selector

---
 .../contract-detail/contract-detail.component.html          | 2 +-
 .../components/view-selector/view-selector.component.html   | 3 +++
 .../view-selector/view-selector.component.spec.ts           | 6 +++---
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/modules/page/admin/presentation/contracts/contract-detail/contract-detail.component.html b/frontend/src/app/modules/page/admin/presentation/contracts/contract-detail/contract-detail.component.html
index 7b108ca8dd..32754801f1 100644
--- a/frontend/src/app/modules/page/admin/presentation/contracts/contract-detail/contract-detail.component.html
+++ b/frontend/src/app/modules/page/admin/presentation/contracts/contract-detail/contract-detail.component.html
@@ -24,7 +24,7 @@
                 </mat-card-header>
                 <mat-card-content>
                     <div class="policy--header--container flex justify-between mt-3">
-                        <div class="policy--header--container--selector flex">
+                      <div class="policy--header--container--selector flex mb-4">
                             <app-view-selector
                             (click)="defaultViewIsActivated = true;"
                             onkeydown="defaultViewIsActivated = true;"
diff --git a/frontend/src/app/modules/shared/components/view-selector/view-selector.component.html b/frontend/src/app/modules/shared/components/view-selector/view-selector.component.html
index 205ac265e0..415f708b8d 100644
--- a/frontend/src/app/modules/shared/components/view-selector/view-selector.component.html
+++ b/frontend/src/app/modules/shared/components/view-selector/view-selector.component.html
@@ -20,7 +20,9 @@
   <ng-container [ngTemplateOutlet]="{flat}[this.variant]"></ng-container>
   <ng-template #flat>
     <button [ngClass]="{'selected': isSelected}" [disabled]="isDisabled" [color]="color" mat-flat-button>
+      <div class="flex items-center">
       <ng-container [ngTemplateOutlet]="buttonContent"></ng-container>
+      </div>
     </button>
   </ng-template>
 
@@ -32,5 +34,6 @@
 
   <ng-template #content>
     <ng-content></ng-content>
+    <mat-icon *ngIf="isSelected">check</mat-icon>
   </ng-template>
 </div>
diff --git a/frontend/src/app/modules/shared/components/view-selector/view-selector.component.spec.ts b/frontend/src/app/modules/shared/components/view-selector/view-selector.component.spec.ts
index 78b20be6be..54d7ce0843 100644
--- a/frontend/src/app/modules/shared/components/view-selector/view-selector.component.spec.ts
+++ b/frontend/src/app/modules/shared/components/view-selector/view-selector.component.spec.ts
@@ -49,7 +49,7 @@ describe('AppViewSelector', () => {
       imports: [ SharedModule, TemplateModule ],
     });
 
-    expect(screen.getByText('Test').parentNode).toHaveClass('mat-accent');
+    expect(screen.getByText('Test').parentNode.parentNode).toHaveClass('mat-accent');
   });
 
   it('should render warn button', async () => {
@@ -58,7 +58,7 @@ describe('AppViewSelector', () => {
       imports: [ SharedModule, TemplateModule ],
     });
 
-    expect(screen.getByText('Test').parentNode).toHaveClass('mat-warn');
+    expect(screen.getByText('Test').parentNode.parentNode).toHaveClass('mat-warn');
   });
 
   it('should render enabled button', async () => {
@@ -79,7 +79,7 @@ describe('AppViewSelector', () => {
       imports: [ SharedModule, TemplateModule ],
     });
 
-    const buttonEl = screen.getByText('Test').parentNode;
+    const buttonEl = screen.getByText('Test').parentNode.parentNode;
     expect(buttonEl).toBeDisabled();
   });
 });