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

styling multi filters

Browse source
This commit is contained in:
Tykayn 2025-09-15 16:09:20 +02:00 • committed by tykayn
parent a359d0f9b1
commit 4ef8d42da2
23 changed files with 205 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

8
sae-csc/src/app/app.html
View file

@ -3,8 +3,12 @@
<title>CSC implémentation</title>
</head>
<body>
@if (currentUrl !== '/login') {
<app-top-navigation></app-top-navigation>
<!--<pre>-->
<!-- currentUrl:-->
<!-- {{ currentUrl }}-->
<!--</pre>-->
@if (currentUrl !== '/login' && currentUrl !== '/') {
<app-top-navigation [user]="appState.user"></app-top-navigation>
<sae-feedback-button></sae-feedback-button>
}
<router-outlet/>

11
sae-csc/src/app/app.ts
View file

@ -1,8 +1,10 @@
import {Component, inject, signal} from '@angular/core';
import {ActivatedRoute, Router, RouterOutlet, NavigationEnd} from '@angular/router';
import {NavigationEnd, Router, RouterOutlet} from '@angular/router';
import {TopNavigation} from './shared/navigation/top-navigation/top-navigation';
import {FeedbackButton} from 'sae-lib/buttons/feedback-button/feedback-button';
import {filter} from 'rxjs/operators';
import {Store} from '@ngrx/store';
import {StateInterface} from './redux/reducers';
// import {SaeLib} from '@sae-lib/src/public-api';
@ -15,9 +17,14 @@ import {filter} from 'rxjs/operators';
export class App {
public router = inject(Router);
currentUrl: string = '';
public appState: any = {};
protected readonly title = signal('implem');
constructor() {
constructor(private store: Store<StateInterface>) {
this.store.select(state => state.app).subscribe(appState => {
this.appState = appState;
});
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((event: any) => {

7
sae-csc/src/app/pages/main/main.html
View file

@ -24,14 +24,14 @@
</span>
</div>
<sae-translate-texts></sae-translate-texts>
<sae-translate-texts [appState]="appState"></sae-translate-texts>
</div>
<!-- analyse de question-->
<div id="question_analysis">
<h2 class="title">
Question analysis
</h2>
@if (appState.botMessage) {
@if (appState?.botMessage) {
<sae-bot-talks
[message]="appState.botMessage"></sae-bot-talks>
@ -39,7 +39,8 @@
<!--filters-->
<!-- advanced filters-->
<div class="filters-container">
<sae-filters-group (selectionchange)="onSelectedChoicesChange" [appState]="appState"></sae-filters-group>
<sae-filters-group (selectionchange)="onSelectedChoicesChange" [appState]="appState"
[disabled]="!appState.fromText.length"></sae-filters-group>
</div>
</div>
</main>

10
sae-csc/src/app/pages/main/main.scss
View file

@ -1,7 +1,9 @@
:host {
width: 1312px;
display: block;
//width: 1312px;
//display: block;
margin: 0 auto;
#question_analysis {
sae-bot-talks {
@ -44,4 +46,8 @@
}
}
#main_page {
padding-bottom: 400px;
}
}

2
sae-csc/src/app/pages/main/main.ts
View file

@ -1,5 +1,5 @@
import {Component} from '@angular/core';
import {TranslateTexts} from 'sae-lib/inbox/translate-texts/translate-texts';
import {TranslateTexts} from '../../shared/translate-texts/translate-texts';
import {FiltersGroup} from 'sae-lib/filters/filters-group/filters-group';
import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom-navigation';
import {FeedbackButton} from 'sae-lib/buttons/feedback-button/feedback-button';

28
sae-csc/src/app/redux/csc.types.ts
View file

@ -1,9 +1,19 @@
export type CscCase = {
};
export type TechManual = {
};
export type filterListing = {
};
export type CscCase = {};
export type TechManual = {};
export type filterListing = {};
export type filterGroupType = {
engineType: filterDoubleListType,
findings: filterDoubleListType,
ata: filterDoubleListType,
partNumber: filterDoubleListType,
technicalManual: filterDoubleListType,
onOffWing: filterDoubleListType,
}
export type filterDoubleListType = {
availableList: filterListType[],
selectedList: filterListType[],
}
export type filterListType = {
label: string,
value: string,
}

86
sae-csc/src/app/redux/initialState.ts
View file

@ -1,30 +1,17 @@
// Define initial state
import {StateInterface} from './reducers';
export type filterGroupType = {
engineType: filterDoubleListType,
findings: filterDoubleListType,
ata: filterDoubleListType,
partNumber: filterDoubleListType,
technicalManual: filterDoubleListType,
onOffWing: filterDoubleListType,
}
export type filterDoubleListType = {
availableList: filterListType[],
selectedList: filterListType[],
}
export type filterListType = {
label: string,
value: string,
}
export const initialState: StateInterface = {
app: {
backendAPIRoot: "",
demoMode: true,
loading: false,
// fromText: "le texte",
fromText: "",
fromFile: "",
toText: "",
botMessage: "Generating a summary...analyzing client’s question...",
botMessage: "",
filters: {
engineType: {
availableList: [{
@ -37,30 +24,67 @@ export const initialState: StateInterface = {
}]
},
findings: {
availableList: {},
selectedList: {}
availableList: [],
selectedList: []
},
ata: {
availableList: {},
selectedList: {}
availableList: [],
selectedList: []
},
partNumber: {
availableList: {},
selectedList: {}
availableList: [],
selectedList: []
},
technicalManual: {
availableList: {},
selectedList: {}
availableList: [],
selectedList: []
},
onOffWing: {
availableList: {},
selectedList: {}
availableList: [],
selectedList: []
}
},
similarCases: [
{
id: 1,
}
info: "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. ",
date: "2023-01-01",
chrono_id: "CSC/CFM/2023-10/00446-A",
responsable_team: "FO-CFM",
ge_instruction: "-",
original_question: "blah abl a a jjdbblja bajdblad blab ladlb kaabl",
answer_sent: "dfosdoo osg ogf ogf kgof gfkdmdm gfkdfmkl km opsg gfsok sfol lorem",
engine_part: "ABD cd CD DC DC ZFR ETT HETHG",
findings: "some findings were found here",
DICA: "one dica stuff",
DICA_file: "dica_file.pdf",
}, {
id: 1,
info: "Bhlah lahl hl lhalhadlh No corresponding limits in AMM 72-00-00 BSI inspection chapter. ",
date: "2024-07-08",
chrono_id: "CSC/CFM/1234-10/00446-A",
responsable_team: "FO-CFM",
ge_instruction: "-",
original_question: "blah abl a a jjdbblja bajdblad blab ladlb kaabl",
answer_sent: "dfosdoo osg ogf ogf kgof gfkdmdm gfkdfmkl km opsg gfsok sfol lorem",
engine_part: "ABD cd CD DC DC ZFR ETT HETHG",
findings: "some findings were found here",
DICA: "one dica stuff",
DICA_file: "dica_file_2.pdf",
}, {
id: 1,
info: "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. ",
date: "2023-01-01",
chrono_id: "CSC/CFM/2023-10/00446-A",
responsable_team: "FO-CFM",
ge_instruction: "-",
original_question: "blah abl a a jjdbblja bajdblad blab ladlb kaabl",
answer_sent: "dfosdoo osg ogf ogf kgof gfkdmdm gfkdfmkl km opsg gfsok sfol lorem",
engine_part: "ABD cd CD DC DC ZFR ETT HETHG",
findings: "some findings were found here",
DICA: "one dica stuff",
DICA_file: "dica_file.pdf",
},
],
searchInput: "",
enableAiSuggestion: false,
@ -78,7 +102,9 @@ export const initialState: StateInterface = {
langsList: ["fr_FR", "en_US"],
themesList: ["light", "dark"],
user: {
isAuthenticated: false,
id: "",
isAuthenticated: true,
id: "123412345",
token: "abcd-123412345",
login: "Borhème",
},
};

3
sae-csc/src/app/redux/reducers/index.ts
View file

@ -95,9 +95,12 @@ export interface StateInterface {
user: {
isAuthenticated: boolean;
id: string;
login: string;
token: string;
};
app: {
demoMode: boolean;
loading: boolean;
backendAPIRoot: string;
fromFile: string,
fromText: string,

13
sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html
View file

@ -38,11 +38,14 @@
<!-- exit-->
<i class="ri-door-line"></i>
</a>
<a class="navbar-item user-account-item">
<!-- user -->
<i class="ri-user-2-fill"></i>
borhène
</a>
@if (appState.user) {
<a class="navbar-item user-account-item">
<!-- user -->
<i class="ri-user-2-fill"></i>
{{ appState.user.login }}
</a>
}
</div>
</div>

6
sae-csc/src/app/shared/navigation/top-navigation/top-navigation.ts
View file

@ -1,6 +1,5 @@
import {Component} from '@angular/core';
import {Component, Input} from '@angular/core';
import {RouterLink, RouterLinkActive} from '@angular/router';
// import {AlertBox} from '../../../../../../my-workspace/projects/sae-lib/alert-box/alert-box';
@Component({
@ -15,4 +14,7 @@ import {RouterLink, RouterLinkActive} from '@angular/router';
})
export class TopNavigation {
@Input() public user: any = {};
@Input() public appState: any = {};
}

71
sae-csc/src/app/shared/translate-texts/translate-texts.html Normal file
View file

@ -0,0 +1,71 @@
<div class="translate-texts">
<div id="fromText">
@if (!fileIsUploaded && !textFocused) {
<button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
<span class="label">
Upload .csv file
</span>
<i class="ri-upload-cloud-2-line"></i>
</button>
<!-- hidden text input-->
<input #fileUpload
accept=".csv"
(change)="onFileSelected($event)" class="is-outlined" id="fileUploadTranslator"
type="file">
}
@if (fileIsUploaded) {
<div class="file-selected">
<div class="labeling">
<div>
<i class="ri ri-file-2-line"></i>
</div>
<div class="label">
{{ filePath }}
</div>
<div class="weight">
{{ fileWeight }}
</div>
</div>
<button class="remove-file-upload" (click)="onRemoveFileSelected()">x</button>
</div>
}
<!-- delete button from_text-->
<button (click)="emptyText('fromText')" [ngClass]="{
'is-visible' : fromText.length
}" class="delete-button button">x
</button>
<textarea
(focus)="focusFromText()"
(keyup)="onFromTextChanged()"
(ngModelChange)="onFromTextChanged()"
[ngModel]="appState.fromText"
cols="30"
id="from_text"
name="from_text"
placeholder="Copy/paste client’s question \n or Drag and drop extracted .csv file from CRM portal..."
rows="5"></textarea>
</div>
<div id="toText">
@if (loadingResume) {
<div class="loading">
loading...
</div>
}
@if (toText.length > 0) {
<button (click)="emptyText('toText')" class="delete-button button">x</button>
}
<textarea [(ngModel)]="toText" cols="30" id="to_text" name="to_text" rows="10"></textarea>
</div>
</div>

142
sae-csc/src/app/shared/translate-texts/translate-texts.scss Normal file
View file

@ -0,0 +1,142 @@
@use '../../../../../my-workspace/projects/sae-lib/src/styles/variables';
:host {
.translate-texts {
display: flex;
flex-direction: row;
justify-content: start;
gap: 16px;
}
#fromText,
#toText {
padding: variables.$spacing-4 42px variables.$spacing-4 variables.$spacing-4;
box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
background: white;
height: 235px;
width: 648px;
overflow-y: auto;
}
.delete-button {
border: 0;
border-radius: 100%;
background: #fff;
color: grey;
cursor: pointer;
padding: 10px;
float: right;
width: 37px;
visibility: hidden;
z-index: 10;
position: relative;
right: -26px;
&:hover {
background: #F2F2F2;
color: #222;
display: block;
}
&.is-visible {
visibility: visible;
}
}
textarea {
width: 100%;
height: 200px;
flex-shrink: 0;
border-radius: 4px;
border-width: 0;
color: variables.$csc-text-color;
font-size: variables.$spacing-4;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 22.4px */
margin-top: -40px;
background: transparent;
&::placeholder {
color: variables.$csc-textarea-placeholder-color;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 140%;
width: 370px;
}
}
.click-file-upload {
cursor: pointer;
display: inline-flex;
height: 34px;
padding: 8px 20px;
justify-content: center;
align-items: center;
flex-shrink: 0;
color: variables.$csc-nav-color;
border-radius: variables.$radius-4;
border: 1px solid var(--color-text-title, variables.$csc-nav-color);
background: var(--color-background-card-on-base, #FFF);
left: 0;
top: 68px;
position: relative;
font-weight: 600;
i {
margin-left: 10px;
}
}
.file-selected {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-radius: 4px;
padding: 10px;
background: variables.$csc-file-selector-bg-color;
.labeling {
display: flex;
flex-direction: row;
justify-content: start;
div {
padding-right: 10px;
}
}
.label {
color: variables.$csc-text-color;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 19.6px */
}
.weight {
color: variables.$csc-light-text-color;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 140%;
}
}
#fileUploadTranslator {
display: none;
}
}

23
sae-csc/src/app/shared/translate-texts/translate-texts.spec.ts Normal file
View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TranslateTexts } from './translate-texts';
describe('TranslateTexts', () => {
let component: TranslateTexts;
let fixture: ComponentFixture<TranslateTexts>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [TranslateTexts]
})
.compileComponents();
fixture = TestBed.createComponent(TranslateTexts);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

134
sae-csc/src/app/shared/translate-texts/translate-texts.ts Normal file
View file

@ -0,0 +1,134 @@
import {Component, EventEmitter, Input, Output} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {NgClass} from '@angular/common';
import {Store} from '@ngrx/store';
import {StateInterface} from './../../redux/reducers';
@Component({
selector: 'sae-translate-texts',
imports: [FormsModule, NgClass],
templateUrl: './translate-texts.html',
styleUrl: './translate-texts.scss'
})
export class TranslateTexts {
public fromText: string = ''
public toText: string = 'résumé ici'
public loadingResume: boolean = false;
public mode: string = 'demo';
public debounceEnabled: boolean = true;
public textFocused: boolean = false;
public fileIsUploaded: boolean = false;
public filePath: string = '';
public fileWeight: string = '';
// testing display of file selector
// public fileIsUploaded: boolean = true;
// public filePath: string = 'abcd.csv';
// public fileWeight: string = '12 kb';
public fromTimeout: any;
public debounceDuration: number = 1000;
@Input() appState: any = {};
@Output() updateFilters: EventEmitter<any> = new EventEmitter();
constructor(private store: Store<StateInterface>) {
// Subscribe to the app state to get the loading state
this.store.select(state => state.app.loading).subscribe(loading => {
this.loadingResume = loading;
});
this.store.select(state => state.app).subscribe(appState => {
this.appState = appState;
});
}
onToTextChanged(e: any): void {
console.log('text changed toText', e)
// launch request
// in demo mode, fill some filters
if (this.mode !== 'production') {
// Clear any existing timeout to reset the debounce
if (this.fromTimeout) {
clearTimeout(this.fromTimeout);
}
// Set a new timeout
this.fromTimeout = setTimeout(() => {
// in demo mode, load demo filters
console.log('demo mode')
const newFilters = [
['filter demo 1', 'filter demo 2'],
['filter demo 3'],
['filter demo 4', 'filter demo ABCD'],
['filter demo 5'],
]
this.updateFilters.emit(newFilters);
this.loadingResume = false;
}, this.debounceDuration);
}
}
onFromTextChanged(e?: any): void {
console.log('text changed fromText', e)
// this.store.dispatch({})
// run research after a delay
if (this.mode !== 'production') {
this.loadingResume = true;
// Clear any existing timeout to reset the debounce
if (this.fromTimeout) {
clearTimeout(this.fromTimeout);
}
// Set a new timeout
this.fromTimeout = setTimeout(() => {
// in demo mode, make a fake resume
console.log('demo mode')
this.toText = "Résumé de démo à titre d'exemple"
this.loadingResume = false;
},
this.debounceDuration);
}
}
emptyText(someText: 'fromText' | 'toText') {
this[someText] = '';
}
onFileSelected($event: any) {
console.log('file selected', $event, $event.target.value)
if ($event.target.value) {
this.fileIsUploaded = true;
this.filePath = $event.target.value;
this.fileWeight = $event.target.value;
}
}
onRemoveFileSelected() {
this.fileIsUploaded = false;
this.filePath = '';
this.fileWeight = '';
// document.getElementById('fromText')?.focus();
}
clickFileUpload(fileUpload: HTMLInputElement) {
fileUpload.click();
console.log('click file upload', fileUpload)
}
focusFromText(e?: any) {
console.log('focus from text', e)
console.log('focus from text')
this.onRemoveFileSelected()
// this.fromText = ' '
this.textFocused = true
}
}

4
sae-csc/src/styles.scss
View file

@ -22,3 +22,7 @@ html, body {
* {
box-sizing: border-box;
}
sae-feedback-button .feedback-button {
top: 140px;
}

1
sae-csc/src/styles/_variables-barrel.scss
View file

@ -3,4 +3,5 @@
.all-pages {
padding: 70px 64px;
width: 100%;
}