-
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): enable action contribution to specific parts or part…
…s in a specific area
BREAKING CHANGE: Programmatic contribution of part actions has changed.
To migrate
- specify a Portal instead of a `ComponentRef` or `TemplateRef`
- replace `WorkbenchPart.registerPartAction` with `WorkbenchService.registerPartAction`
```ts
const workbenchService = inject(WorkbenchService);
workbenchService.registerPartAction({
portal: new ComponentPortal(YourComponent),
target: {
partId: ['console', 'navigator'],
},
});
```- Loading branch information
1 parent
a3afa6b
commit 10b5f6a
Showing
57 changed files
with
1,222 additions
and
610 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
12 changes: 9 additions & 3 deletions
12
apps/workbench-testing-app/src/app/layout-page/layout-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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,17 @@ | ||
| <sci-tabbar> | ||
| <ng-template sciTab label="Add Part" cssClass="e2e-add-part"> | ||
| <app-add-part-page></app-add-part-page> | ||
| <app-add-part-page/> | ||
| </ng-template> | ||
| <ng-template sciTab label="Add View" cssClass="e2e-add-view"> | ||
| <app-add-view-page></app-add-view-page> | ||
| <app-add-view-page/> | ||
| </ng-template> | ||
| <ng-template sciTab label="Activate View" cssClass="e2e-activate-view"> | ||
| <app-activate-view-page></app-activate-view-page> | ||
| <app-activate-view-page/> | ||
| </ng-template> | ||
| <ng-template sciTab label="Register Part Action" cssClass="e2e-register-part-action"> | ||
| <app-register-part-action-page/> | ||
| </ng-template> | ||
| <ng-template sciTab label="Register Angular Route" cssClass="e2e-register-route"> | ||
| <app-register-route-page/> | ||
| </ng-template> | ||
| </sci-tabbar> |
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
58 changes: 58 additions & 0 deletions
58
...pp/src/app/layout-page/register-part-action-page/register-part-action-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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <form [formGroup]="form" autocomplete="off"> | ||
| <section> | ||
| <sci-form-field label="Content"> | ||
| <input [formControlName]="CONTENT" class="e2e-content"> | ||
| </sci-form-field> | ||
|
|
||
| <sci-form-field label="Align"> | ||
| <select [formControlName]="ALIGN" class="e2e-align"> | ||
| <option value="">--</option> | ||
| <option value="start">start</option> | ||
| <option value="end">end</option> | ||
| </select> | ||
| </sci-form-field> | ||
|
|
||
| <sci-form-field label="CSS Class(es)"> | ||
| <input [formControlName]="CSS_CLASS" class="e2e-class" placeholder="Separate multiple CSS classes by space"> | ||
| </sci-form-field> | ||
| </section> | ||
|
|
||
| <section [formGroupName]="TARGET" class="e2e-target"> | ||
| <header>Target</header> | ||
|
|
||
| <sci-form-field label="View(s)"> | ||
| <input [formControlName]="VIEW" class="e2e-view-id" list="views" placeholder="Separate multiple views by space"> | ||
| <datalist id="views"> | ||
| <option *ngFor="let view of workbenchService.views$ | async" [value]="view.id">{{view.id}}</option> | ||
| </datalist> | ||
| </sci-form-field> | ||
|
|
||
| <sci-form-field label="Part(s)"> | ||
| <input [formControlName]="PART" class="e2e-part-id" list="parts" placeholder="Separate multiple parts by space"> | ||
| <datalist id="parts"> | ||
| <option *ngFor="let part of workbenchService.parts$ | async" [value]="part.id">{{part.id}}</option> | ||
| </datalist> | ||
| </sci-form-field> | ||
|
|
||
| <sci-form-field label="Area"> | ||
| <input [formControlName]="AREA" class="e2e-area" list="areas"> | ||
| <datalist id="areas"> | ||
| <option value="">--</option> | ||
| <option value="main">Main Area</option> | ||
| <option value="peripheral">Peripheral Area</option> | ||
| </datalist> | ||
| </sci-form-field> | ||
| </section> | ||
|
|
||
| <button (click)="onRegister()" [disabled]="form.invalid" class="e2e-register"> | ||
| Register | ||
| </button> | ||
| </form> | ||
|
|
||
| <output class="register-success e2e-register-success" *ngIf="registerError === false"> | ||
| Success | ||
| </output> | ||
|
|
||
| <output class="register-error e2e-register-error" *ngIf="registerError"> | ||
| {{registerError}} | ||
| </output> |
41 changes: 41 additions & 0 deletions
41
...pp/src/app/layout-page/register-part-action-page/register-part-action-page.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,41 @@ | ||
| :host { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 1em; | ||
|
|
||
| > form { | ||
| flex: none; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 1em; | ||
|
|
||
| > section { | ||
| flex: none; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: .5em; | ||
| border: 1px solid var(--sci-color-P400); | ||
| border-radius: 5px; | ||
| padding: 1em; | ||
|
|
||
| > header { | ||
| margin-top: 0; | ||
| margin-bottom: 2em; | ||
| font-weight: bold; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| > output.register-success { | ||
| flex: none; | ||
| display: none; | ||
| } | ||
|
|
||
| > output.register-error { | ||
| flex: none; | ||
| border: 1px solid var(--sci-color-warn); | ||
| background-color: var(--sci-color-W100); | ||
| border-radius: 3px; | ||
| padding: 1em; | ||
| } | ||
| } |
102 changes: 102 additions & 0 deletions
102
...-app/src/app/layout-page/register-part-action-page/register-part-action-page.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,102 @@ | ||
| /* | ||
| * Copyright (c) 2018-2023 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, inject, InjectionToken, Injector} from '@angular/core'; | ||
| import {FormGroup, NonNullableFormBuilder, ReactiveFormsModule, Validators} from '@angular/forms'; | ||
| import {WorkbenchService} from '@scion/workbench'; | ||
| import {SciFormFieldModule} from '@scion/components.internal/form-field'; | ||
| import {AsyncPipe, NgFor, NgIf} from '@angular/common'; | ||
| import {ComponentPortal} from '@angular/cdk/portal'; | ||
| import {undefinedIfEmpty} from '../../common/undefined-if-empty.util'; | ||
|
|
||
| const CONTENT = 'content'; | ||
| const ALIGN = 'align'; | ||
| const CSS_CLASS = 'cssClass'; | ||
| const TARGET = 'target'; | ||
| const VIEW = 'view'; | ||
| const PART = 'part'; | ||
| const AREA = 'area'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-register-part-action-page', | ||
| templateUrl: './register-part-action-page.component.html', | ||
| styleUrls: ['./register-part-action-page.component.scss'], | ||
| standalone: true, | ||
| imports: [ | ||
| NgIf, | ||
| NgFor, | ||
| AsyncPipe, | ||
| ReactiveFormsModule, | ||
| SciFormFieldModule, | ||
| ], | ||
| }) | ||
| export default class RegisterPartActionPageComponent { | ||
|
|
||
| public readonly CONTENT = CONTENT; | ||
| public readonly ALIGN = ALIGN; | ||
| public readonly CSS_CLASS = CSS_CLASS; | ||
| public readonly TARGET = TARGET; | ||
| public readonly VIEW = VIEW; | ||
| public readonly PART = PART; | ||
| public readonly AREA = AREA; | ||
|
|
||
| public form: FormGroup; | ||
| public registerError: string | false | undefined; | ||
|
|
||
| constructor(formBuilder: NonNullableFormBuilder, public workbenchService: WorkbenchService) { | ||
| this.form = formBuilder.group({ | ||
| [CONTENT]: formBuilder.control('', {validators: Validators.required}), | ||
| [ALIGN]: formBuilder.control(''), | ||
| [CSS_CLASS]: formBuilder.control(''), | ||
| [TARGET]: formBuilder.group({ | ||
| [VIEW]: formBuilder.control(''), | ||
| [PART]: formBuilder.control(''), | ||
| [AREA]: formBuilder.control(''), | ||
| }), | ||
| }); | ||
| } | ||
|
|
||
| public onRegister(): void { | ||
| this.registerError = undefined; | ||
| try { | ||
| this.workbenchService.registerPartAction({ | ||
| portal: new ComponentPortal(TextComponent, undefined, Injector.create({ | ||
| providers: [ | ||
| {provide: TextComponent.TEXT, useValue: this.form.get(CONTENT).value}, | ||
| ], | ||
| })), | ||
| align: this.form.get(ALIGN).value || undefined, | ||
| target: { | ||
| viewId: undefinedIfEmpty(this.form.get([TARGET, VIEW]).value.split(/\s+/).filter(Boolean)), | ||
| partId: undefinedIfEmpty(this.form.get([TARGET, PART]).value.split(/\s+/).filter(Boolean)), | ||
| area: this.form.get([TARGET, AREA]).value || undefined, | ||
| }, | ||
| cssClass: undefinedIfEmpty(this.form.get(CSS_CLASS).value.split(/\s+/).filter(Boolean)), | ||
| }); | ||
| this.registerError = false; | ||
| this.form.reset(); | ||
| } | ||
| catch (error) { | ||
| this.registerError = error; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'app-text', | ||
| template: '{{text}}', | ||
| standalone: true, | ||
| }) | ||
| class TextComponent { | ||
|
|
||
| public static readonly TEXT = new InjectionToken<string>('TEXT'); | ||
|
|
||
| public readonly text = inject(TextComponent.TEXT); | ||
| } |
File renamed without changes.
File renamed without changes.
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.