up similar cases page
This commit is contained in:
Tykayn
tykayn
parent
7cebea45d8
commit
848169595d
13 changed files with 459 additions and 392 deletions
|
|
@ -8,6 +8,12 @@
|
|||
border-width: 0;
|
||||
padding: 4px;
|
||||
color: #333;
|
||||
background: variables.$csc-copy-color
|
||||
cursor: pointer;
|
||||
background: variables.$csc-copy-color;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
background: variables.$csc-magic-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,6 +51,10 @@
|
|||
|
||||
app-copy {
|
||||
margin-left: 12px;
|
||||
|
||||
.button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -1,72 +1,78 @@
|
|||
<div [ngClass]="{highlighted, 'is-disabled': disabled}" class="filter-group">
|
||||
<!-- disabled: {{ disabled }}-->
|
||||
|
||||
@if(appState.filters){
|
||||
|
||||
@if (appState.filters) {
|
||||
<div class="selectors">
|
||||
<sae-multi-selector
|
||||
(clickedOnInput)="onClickedOnInput($event)"
|
||||
(availableChoicesChange)="onAvailableChoicesChange($event, 'engineType')"
|
||||
(clickedOnInput)="onClickedOnInput($event)"
|
||||
(selectedChoicesChange)="onSelectedChoicesChange($event, 'engineType')"
|
||||
[actionTypes]="actionTypes"
|
||||
[availableChoices]="appState.filters?.engineType?.availableList"
|
||||
[disabled]="disabled"
|
||||
[label]="'Engine type'"
|
||||
[displayDropdown]="activeLabel==='Engine type'"
|
||||
[label]="'Engine type'"
|
||||
[selectedChoices]="appState.filters?.engineType?.selectedList"
|
||||
[store]="store"
|
||||
></sae-multi-selector>
|
||||
<sae-multi-selector
|
||||
(clickedOnInput)="onClickedOnInput($event)"
|
||||
(availableChoicesChange)="onAvailableChoicesChange($event, 'findings')"
|
||||
(clickedOnInput)="onClickedOnInput($event)"
|
||||
(selectedChoicesChange)="onSelectedChoicesChange($event, 'findings')"
|
||||
[actionTypes]="actionTypes"
|
||||
[availableChoices]="appState.filters.findings.availableList"
|
||||
[label]="'Findings'"
|
||||
[disabled]="disabled"
|
||||
[displayDropdown]="activeLabel==='Findings'"
|
||||
[label]="'Findings'"
|
||||
[selectedChoices]="appState.filters.findings.selectedList"
|
||||
[store]="store"
|
||||
></sae-multi-selector>
|
||||
<sae-multi-selector
|
||||
(clickedOnInput)="onClickedOnInput($event)"
|
||||
(availableChoicesChange)="onAvailableChoicesChange($event, 'ata')"
|
||||
(clickedOnInput)="onClickedOnInput($event)"
|
||||
(selectedChoicesChange)="onSelectedChoicesChange($event, 'ata')"
|
||||
[actionTypes]="actionTypes"
|
||||
[availableChoices]="appState.filters?.ata?.availableList"
|
||||
[label]="'ATA'"
|
||||
[disabled]="disabled"
|
||||
[displayDropdown]="activeLabel==='ATA'"
|
||||
[label]="'ATA'"
|
||||
[selectedChoices]="appState.filters?.ata?.selectedList"
|
||||
[store]="store"
|
||||
></sae-multi-selector>
|
||||
<sae-multi-selector
|
||||
(clickedOnInput)="onClickedOnInput($event)"
|
||||
(availableChoicesChange)="onAvailableChoicesChange($event, 'partNumber')"
|
||||
(clickedOnInput)="onClickedOnInput($event)"
|
||||
(selectedChoicesChange)="onSelectedChoicesChange($event, 'partNumber')"
|
||||
[actionTypes]="actionTypes"
|
||||
[availableChoices]="appState.filters?.partNumber?.availableList"
|
||||
[label]="'Part number'"
|
||||
[disabled]="disabled"
|
||||
[displayDropdown]="activeLabel==='Part number'"
|
||||
[label]="'Part number'"
|
||||
[selectedChoices]="appState.filters?.partNumber?.selectedList"
|
||||
[store]="store"
|
||||
></sae-multi-selector>
|
||||
<sae-multi-selector
|
||||
(clickedOnInput)="onClickedOnInput($event)"
|
||||
(availableChoicesChange)="onAvailableChoicesChange($event, 'technicalManual')"
|
||||
(clickedOnInput)="onClickedOnInput($event)"
|
||||
(selectedChoicesChange)="onSelectedChoicesChange($event, 'technicalManual')"
|
||||
[actionTypes]="actionTypes"
|
||||
[availableChoices]="appState.filters?.technicalManual?.availableList"
|
||||
[label]="'Technical Manual'"
|
||||
[disabled]="disabled"
|
||||
|
||||
[displayDropdown]="activeLabel==='Technical Manual'"
|
||||
[label]="'Technical Manual'"
|
||||
[selectedChoices]="appState.filters?.technicalManual?.selectedList"
|
||||
[store]="store"
|
||||
></sae-multi-selector>
|
||||
<sae-multi-selector
|
||||
(clickedOnInput)="onClickedOnInput($event)"
|
||||
(availableChoicesChange)="onAvailableChoicesChange($event, 'onOffWing')"
|
||||
(clickedOnInput)="onClickedOnInput($event)"
|
||||
(selectedChoicesChange)="onSelectedChoicesChange($event, 'onOffWing')"
|
||||
[actionTypes]="actionTypes"
|
||||
[availableChoices]="appState.filters?.onOffWing?.availableList"
|
||||
[label]="'On-wing/off-wing'"
|
||||
[disabled]="disabled"
|
||||
[displayDropdown]="activeLabel==='On-wing/off-wing'"
|
||||
[label]="'On-wing/off-wing'"
|
||||
[selectedChoices]="appState.filters?.onOffWing?.selectedList"
|
||||
[store]="store"
|
||||
></sae-multi-selector>
|
||||
|
|
@ -75,12 +81,12 @@
|
|||
}
|
||||
|
||||
@if (!hideChipsList) {
|
||||
<div class="chips-listing">
|
||||
<div class="chips-listing">
|
||||
<!-- liste de chips-->
|
||||
|
||||
<div class="chips-column">
|
||||
@for (elem of appState.filters.engineType.selectedList; track elem.label) {
|
||||
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'engineType')">
|
||||
<button (click)="onSelectedChoicesChange(elem, 'engineType')" class="button chips is-rounded is-small">
|
||||
{{ elem.label }}
|
||||
<span class="post-button">
|
||||
x
|
||||
|
|
@ -90,7 +96,7 @@
|
|||
</div>
|
||||
<div class="chips-column">
|
||||
@for (elem of appState.filters.findings.selectedList; track elem.label) {
|
||||
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'findings')">
|
||||
<button (click)="onSelectedChoicesChange(elem, 'findings')" class="button chips is-rounded is-small">
|
||||
{{ elem.label }}
|
||||
<span class="post-button">
|
||||
x
|
||||
|
|
@ -100,7 +106,7 @@
|
|||
</div>
|
||||
<div class="chips-column">
|
||||
@for (elem of appState.filters.ata.selectedList; track elem.label) {
|
||||
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'ata')">
|
||||
<button (click)="onSelectedChoicesChange(elem, 'ata')" class="button chips is-rounded is-small">
|
||||
{{ elem.label }}
|
||||
<span class="post-button">
|
||||
x
|
||||
|
|
@ -110,7 +116,7 @@
|
|||
</div>
|
||||
<div class="chips-column">
|
||||
@for (elem of appState.filters.partNumber.selectedList; track elem.label) {
|
||||
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'partNumber')">
|
||||
<button (click)="onSelectedChoicesChange(elem, 'partNumber')" class="button chips is-rounded is-small">
|
||||
{{ elem.label }}
|
||||
<span class="post-button">
|
||||
x
|
||||
|
|
@ -120,7 +126,7 @@
|
|||
</div>
|
||||
<div class="chips-column">
|
||||
@for (elem of appState.filters.technicalManual.selectedList; track elem.label) {
|
||||
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'technicalManual')">
|
||||
<button (click)="onSelectedChoicesChange(elem, 'technicalManual')" class="button chips is-rounded is-small">
|
||||
{{ elem.label }}
|
||||
<span class="post-button">
|
||||
x
|
||||
|
|
@ -130,7 +136,7 @@
|
|||
</div>
|
||||
<div class="chips-column">
|
||||
@for (elem of appState.filters.onOffWing.selectedList; track elem.label) {
|
||||
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'onOffWing')">
|
||||
<button (click)="onSelectedChoicesChange(elem, 'onOffWing')" class="button chips is-rounded is-small">
|
||||
{{ elem.label }}
|
||||
<span class="post-button">
|
||||
x
|
||||
|
|
|
|||
|
|
@ -49,6 +49,8 @@
|
|||
&.is-disabled {
|
||||
input {
|
||||
background: grey;
|
||||
border-color: grey;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -121,4 +123,5 @@
|
|||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, HostListener, Input, ElementRef} from '@angular/core';
|
||||
import {Component, ElementRef, HostListener, Input} from '@angular/core';
|
||||
import {MultiSelector} from '../../inputs/multi-selector/multi-selector';
|
||||
import {CommonModule} from '@angular/common';
|
||||
|
||||
|
|
@ -17,7 +17,7 @@ export class FiltersGroup {
|
|||
@Input() store: any = {};
|
||||
@Input() appState: any = {};
|
||||
@Input() actionTypes: any;
|
||||
@Input() disabled!: boolean;
|
||||
@Input() disabled: boolean = false;
|
||||
@Input() hideChipsList: boolean = false;
|
||||
|
||||
// Gère quel sélecteur a son dropdown ouvert
|
||||
|
|
@ -57,8 +57,10 @@ export class FiltersGroup {
|
|||
}
|
||||
|
||||
onClickedOnInput(event: any) {
|
||||
const label = event?.label;
|
||||
this.activeLabel = label || null;
|
||||
if (!this.disabled) {
|
||||
const label = event?.label;
|
||||
this.activeLabel = label || null;
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('document:click', ['$event'])
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<!-- (blur)="displayDropdown = false" (click)="onClickInput()" -->
|
||||
<!-- disabled: {{ disabled }}-->
|
||||
<input
|
||||
(focus)="onInputClickedOrFocused($event)"
|
||||
(input)="onSearchInput($event)"
|
||||
|
|
@ -19,8 +20,8 @@
|
|||
placeholder="{{label}}"
|
||||
type="text">
|
||||
|
||||
<span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
|
||||
(click)="resetChoicesLists()"
|
||||
<span (click)="resetChoicesLists()"
|
||||
[ngClass]="{ 'is-visible' : selectedChoices?.length}"
|
||||
class="selected-items-counter">
|
||||
{{ selectedChoices?.length || 0 }}
|
||||
</span>
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
<i class="ri-arrow-down-s-line"></i>
|
||||
</div>
|
||||
|
||||
@if (displayDropdown ) {
|
||||
@if (displayDropdown) {
|
||||
|
||||
|
||||
<div class="dropdown">
|
||||
|
|
@ -39,36 +40,36 @@
|
|||
@if (selectedChoices?.length && availableChoices?.length) {
|
||||
<div class="selected-items">
|
||||
|
||||
@for(sc of getFilteredSelectedChoices(); track sc.value){
|
||||
<div (click)="selectedChoicesChangeToggleItem(sc)"
|
||||
@for (sc of getFilteredSelectedChoices(); track sc.value) {
|
||||
<div (click)="selectedChoicesChangeToggleItem(sc)"
|
||||
|
||||
class="dropdown-item"
|
||||
>
|
||||
<img alt="checkbox" src="checkbox-active.svg" />
|
||||
<span class="label">
|
||||
class="dropdown-item"
|
||||
>
|
||||
<img alt="checkbox" src="checkbox-active.svg"/>
|
||||
<span class="label">
|
||||
<!-- {{ sc.label }} -->
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="separator">
|
||||
|
||||
<div class="label">Add new part number</div>
|
||||
<i class="ri-add-line"></i>
|
||||
|
||||
<div class="label">Add new part number</div>
|
||||
<i class="ri-add-line"></i>
|
||||
</div>
|
||||
}
|
||||
<div class="available-items">
|
||||
|
||||
<!-- disponibles:-->
|
||||
<!-- disponibles:-->
|
||||
<!-- available:-->
|
||||
@for(ac of getFilteredAvailableChoices(); track ac.value){
|
||||
@for (ac of getFilteredAvailableChoices(); track ac.value) {
|
||||
<div (click)="availableChoicesChangeToggleItem(ac)"
|
||||
|
||||
class="dropdown-item"
|
||||
>
|
||||
<img alt="checkbox" src="checkbox-inactive.svg" />
|
||||
<img alt="checkbox" src="checkbox-inactive.svg"/>
|
||||
<span class="label">
|
||||
{{ ac.label }}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,16 @@
|
|||
|
||||
:host {
|
||||
|
||||
&.is-disabled {
|
||||
input {
|
||||
border: grey;
|
||||
}
|
||||
|
||||
.selected-items-counter {
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 218px;
|
||||
color: #1b1d27;
|
||||
|
|
@ -109,19 +119,18 @@
|
|||
border: 1px solid #8D91A4;
|
||||
box-shadow: 0 0 13px 0 rgba(37, 91, 142, 0.10);
|
||||
|
||||
color: var(--color-text-base, #1B1D27);
|
||||
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-text-base, #1B1D27);
|
||||
|
||||
/* Text/text-base */
|
||||
font-family: var(--Fonts-Font-text, Barlow);
|
||||
font-size: var(--Font-Base, 14px);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 100%; /* 14px */
|
||||
text-overflow: ellipsis;
|
||||
|
||||
/* Text/text-base */
|
||||
font-family: var(--Fonts-Font-text, Barlow);
|
||||
font-size: var(--Font-Base, 14px);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 100%; /* 14px */
|
||||
|
||||
|
||||
|
||||
.dropdown-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
|
|
@ -139,7 +148,7 @@ line-height: 100%; /* 14px */
|
|||
}
|
||||
}
|
||||
|
||||
.separator{
|
||||
.separator {
|
||||
display: flex;
|
||||
width: 186px;
|
||||
height: 34px;
|
||||
|
|
@ -153,7 +162,7 @@ line-height: 100%; /* 14px */
|
|||
margin-top: 6px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.label{
|
||||
.label {
|
||||
overflow: hidden;
|
||||
color: var(--color-text-secondary, #525668);
|
||||
leading-trim: both;
|
||||
|
|
@ -167,11 +176,12 @@ line-height: 100%; /* 14px */
|
|||
}
|
||||
}
|
||||
|
||||
.available-items{
|
||||
img{
|
||||
.available-items {
|
||||
img {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.dropdown-item{
|
||||
|
||||
.dropdown-item {
|
||||
padding: 6px;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -77,13 +77,16 @@ export class MultiSelector implements OnInit {
|
|||
}
|
||||
|
||||
onInputClickedOrFocused(event?: any) {
|
||||
// Informe le parent que cet input a été cliqué/focus pour fermer les autres dropdowns
|
||||
this.clickedOnInput.emit({ label: this.label });
|
||||
if (this.disabled) {
|
||||
console.log('onInputClickedOrFocused', this.disabled, event)
|
||||
if (!this.disabled) {
|
||||
|
||||
// Informe le parent que cet input a été cliqué/focus pour fermer les autres dropdowns
|
||||
this.clickedOnInput.emit({label: this.label});
|
||||
this.displayDropdown = true;
|
||||
} else {
|
||||
console.info('disabled input');
|
||||
return;
|
||||
}
|
||||
this.displayDropdown = true;
|
||||
}
|
||||
|
||||
onClickInput() {
|
||||
|
|
@ -93,7 +96,7 @@ export class MultiSelector implements OnInit {
|
|||
return;
|
||||
}
|
||||
// Informe le parent pour fermer les autres puis ouvre celui-ci
|
||||
this.clickedOnInput.emit({ label: this.label });
|
||||
this.clickedOnInput.emit({label: this.label});
|
||||
this.displayDropdown = true;
|
||||
console.log('Opened dropdown:', this.displayDropdown);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,11 @@ import {SimilarCases} from './pages/similar-cases/similar-cases';
|
|||
import {Login} from './pages/login/login';
|
||||
import {TestingApi} from './pages/testing-api/testing-api';
|
||||
|
||||
export const routes: Routes = [{
|
||||
path: '',
|
||||
component: Login
|
||||
},
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: Login
|
||||
},
|
||||
{
|
||||
path: 'login',
|
||||
component: Login
|
||||
|
|
|
|||
|
|
@ -47,95 +47,102 @@
|
|||
</div>
|
||||
}
|
||||
|
||||
<div class="row filters-row">
|
||||
<sae-filters-group [disabled]="disabledFilters" [hideChipsList]="true"></sae-filters-group>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
|
||||
<div class="row-bot-talks">
|
||||
<sae-bot-talks
|
||||
[appState]="appState"
|
||||
[message]="'I found useful document(s) which can help to answer to this question ! Check if these documents are applied to similar cases'"
|
||||
></sae-bot-talks>
|
||||
|
||||
<div class="row filters-row">
|
||||
<sae-filters-group [actionTypes]="actionTypes" [appState]="appState"
|
||||
[disabled]="true"
|
||||
[hideChipsList]="true"
|
||||
[store]="store"
|
||||
></sae-filters-group>
|
||||
</div>
|
||||
<div class="tabs-container">
|
||||
<div class="tabs-selector">
|
||||
<section class="padded-section">
|
||||
<div class="row-bot-talks">
|
||||
<sae-bot-talks
|
||||
[appState]="appState"
|
||||
[message]="'I found useful document(s) which can help to answer to this question ! Check if these documents are applied to similar cases'"
|
||||
></sae-bot-talks>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div
|
||||
(click)="displayedTab = 'similar-cases'"
|
||||
[ngClass]="{ 'is-active' : displayedTab == 'similar-cases' }"
|
||||
class="tab-button similar "
|
||||
>
|
||||
Similar cases
|
||||
</div>
|
||||
<div class="tabs-container">
|
||||
<div class="tabs-selector">
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div
|
||||
(click)="displayedTab = 'similar-cases'"
|
||||
[ngClass]="{ 'is-active' : displayedTab == 'similar-cases' }"
|
||||
class="tab-button similar "
|
||||
>
|
||||
Similar cases
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div
|
||||
(click)="displayedTab = 'technical-manual'"
|
||||
[ngClass]="{ 'is-active' : displayedTab == 'technical-manual' }"
|
||||
class="tab-button tech-manual">
|
||||
Associated documents
|
||||
<div class="column">
|
||||
<div
|
||||
(click)="displayedTab = 'technical-manual'"
|
||||
[ngClass]="{ 'is-active' : displayedTab == 'technical-manual' }"
|
||||
class="tab-button tech-manual">
|
||||
Associated documents
|
||||
|
||||
@if (appState.technicalManuals.length > 0) {
|
||||
@if (appState.technicalManuals.length > 0) {
|
||||
|
||||
<span class="indicator"></span>
|
||||
}
|
||||
<span class="indicator"></span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs-body">
|
||||
<div class="tabs-body">
|
||||
|
||||
@if (displayedTab == 'similar-cases') {
|
||||
@if (displayedTab == 'similar-cases') {
|
||||
|
||||
<div class="tabs-search">
|
||||
<input id="search_similar_input"
|
||||
class="search"
|
||||
placeholder="Use keywords for a precise research"
|
||||
[(ngModel)]="searchSimilarInput"
|
||||
(input)="filterResults()"
|
||||
(keyup.enter)="filterResults()"
|
||||
type="text">
|
||||
<button (click)="filterResults()" class="search-submit">
|
||||
<i class="ri-send-plane-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="tabs-results">
|
||||
{{ appState.similarCases.length }} cases found, 3 cases suggested
|
||||
</div>
|
||||
}
|
||||
<div class="tabs-search">
|
||||
<input (input)="filterResults()"
|
||||
(keyup.enter)="filterResults()"
|
||||
[(ngModel)]="searchSimilarInput"
|
||||
class="search"
|
||||
id="search_similar_input"
|
||||
placeholder="Use keywords for a precise research"
|
||||
type="text">
|
||||
<button (click)="filterResults()" class="search-submit">
|
||||
<i class="ri-send-plane-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="tabs-results">
|
||||
{{ appState.similarCases.length }} cases found, 3 cases suggested
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (displayedTab == 'similar-cases') {
|
||||
<div id="similar_cases_tab">
|
||||
@if (displayedTab == 'similar-cases') {
|
||||
<div id="similar_cases_tab">
|
||||
|
||||
<div class="row cases-results">
|
||||
<div class="row cases-results">
|
||||
|
||||
<!-- boucle des résultats de appState.similarCases filtrés par #search_similar_input -->
|
||||
@for (case of filteredSimilarCases; track case.id) {
|
||||
<!-- boucle des résultats de appState.similarCases filtrés par #search_similar_input -->
|
||||
@for (case of filteredSimilarCases; track case.id) {
|
||||
|
||||
<app-case-result [case]="case"></app-case-result>
|
||||
}
|
||||
<app-case-result [case]="case"></app-case-result>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
} @else {
|
||||
|
||||
<div id="technical_manuals_tab">
|
||||
<sae-bot-talks [documents]="appState.technicalManuals"
|
||||
[message]="'Here’s technical documents related to the client’s question ! '"></sae-bot-talks>
|
||||
|
||||
<!-- (les manuels ici)-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
} @else {
|
||||
|
||||
<div id="technical_manuals_tab">
|
||||
<sae-bot-talks [message]="'Here’s technical documents related to the client’s question ! '"
|
||||
[documents]="appState.technicalManuals"></sae-bot-talks>
|
||||
|
||||
<!-- (les manuels ici)-->
|
||||
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
<app-bottom-navigation [hideNextStepButton]="true"></app-bottom-navigation>
|
||||
|
|
|
|||
|
|
@ -1,257 +1,262 @@
|
|||
|
||||
:host {
|
||||
app-bottom-navigation {
|
||||
top: 438px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
padding: 64px;
|
||||
|
||||
app-bottom-navigation{
|
||||
top: 438px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.actions {
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background: green;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
margin-left: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
color: #1B1D27;
|
||||
font-family: Barlow;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 140%;
|
||||
|
||||
margin-bottom: 24px;
|
||||
|
||||
}
|
||||
|
||||
header {
|
||||
.simimlar-cases-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #255B8E;
|
||||
color: var(--Colors-Principal-Normal, #255B8E);
|
||||
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
|
||||
display: inline-flex;
|
||||
height: 44px;
|
||||
padding: 14px 16px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--Colors-Principal-Normal, #255B8E);
|
||||
background: #FFF;
|
||||
|
||||
+ button {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&.search-solutions {
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-tabs {
|
||||
border-radius: 10px;
|
||||
background: #E3EAF1;
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: stretch;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
color: #49454F;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
border-bottom: solid 1px #333;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-active {
|
||||
color: #000;
|
||||
|
||||
border-bottom: solid 2px #000;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
color: #1B1D27;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%; /* 22.4px */
|
||||
min-height: 100px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.row-bot-talks {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.toggle-ai-suggestion {
|
||||
color: #A86CFD;
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.tabs-body {
|
||||
padding: 24px 20px;
|
||||
gap: 32px;
|
||||
border-radius: 8px;
|
||||
background: #E3EAF1;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.tabs-search {
|
||||
color: #525668;
|
||||
font-family: Barlow;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
width: 100%;
|
||||
min-width: 976px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
padding: 16px;
|
||||
padding-left: 40px;
|
||||
margin: 5px auto;
|
||||
|
||||
.search {
|
||||
}
|
||||
|
||||
input {
|
||||
width: 976px;
|
||||
padding: 16px;
|
||||
border: 0;
|
||||
border-radius: 8px 0 0 8px;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
.search-submit {
|
||||
display: inline-flex;
|
||||
padding: 9px 14px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 0;
|
||||
display: inline-flex;
|
||||
padding: 9px 14px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: white;
|
||||
height: 51px;
|
||||
|
||||
border-radius: 0 8px 8px 0;
|
||||
background: linear-gradient(145deg, #55BCEC -21.82%, #005AA2 82.35%);
|
||||
|
||||
i {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-results {
|
||||
color: #083B7D;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
line-height: 140%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
.actions {
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
color: var(--Black-text, #1B1D27);
|
||||
font-family: Barlow;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
|
||||
&.is-active {
|
||||
background: #E3EAF1;
|
||||
color: #000;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #D8E7F1;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
::before {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: blue;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#similar_cases_tab {
|
||||
.cases-results {
|
||||
margin-top: 16px;
|
||||
|
||||
app-case-result {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#technical_manuals_tab {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background: green;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
margin-left: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
color: #1B1D27;
|
||||
font-family: Barlow;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 140%;
|
||||
|
||||
margin-bottom: 24px;
|
||||
|
||||
}
|
||||
|
||||
header {
|
||||
background: white;
|
||||
|
||||
|
||||
.simimlar-cases-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 74px 64px 0;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
color: #255B8E;
|
||||
color: var(--Colors-Principal-Normal, #255B8E);
|
||||
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
|
||||
display: inline-flex;
|
||||
height: 44px;
|
||||
padding: 14px 16px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--Colors-Principal-Normal, #255B8E);
|
||||
background: #FFF;
|
||||
|
||||
+ button {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&.search-solutions {
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-tabs {
|
||||
border-radius: 10px;
|
||||
background: #E3EAF1;
|
||||
padding: 16px;
|
||||
margin: 16px 64px 0;
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: stretch;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
color: #49454F;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
border-bottom: solid 1px #333;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-active {
|
||||
color: #000;
|
||||
|
||||
border-bottom: solid 2px #000;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
color: #1B1D27;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%; /* 22.4px */
|
||||
min-height: 100px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.row-bot-talks {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
sae-bot-talks {
|
||||
justify-content: flex-start
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-ai-suggestion {
|
||||
color: #A86CFD;
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.tabs-body {
|
||||
padding: 24px 20px;
|
||||
gap: 32px;
|
||||
border-radius: 8px;
|
||||
background: #E3EAF1;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.tabs-search {
|
||||
color: #525668;
|
||||
font-family: Barlow;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
width: 100%;
|
||||
min-width: 976px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
padding: 16px;
|
||||
padding-left: 40px;
|
||||
margin: 5px auto;
|
||||
|
||||
.search {
|
||||
}
|
||||
|
||||
input {
|
||||
width: 976px;
|
||||
padding: 16px;
|
||||
border: 0;
|
||||
border-radius: 8px 0 0 8px;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
.search-submit {
|
||||
display: inline-flex;
|
||||
padding: 9px 14px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 0;
|
||||
display: inline-flex;
|
||||
padding: 9px 14px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: white;
|
||||
height: 51px;
|
||||
|
||||
border-radius: 0 8px 8px 0;
|
||||
background: linear-gradient(145deg, #55BCEC -21.82%, #005AA2 82.35%);
|
||||
|
||||
i {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-results {
|
||||
color: #083B7D;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
line-height: 140%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
cursor: pointer;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
color: var(--Black-text, #1B1D27);
|
||||
font-family: Barlow;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
|
||||
&.is-active {
|
||||
background: #E3EAF1;
|
||||
color: #000;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #D8E7F1;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
::before {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: blue;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#similar_cases_tab {
|
||||
.cases-results {
|
||||
margin-top: 16px;
|
||||
|
||||
app-case-result {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#technical_manuals_tab {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 65px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,9 +36,10 @@ export class SimilarCases {
|
|||
searchSimilarInput: string = '';
|
||||
displayConfirmModal: boolean = false;
|
||||
protected readonly confirm = confirm;
|
||||
protected readonly actionTypes = ActionTypes;
|
||||
private router = inject(Router);
|
||||
|
||||
constructor(private store: Store<StateInterface>) {
|
||||
constructor(protected store: Store<StateInterface>) {
|
||||
this.store.select(state => state.app).subscribe(app => {
|
||||
this.appState = app;
|
||||
// Initialize filteredSimilarCases with all cases by default
|
||||
|
|
|
|||
|
|
@ -1,5 +1,23 @@
|
|||
@use '../../../../styles/variables-barrel' as variables;
|
||||
@use '../../../../styles/variables-barrel' as variables;
|
||||
|
||||
.similar-cases{
|
||||
@extend .all-pages;
|
||||
|
||||
.similar-cases {
|
||||
//background: green;
|
||||
.padded-section {
|
||||
padding: 0 64px;
|
||||
}
|
||||
|
||||
.filters-row {
|
||||
padding: 0 64px 0;
|
||||
background: white;
|
||||
|
||||
.selectors {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
app-bottom-navigation {
|
||||
padding: 64px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue