tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tab switch results

Browse source
This commit is contained in:
Tykayn 2025-09-15 17:46:00 +02:00 • committed by tykayn
parent 97ab7a0920
commit 89cb0f2635
16 changed files with 396 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

54
sae-csc/src/app/pages/similar-cases/case-result/case-result.html
View file

@ -2,42 +2,51 @@
<!--case result-->
<div class="title">
-7B / 72-21-02 / Booster blades stg 3 / LPC STG.3 BLADES DISLOCATION / 894773
<span class="label">
<div class="button button-toggle chevron">v</div>
7B / 72-21-02 / Booster blades stg 3 / LPC STG.3 BLADES DISLOCATION / 894773
</span>
<i class="ri-arrow-down-s-line"></i>
</div>
<div class="row tabs">
<div (click)="selectCaseTab('information')" class="tab-item is-active">
<div (click)="selectCaseTab('information')" [ngClass]="{ 'is-active' : activeTab == 'information' }"
class="tab-item">
<i class="ri-file-list-2-line"></i>
<div class="label">
Information
</div>
</div>
<div (click)="selectCaseTab('original_question')" class="tab-item">
<div (click)="selectCaseTab('original_question')" [ngClass]="{ 'is-active' : activeTab == 'information' }"
class="tab-item">
<i class="ri-file-list-2-line"></i>
<div class="label">
Original Question
</div>
</div>
<div (click)="selectCaseTab('answer_sent')" class="tab-item">
<div (click)="selectCaseTab('answer_sent')" [ngClass]="{ 'is-active' : activeTab == 'information' }"
class="tab-item">
<i class="ri-file-list-2-line"></i>
<div class="label">
Answer Sent
</div>
</div>
<div (click)="selectCaseTab('engine_part')" class="tab-item">
<div (click)="selectCaseTab('engine_part')" [ngClass]="{ 'is-active' : activeTab == 'information' }"
class="tab-item">
<i class="ri-file-list-2-line"></i>
<div class="label">
Engine part
</div>
</div>
<div (click)="selectCaseTab('findings')" class="tab-item">
<div (click)="selectCaseTab('findings')" [ngClass]="{ 'is-active' : activeTab == 'information' }" class="tab-item">
<i class="ri-file-list-2-line"></i>
<div class="label">
Findings
</div>
</div>
<div (click)="selectCaseTab('dica')" class="tab-item">
<div (click)="selectCaseTab('dica')" [ngClass]="{ 'is-active' : activeTab == 'information' }" class="tab-item">
<i class="ri-file-list-2-line"></i>
<div class="label">
DICA
@ -46,31 +55,40 @@
</div>
<div class="row selected-tab-content summary">
<strong>
@if (activeTab == 'info') {
<strong>
AI’s summary :</strong>
<div class="content">
{{ case.info }}
</div>
}
@if (activeTab == 'dica') {
{{ case.DICA }}
{{ case.DICA_file }}
}
AI’s summary :</strong> Work stoppage case for CFM56-7B engine (ESN: 894773) at MTU Zhuhai. LPC Stage 3 blade
platform
dislocation detected during shop visit BSI. Maximum dislocation: 1.22mm axial, 0.63mm radial. Customer requests
evaluation, acceptance criteria, or DICA for further action. No corresponding limits in AMM 72-00-00 BSI inspection
chapter.
</div>
<div class="row case-more-infos">
<div class="info-item">
<span class="label">Date :</span>
<span class="value">2023-12-12</span>
<span class="value">{{ case.date }}</span>
</div>
<div class="info-item">
<span class="label">Chrono ID :</span>
<span class="value">CSC/CFM/2023-10/00446-A</span>
<span class="value">{{ case.chrono_id }}</span>
</div>
<div class="info-item">
<span class="label">Responsable Team :</span>
<span class="value">FO-CFM</span>
<span class="value">{{ case.responsable_team }}</span>
</div>
<div class="info-item">
<span class="label">GE Instruction:</span>
<span class="value">-</span>
<span class="value">{{ case.ge_instruction }}</span>
</div>
</div>
</div>

8
sae-csc/src/app/pages/similar-cases/case-result/case-result.scss
View file

@ -51,10 +51,16 @@
flex-direction: row;
align-items: start;
padding-bottom: 6px;
cursor: pointer;
label {
padding-left: 6px;
display: inline-block;
display: block;
flex-grow: 1;
}
&:hover {
font-weight: 600;
}
&.is-active {

9
sae-csc/src/app/pages/similar-cases/case-result/case-result.ts
View file

@ -1,19 +1,20 @@
import {Component, Input} from '@angular/core';
import {NgClass} from '@angular/common';
@Component({
selector: 'app-case-result',
imports: [],
imports: [
NgClass
],
templateUrl: './case-result.html',
styleUrl: './case-result.scss'
})
export class CaseResult {
@Input() case: any = {};
public activeTab: string = ''
public activeTab: string = 'information'
selectCaseTab(activeTab: string) {
console.log('todo')
this.activeTab = activeTab
}
}

56
sae-csc/src/app/pages/similar-cases/similar-cases.html
View file

@ -12,7 +12,7 @@
New question
<i class="ri-chat-ai-line"></i>
</button>
<button class="button">
<button class="button search-solutions">
Search solutions
<i class="ri-search-2-line"></i>
</button>
@ -21,8 +21,6 @@
@if (displayHeaderTabs) {
<div class="post-tabs">
<div class="tabs">
<div (click)="activeTab = 'summarized'"
[ngClass]="{ 'is-active' : activeTab == 'summarized' }"
class="tab-item ">
@ -40,8 +38,6 @@
} @else {
<!-- original question-->
{{ appState.fromText }}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum dolor fugit illo laboriosam necessitatibus neque placeat quam ullam unde. Accusamus asperiores, aspernatur atque autem commodi, dicta doloremque doloribus enim error et illo ipsam labore laborum libero natus necessitatibus nemo officiis perferendis placeat, quo reprehenderit sapiente sint vitae voluptatem voluptatum?
}
</div>
</div>
@ -53,10 +49,11 @@
</header>
<main>
<div class="row bot-talks">
<div class="row-bot-talks">
<sae-bot-talks
[links]="[{}]"
[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>
[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>
<div class="tabs-container">
@ -64,13 +61,25 @@
<div class="columns">
<div class="column">
<div class="tab-button similar is-active">
<div
(click)="displayedTab = 'similar-cases'"
[ngClass]="{ 'is-active' : displayedTab == 'similar-cases' }"
class="tab-button similar "
>
Similar cases
</div>
</div>
<div class="column">
<div class="tab-button tech-manual">
Technical manual
<div
(click)="displayedTab = 'technical-manual'"
[ngClass]="{ 'is-active' : displayedTab == 'technical-manual' }"
class="tab-button tech-manual">
Associated documents
@if (appState.technicalManuals.length > 0) {
<span class="indicator"></span>
}
</div>
</div>
</div>
@ -78,9 +87,12 @@
<div class="tabs-body">
<div class="tabs-search">
<i class="ri-search-2-line search"></i>
<!-- <i class="ri-search-2-line search"></i>-->
<input class="search" 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
@ -89,15 +101,15 @@
@if (displayedTab == 'similar-cases') {
<div id="similar_cases_tab">
<div class="row">
<div class="columns">
<div class="toggle-ai-suggestion column">
AI suggestions
<!-- applied-->
<!-- disabled-->
</div>
</div>
</div>
<!-- <div class="row">-->
<!-- <div class="columns">-->
<!-- <div class="toggle-ai-suggestion column">-->
<!-- AI suggestions-->
<!-- &lt;!&ndash; applied&ndash;&gt;-->
<!-- &lt;!&ndash; disabled&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="row cases-results">
<!-- boucle des résultats-->
@ -114,6 +126,8 @@
<div id="technical_manuals_tab">
<sae-bot-talks></sae-bot-talks>
(les manuels ici)
</div>
}
</div>

70
sae-csc/src/app/pages/similar-cases/similar-cases.scss
View file

@ -3,6 +3,16 @@
padding: 64px;
.indicator {
background: green;
width: 8px;
height: 8px;
border-radius: 100%;
margin-left: 16px;
display: inline-block;
}
.title-box {
color: #1B1D27;
font-family: Barlow;
@ -47,6 +57,12 @@
+ 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%));
}
}
}
@ -54,6 +70,7 @@
border-radius: 10px;
background: #E3EAF1;
padding: 16px;
margin-top: 16px;
.tabs {
display: flex;
@ -105,10 +122,19 @@
}
}
.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;
@ -126,9 +152,46 @@
line-height: 16px;
width: 100%;
min-width: 976px;
display: block;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 16px;
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 {
@ -175,10 +238,7 @@
#similar_cases_tab {
.cases-results {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 16px;
app-case-result {
margin-bottom: 8px;

6
sae-csc/src/app/pages/similar-cases/similar-cases.ts
View file

@ -5,7 +5,6 @@ import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom
import {StateInterface} from '../../redux/reducers';
import {Store} from '@ngrx/store';
import {NgClass} from '@angular/common';
import {MainButton} from 'sae-lib/buttons/main-button/main-button';
@Component({
selector: 'app-similar-cases',
@ -14,7 +13,7 @@ import {MainButton} from 'sae-lib/buttons/main-button/main-button';
CaseResult,
BottomNavigation,
NgClass,
MainButton,
],
templateUrl: './similar-cases.html',
styleUrl: './similar-cases.scss'
@ -33,4 +32,7 @@ export class SimilarCases {
});
}
filterResults() {
}
}