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

up storybook main button

Browse source
This commit is contained in:
Tykayn 2025-09-17 15:41:04 +02:00 • committed by tykayn
parent 4af14e6e34
commit d5610f38be
15 changed files with 339 additions and 547 deletions
Download patch file Download diff file Expand all files Collapse all files

8
my-workspace/projects/sae-lib/buttons/main-button/main-button.scss
View file

@ -10,7 +10,8 @@
button {
background: shadows.$primary-color;
background: transparent;
color: shadows.$neutral-white;
border-radius: shadows.$radius-main;
padding: 1rem 2rem;
@ -81,6 +82,11 @@
background: var(--Hover, linear-gradient(70deg, #073A7C 43.99%, #1767AD 94.38%, #255B8E 126.68%));
}
&:focus {
border: 3px solid var(--Colors-Principal-100, #96BEE4);
background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
}
&.is-disabled {
background-color: #BED7EE;
color: white;

55
my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
View file

@ -1,23 +1,60 @@
<div [ngClass]="{highlighted, 'is-disabled': disabled}" class="filter-group">
<div class="selectors">
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange"
(selectedChoicesChange)="onSelectedChoicesChange"
(availableChoicesChange)="onAvailableChoicesChange($event, 'engineType')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'engineType')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters.engineType.availableChoices"
[availableChoices]="appState.filters?.engineType?.availableChoices || []"
[disabled]="disabled"
[label]="'Engine type'"
[selectedChoices]="appState.filters.engineType.selectedChoices"
[selectedChoices]="appState.filters?.engineType?.selectedChoices || []"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'findings')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'findings')"
[actionTypes]="actionTypes"
[label]="'Findings'"
[selectedChoices]="[]"
[selectedChoices]="appState.filters?.findings?.selectedChoices || []"
[availableChoices]="appState.filters?.findings?.availableChoices || []"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'ata')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'ata')"
[actionTypes]="actionTypes"
[label]="'ATA'"
[selectedChoices]="appState.filters?.ata?.selectedChoices || []"
[availableChoices]="appState.filters?.ata?.availableChoices || []"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'partNumber')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'partNumber')"
[actionTypes]="actionTypes"
[label]="'Part number'"
[selectedChoices]="appState.filters?.partNumber?.selectedChoices || []"
[availableChoices]="appState.filters?.partNumber?.availableChoices || []"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'technicalManual')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'technicalManual')"
[actionTypes]="actionTypes"
[label]="'Technical Manual'"
[selectedChoices]="appState.filters?.technicalManual?.selectedChoices || []"
[availableChoices]="appState.filters?.technicalManual?.availableChoices || []"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'wingStatus')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'wingStatus')"
[actionTypes]="actionTypes"
[label]="'On-wing/off-wing'"
[selectedChoices]="appState.filters?.wingStatus?.selectedChoices || []"
[availableChoices]="appState.filters?.wingStatus?.availableChoices || []"
[store]="store"
></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>
<sae-multi-selector [label]="'On-wing/off-wing'"></sae-multi-selector>
</div>
<div (click)="highlighted = !highlighted" class="chips-listing">
<!-- liste de chips-->

26
my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts
View file

@ -24,11 +24,29 @@ export class FiltersGroup {
console.log('constructor filters group', this.appState, this.store, this.actionTypes);
}
onSelectedChoicesChange(e: any) {
console.log('onSelectedChoicesChange', e);
onSelectedChoicesChange(choice: any, filterType: string) {
console.log('onSelectedChoicesChange', choice, 'for filter', filterType);
if (this.store && this.actionTypes) {
this.store.dispatch({
type: this.actionTypes.UPDATE_FILTER,
payload: {
filter: filterType,
selectedChoice: choice
}
});
}
}
onAvailableChoicesChange(e: any) {
console.log('onSelectedChoicesChange', e);
onAvailableChoicesChange(choice: any, filterType: string) {
console.log('onAvailableChoicesChange', choice, 'for filter', filterType);
if (this.store && this.actionTypes) {
this.store.dispatch({
type: this.actionTypes.UPDATE_FILTER,
payload: {
filter: filterType,
availableChoice: choice
}
});
}
}
}

4
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
View file

@ -16,11 +16,11 @@ export class MultiSelector {
// @Input() ActionTypes: any;
@Input() availableChoices: any = ['choix 1', 'choix 2', 'choix 3'];
@Input() selectedChoices: any = ['choix 4', 'choix 5'];
@Input() displayDropdown: boolean = false;
@Input() displayDropdown: boolean = true;
@Input() store: any;
@Input() actionTypes: any;
@Output() selectedChoicesChange = new EventEmitter<any>();
@Output() availableChoicesChange = new EventEmitter<any>();