CSC: nav with modal event

my-workspace/projects/sae-lib/alert-box/alert-box.html

@@ -1,16 +1,18 @@
 <div class="alert is-{{alertKind}}">
-  @if (alertKind == "warning") {
+  <div class="icon">
-    <i class="ri-triangle-line"></i>
-  }
-  @if (alertKind == "danger") {
-    <i class="ri-triangle-line"></i>
-  }
-  @if (alertKind == "error") {
-    <i class="ri-triangle-line"></i>
-  }
-  <slot [innerHTML]="message " name="main">
 
+    @if (alertKind == "warning") {
+      <i class="ri-triangle-line"></i>
+    }
+    @if (alertKind == "danger") {
+      <i class="ri-triangle-line"></i>
+    }
+    @if (alertKind == "error") {
+      <i class="ri-triangle-line"></i>
+    }
+  </div>
+  <slot [innerHTML]="message " name="main">
+    <ng-content></ng-content>
   </slot>
   <div (click)="onCloseClicked()" class="close-button button">x</div>
-  <ng-content></ng-content>
 </div>

my-workspace/projects/sae-lib/alert-box/alert-box.scss

@@ -1,6 +1,12 @@
 @use '../src/styles/variables';
 
 :host {
+  .alert {
+    display: flex;
+    align-content: center;
+    justify-items: center;
+  }
+
   i {
     margin-right: 16px;
   }

my-workspace/projects/sae-lib/modal/confirm/confirm.html

@@ -22,12 +22,18 @@
       </div>
       <div class="actions">
 
-        <ng-content (click)="confirm()" select="modal-confirm">
+        <div (click)="confirm()" class="confirm">
-          <sae-m-button [kind]="'ghost'">Yes</sae-m-button>
+
-        </ng-content>
+          <ng-content select="modal-confirm">
-        <ng-content (click)="reject()" select="modal-reject">
+            <sae-m-button [kind]="'ghost'">Yes</sae-m-button>
-          <sae-m-button [kind]="'primary'">No, i stay</sae-m-button>
+          </ng-content>
-        </ng-content>
+        </div>
+        <div (click)="reject()" class="reject">
+
+          <ng-content select="modal-reject">
+            <sae-m-button [kind]="'primary'">No, i stay</sae-m-button>
+          </ng-content>
+        </div>
       </div>
     </div>
   </div>

my-workspace/projects/sae-lib/modal/confirm/confirm.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {MainButton} from '../../buttons/main-button/main-button';
 import {AlertBox} from '../../alert-box/alert-box';
 
@@ -14,12 +14,16 @@ import {AlertBox} from '../../alert-box/alert-box';
 export class Confirm {
 
   @Input() showWhen: any = false;
+  @Output() onConfirmation: EventEmitter<any> = new EventEmitter();
+  @Output() onRejection: EventEmitter<any> = new EventEmitter();
 
   confirm() {
-
+    console.log('confirm button clicked')
+    this.onConfirmation.emit('confirmed');
   }
 
   reject() {
-
+    console.log('reject button clicked')
+    this.onRejection.emit('rejected');
   }
 }

sae-csc/src/app/pages/similar-cases/similar-cases.html

@@ -140,13 +140,18 @@
   <footer>
     <app-bottom-navigation [hideNextStepButton]="true"></app-bottom-navigation>
   </footer>
-  <sae-confirm [showWhen]="displayConfirmModal">
+  @if (displayConfirmModal) {
+
+    <sae-confirm (onConfirmation)="onConfirmModal()"
+                 (onRejection)="onRejectModal()"
+                 [showWhen]="displayConfirmModal"
+    >
       <span ngProjectAs="modal-title">
         Search for new question
       </span>
-    <span ngProjectAs="modal-main">
+      <span ngProjectAs="modal-main">
         Cela réinitialisera les filtres de sélection
       </span>
-
+    </sae-confirm>
-  </sae-confirm>
+  }
 </div>

sae-csc/src/app/pages/similar-cases/similar-cases.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {BotTalks} from 'sae-lib/chatbot/bot-talks/bot-talks';
 import {CaseResult} from './case-result/case-result';
 import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom-navigation';
@@ -8,6 +8,7 @@ import {NgClass} from '@angular/common';
 import {FiltersGroup} from 'sae-lib/filters/filters-group/filters-group';
 import {FormsModule} from '@angular/forms';
 import {Confirm} from 'sae-lib/modal/confirm/confirm';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-similar-cases',
@@ -27,7 +28,6 @@ import {Confirm} from 'sae-lib/modal/confirm/confirm';
 export class SimilarCases {
   public searchInput: string = '';
   public displayedTab: 'similar-cases' | 'technical-manual' = 'similar-cases';
-
   public appState: any = {};
   activeTab: string = "summarized";
   displayHeaderTabs: boolean = false;
@@ -35,6 +35,8 @@ export class SimilarCases {
   filteredSimilarCases: any = [];
   searchSimilarInput: string = '';
   displayConfirmModal: boolean = true;
+  protected readonly confirm = confirm;
+  private router = inject(Router);
 
   constructor(private store: Store<StateInterface>) {
     this.store.select(state => state.app).subscribe(app => {
@@ -81,9 +83,13 @@ export class SimilarCases {
 
   onConfirmModal() {
 
+    console.log('confirm retour home')
+    this.displayConfirmModal = false;
+    this.router.navigate(['/home'])
   }
 
   onRejectModal() {
+    console.log('rester ici')
     this.displayConfirmModal = false;
   }
 }