-
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.
feat(workbench): support navigation of views in the initial layout (o…
…r perspective) Previously, views in the initial layout (or perspective) were limited to only supporting empty-path routes and could not be navigated or opened multiple times. closes #445 BREAKING CHANGE: Views in the initial layout (or perspective) must be navigated. Previously, no explicit navigation was required as the view and route were coupled via the route's outlet and the view's id. **Migrate the layout as follows:** - Navigate views added to the layout; - Pass an empty commands array to match routes with an empty path; - Pass a navigation hint to differentiate between routes with empty paths; you can use the same value as before for the view id; > See line (1) in the migration example below. **Migrate the routes as follows:** - Remove the outlet property; - Add `canMatchWorkbenchView` guard and initialize it with the hint passed to the navigation; you can use the same value as before for the outlet name; > See line (2) in the migration example below. **Example of what a migration could look like:** **Before migration:** ```ts // Workbench Layout provideWorkbench({ layout: (factory: WorkbenchLayoutFactory) => factory .addPart(MAIN_AREA) .addPart('left', {relativeTo: MAIN_AREA, align: 'left'}) .addView('navigator', {partId: 'left', activateView: true}), }); // Routes provideRouter([ { path: '', outlet: 'navigator', loadComponent: () => ..., }, ]); ``` **After migration:** ```ts // Workbench Layout provideWorkbench({ layout: (factory: WorkbenchLayoutFactory) => factory .addPart(MAIN_AREA) .addPart('left', {relativeTo: MAIN_AREA, align: 'left'}) .addView('navigator', {partId: 'left', activateView: true}) .navigateView('navigator', [], {hint: 'navigator'}), // See (1) }); // Routes provideRouter([ { path: '', canMatch: [canMatchWorkbenchView('navigator')], // See (2) loadComponent: () => ..., }, ]); ```
- Loading branch information
1 parent
9093a7e
commit 70b1c86
Showing
312 changed files
with
9,662 additions
and
5,487 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
1 change: 1 addition & 0 deletions
1
apps/workbench-client-testing-app/src/app/css-class/css-class.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 @@ | ||
| <input [formControl]="formControl" class="e2e-class" placeholder="class-1 class-2"> |
10 changes: 10 additions & 0 deletions
10
apps/workbench-client-testing-app/src/app/css-class/css-class.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,10 @@ | ||
| @use '@scion/components.internal/design' as sci-design; | ||
|
|
||
| :host { | ||
| display: inline-grid; | ||
|
|
||
| > input { | ||
| @include sci-design.style-input-field(); | ||
| min-width: 0; | ||
| } | ||
| } |
84 changes: 84 additions & 0 deletions
84
apps/workbench-client-testing-app/src/app/css-class/css-class.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,84 @@ | ||
| /* | ||
| * 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} from '@angular/core'; | ||
| import {ControlValueAccessor, NG_VALUE_ACCESSOR, NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms'; | ||
| import {noop} from 'rxjs'; | ||
| import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; | ||
| import {Arrays} from '@scion/toolkit/util'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-css-class', | ||
| templateUrl: './css-class.component.html', | ||
| styleUrls: ['./css-class.component.scss'], | ||
| standalone: true, | ||
| imports: [ | ||
| ReactiveFormsModule, | ||
| ], | ||
| providers: [ | ||
| {provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => CssClassComponent)}, | ||
| ], | ||
| }) | ||
| export class CssClassComponent implements ControlValueAccessor { | ||
|
|
||
| private _cvaChangeFn: (cssClasses: string | string[] | undefined) => void = noop; | ||
| private _cvaTouchedFn: () => void = noop; | ||
|
|
||
| protected formControl = this._formBuilder.control<string>(''); | ||
|
|
||
| constructor(private _formBuilder: NonNullableFormBuilder) { | ||
| this.formControl.valueChanges | ||
| .pipe(takeUntilDestroyed()) | ||
| .subscribe(() => { | ||
| this._cvaChangeFn(this.parse(this.formControl.value)); | ||
| this._cvaTouchedFn(); | ||
| }); | ||
| } | ||
|
|
||
| private parse(stringified: string): string[] | string | undefined { | ||
| const cssClasses = stringified.split(/\s+/).filter(Boolean); | ||
| switch (cssClasses.length) { | ||
| case 0: | ||
| return undefined; | ||
| case 1: | ||
| return cssClasses[0]; | ||
| default: | ||
| return cssClasses; | ||
| } | ||
| } | ||
|
|
||
| private stringify(cssClasses: string | string[] | undefined | null): string { | ||
| return Arrays.coerce(cssClasses).join(' '); | ||
| } | ||
|
|
||
| /** | ||
| * Method implemented as part of `ControlValueAccessor` to work with Angular forms API | ||
| * @docs-private | ||
| */ | ||
| public writeValue(cssClasses: string | string[] | undefined | null): void { | ||
| this.formControl.setValue(this.stringify(cssClasses), {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; | ||
| } | ||
| } |
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
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.