CSC link state to filters
This commit is contained in:
Tykayn
tykayn
parent
0a8088b459
commit
8694a04ea9
31 changed files with 191 additions and 191 deletions
|
|
@ -8,6 +8,7 @@
|
|||
display: inline-block;
|
||||
font-family: Barlow;
|
||||
|
||||
|
||||
button {
|
||||
background: shadows.$primary-color;
|
||||
color: shadows.$neutral-white;
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<p>index works!</p>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { Index } from './index';
|
||||
|
||||
describe('Index', () => {
|
||||
let component: Index;
|
||||
let fixture: ComponentFixture<Index>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Index]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Index);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sae-main-button',
|
||||
imports: [],
|
||||
templateUrl: './index.html',
|
||||
styleUrl: './index.css'
|
||||
})
|
||||
export class Index {
|
||||
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<p>index works!</p>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { Index } from './index';
|
||||
|
||||
describe('Index', () => {
|
||||
let component: Index;
|
||||
let fixture: ComponentFixture<Index>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Index]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Index);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sae-main-button',
|
||||
imports: [],
|
||||
templateUrl: './index.html',
|
||||
styleUrl: './index.css'
|
||||
})
|
||||
export class Index {
|
||||
|
||||
}
|
||||
|
|
@ -1,7 +1,17 @@
|
|||
<div [ngClass]="{highlighted}" class="filter-group">
|
||||
<div class="selectors">
|
||||
<sae-multi-selector [label]="'Engine type'"></sae-multi-selector>
|
||||
<sae-multi-selector [label]="'Findings'"></sae-multi-selector>
|
||||
<sae-multi-selector
|
||||
(availableChoicesChange)="onAvailableChoicesChange"
|
||||
(selectedChoicesChange)="onSelectedChoicesChange"
|
||||
[availableChoices]="appState.filters.engineType.availableChoices"
|
||||
[label]="'Engine type'"
|
||||
[selectedChoices]="appState.filters.engineType.selectedChoices"
|
||||
></sae-multi-selector>
|
||||
<sae-multi-selector
|
||||
|
||||
[disabled]="true" [label]="'Findings'"
|
||||
[selectedChoices]="[]"
|
||||
></sae-multi-selector>
|
||||
<sae-multi-selector [label]="'ATA'"></sae-multi-selector>
|
||||
<sae-multi-selector [label]="'Part number'"></sae-multi-selector>
|
||||
<sae-multi-selector [label]="'Technical Manual'"></sae-multi-selector>
|
||||
|
|
|
|||
|
|
@ -17,10 +17,8 @@
|
|||
position: relative;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -13,4 +13,13 @@ import {NgClass} from '@angular/common';
|
|||
})
|
||||
export class FiltersGroup {
|
||||
@Input() highlighted = false;
|
||||
@Input() appState: any = {};
|
||||
|
||||
onSelectedChoicesChange(e: any) {
|
||||
console.log('onSelectedChoicesChange', e);
|
||||
}
|
||||
|
||||
onAvailableChoicesChange(e: any) {
|
||||
console.log('onSelectedChoicesChange', e);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<p>index works!</p>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { Index } from './index';
|
||||
|
||||
describe('Index', () => {
|
||||
let component: Index;
|
||||
let fixture: ComponentFixture<Index>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Index]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Index);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sae-main-button',
|
||||
imports: [],
|
||||
templateUrl: './index.html',
|
||||
styleUrl: './index.css'
|
||||
})
|
||||
export class Index {
|
||||
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<p>index works!</p>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { Index } from './index';
|
||||
|
||||
describe('Index', () => {
|
||||
let component: Index;
|
||||
let fixture: ComponentFixture<Index>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Index]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Index);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sae-main-button',
|
||||
imports: [],
|
||||
templateUrl: './index.html',
|
||||
styleUrl: './index.css'
|
||||
})
|
||||
export class Index {
|
||||
|
||||
}
|
||||
|
|
@ -13,6 +13,8 @@
|
|||
name="from_text"
|
||||
placeholder=""
|
||||
rows="10"></textarea>
|
||||
|
||||
<sae-main-button></sae-main-button>
|
||||
<button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
|
||||
<i class="ri-upload-cloud-2-line"></i>
|
||||
<span class="label">
|
||||
|
|
|
|||
|
|
@ -31,6 +31,10 @@
|
|||
font-weight: 400;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.click-file-upload {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
#fromText {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import {Component, EventEmitter, Output} from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {Index} from '../index';
|
||||
|
||||
@Component({
|
||||
selector: 'sae-translate-texts',
|
||||
standalone: true,
|
||||
imports: [FormsModule],
|
||||
imports: [FormsModule, Index],
|
||||
templateUrl: './translate-texts.html',
|
||||
styleUrl: './translate-texts.scss'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,40 +1,61 @@
|
|||
<!-- sélecteurs-->
|
||||
<div class="input-box">
|
||||
<div [ngClass]="{
|
||||
'is-disabled': disabled
|
||||
}"
|
||||
class="input-box"
|
||||
>
|
||||
@if (selectedChoices?.length) {
|
||||
<div class="selected-items-counter">
|
||||
{{ selectedChoices.length }}
|
||||
</div>
|
||||
}
|
||||
<i class="ri-search-line search-placeholder"></i>
|
||||
<div class="label">
|
||||
<span class="d-none">
|
||||
{{ label }}
|
||||
</span>
|
||||
</div>
|
||||
<input (blur)="displayDropdown = false" (click)="displayDropdown= !displayDropdown" (focus)="displayDropdown = true"
|
||||
class="is-hidden" placeholder="{{label}}"
|
||||
type="text">
|
||||
@if (displayDropdown) {
|
||||
<!-- (blur)="displayDropdown = false" -->
|
||||
<input
|
||||
|
||||
(click)="onClickInput()" (focus)="displayDropdown = true"
|
||||
class="is-hidden" placeholder="{{label}}"
|
||||
type="text">
|
||||
<div class="dropdown-button selector-button">
|
||||
<!-- bouton-->
|
||||
<i class="ri-arrow-down-s-line"></i>
|
||||
</div>
|
||||
|
||||
@if (displayDropdown && availableChoices?.length) {
|
||||
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-button selector-button">
|
||||
<!-- bouton-->
|
||||
<i class="ri-arrow-down-s-line"></i>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-list">
|
||||
<!-- selected:-->
|
||||
<div class="selected-items">
|
||||
|
||||
@for (sc of selectedChoices; track sc) {
|
||||
<div class="dropdown-item">
|
||||
<div class="dropdown-item"
|
||||
(click)="selectedChoicesChangeToggleItem(sc)"
|
||||
>
|
||||
|
||||
<i class="ri-checkbox-line"></i>
|
||||
{{ sc }}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<hr>
|
||||
@if (selectedChoices?.length && availableChoices?.length) {
|
||||
|
||||
<hr>
|
||||
}
|
||||
<div class="available-items">
|
||||
<!-- available:-->
|
||||
@for (c of choices; track c) {
|
||||
<div class="dropdown-item">
|
||||
@for (ac of availableChoices; track ac) {
|
||||
<div class="dropdown-item"
|
||||
(click)="availableChoicesChangeToggleItem(ac)"
|
||||
>
|
||||
<i class="ri-checkbox-blank-line"></i>
|
||||
{{ c }}
|
||||
{{ ac }}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
top: 10px;
|
||||
}
|
||||
|
||||
.disabled & {
|
||||
&.is-disabled {
|
||||
color: #525668;
|
||||
fill: #525668;
|
||||
}
|
||||
|
|
@ -34,8 +34,20 @@
|
|||
}
|
||||
|
||||
.selector-button {
|
||||
top: -30px;
|
||||
right: -177px;
|
||||
top: -36px;
|
||||
right: -165px;
|
||||
}
|
||||
|
||||
.selected-items-counter {
|
||||
background: blue;
|
||||
color: white;
|
||||
border-radius: 200px;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
line-height: 10px;
|
||||
position: relative;
|
||||
top: 33px;
|
||||
left: 136px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -57,7 +69,7 @@
|
|||
font-size: var(--Font-Base, 14px);
|
||||
|
||||
|
||||
.disabled & {
|
||||
.is-disabled & {
|
||||
border-color: #525668;
|
||||
}
|
||||
}
|
||||
|
|
@ -68,6 +80,19 @@
|
|||
border-radius: 8px;
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
top: -28px;
|
||||
border-left: 1px solid #8D91A4;
|
||||
border-bottom: 1px solid #8D91A4;
|
||||
border-right: 1px solid #8D91A4;
|
||||
|
||||
.dropdown-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 4px;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,57 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {NgClass} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'sae-multi-selector',
|
||||
imports: [],
|
||||
imports: [
|
||||
NgClass
|
||||
],
|
||||
templateUrl: './multi-selector.html',
|
||||
styleUrl: './multi-selector.scss'
|
||||
})
|
||||
export class MultiSelector {
|
||||
@Input() disabled: boolean = false;
|
||||
@Input() label!: string;
|
||||
@Input() choices: any = ['choix 1', 'choix 2', 'choix 3'];
|
||||
@Input() selectedChoices: any = ['choix 4'];
|
||||
displayDropdown = true;
|
||||
// @Input() store: any;
|
||||
// @Input() ActionTypes: any;
|
||||
@Input() availableChoices: any = ['choix 1', 'choix 2', 'choix 3'];
|
||||
@Input() selectedChoices: any = ['choix 4', 'choix 5'];
|
||||
@Input() displayDropdown: boolean = false;
|
||||
@Output() selectedChoicesChange = new EventEmitter<any>();
|
||||
@Output() availableChoicesChange = new EventEmitter<any>();
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
selectedChoicesChangeToggleItem(choice: any) {
|
||||
console.log('toggle selected choice ', choice, 'in filter ', this.label);
|
||||
this.selectedChoicesChange.emit(choice);
|
||||
// console.log(choice);
|
||||
// this.store.dispatch({
|
||||
// type: this.ActionTypes.UPDATE_FILTER,
|
||||
// payload: {
|
||||
// filter: this.label,
|
||||
// selectedChoice: choice
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
availableChoicesChangeToggleItem(choice: any) {
|
||||
this.availableChoicesChange.emit(choice);
|
||||
console.log('toggle available choice ', choice, 'in filter ', this.label);
|
||||
// this.store.dispatch({
|
||||
// type: this.ActionTypes.UPDATE_FILTER,
|
||||
// payload: {
|
||||
// filter: this.label,
|
||||
// availableChoice: choice
|
||||
// }
|
||||
// }
|
||||
// )
|
||||
}
|
||||
|
||||
onClickInput() {
|
||||
if (this.disabled) return;
|
||||
this.displayDropdown = !this.displayDropdown
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<sae-translate-texts></sae-translate-texts>
|
||||
</div>
|
||||
<!-- analyse de question-->
|
||||
<div id="question_alaysis">
|
||||
<div id="question_analysis">
|
||||
<h2 class="title">
|
||||
Question analysis
|
||||
</h2>
|
||||
|
|
@ -35,8 +35,7 @@
|
|||
<!--filters-->
|
||||
<!-- advanced filters-->
|
||||
<div class="filters-container">
|
||||
|
||||
<sae-filters-group></sae-filters-group>
|
||||
<sae-filters-group (selectionchange)="onSelectedChoicesChange" [appState]="appState"></sae-filters-group>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,31 @@
|
|||
.magic-text {
|
||||
color: #A86CFD;
|
||||
font-family: Barlow;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
:host {
|
||||
|
||||
i {
|
||||
font-size: 1.25em;
|
||||
margin-left: 2px;
|
||||
#question_analysis {
|
||||
sae-bot-talks {
|
||||
top: -50px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#translation_request {
|
||||
.helper {
|
||||
padding-left: 2.65vw;
|
||||
padding-bottom: 16px;
|
||||
.magic-text {
|
||||
color: #A86CFD;
|
||||
font-family: Barlow;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
|
||||
i {
|
||||
font-size: 1.25em;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#translation_request {
|
||||
.helper {
|
||||
padding-left: 2.65vw;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ 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';
|
||||
import {BotTalks} from 'sae-lib/chatbot/bot-talks/bot-talks';
|
||||
import {Store} from '@ngrx/store';
|
||||
import {StateInterface} from '../../redux/reducers';
|
||||
|
||||
|
||||
@Component({
|
||||
|
|
@ -20,4 +22,20 @@ import {BotTalks} from 'sae-lib/chatbot/bot-talks/bot-talks';
|
|||
})
|
||||
export class Main {
|
||||
|
||||
public appState: any = {};
|
||||
|
||||
constructor(private store: Store<StateInterface>) {
|
||||
this.store.select(state => state.app).subscribe(app => {
|
||||
this.appState = app;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
onSelectedChoicesChange(e: any) {
|
||||
console.log('onSelectedChoicesChange', e);
|
||||
}
|
||||
|
||||
onAvailableChoicesChange(e: any) {
|
||||
console.log('onSelectedChoicesChange', e);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ export const initialState: StateInterface = {
|
|||
toText: "",
|
||||
filters: {
|
||||
engineType: {
|
||||
availableList: {},
|
||||
selectedList: {}
|
||||
availableList: ['choix 1'],
|
||||
selectedList: ['choix 2']
|
||||
},
|
||||
findings: {
|
||||
availableList: {},
|
||||
|
|
|
|||
|
|
@ -66,8 +66,8 @@ export type Theme = 'light' | 'dark';
|
|||
export type Lang = 'fr_FR' | 'en_US';
|
||||
|
||||
export type SelectFilterType = {
|
||||
availableList: object;
|
||||
selectedList: object;
|
||||
availableList: any;
|
||||
selectedList: any;
|
||||
}
|
||||
|
||||
export type technicalManualType = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue