styling multi filters
This commit is contained in:
Tykayn
tykayn
parent
a359d0f9b1
commit
4ef8d42da2
23 changed files with 205 additions and 120 deletions
|
|
@ -17,11 +17,6 @@ export class FeedbackButton {
|
|||
submitSuccess: boolean = false;
|
||||
submitError: boolean = false;
|
||||
|
||||
// constructor(
|
||||
// private store: Store<StateInterface>,
|
||||
// private apiService: ApiService
|
||||
// ) {
|
||||
// }
|
||||
|
||||
toggleModal() {
|
||||
this.isModalOpen = !this.isModalOpen;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<div [ngClass]="{highlighted}" class="filter-group">
|
||||
<div [ngClass]="{highlighted, 'is-disabled': disabled}" class="filter-group">
|
||||
<div class="selectors">
|
||||
<sae-multi-selector
|
||||
(availableChoicesChange)="onAvailableChoicesChange"
|
||||
(selectedChoicesChange)="onSelectedChoicesChange"
|
||||
[actionTypes]="actionTypes"
|
||||
[availableChoices]="appState.filters.engineType.availableChoices"
|
||||
[disabled]="disabled"
|
||||
[label]="'Engine type'"
|
||||
[selectedChoices]="appState.filters.engineType.selectedChoices"
|
||||
[store]="store"
|
||||
></sae-multi-selector>
|
||||
<sae-multi-selector
|
||||
|
||||
[disabled]="true" [label]="'Findings'"
|
||||
[label]="'Findings'"
|
||||
[selectedChoices]="[]"
|
||||
></sae-multi-selector>
|
||||
<sae-multi-selector [label]="'ATA'"></sae-multi-selector>
|
||||
|
|
@ -21,38 +21,30 @@
|
|||
</div>
|
||||
<div (click)="highlighted = !highlighted" class="chips-listing">
|
||||
<!-- liste de chips-->
|
||||
|
||||
<pre>
|
||||
filters:
|
||||
{{ appState.filters }}
|
||||
</pre>
|
||||
<div class="chips-column">
|
||||
<!-- @for( elem in appState.filters.engineType.selectedChoices; track elem.label ){-->
|
||||
<!-- <button class="button chips is-rounded is-small">-->
|
||||
|
||||
<button class="button chips is-rounded is-small">
|
||||
|
||||
filtre c1 1
|
||||
<span class="post-button">
|
||||
x
|
||||
</span>
|
||||
</button>
|
||||
<button class="button chips is-rounded is-small">
|
||||
|
||||
filtre c1 2
|
||||
<span class="post-button">
|
||||
x
|
||||
</span>
|
||||
</button>
|
||||
<button class="button chips is-rounded is-small">
|
||||
|
||||
filtre c1 3
|
||||
<span class="post-button">
|
||||
x
|
||||
</span>
|
||||
</button>
|
||||
<!-- {{elem.label}}-->
|
||||
<!-- <span class="post-button">-->
|
||||
<!-- x-->
|
||||
<!-- </span>-->
|
||||
<!-- </button>-->
|
||||
<!-- }-->
|
||||
</div>
|
||||
<div class="chips-column">
|
||||
<!-- <div class="chips-column">-->
|
||||
|
||||
<button class="button chips is-rounded is-small">
|
||||
filtre col 2
|
||||
<span class="post-button">
|
||||
x
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- <button class="button chips is-rounded is-small">-->
|
||||
<!-- filtre col 2-->
|
||||
<!-- <span class="post-button">-->
|
||||
<!-- x-->
|
||||
<!-- </span>-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
|
||||
:host {
|
||||
|
||||
.translate-texts {
|
||||
width: 1312px;
|
||||
}
|
||||
|
||||
.selectors {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
gap: 5px;
|
||||
|
||||
sae-multi-selector {
|
||||
margin-left: 20px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
|
@ -20,7 +20,6 @@
|
|||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -46,8 +45,11 @@
|
|||
.chips-listing {
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
top: 577px;
|
||||
}
|
||||
|
||||
|
||||
.filter-group {
|
||||
|
||||
|
||||
|
|
@ -65,9 +67,11 @@
|
|||
margin-top: 16px;
|
||||
border-radius: 4px;
|
||||
background: variables.$csc-filters-box-color;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
|
||||
width: 1332px;
|
||||
height: 208px;
|
||||
padding: 12px;
|
||||
overflow-y: auto;
|
||||
|
||||
.chips-column {
|
||||
padding-right: 10px;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,11 @@ export class FiltersGroup {
|
|||
@Input() appState: any = {};
|
||||
@Input() store: any;
|
||||
@Input() actionTypes: any;
|
||||
@Input() disabled!: boolean;
|
||||
|
||||
constructor() {
|
||||
console.log('constructor filters group', this.appState, this.store, this.actionTypes);
|
||||
}
|
||||
|
||||
onSelectedChoicesChange(e: any) {
|
||||
console.log('onSelectedChoicesChange', e);
|
||||
|
|
|
|||
|
|
@ -1,70 +0,0 @@
|
|||
<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()"
|
||||
[(ngModel)]="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>
|
||||
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
@use '../../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: #F2F2F2;
|
||||
color: grey;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
float: right;
|
||||
width: 37px;
|
||||
visibility: hidden;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: #888;
|
||||
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: 100px;
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
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();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
import {Component, EventEmitter, Output} from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {NgClass} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'sae-translate-texts',
|
||||
standalone: true,
|
||||
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;
|
||||
@Output() updateFilters: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
|
||||
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)
|
||||
// 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
|
||||
}
|
||||
}
|
||||
|
|
@ -12,14 +12,15 @@
|
|||
{{ label }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- (blur)="displayDropdown = false"-->
|
||||
<input
|
||||
(blur)="displayDropdown = false"
|
||||
(click)="onClickInput()" (focus)="displayDropdown = true"
|
||||
(click)="onClickInput()"
|
||||
(focus)="displayDropdown = true"
|
||||
class="is-hidden" placeholder="{{label}}"
|
||||
type="text">
|
||||
<span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
|
||||
class="selected-items-counter">
|
||||
{{ selectedChoices?.length }}
|
||||
{{ selectedChoices?.length || 0 }}
|
||||
</span>
|
||||
<div class="dropdown-button selector-button">
|
||||
<!-- bouton-->
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
:host {
|
||||
|
||||
.input-box {
|
||||
margin-left: -1rem;
|
||||
width: 220px;
|
||||
|
||||
.d-none {
|
||||
display: none;
|
||||
|
|
@ -36,11 +36,14 @@
|
|||
}
|
||||
|
||||
.selector-button {
|
||||
top: -32px;
|
||||
right: -183px;
|
||||
top: -60px;
|
||||
left: 188px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.selected-items-counter {
|
||||
visibility: hidden;
|
||||
|
||||
background: variables.$csc-chips-bg-color;
|
||||
color: white;
|
||||
border-radius: 200px;
|
||||
|
|
@ -48,9 +51,11 @@
|
|||
display: inline-block;
|
||||
line-height: 10px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: -53px;
|
||||
visibility: hidden;
|
||||
z-index: 11;
|
||||
height: 30px;
|
||||
top: -36px;
|
||||
right: 65px;
|
||||
|
||||
|
||||
&.is-visible {
|
||||
visibility: visible;
|
||||
|
|
@ -64,7 +69,6 @@
|
|||
border: 1px solid #8D91A4;
|
||||
background: var(--color-background-card-on-base, #FFF);
|
||||
|
||||
|
||||
padding: 10px 40px;
|
||||
|
||||
width: 210px;
|
||||
|
|
@ -90,8 +94,9 @@
|
|||
z-index: 10;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
width: 210px;
|
||||
|
||||
top: -28px;
|
||||
top: -59px;
|
||||
border-left: 1px solid #8D91A4;
|
||||
border-bottom: 1px solid #8D91A4;
|
||||
border-right: 1px solid #8D91A4;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"inbox/translate-texts/**/*.ts"
|
||||
"../../../sae-csc/src/app/shared/translate-texts/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"**/*.spec.ts"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue