From 8ef68379def26748816524027471b4dea00ea41d Mon Sep 17 00:00:00 2001 From: Tykayn Date: Fri, 26 Sep 2025 12:30:20 +0200 Subject: [PATCH] add modal in similar case page --- .../app/buttons/main-button/main-button.scss | 160 ------------------ .../conversation-item/conversation-item.scss | 3 + .../projects/sae-lib/alert-box/alert-box.scss | 16 ++ .../buttons/main-button/main-button.html | 1 + .../buttons/main-button/main-button.scss | 157 +++++++++++++++++ .../inputs/multi-selector/multi-selector.scss | 18 +- .../sae-lib/modal/confirm/confirm.html | 34 ++++ .../sae-lib/modal/confirm/confirm.scss | 54 ++++++ .../sae-lib/modal/confirm/confirm.spec.ts | 23 +++ .../projects/sae-lib/modal/confirm/confirm.ts | 25 +++ .../case-result/case-result.scss | 13 +- .../pages/similar-cases/similar-cases.html | 15 +- .../pages/similar-cases/similar-cases.scss | 10 +- .../app/pages/similar-cases/similar-cases.ts | 19 ++- .../shared/translate-texts/translate-texts.ts | 8 +- 15 files changed, 371 insertions(+), 185 deletions(-) create mode 100644 my-workspace/projects/sae-lib/modal/confirm/confirm.html create mode 100644 my-workspace/projects/sae-lib/modal/confirm/confirm.scss create mode 100644 my-workspace/projects/sae-lib/modal/confirm/confirm.spec.ts create mode 100644 my-workspace/projects/sae-lib/modal/confirm/confirm.ts diff --git a/airwatch/src/app/buttons/main-button/main-button.scss b/airwatch/src/app/buttons/main-button/main-button.scss index c745446..0990332 100644 --- a/airwatch/src/app/buttons/main-button/main-button.scss +++ b/airwatch/src/app/buttons/main-button/main-button.scss @@ -3,163 +3,3 @@ @use "sae-lib/src/styles/variables.scss" as variables; @use "sass:color"; - -:host { - display: inline-block; - font-family: Barlow; - - - .pipe { - margin-left: 10px; - margin-right: 10px; - } - - button { - - background: transparent; - color: shadows.$neutral-white; - border-radius: shadows.$radius-main; - padding: 17px 24px; - cursor: pointer; - transition: all 0.25s ease; - border: 0; - width: 100%; - margin-top: 8px; - font-size: 18px; - - i { - width: 16px; - height: 16px; - } - - &:hover, &:active, &:focus { - transition: all 0.25s ease; - } - - &:hover { - background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%)); - } - - &.is-size { - &-large { - padding: 17px 24px; - - font-size: 18px; - font-weight: 600; - line-height: 26px; - } - - &-medium { - padding: 14px 18px; - border-radius: var(--radius-2, 8px); - - font-size: 16px; - font-weight: 600; - line-height: 20px; - } - - &-small { - padding: 14px 10px; - border-radius: var(--radius-2, 8px); - - font-size: 14px; - font-weight: 600; - line-height: 20px; - - } - - &-extrasm { - padding: 10px 10px; - border-radius: var(--radius-2, 4px); - color: var(--Colors-Blanc, #FFF); - - - font-size: 12px; - font-weight: 600; - line-height: 18px; - } - } - - &.is-disabled { - background-color: #BED7EE; - color: white; - } - - &.is-primary { - background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%)); - color: variables.$neutral-white; - border-color: color.adjust(variables.$primary-color, $lightness: - 10%); - - &:hover { - background: var(--Hover, linear-gradient(70deg, #073A7C 43.99%, #1767AD 94.38%, #255B8E 126.68%)); - } - - &:focus { - border: 3px solid var(--Colors-Principal-100, #96BEE4); - background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%)); - } - - &.is-disabled { - background-color: #BED7EE !important; - color: white; - } - } - - - &.is-secondary { - //background: variables.$neutral-white; - background: white; - border: solid 1px #255B8E; - color: variables.$neutral-white; - color: #255B8E; - - &.is-disabled { - background-color: #BED7EE; - color: white; - } - } - - &.is-ghost { - background: variables.$neutral-white; - color: #255B8E; - border: 0; - - &:focus { - background: variables.$neutral-white; - } - - &.is-disabled { - background-color: #BED7EE; - color: #BED7EE; - } - - &:hover { - background: #dedede; - } - - } - - &.is-link { - background: variables.$neutral-white; - color: #255B8E; - border: 0; - - &:hover { - background: #dedede; - } - - - .label { - text-decoration: underline; - text-decoration-color: variables.$primary-color; - } - - &.is-disabled { - background-color: #BED7EE; - color: #BED7EE; - } - } - - - } -} diff --git a/airwatch/src/app/chatbot/conversation-item/conversation-item.scss b/airwatch/src/app/chatbot/conversation-item/conversation-item.scss index 669989f..69b6dbd 100644 --- a/airwatch/src/app/chatbot/conversation-item/conversation-item.scss +++ b/airwatch/src/app/chatbot/conversation-item/conversation-item.scss @@ -32,6 +32,9 @@ } .dropdown-item { + font-size: 14px; + color: #1b1D27; + i { margin-right: 0.5rem; } diff --git a/my-workspace/projects/sae-lib/alert-box/alert-box.scss b/my-workspace/projects/sae-lib/alert-box/alert-box.scss index f7c3dff..552da03 100644 --- a/my-workspace/projects/sae-lib/alert-box/alert-box.scss +++ b/my-workspace/projects/sae-lib/alert-box/alert-box.scss @@ -9,4 +9,20 @@ float: right; cursor: pointer; } + + .alert { + border-radius: 8px; + + &.is-warning { + color: #A7582B; + font-family: Barlow; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 120%; + padding: 18px; + + background: #FDF3EE; + } + } } diff --git a/my-workspace/projects/sae-lib/buttons/main-button/main-button.html b/my-workspace/projects/sae-lib/buttons/main-button/main-button.html index 71a4e06..ebbae5e 100644 --- a/my-workspace/projects/sae-lib/buttons/main-button/main-button.html +++ b/my-workspace/projects/sae-lib/buttons/main-button/main-button.html @@ -7,6 +7,7 @@ } {{ label }} + @if (divider) { | diff --git a/my-workspace/projects/sae-lib/buttons/main-button/main-button.scss b/my-workspace/projects/sae-lib/buttons/main-button/main-button.scss index 82d0ec2..f89a83a 100644 --- a/my-workspace/projects/sae-lib/buttons/main-button/main-button.scss +++ b/my-workspace/projects/sae-lib/buttons/main-button/main-button.scss @@ -5,4 +5,161 @@ :host { + display: inline-block; + font-family: Barlow; + + + .pipe { + margin-left: 10px; + margin-right: 10px; + } + + button { + + background: transparent; + color: shadows.$neutral-white; + border-radius: shadows.$radius-main; + padding: 17px 24px; + cursor: pointer; + transition: all 0.25s ease; + border: 0; + width: 100%; + margin-top: 8px; + font-size: 18px; + + i { + width: 16px; + height: 16px; + } + + //&:hover, &:active, &:focus { + // transition: all 0.25s ease; + //} + + &:hover { + background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%)); + } + + &.is-size { + &-large { + padding: 17px 24px; + + font-size: 18px; + font-weight: 600; + line-height: 26px; + } + + &-medium { + padding: 14px 18px; + border-radius: var(--radius-2, 8px); + + font-size: 16px; + font-weight: 600; + line-height: 20px; + } + + &-small { + padding: 14px 10px; + border-radius: var(--radius-2, 8px); + + font-size: 14px; + font-weight: 600; + line-height: 20px; + + } + + &-extrasm { + padding: 10px 10px; + border-radius: var(--radius-2, 4px); + color: var(--Colors-Blanc, #FFF); + + + font-size: 12px; + font-weight: 600; + line-height: 18px; + } + } + + &.is-disabled { + background-color: #BED7EE; + color: white; + } + + &.is-primary { + background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%)); + color: variables.$neutral-white; + border-color: color.adjust(variables.$primary-color, $lightness: - 10%); + + &:hover { + background: var(--Hover, linear-gradient(70deg, #073A7C 43.99%, #1767AD 94.38%, #255B8E 126.68%)); + } + + &:focus { + border: 3px solid var(--Colors-Principal-100, #96BEE4); + background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%)); + } + + &.is-disabled { + background-color: #BED7EE !important; + color: white; + } + } + + + &.is-secondary { + //background: variables.$neutral-white; + background: white; + border: solid 1px #255B8E; + color: variables.$neutral-white; + color: #255B8E; + + &.is-disabled { + background-color: #BED7EE; + color: white; + } + } + + &.is-ghost { + background: variables.$neutral-white; + color: #255B8E; + border: 0; + + &:focus { + background: variables.$neutral-white; + } + + &.is-disabled { + background-color: #BED7EE; + color: #BED7EE; + } + + &:hover { + background: #dedede; + } + + } + + &.is-link { + background: variables.$neutral-white; + color: #255B8E; + border: 0; + + &:hover { + background: #dedede; + } + + + .label { + text-decoration: underline; + text-decoration-color: variables.$primary-color; + } + + &.is-disabled { + background-color: #BED7EE; + color: #BED7EE; + } + } + + + } } diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss index 912727b..ea096aa 100644 --- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss +++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss @@ -4,6 +4,7 @@ .input-box { width: 218px; + color: #1b1d27; .d-none { display: none; @@ -36,7 +37,8 @@ } .selector-button { - top: -60px; + + top: -52px; left: 188px; width: 20px; } @@ -47,14 +49,17 @@ background: variables.$csc-chips-bg-color; color: white; border-radius: 200px; - padding: 10px; + display: inline-block; line-height: 10px; position: relative; z-index: 11; - height: 30px; - top: 0; - right:-153px; + + top: -32px; + right: -163px; + font-size: 14px; + padding: 5px 7px; + min-width: 2.5ch; &.is-visible { @@ -84,7 +89,8 @@ border-color: #8D91A4; background: #fff; color: #8D91A4; - i{ + + i { color: #525668; } } diff --git a/my-workspace/projects/sae-lib/modal/confirm/confirm.html b/my-workspace/projects/sae-lib/modal/confirm/confirm.html new file mode 100644 index 0000000..aa9bddb --- /dev/null +++ b/my-workspace/projects/sae-lib/modal/confirm/confirm.html @@ -0,0 +1,34 @@ +
+
+
+ + Search for new question +
+
+ + +

Do you need a search for new client’s question ?

+

+ Once you click the bouton YES, you will leave this page and start a search for new client’s question. +

+ + + +
+
+
+ +
+
+ + + Yes + + + No, i stay + +
+
+
+
diff --git a/my-workspace/projects/sae-lib/modal/confirm/confirm.scss b/my-workspace/projects/sae-lib/modal/confirm/confirm.scss new file mode 100644 index 0000000..a96a448 --- /dev/null +++ b/my-workspace/projects/sae-lib/modal/confirm/confirm.scss @@ -0,0 +1,54 @@ +:host { + position: fixed; + z-index: 1000; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.2); + display: flex; + justify-content: center; + align-items: center; + + .confirm-modal { + width: 500px; + border-radius: 8px; + background: #FFF; + box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05); + padding: 24px 29px; + + } + + .body { + color: #000; + font-family: Barlow; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 120%; /* 16.8px */ + } + + .title { + color: #000; + leading-trim: both; + text-edge: cap; + font-family: Barlow; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 20px; /* 100% */ + + margin-bottom: 16px; + } + + .actions { + padding-top: 24px; + display: flex; + align-content: center; + justify-content: space-between; + } + + p { + margin-bottom: 16px; + } +} diff --git a/my-workspace/projects/sae-lib/modal/confirm/confirm.spec.ts b/my-workspace/projects/sae-lib/modal/confirm/confirm.spec.ts new file mode 100644 index 0000000..09aad61 --- /dev/null +++ b/my-workspace/projects/sae-lib/modal/confirm/confirm.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Confirm } from './confirm'; + +describe('Confirm', () => { + let component: Confirm; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [Confirm] + }) + .compileComponents(); + + fixture = TestBed.createComponent(Confirm); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/my-workspace/projects/sae-lib/modal/confirm/confirm.ts b/my-workspace/projects/sae-lib/modal/confirm/confirm.ts new file mode 100644 index 0000000..5565e68 --- /dev/null +++ b/my-workspace/projects/sae-lib/modal/confirm/confirm.ts @@ -0,0 +1,25 @@ +import {Component, Input} from '@angular/core'; +import {MainButton} from '../../buttons/main-button/main-button'; +import {AlertBox} from '../../alert-box/alert-box'; + +@Component({ + selector: 'sae-confirm', + imports: [ + MainButton, + AlertBox + ], + templateUrl: './confirm.html', + styleUrl: './confirm.scss' +}) +export class Confirm { + + @Input() showWhen: any = false; + + confirm() { + + } + + reject() { + + } +} diff --git a/sae-csc/src/app/pages/similar-cases/case-result/case-result.scss b/sae-csc/src/app/pages/similar-cases/case-result/case-result.scss index 063a272..e0b314f 100644 --- a/sae-csc/src/app/pages/similar-cases/case-result/case-result.scss +++ b/sae-csc/src/app/pages/similar-cases/case-result/case-result.scss @@ -20,13 +20,18 @@ } .title { - color: var(--Black-text, #1B1D27); + color: #49454F; + text-align: left; font-family: Barlow; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; /* 150% */ + + .is-active & { + color: #1B1D27; + } } .info-item { @@ -36,6 +41,7 @@ } .summary { + border-top: 1px solid grey; padding-top: 10px; } @@ -67,6 +73,8 @@ align-items: start; padding-bottom: 6px; cursor: pointer; + color: #49454F; + i { margin-right: 8px; @@ -84,7 +92,8 @@ } &.is-active { - border-bottom: 2px solid black; + + border-bottom: 2px solid #0B0C47; } } diff --git a/sae-csc/src/app/pages/similar-cases/similar-cases.html b/sae-csc/src/app/pages/similar-cases/similar-cases.html index c7a2d61..fd2999a 100644 --- a/sae-csc/src/app/pages/similar-cases/similar-cases.html +++ b/sae-csc/src/app/pages/similar-cases/similar-cases.html @@ -8,7 +8,11 @@
- @@ -136,4 +140,13 @@
+ + + Search for new question + + + Cela réinitialisera les filtres de sélection + + +
diff --git a/sae-csc/src/app/pages/similar-cases/similar-cases.scss b/sae-csc/src/app/pages/similar-cases/similar-cases.scss index d9a5e70..e1d7bf7 100644 --- a/sae-csc/src/app/pages/similar-cases/similar-cases.scss +++ b/sae-csc/src/app/pages/similar-cases/similar-cases.scss @@ -100,18 +100,10 @@ border-bottom: solid 1px #333; cursor: pointer; - &:hover { - color: white; - } - &.is-active { color: #000; - border-bottom: solid 3px #000; - - &:hover { - color: white; - } + border-bottom: solid 2px #000; } diff --git a/sae-csc/src/app/pages/similar-cases/similar-cases.ts b/sae-csc/src/app/pages/similar-cases/similar-cases.ts index 22c85e0..1c5bba0 100644 --- a/sae-csc/src/app/pages/similar-cases/similar-cases.ts +++ b/sae-csc/src/app/pages/similar-cases/similar-cases.ts @@ -5,9 +5,9 @@ import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom import {StateInterface} from '../../redux/reducers'; import {Store} from '@ngrx/store'; import {NgClass} from '@angular/common'; -import {RouterLink} from '@angular/router'; import {FiltersGroup} from 'sae-lib/filters/filters-group/filters-group'; import {FormsModule} from '@angular/forms'; +import {Confirm} from 'sae-lib/modal/confirm/confirm'; @Component({ selector: 'app-similar-cases', @@ -16,9 +16,9 @@ import {FormsModule} from '@angular/forms'; CaseResult, BottomNavigation, NgClass, - RouterLink, FiltersGroup, FormsModule, + Confirm, ], templateUrl: './similar-cases.html', @@ -34,6 +34,7 @@ export class SimilarCases { disabledFilters: boolean = true; filteredSimilarCases: any = []; searchSimilarInput: string = ''; + displayConfirmModal: boolean = true; constructor(private store: Store) { this.store.select(state => state.app).subscribe(app => { @@ -71,4 +72,18 @@ export class SimilarCases { }); }); } + + displayModalNewQuestion() { + console.log('nouvelle question') + // display sae-confirm + this.displayConfirmModal = true; + } + + onConfirmModal() { + + } + + onRejectModal() { + this.displayConfirmModal = false; + } } diff --git a/sae-csc/src/app/shared/translate-texts/translate-texts.ts b/sae-csc/src/app/shared/translate-texts/translate-texts.ts index 308641f..1922d8c 100644 --- a/sae-csc/src/app/shared/translate-texts/translate-texts.ts +++ b/sae-csc/src/app/shared/translate-texts/translate-texts.ts @@ -144,7 +144,7 @@ export class TranslateTexts { type: ActionTypes.UPDATE_APP, payload: { fromText: this.fromText, - botMessage: "Generating a summary...analyzing client’s question...", + botMessage: "Generating a summary...analyzing client’s question...", loadingResume: true } }); @@ -153,8 +153,6 @@ export class TranslateTexts { this.loadingResume = true; - - // Clear any existing timeout to reset the debounce if (this.fromTimeout) { clearTimeout(this.fromTimeout); @@ -179,8 +177,8 @@ export class TranslateTexts { type: ActionTypes.UPDATE_APP, payload: { displayBot: true, - toText: "Résumé de démo à titre d'exemple", - botMessage: "Here’s AI analysis about client’s question ! Please make sure if my analysis is correct to get the most relevent results." + toText: "Résumé de démo à titre d'exemple. Work stoppage case for CFM56-7B engine (ESN: 802379) from Japan Airlines. Issue: Erosion found on Area A of 5 Acoustical Panel Assemblies (2H-3H) during inspection. Task: Perform repair 006 per ESM 72-23-08-300-006 on leading edge of affected panels. Parts concerned: P/Ns 340-084-302-0, 340-084-201-0, and 340-082-501-0.", + botMessage: "Here’s AI analysis about client’s question ! Please make sure if my analysis is correct to get the most relevent results." } });