close history modal on link click

zonemaster · Feb 27, 2024 · 0097a21 · 0097a21
1 parent a25359c
commit 0097a21
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/src/app/components/history/history.component.html b/src/app/components/history/history.component.html
@@ -24,7 +24,7 @@
 
   <ul *ngIf="filteredHistory.length > 0;else noHistory" class="list-group mb-3">
     <li *ngFor="let item of historyItems" class="list-group-item list-group-item-action list-group-item-{{item.color}} d-flex justify-content-between">
-      <a routerLink="/result/{{item.id}}">
+      <a routerLink="/result/{{item.id}}" (click)="onTestClicked.emit(item.id)">
         {{ item.local_creation_time | date:'yyyy-MM-dd HH:mm zzzz' }}
       </a>
       <small i18n="history info|singular undelegated" *ngIf="item.undelegated" class="text-muted">Undelegated</small>

diff --git a/src/app/components/history/history.component.ts b/src/app/components/history/history.component.ts
@@ -13,6 +13,7 @@ import {AlertService} from '../../services/alert.service';
 export class HistoryComponent implements OnInit {
 
   @Input() history: any[];
+  @Output() onTestClicked: EventEmitter<any> = new EventEmitter();
 
   public page = 1;
   public pageSize = 10;

diff --git a/src/app/components/result/result.component.html b/src/app/components/result/result.component.html
@@ -5,12 +5,12 @@ <h2 i18n="result subheader">Test another domain</h2>
   </app-run-test>
 </app-header>
 
-<section class="result">
+<section class="result" tabindex="-1" aria-labelledby="result-heading result-creation-time" #resultSection>
   <div>
     <div>
-      <h2><ng-container i18n="result subheader">Test result for</ng-container>&nbsp;<strong>{{ form.domain }}</strong></h2>
+      <h2 id="result-heading"><ng-container i18n="result subheader">Test result for</ng-container>&nbsp;<strong>{{ form.domain }}</strong></h2>
       <div class="result-metadata">
-        <p class="result-test-datetime"><ng-container i18n="result test metadata">Created on</ng-container>&nbsp;<time [dateTime]="test.creation_time ? test.creation_time.toISOString() : ''">{{ test.creation_time | date:'medium' }}</time></p>
+        <p id="result-creation-time" class="result-test-datetime"><ng-container i18n="result test metadata">Created on</ng-container>&nbsp;<time [dateTime]="test.creation_time ? test.creation_time.toISOString() : ''">{{ test.creation_time | date:'medium' }}</time></p>
 
         <div class="actions-btn">
           <div>
@@ -225,6 +225,6 @@ <h4 class="modal-title" i18n="result history modal">History</h4>
     <button type="button" class="btn-close" i18n-aria-label="result history modal" aria-label="Close" i18n-title="result history modal" title="Close" (click)="d('Cross click')"></button>
   </header>
   <div class="modal-body">
-    <app-history [history]="history"></app-history>
+    <app-history [history]="history" (onTestClicked)="c($event)"></app-history>
   </div>
 </ng-template>
diff --git a/src/app/components/result/result.component.ts b/src/app/components/result/result.component.ts
@@ -21,6 +21,7 @@ export class ResultComponent implements OnInit, OnDestroy {
   @Input('testId') testId: string;
   @ViewChild('resultView', {static: false}) resultView: ElementRef;
   @ViewChild('historyModal', {static: false}) historyModal: ElementRef;
+  @ViewChild('resultSection', {static: false}) resultSection: ElementRef;
 
   public displayForm = false;
   public form = {ipv4: true, ipv6: true, profile: 'default_profile', domain: ''};
@@ -105,7 +106,10 @@ export class ResultComponent implements OnInit, OnDestroy {
 
   public openModal(content) {
     this.modalService.open(content).result.then((result) => {
-      console.log(result)
+      console.log(result);
+      // NOTE: this is a hack, I don't like it.
+      // angular-bootstrap move the focus back to the history button, we move it to the result section at next tick
+      window.setTimeout(() => this.resultSection.nativeElement.focus(), 0);
     }, (reason) => {
       console.log(reason);
     });