Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
Marcarrian committed Jun 28, 2024
1 parent bb6fa98 commit 07f3372
Show file tree
Hide file tree
Showing 64 changed files with 1,349 additions and 137 deletions.
Empty file added TODOS.md
Empty file.
45 changes: 37 additions & 8 deletions apps/workbench-testing-app/src/app/app.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,13 @@
import {Routes} from '@angular/router';
import {WorkbenchComponent} from './workbench/workbench.component';
import {topLevelTestPageRoutes} from './test-pages/routes';
import {canMatchWorkbenchView, WorkbenchRouteData} from '@scion/workbench';
import {canMatchWorkbenchDesktop, canMatchWorkbenchView, WorkbenchRouteData} from '@scion/workbench';

export const routes: Routes = [
{
path: '',
component: WorkbenchComponent,
canMatch: [canMatchWorkbenchView(false)],
children: [
{
path: '',
loadComponent: () => import('./start-page/start-page.component'),
},
],
canMatch: [canMatchWorkbenchView(false), canMatchWorkbenchDesktop(false)],
},
{
path: 'workbench-page',
Expand Down Expand Up @@ -53,6 +47,18 @@ export const routes: Routes = [
navigationHint: 'test-view',
},
},
{
path: '',
canMatch: [canMatchWorkbenchDesktop('test-desktop')],
loadComponent: () => import('./desktop-page/desktop-page.component'),
data: {
[WorkbenchRouteData.title]: 'Workbench Desktop',
[WorkbenchRouteData.heading]: 'Workbench E2E Testpage',
[WorkbenchRouteData.cssClass]: 'e2e-test-desktop',
path: '',
navigationHint: 'test-desktop',
},
},
{
path: 'start-page',
loadComponent: () => import('./start-page/start-page.component'),
Expand Down Expand Up @@ -94,6 +100,29 @@ export const routes: Routes = [
navigationHint: '',
},
},
{
path: 'test-desktop',
canMatch: [canMatchWorkbenchDesktop('test-desktop')],
loadComponent: () => import('./desktop-page/desktop-page.component'),
data: {
[WorkbenchRouteData.title]: 'Workbench Desktop',
[WorkbenchRouteData.heading]: 'Workbench E2E Testpage',
[WorkbenchRouteData.cssClass]: 'e2e-test-desktop',
path: 'test-desktop',
navigationHint: 'test-desktop',
},
},
{
path: 'test-desktop',
loadComponent: () => import('./desktop-page/desktop-page.component'),
data: {
[WorkbenchRouteData.title]: 'Workbench Desktop',
[WorkbenchRouteData.heading]: 'Workbench E2E Testpage',
[WorkbenchRouteData.cssClass]: 'e2e-test-desktop',
path: 'test-desktop',
navigationHint: '',
},
},
{
path: 'test-layout',
loadComponent: () => import('./layout-page/layout-page.component'),
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<section>
<sci-form-field label="URL Segments">
<span class="e2e-url-segments">{{desktop.urlSegments | appJoin:'/'}}</span>
</sci-form-field>

<sci-form-field label="Navigation Hint">
<span class="e2e-navigation-hint">{{desktop.navigationHint}}</span>
</sci-form-field>

<sci-form-field label="Instantiation ID" title="Unique identifier of this component instance">
<span class="e2e-component-instance-id">{{uuid}}</span>
</sci-form-field>
</section>

@if (route.params | async | appNullIfEmpty; as params) {
<sci-accordion class="e2e-params" variant="solid">
<ng-template sciAccordionItem [panel]="panel_route_params">
<header>Route Params</header>
</ng-template>
<ng-template #panel_route_params>
<sci-key-value [object]="params | appAppendParamDataType" class="e2e-params"/>
</ng-template>
</sci-accordion>
}

<section>
<header>Desktop Properties</header>

<sci-form-field label="CSS Class(es)">
<app-css-class [formControl]="form.controls.cssClass"/>
</sci-form-field>
</section>

<section>
<header>Route Data</header>

@if (route?.snapshot?.params | appNullIfEmpty; as params) {
<section>
<header>Route Params</header>
<sci-key-value [object]="params" class="e2e-route-params"/>
</section>
}

@if (route?.snapshot?.data | appNullIfEmpty; as data) {
<section>
<header>Route Data</header>
<sci-key-value [object]="data" class="e2e-route-data"/>
</section>
}
</section>

@if (desktop.state | appNullIfEmpty; as state) {
<section>
<header>Desktop State</header>
<sci-key-value [object]="state" class="e2e-state"/>
</section>
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
@use '@scion/components.internal/design' as sci-design;

:host {
display: flex;
flex-direction: column;
gap: 1em;
padding: 1em;

> section {
display: flex;
flex-direction: column;
gap: .5em;
border: 1px solid var(--sci-color-border);
border-radius: var(--sci-corner);
padding: 1em;

> header {
margin-bottom: 1em;
font-weight: bold;
}
}

> sci-accordion {
header {
font-weight: bold;
}

&.part-actions input {
@include sci-design.style-input-field();
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
/*
* 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} from '@angular/core';
import {SciFormFieldComponent} from '@scion/components.internal/form-field';
import {WorkbenchDesktop} from '@scion/workbench';
import {JoinPipe} from '../common/join.pipe';
import {UUID} from '@scion/toolkit/uuid';
import {ActivatedRoute} from '@angular/router';
import {AsyncPipe} from '@angular/common';
import {NullIfEmptyPipe} from '../common/null-if-empty.pipe';
import {SciAccordionComponent, SciAccordionItemDirective} from '@scion/components.internal/accordion';
import {SciKeyValueComponent} from '@scion/components.internal/key-value';
import {AppendParamDataTypePipe} from '../common/append-param-data-type.pipe';
import {CssClassComponent} from '../css-class/css-class.component';
import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';

@Component({
selector: 'app-desktop-page',
templateUrl: './desktop-page.component.html',
styleUrls: ['./desktop-page.component.scss'],
standalone: true,
imports: [
SciFormFieldComponent,
JoinPipe,
AsyncPipe,
NullIfEmptyPipe,
SciAccordionComponent,
SciAccordionItemDirective,
SciKeyValueComponent,
AppendParamDataTypePipe,
CssClassComponent,
ReactiveFormsModule,
],
})
export default class DesktopPageComponent {

public uuid = UUID.randomUUID();
public form = this._formBuilder.group({
cssClass: this._formBuilder.control(''),
});

constructor(private _formBuilder: NonNullableFormBuilder,
public desktop: WorkbenchDesktop,
public route: ActivatedRoute) {
}
}

Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@
<app-navigate-views [formControl]="form.controls.viewNavigations" [viewProposals]="viewProposals$ | async"/>
</section>

<section>
<header>Desktop Navigation</header>
<app-navigate-desktop [formControl]="form.controls.desktopNavigation"/>
</section>

<button (click)="onRegister()" [disabled]="form.invalid" class="e2e-register" sci-primary>Register</button>
</form>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
import {Component} from '@angular/core';
import {AddPartsComponent, PartDescriptor} from '../tables/add-parts/add-parts.component';
import {AddViewsComponent, ViewDescriptor} from '../tables/add-views/add-views.component';
import {NavigateViewsComponent, NavigationDescriptor} from '../tables/navigate-views/navigate-views.component';
import {NavigateViewsComponent, ViewNavigationDescriptor} from '../tables/navigate-views/navigate-views.component';
import {FormGroup, NonNullableFormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
import {SettingsService} from '../../settings.service';
import {WorkbenchLayout, WorkbenchLayoutFactory, WorkbenchLayoutFn, WorkbenchService} from '@scion/workbench';
Expand All @@ -22,6 +22,7 @@ import {KeyValueEntry, SciKeyValueFieldComponent} from '@scion/components.intern
import {Observable} from 'rxjs';
import {filterArray, mapArray} from '@scion/toolkit/operators';
import {AsyncPipe} from '@angular/common';
import {DesktopNavigationDescriptor, NavigateDesktopComponent} from '../tables/navigate-desktop/navigate-desktop.component';

@Component({
selector: 'app-create-perspective-page',
Expand All @@ -37,6 +38,7 @@ import {AsyncPipe} from '@angular/common';
SciCheckboxComponent,
SciKeyValueFieldComponent,
AsyncPipe,
NavigateDesktopComponent,
],
})
export default class CreatePerspectivePageComponent {
Expand All @@ -47,7 +49,8 @@ export default class CreatePerspectivePageComponent {
data: this._formBuilder.array<FormGroup<KeyValueEntry>>([]),
parts: this._formBuilder.control<PartDescriptor[]>([], Validators.required),
views: this._formBuilder.control<ViewDescriptor[]>([]),
viewNavigations: this._formBuilder.control<NavigationDescriptor[]>([]),
viewNavigations: this._formBuilder.control<ViewNavigationDescriptor[]>([]),
desktopNavigation: this._formBuilder.control<DesktopNavigationDescriptor | undefined>(undefined),
});

protected registerError: string | false | undefined;
Expand Down Expand Up @@ -85,6 +88,7 @@ export default class CreatePerspectivePageComponent {
const [initialPart, ...parts] = this.form.controls.parts.value;
const views = this.form.controls.views.value;
const viewNavigations = this.form.controls.viewNavigations.value;
const desktopNavigation = this.form.controls.desktopNavigation.value;

return (factory: WorkbenchLayoutFactory): WorkbenchLayout => {
// Add initial part.
Expand Down Expand Up @@ -120,6 +124,15 @@ export default class CreatePerspectivePageComponent {
cssClass: viewNavigation.extras?.cssClass,
});
}

// Add desktop navigation.
if (desktopNavigation) {
layout = layout.navigateDesktop(desktopNavigation.commands, {
hint: desktopNavigation.extras?.hint,
state: desktopNavigation.extras?.state,
cssClass: desktopNavigation.extras?.cssClass,
});
}
return layout;
};
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@
<app-navigate-views [formControl]="form.controls.viewNavigations" [viewProposals]="viewProposals$ | async"/>
</section>

<section>
<header>Desktop Navigation</header>
<app-navigate-desktop [formControl]="form.controls.desktopNavigation"/>
</section>

<button (click)="onModify()" [disabled]="form.invalid" class="e2e-modify" sci-primary>Modify</button>
</form>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
import {Component} from '@angular/core';
import {AddPartsComponent, PartDescriptor} from '../tables/add-parts/add-parts.component';
import {AddViewsComponent, ViewDescriptor} from '../tables/add-views/add-views.component';
import {NavigateViewsComponent, NavigationDescriptor} from '../tables/navigate-views/navigate-views.component';
import {NavigateViewsComponent, ViewNavigationDescriptor} from '../tables/navigate-views/navigate-views.component';
import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
import {SettingsService} from '../../settings.service';
import {WorkbenchRouter, WorkbenchService} from '@scion/workbench';
Expand All @@ -20,6 +20,7 @@ import {combineLatestWith, Observable} from 'rxjs';
import {filterArray, mapArray} from '@scion/toolkit/operators';
import {map, startWith} from 'rxjs/operators';
import {AsyncPipe} from '@angular/common';
import {DesktopNavigationDescriptor, NavigateDesktopComponent} from '../tables/navigate-desktop/navigate-desktop.component';

@Component({
selector: 'app-modify-layout-page',
Expand All @@ -32,14 +33,16 @@ import {AsyncPipe} from '@angular/common';
NavigateViewsComponent,
ReactiveFormsModule,
AsyncPipe,
NavigateDesktopComponent,
],
})
export default class ModifyLayoutPageComponent {

protected form = this._formBuilder.group({
parts: this._formBuilder.control<PartDescriptor[]>([]),
views: this._formBuilder.control<ViewDescriptor[]>([]),
viewNavigations: this._formBuilder.control<NavigationDescriptor[]>([]),
viewNavigations: this._formBuilder.control<ViewNavigationDescriptor[]>([]),
desktopNavigation: this._formBuilder.control<DesktopNavigationDescriptor | undefined>(undefined),
});

protected modifyError: string | false | undefined;
Expand Down Expand Up @@ -96,7 +99,7 @@ export default class ModifyLayoutPageComponent {
});
}

// Add navigations.
// Add view navigations.
for (const viewNavigation of this.form.controls.viewNavigations.value) {
layout = layout.navigateView(viewNavigation.id, viewNavigation.commands, {
hint: viewNavigation.extras?.hint,
Expand All @@ -105,6 +108,15 @@ export default class ModifyLayoutPageComponent {
});
}

// Add desktop navigation.
const desktopNavigation = this.form.controls.desktopNavigation.value;
if (desktopNavigation) {
layout = layout.navigateDesktop(desktopNavigation.commands, {
hint: desktopNavigation.extras?.hint,
state: desktopNavigation.extras?.state,
cssClass: desktopNavigation.extras?.cssClass,
});
}
return layout;
});
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<form [formGroup]="form">
<span>Path</span>
<span>Hint</span>
<span>State</span>
<span>CSS Class(es)</span>
@if (navigateDesktop) {
<!-- Remove button -->
<button class="e2e-remove" (click)="onRemoveNavigation()" title="Remove navigation" sciMaterialIcon>remove</button>
} @else {
<!-- Add button -->
<button (click)="onAddNavigation()" class="e2e-add" title="Add navigation" sciMaterialIcon>add</button>
}

@if (navigateDesktop) {
<!-- Commands -->
<app-router-commands [formControl]="form.controls.commands"/>
<!-- Hint -->
<input [formControl]="form.controls.extras.controls.hint" class="e2e-hint">
<!-- State -->
<app-record [formControl]="form.controls.extras.controls.state" class="e2e-state"/>
<!-- CSS class -->
<app-css-class [formControl]="form.controls.extras.controls.cssClass"/>
}
</form>
Loading

0 comments on commit 07f3372

Please sign in to comment.