-
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. Authors: marcarrian <[email protected]>, danielwiehl <[email protected]> closes #445 BREAKING CHANGE: Views in the initial layout (or perspective) must now be navigated. Previously, no explicit navigation was required because view and route were coupled via route outlet and view id. **Migrate the layout as follows:** Explicitly navigate views, passing an empty array of commands and the view id as navigation hint. ```ts // Before Migration provideWorkbench({ layout: (factory: WorkbenchLayoutFactory) => factory .addPart(MAIN_AREA) .addPart('left', {relativeTo: MAIN_AREA, align: 'left'}) .addView('navigator', {partId: 'left', activateView: true}), }); // After Migration provideWorkbench({ layout: (factory: WorkbenchLayoutFactory) => factory .addPart(MAIN_AREA) .addPart('left', {relativeTo: MAIN_AREA, align: 'left'}) .addView('navigator', {partId: 'left', activateView: true}) // Navigate view, passing hint to match route. .navigateView('navigator', [], {hint: 'navigator'}), }); ``` **Migrate the routes as follows:** - Remove the `outlet` property; - Add `canMatchWorkbenchView` guard and initialize it with the hint passed to the navigation; ```ts // Before Migration provideRouter([ { path: '', outlet: 'navigator', loadComponent: () => ..., }, ]); // After Migration provideRouter([ { path: '', // Match route only if navigated with specified hint. canMatch: [canMatchWorkbenchView('navigator')], loadComponent: () => ..., }, ]); ``` BREAKING CHANGE: Changed type of view id from `string` to `ViewId` If storing the view id in a variable, change its type from `string` to `ViewId`.
- Loading branch information
1 parent
648e7d3
commit 48842c5
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.