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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue