-
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 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:** - 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; ```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; you can use the same value as before for the outlet name; ```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` ```ts import {inject} from '@angular/core'; import {ViewId, WorkbenchService} from '@scion/workbench'; // Before Migration const viewId: string = 'view.1'; inject(WorkbenchService).getView(viewId); // After Migration const viewId: ViewId = 'view.1'; inject(WorkbenchService).getView(viewId); ```
- Loading branch information
1 parent
9093a7e
commit 6368e2f
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.