-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add tests and rename selector of MainAreaPartComponent to 'wb-part[da…
…ta-partid="main-area"]
- Loading branch information
1 parent
198ac0a
commit 04f18bf
Showing
41 changed files
with
603 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
...bench-testing-app/src/app/layout-page/tables/navigate-parts/navigate-parts.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <form [formGroup]="form"> | ||
| <span>Part ID</span> | ||
| <span>Path</span> | ||
| <span>Hint</span> | ||
| <span>Data</span> | ||
| <span>State</span> | ||
| <span>CSS Class(es)</span> | ||
| <button (click)="onAddNavigation()" class="e2e-add" title="Add navigation" sciMaterialIcon>add</button> | ||
|
|
||
| @for (navigationFormGroup of form.controls.navigations.controls; track $index) { | ||
| <!-- ID --> | ||
| <input [formControl]="navigationFormGroup.controls.id" class="e2e-part-id" [attr.list]="partList"> | ||
| <!-- Commands --> | ||
| <app-router-commands [formControl]="navigationFormGroup.controls.commands"/> | ||
| <!-- Hint --> | ||
| <input [formControl]="navigationFormGroup.controls.extras.controls.hint" class="e2e-hint"> | ||
| <!-- Data --> | ||
| <app-record [formControl]="navigationFormGroup.controls.extras.controls.data" class="e2e-data"/> | ||
| <!-- State --> | ||
| <app-record [formControl]="navigationFormGroup.controls.extras.controls.state" class="e2e-state"/> | ||
| <!-- CSS class --> | ||
| <app-css-class [formControl]="navigationFormGroup.controls.extras.controls.cssClass"/> | ||
| <!-- Remove button --> | ||
| <button class="e2e-remove" (click)="onRemoveNavigation($index)" title="Remove navigation" sciMaterialIcon>remove</button> | ||
| } | ||
| </form> | ||
|
|
||
| <datalist [attr.id]="partList"> | ||
| @for (part of partProposals; track part) { | ||
| <option [value]="part">{{part}}</option> | ||
| } | ||
| </datalist> |
16 changes: 16 additions & 0 deletions
16
...bench-testing-app/src/app/layout-page/tables/navigate-parts/navigate-parts.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| @use '@scion/components.internal/design' as sci-design; | ||
|
|
||
| :host { | ||
| display: grid; | ||
|
|
||
| > form { | ||
| display: grid; | ||
| grid-template-columns: 7.5em 1fr 10em 14em 14em 10em auto; | ||
| gap: .5em .75em; | ||
| align-items: center; | ||
|
|
||
| > input { | ||
| @include sci-design.style-input-field(); | ||
| } | ||
| } | ||
| } |
151 changes: 151 additions & 0 deletions
151
...rkbench-testing-app/src/app/layout-page/tables/navigate-parts/navigate-parts.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| /* | ||
| * Copyright (c) 2018-2024 Swiss Federal Railways | ||
| * | ||
| * This program and the accompanying materials are made | ||
| * available under the terms of the Eclipse Public License 2.0 | ||
| * which is available at https://www.eclipse.org/legal/epl-2.0/ | ||
| * | ||
| * SPDX-License-Identifier: EPL-2.0 | ||
| */ | ||
|
|
||
| import {Component, forwardRef, Input} from '@angular/core'; | ||
| import {noop} from 'rxjs'; | ||
| import {AbstractControl, ControlValueAccessor, FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, NonNullableFormBuilder, ReactiveFormsModule, ValidationErrors, Validator, Validators} from '@angular/forms'; | ||
| import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; | ||
| import {SciMaterialIconDirective} from '@scion/components.internal/material-icon'; | ||
| import {Commands, NavigationData, NavigationState} from '@scion/workbench'; | ||
| import {RouterCommandsComponent} from '../../../router-commands/router-commands.component'; | ||
| import {CssClassComponent} from '../../../css-class/css-class.component'; | ||
| import {UUID} from '@scion/toolkit/uuid'; | ||
| import {RecordComponent} from '../../../record/record.component'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-navigate-parts', | ||
| templateUrl: './navigate-parts.component.html', | ||
| styleUrls: ['./navigate-parts.component.scss'], | ||
| standalone: true, | ||
| imports: [ | ||
| ReactiveFormsModule, | ||
| SciMaterialIconDirective, | ||
| RouterCommandsComponent, | ||
| RecordComponent, | ||
| CssClassComponent, | ||
| ], | ||
| providers: [ | ||
| {provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => NavigatePartsComponent)}, | ||
| {provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => NavigatePartsComponent)}, | ||
| ], | ||
| }) | ||
| export class NavigatePartsComponent implements ControlValueAccessor, Validator { | ||
|
|
||
| private _cvaChangeFn: (value: NavigationDescriptor[]) => void = noop; | ||
| private _cvaTouchedFn: () => void = noop; | ||
|
|
||
| @Input({transform: arrayAttribute}) | ||
| public partProposals: string[] = []; | ||
|
|
||
| protected form = this._formBuilder.group({ | ||
| navigations: this._formBuilder.array<FormGroup<{ | ||
| id: FormControl<string>; | ||
| commands: FormControl<Commands>; | ||
| extras: FormGroup<{ | ||
| hint: FormControl<string | undefined>; | ||
| data: FormControl<NavigationData | undefined>; | ||
| state: FormControl<NavigationState | undefined>; | ||
| cssClass: FormControl<string | string[] | undefined>; | ||
| }>; | ||
| }>>([]), | ||
| }); | ||
| protected partList = `part-list-${UUID.randomUUID()}`; | ||
|
|
||
| constructor(private _formBuilder: NonNullableFormBuilder) { | ||
| this.form.valueChanges | ||
| .pipe(takeUntilDestroyed()) | ||
| .subscribe(() => { | ||
| this._cvaChangeFn(this.form.controls.navigations.controls.map(navigationFormGroup => ({ | ||
| id: navigationFormGroup.controls.id.value, | ||
| commands: navigationFormGroup.controls.commands.value, | ||
| extras: ({ | ||
| hint: navigationFormGroup.controls.extras.controls.hint.value || undefined, | ||
| data: navigationFormGroup.controls.extras.controls.data.value, | ||
| state: navigationFormGroup.controls.extras.controls.state.value, | ||
| cssClass: navigationFormGroup.controls.extras.controls.cssClass.value, | ||
| }), | ||
| }))); | ||
| this._cvaTouchedFn(); | ||
| }); | ||
| } | ||
|
|
||
| protected onAddNavigation(): void { | ||
| this.addNavigation({ | ||
| id: '', | ||
| commands: [], | ||
| }); | ||
| } | ||
|
|
||
| protected onRemoveNavigation(index: number): void { | ||
| this.form.controls.navigations.removeAt(index); | ||
| } | ||
|
|
||
| private addNavigation(navigation: NavigationDescriptor, options?: {emitEvent?: boolean}): void { | ||
| this.form.controls.navigations.push( | ||
| this._formBuilder.group({ | ||
| id: this._formBuilder.control<string>(navigation.id, Validators.required), | ||
| commands: this._formBuilder.control<Commands>(navigation.commands), | ||
| extras: this._formBuilder.group({ | ||
| hint: this._formBuilder.control<string | undefined>(navigation.extras?.hint), | ||
| data: this._formBuilder.control<NavigationData | undefined>(navigation.extras?.data), | ||
| state: this._formBuilder.control<NavigationState | undefined>(navigation.extras?.state), | ||
| cssClass: this._formBuilder.control<string | string[] | undefined>(undefined), | ||
| }), | ||
| }), {emitEvent: options?.emitEvent ?? true}); | ||
| } | ||
|
|
||
| /** | ||
| * Method implemented as part of `ControlValueAccessor` to work with Angular forms API | ||
| * @docs-private | ||
| */ | ||
| public writeValue(navigations: NavigationDescriptor[] | undefined | null): void { | ||
| this.form.controls.navigations.clear({emitEvent: false}); | ||
| navigations?.forEach(navigation => this.addNavigation(navigation, {emitEvent: false})); | ||
| } | ||
|
|
||
| /** | ||
| * Method implemented as part of `ControlValueAccessor` to work with Angular forms API | ||
| * @docs-private | ||
| */ | ||
| public registerOnChange(fn: any): void { | ||
| this._cvaChangeFn = fn; | ||
| } | ||
|
|
||
| /** | ||
| * Method implemented as part of `ControlValueAccessor` to work with Angular forms API | ||
| * @docs-private | ||
| */ | ||
| public registerOnTouched(fn: any): void { | ||
| this._cvaTouchedFn = fn; | ||
| } | ||
|
|
||
| /** | ||
| * Method implemented as part of `Validator` to work with Angular forms API | ||
| * @docs-private | ||
| */ | ||
| public validate(control: AbstractControl): ValidationErrors | null { | ||
| return this.form.controls.navigations.valid ? null : {valid: false}; | ||
| } | ||
| } | ||
|
|
||
| export interface NavigationDescriptor { | ||
| id: string; | ||
| commands: Commands; | ||
| extras?: { | ||
| hint?: string; | ||
| data?: NavigationData; | ||
| state?: NavigationState; | ||
| cssClass?: string | string[]; | ||
| }; | ||
| } | ||
|
|
||
| function arrayAttribute(proposals: string[] | null | undefined): string[] { | ||
| return proposals ?? []; | ||
| } |
2 changes: 0 additions & 2 deletions
2
apps/workbench-testing-app/src/app/router-page/router-page.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.