add modal in similar case page
This commit is contained in:
Tykayn
tykayn
parent
a2afad0545
commit
8ef68379de
15 changed files with 371 additions and 185 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,9 @@
|
|||
}
|
||||
|
||||
.dropdown-item {
|
||||
font-size: 14px;
|
||||
color: #1b1D27;
|
||||
|
||||
i {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
}
|
||||
<span class="label">
|
||||
{{ label }}
|
||||
<ng-content></ng-content>
|
||||
</span>
|
||||
@if (divider) {
|
||||
<span class="pipe">|</span>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
34
my-workspace/projects/sae-lib/modal/confirm/confirm.html
Normal file
34
my-workspace/projects/sae-lib/modal/confirm/confirm.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<div class="confirm-modal-background">
|
||||
<div class="confirm-modal">
|
||||
<div class="title">
|
||||
|
||||
<ng-content select="modal-title">Search for new question</ng-content>
|
||||
</div>
|
||||
<div class="body">
|
||||
<ng-content select="modal-main"></ng-content>
|
||||
<ng-content>
|
||||
<p>Do you need a search for new client’s question ?</p>
|
||||
<p>
|
||||
Once you click the bouton YES, you will leave this page and start a search for new client’s question.
|
||||
</p>
|
||||
|
||||
<sae-alert-box [alertKind]="'warning'"
|
||||
[message]="'Current search results will disappear. Please copy important contents before leaving.'"></sae-alert-box>
|
||||
</ng-content>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-text">
|
||||
<ng-content select="modal-footer"></ng-content>
|
||||
</div>
|
||||
<div class="actions">
|
||||
|
||||
<ng-content (click)="confirm()" select="modal-confirm">
|
||||
<sae-m-button [kind]="'ghost'">Yes</sae-m-button>
|
||||
</ng-content>
|
||||
<ng-content (click)="reject()" select="modal-reject">
|
||||
<sae-m-button [kind]="'primary'">No, i stay</sae-m-button>
|
||||
</ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
54
my-workspace/projects/sae-lib/modal/confirm/confirm.scss
Normal file
54
my-workspace/projects/sae-lib/modal/confirm/confirm.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
23
my-workspace/projects/sae-lib/modal/confirm/confirm.spec.ts
Normal file
23
my-workspace/projects/sae-lib/modal/confirm/confirm.spec.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { Confirm } from './confirm';
|
||||
|
||||
describe('Confirm', () => {
|
||||
let component: Confirm;
|
||||
let fixture: ComponentFixture<Confirm>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Confirm]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Confirm);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
25
my-workspace/projects/sae-lib/modal/confirm/confirm.ts
Normal file
25
my-workspace/projects/sae-lib/modal/confirm/confirm.ts
Normal file
|
|
@ -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() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@
|
|||
<i class="ri-arrow-down-s-line"></i>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button [routerLink]="'/home'" class="button">
|
||||
<!-- <button [routerLink]="'/home'" class="button">-->
|
||||
<!-- New question-->
|
||||
<!-- <i class="ri-chat-ai-line"></i>-->
|
||||
<!-- </button>-->
|
||||
<button (click)="displayModalNewQuestion()" class="button">
|
||||
New question
|
||||
<i class="ri-chat-ai-line"></i>
|
||||
</button>
|
||||
|
|
@ -136,4 +140,13 @@
|
|||
<footer>
|
||||
<app-bottom-navigation [hideNextStepButton]="true"></app-bottom-navigation>
|
||||
</footer>
|
||||
<sae-confirm [showWhen]="displayConfirmModal">
|
||||
<span ngProjectAs="modal-title">
|
||||
Search for new question
|
||||
</span>
|
||||
<span ngProjectAs="modal-main">
|
||||
Cela réinitialisera les filtres de sélection
|
||||
</span>
|
||||
|
||||
</sae-confirm>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<StateInterface>) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,7 +177,7 @@ export class TranslateTexts {
|
|||
type: ActionTypes.UPDATE_APP,
|
||||
payload: {
|
||||
displayBot: true,
|
||||
toText: "Résumé de démo à titre d'exemple",
|
||||
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."
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue