Merge pull request #1088 from eclipse-tractusx/chore/#912-add-checkma…

…rk-to-switchers chore(uux): 912 added checkmark to view selector
eclipse-tractusx · Jun 21, 2024 · d1d2ccb · d1d2ccb
2 parents 05ac488 + d0a3530
commit d1d2ccb
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/.../modules/page/admin/presentation/contracts/contract-detail/contract-detail.component.html b/.../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
@@ -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
@@ -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();
   });
 });