From dfe7d7f54950d1a485b1a76bc94be5ee650d81c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Tue, 28 Jan 2025 09:39:11 +0100 Subject: [PATCH 01/22] Develop example content for OpenMFP --- frontend/projects/ui/src/app/app.routes.ts | 2 + .../showcase-panel.component.html | 8 + .../showcase-panel.component.scss | 9 ++ .../showcase-panel.component.spec.ts | 23 +++ .../showcase-panel.component.ts | 17 ++ .../showcase/showcase-panel/showcase-panel.ts | 5 + .../src/app/showcase/showcase.component.html | 5 + .../src/app/showcase/showcase.component.scss | 10 ++ .../app/showcase/showcase.component.spec.ts | 23 +++ .../ui/src/app/showcase/showcase.component.ts | 148 ++++++++++++++++++ 10 files changed, 250 insertions(+) create mode 100644 frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.html create mode 100644 frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.scss create mode 100644 frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.spec.ts create mode 100644 frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.ts create mode 100644 frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.ts create mode 100644 frontend/projects/ui/src/app/showcase/showcase.component.html create mode 100644 frontend/projects/ui/src/app/showcase/showcase.component.scss create mode 100644 frontend/projects/ui/src/app/showcase/showcase.component.spec.ts create mode 100644 frontend/projects/ui/src/app/showcase/showcase.component.ts diff --git a/frontend/projects/ui/src/app/app.routes.ts b/frontend/projects/ui/src/app/app.routes.ts index bdd3b3b1..f6022bbb 100644 --- a/frontend/projects/ui/src/app/app.routes.ts +++ b/frontend/projects/ui/src/app/app.routes.ts @@ -3,8 +3,10 @@ import { CatalogComponent } from './catalog/catalog.component'; import { CatalogItemDetailsComponent } from './catalog-item-details/catalog-item-details.component'; import { OpenmcpComponent } from './openmcp/openmcp.component'; import { IronCoreComponent } from './iron-core/iron-core.component'; +import { ShowcaseComponent } from './showcase/showcase.component'; export const routes: Routes = [ + { path: 'showcase', component: ShowcaseComponent }, { path: 'global-catalog', component: CatalogComponent }, { path: 'catalog-item/:catalogItemId', diff --git a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.html b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.html new file mode 100644 index 00000000..9a47da49 --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.html @@ -0,0 +1,8 @@ +@if(item != undefined) { + + + {{item.label}} + {{item.example}} + + +} diff --git a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.scss b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.scss new file mode 100644 index 00000000..a5424bbc --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.scss @@ -0,0 +1,9 @@ +.showcase-card { + display: block; + width: 700px; + + .content { + white-space: pre-wrap; + word-spacing: 4px; + } +} diff --git a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.spec.ts b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.spec.ts new file mode 100644 index 00000000..7c93c73f --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ShowcasePanelComponent } from './showcase-panel.component'; + +describe('ShowcasePanelComponent', () => { + let component: ShowcasePanelComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ShowcasePanelComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ShowcasePanelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.ts b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.ts new file mode 100644 index 00000000..37b8da5d --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.ts @@ -0,0 +1,17 @@ +import { Component, Input } from '@angular/core'; +import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx'; +import { ShowcasePanel } from './showcase-panel'; + +@Component({ + selector: 'app-showcase-panel', + standalone: true, + imports: [Ui5WebcomponentsModule], + templateUrl: './showcase-panel.component.html', + styleUrl: './showcase-panel.component.scss' +}) +export class ShowcasePanelComponent { + + @Input() + public item: ShowcasePanel | undefined; + +} diff --git a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.ts b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.ts new file mode 100644 index 00000000..031ca2ec --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.ts @@ -0,0 +1,5 @@ +export interface ShowcasePanel { + header: string; + label: string; + example: string; +} diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.html b/frontend/projects/ui/src/app/showcase/showcase.component.html new file mode 100644 index 00000000..b7388b92 --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase.component.html @@ -0,0 +1,5 @@ +
+ @for (item of showcaseItems; track $index) { + + } +
diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.scss b/frontend/projects/ui/src/app/showcase/showcase.component.scss new file mode 100644 index 00000000..add2d0de --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase.component.scss @@ -0,0 +1,10 @@ +.showcase-cards { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +.showcase-card { + display: block; + width: 40%; +} diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.spec.ts b/frontend/projects/ui/src/app/showcase/showcase.component.spec.ts new file mode 100644 index 00000000..f092c6cd --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ShowcaseComponent } from './showcase.component'; + +describe('ShowcaseComponent', () => { + let component: ShowcaseComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ShowcaseComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ShowcaseComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.ts b/frontend/projects/ui/src/app/showcase/showcase.component.ts new file mode 100644 index 00000000..1520c7a9 --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase.component.ts @@ -0,0 +1,148 @@ +import { Component } from '@angular/core'; +import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx'; +import { ShowcasePanelComponent } from './showcase-panel/showcase-panel.component'; +import { ShowcasePanel } from './showcase-panel/showcase-panel'; + +@Component({ + selector: 'app-showcase', + standalone: true, + imports: [Ui5WebcomponentsModule, ShowcasePanelComponent], + templateUrl: './showcase.component.html', + styleUrl: './showcase.component.scss' +}) +export class ShowcaseComponent { + + showcaseItems: ShowcasePanel[] = [ + { + header: 'Definition of an Entity', + label: `Typical luigiConfigFragment contains viewGroup object and array of nodes as well as array of texts.`, + example: ` + { + "name": "overview", + "creationTimestamp": "", + "luigiConfigFragment": { + "data": { + "nodes": [ + { + "entityType": "global", + "pathSegment": "showcase", + "label": "Overview", + "icon": "business-one", + "tabNav": true, + "hideFromNav": false, + "defineEntity": { + "id": "main" + }, + "compound": { + } + }, + { + "entityType": "main::compound", + "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", + "context": { + "border": "shadow", + "title": "{{showcase}}", + "description": "" + } + } + ], + "texts": [ + { + "locale": "", + "textDictionary": { + "showcase": "Showcase page" + } + }, + { + "locale": "en", + "textDictionary": { + "showcase": "Showcase page" + } + } + ] + } + } + } + ` + }, + { + header: 'Iframe based Micro Frontend integration', + label: 'explanation 2', + example: ` + Aute ullamco officia fugiat culpa do tempor tempor aute excepteur magna. + Quis velit adipisicing excepteur do eu duis elit. Sunt ea pariatur nulla est laborum proident sunt labore + commodo Lorem laboris nisi Lorem.` + }, + { + header: 'Navigating in the virtualtree', + label: `In this example you can see example configuration letting you navigate through the pages of the virtual tree. + You will find two tabs available "First Tab" and "Second Tab".`, + example: ` + { + "name": "overview", + "creationTimestamp": "", + "luigiConfigFragment": { + "data": { + "nodes": [ + { + "entityType": "global", + "pathSegment": "home", + "hideFromNav": true, + "defineEntity": { + "id": "main" + }, + "children": [ + { + "pathSegment": "first", + "label": "First Tab", + "defineEntity": { + "id": "first" + }, + "compound": { + } + }, + { + "pathSegment": "second", + "label": "Second Tab", + "defineEntity": { + "id": "second" + }, + "compound": { + } + } + ] + }, + { + "entityType": "main.first::compound", + "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", + "context": { + "border": "shadow", + "title": "First page", + "description": "" + } + }, + { + "entityType": "main.second::compound", + "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", + "context": { + "border": "shadow", + "title": "Second page", + "description": "" + } + } + ] + } + } + } + ` + }, + { + header: 'Integrate Web Component into page', + label: 'explanation 4', + example: ` + Aute ullamco officia fugiat culpa do tempor tempor aute excepteur magna. + Quis velit adipisicing excepteur do eu duis elit. Sunt ea pariatur nulla est laborum proident sunt labore + commodo Lorem laboris nisi Lorem.` + }, + ] +} From 10e495c83a271d60bd6652933b97b42d5d7c4266 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Tue, 28 Jan 2025 09:57:23 +0100 Subject: [PATCH 02/22] feat/develop-example-content-for-openmfp --- .../showcase-panel.component.html | 8 ------- .../showcase-panel.component.scss | 9 -------- .../showcase-panel.component.spec.ts | 23 ------------------- .../showcase-panel.component.ts | 17 -------------- .../showcase/showcase-panel/showcase-panel.ts | 5 ---- .../src/app/showcase/showcase.component.html | 7 +++++- .../src/app/showcase/showcase.component.scss | 8 ++++++- .../ui/src/app/showcase/showcase.component.ts | 10 +++++--- 8 files changed, 20 insertions(+), 67 deletions(-) delete mode 100644 frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.html delete mode 100644 frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.scss delete mode 100644 frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.spec.ts delete mode 100644 frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.ts delete mode 100644 frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.ts diff --git a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.html b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.html deleted file mode 100644 index 9a47da49..00000000 --- a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.html +++ /dev/null @@ -1,8 +0,0 @@ -@if(item != undefined) { - - - {{item.label}} - {{item.example}} - - -} diff --git a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.scss b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.scss deleted file mode 100644 index a5424bbc..00000000 --- a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.scss +++ /dev/null @@ -1,9 +0,0 @@ -.showcase-card { - display: block; - width: 700px; - - .content { - white-space: pre-wrap; - word-spacing: 4px; - } -} diff --git a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.spec.ts b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.spec.ts deleted file mode 100644 index 7c93c73f..00000000 --- a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ShowcasePanelComponent } from './showcase-panel.component'; - -describe('ShowcasePanelComponent', () => { - let component: ShowcasePanelComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [ShowcasePanelComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(ShowcasePanelComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.ts b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.ts deleted file mode 100644 index 37b8da5d..00000000 --- a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx'; -import { ShowcasePanel } from './showcase-panel'; - -@Component({ - selector: 'app-showcase-panel', - standalone: true, - imports: [Ui5WebcomponentsModule], - templateUrl: './showcase-panel.component.html', - styleUrl: './showcase-panel.component.scss' -}) -export class ShowcasePanelComponent { - - @Input() - public item: ShowcasePanel | undefined; - -} diff --git a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.ts b/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.ts deleted file mode 100644 index 031ca2ec..00000000 --- a/frontend/projects/ui/src/app/showcase/showcase-panel/showcase-panel.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface ShowcasePanel { - header: string; - label: string; - example: string; -} diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.html b/frontend/projects/ui/src/app/showcase/showcase.component.html index b7388b92..3bffcd67 100644 --- a/frontend/projects/ui/src/app/showcase/showcase.component.html +++ b/frontend/projects/ui/src/app/showcase/showcase.component.html @@ -1,5 +1,10 @@
@for (item of showcaseItems; track $index) { - + + + {{item.label}} + {{item.example}} + + }
diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.scss b/frontend/projects/ui/src/app/showcase/showcase.component.scss index add2d0de..0a0587d4 100644 --- a/frontend/projects/ui/src/app/showcase/showcase.component.scss +++ b/frontend/projects/ui/src/app/showcase/showcase.component.scss @@ -6,5 +6,11 @@ .showcase-card { display: block; - width: 40%; + width: 700px; + + .content { + white-space: pre-wrap; + word-spacing: 4px; + } } + diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.ts b/frontend/projects/ui/src/app/showcase/showcase.component.ts index 1520c7a9..b9dc1035 100644 --- a/frontend/projects/ui/src/app/showcase/showcase.component.ts +++ b/frontend/projects/ui/src/app/showcase/showcase.component.ts @@ -1,12 +1,16 @@ import { Component } from '@angular/core'; import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx'; -import { ShowcasePanelComponent } from './showcase-panel/showcase-panel.component'; -import { ShowcasePanel } from './showcase-panel/showcase-panel'; + +interface ShowcasePanel { + header: string; + label: string; + example: string; +} @Component({ selector: 'app-showcase', standalone: true, - imports: [Ui5WebcomponentsModule, ShowcasePanelComponent], + imports: [Ui5WebcomponentsModule], templateUrl: './showcase.component.html', styleUrl: './showcase.component.scss' }) From 4c957e62dfb928ac800f551654b59f491800beaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Tue, 28 Jan 2025 13:13:51 +0100 Subject: [PATCH 03/22] feat/develop-example-content-for-openmfp --- .../ui/src/app/showcase/showcase.component.ts | 49 ++++++++++++++++--- 1 file changed, 41 insertions(+), 8 deletions(-) diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.ts b/frontend/projects/ui/src/app/showcase/showcase.component.ts index b9dc1035..743ec5e8 100644 --- a/frontend/projects/ui/src/app/showcase/showcase.component.ts +++ b/frontend/projects/ui/src/app/showcase/showcase.component.ts @@ -19,7 +19,7 @@ export class ShowcaseComponent { showcaseItems: ShowcasePanel[] = [ { header: 'Definition of an Entity', - label: `Typical luigiConfigFragment contains viewGroup object and array of nodes as well as array of texts.`, + label: `Entity is basic building block of configuration, here is example how definition of entity should look like. Configuration consist of nodes and texts.`, example: ` { "name": "overview", @@ -71,16 +71,49 @@ export class ShowcaseComponent { }, { header: 'Iframe based Micro Frontend integration', - label: 'explanation 2', + label: 'Example showcasing entity configuration letting add Micro Frontend via iframe. Integration entity requires "requiredIFramePermissions".', example: ` - Aute ullamco officia fugiat culpa do tempor tempor aute excepteur magna. - Quis velit adipisicing excepteur do eu duis elit. Sunt ea pariatur nulla est laborum proident sunt labore - commodo Lorem laboris nisi Lorem.` + { + "name": "micro-frontend-sample", + "creationTimestamp": "", + "luigiConfigFragment": { + "data": { + "nodes": [ + { + "entityType": "global", + "pathSegment": "showcase", + "label": "Overview", + "virtualTree": true, + "url": "https://example.com/", + "icon": "home", + "loadingIndicator": { + "enabled": false + }, + "requiredIFramePermissions": { + "sandbox": [ + "allow-forms", + "allow-modals", + "allow-popups", + "allow-popups-to-escape-sandbox", + "allow-same-origin", + "allow-scripts", + "allow-download" + ], + "allow": [ + "clipboard-read", + "clipboard-write" + ] + } + } + ] + } + } + } + ` }, { header: 'Navigating in the virtualtree', - label: `In this example you can see example configuration letting you navigate through the pages of the virtual tree. - You will find two tabs available "First Tab" and "Second Tab".`, + label: `Configuration for two entities lets you find two tabs available "First Tab" and "Second Tab".`, example: ` { "name": "overview", @@ -90,7 +123,7 @@ export class ShowcaseComponent { "nodes": [ { "entityType": "global", - "pathSegment": "home", + "pathSegment": "showcase", "hideFromNav": true, "defineEntity": { "id": "main" From 0addf70fca51c1af5afb034c92646e4972f41cd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Tue, 28 Jan 2025 16:28:59 +0100 Subject: [PATCH 04/22] feat/develop-example-content-for-openmfp --- .../app/showcase/showcase.component.spec.ts | 23 ------------------- .../ui/src/app/showcase/showcase.component.ts | 9 ++++---- 2 files changed, 5 insertions(+), 27 deletions(-) delete mode 100644 frontend/projects/ui/src/app/showcase/showcase.component.spec.ts diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.spec.ts b/frontend/projects/ui/src/app/showcase/showcase.component.spec.ts deleted file mode 100644 index f092c6cd..00000000 --- a/frontend/projects/ui/src/app/showcase/showcase.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ShowcaseComponent } from './showcase.component'; - -describe('ShowcaseComponent', () => { - let component: ShowcaseComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [ShowcaseComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(ShowcaseComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.ts b/frontend/projects/ui/src/app/showcase/showcase.component.ts index 743ec5e8..ff94cb51 100644 --- a/frontend/projects/ui/src/app/showcase/showcase.component.ts +++ b/frontend/projects/ui/src/app/showcase/showcase.component.ts @@ -175,11 +175,12 @@ export class ShowcaseComponent { }, { header: 'Integrate Web Component into page', - label: 'explanation 4', + label: 'explanation', example: ` - Aute ullamco officia fugiat culpa do tempor tempor aute excepteur magna. - Quis velit adipisicing excepteur do eu duis elit. Sunt ea pariatur nulla est laborum proident sunt labore - commodo Lorem laboris nisi Lorem.` + Aute ullamco officia fugiat culpa do tempor tempor aute excepteur magna. + Quis velit adipisicing excepteur do eu duis elit. Sunt ea pariatur nulla est laborum proident sunt labore + commodo Lorem laboris nisi Lorem. + ` }, ] } From 97c1aa1e4e2398213280641ea6a22188b5e6de37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Tue, 28 Jan 2025 17:07:24 +0100 Subject: [PATCH 05/22] feat/develop-example-content-for-openmfp --- frontend/projects/wc/src/app/app.module.ts | 4 + .../src/app/showcase/showcase.component.html | 10 + .../src/app/showcase/showcase.component.scss | 16 ++ .../wc/src/app/showcase/showcase.component.ts | 197 ++++++++++++++++++ 4 files changed, 227 insertions(+) create mode 100644 frontend/projects/wc/src/app/showcase/showcase.component.html create mode 100644 frontend/projects/wc/src/app/showcase/showcase.component.scss create mode 100644 frontend/projects/wc/src/app/showcase/showcase.component.ts diff --git a/frontend/projects/wc/src/app/app.module.ts b/frontend/projects/wc/src/app/app.module.ts index 620299c0..2ec99027 100644 --- a/frontend/projects/wc/src/app/app.module.ts +++ b/frontend/projects/wc/src/app/app.module.ts @@ -7,6 +7,7 @@ import { DataChartComponent } from './charts/data-chart/data-chart.component'; import { DoughnutChartComponent } from './charts/doughnut-chart/doughnut-chart.component'; import { EnabledCapabilitiesComponent } from './enabled-capabilities/enabled-capabilities.component'; import { RootOverviewComponent } from './root-overview/root-overview.component'; +import { ShowcaseComponent } from './showcase/showcase.component'; @NgModule({ imports: [ @@ -17,6 +18,7 @@ import { RootOverviewComponent } from './root-overview/root-overview.component'; DoughnutChartComponent, EnabledCapabilitiesComponent, RootOverviewComponent, + ShowcaseComponent, ], }) export class AppModule implements DoBootstrap { @@ -37,6 +39,7 @@ export class AppModule implements DoBootstrap { const accountOverviewComponent = createCustomElement(AccountOverviewComponent, {injector: this.injector}); const rootOverviewComponent = createCustomElement(RootOverviewComponent, {injector: this.injector}); const enabledCapabilitiesComponent = createCustomElement(EnabledCapabilitiesComponent, {injector: this.injector}); + const showcaseComponent = createCustomElement(ShowcaseComponent, {injector: this.injector}); try { this.registerWebcomponent(dataChartComponent, 'chart'); @@ -45,6 +48,7 @@ export class AppModule implements DoBootstrap { this.registerWebcomponent(accountOverviewComponent, 'account-overview'); this.registerWebcomponent(rootOverviewComponent, 'root-overview'); this.registerWebcomponent(enabledCapabilitiesComponent, 'enabled-capabilities'); + this.registerWebcomponent(showcaseComponent, 'showcase'); } catch (e) { if (!customElements.get('data-chart')) { customElements.define('data-chart', dataChartComponent); diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.html b/frontend/projects/wc/src/app/showcase/showcase.component.html new file mode 100644 index 00000000..3bffcd67 --- /dev/null +++ b/frontend/projects/wc/src/app/showcase/showcase.component.html @@ -0,0 +1,10 @@ +
+ @for (item of showcaseItems; track $index) { + + + {{item.label}} + {{item.example}} + + + } +
diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.scss b/frontend/projects/wc/src/app/showcase/showcase.component.scss new file mode 100644 index 00000000..0a0587d4 --- /dev/null +++ b/frontend/projects/wc/src/app/showcase/showcase.component.scss @@ -0,0 +1,16 @@ +.showcase-cards { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +.showcase-card { + display: block; + width: 700px; + + .content { + white-space: pre-wrap; + word-spacing: 4px; + } +} + diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.ts b/frontend/projects/wc/src/app/showcase/showcase.component.ts new file mode 100644 index 00000000..c7204de2 --- /dev/null +++ b/frontend/projects/wc/src/app/showcase/showcase.component.ts @@ -0,0 +1,197 @@ +import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { LuigiClient } from '@luigi-project/client/luigi-element'; +import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx'; + +interface ShowcasePanel { + header: string; + label: string; + example: string; +} + +@Component({ + selector: 'app-showcase', + standalone: true, + imports: [Ui5WebcomponentsModule], + templateUrl: './showcase.component.html', + styleUrl: './showcase.component.scss', + encapsulation: ViewEncapsulation.ShadowDom +}) +export class ShowcaseComponent implements OnChanges { + @Input() LuigiClient?: LuigiClient; + @Input() context?: any; + @Input() title = 'Showcase Overview'; + + ngOnChanges(changes: SimpleChanges) { + if (changes['context']) { + this.title = changes['context'].currentValue.title; + } + } + + showcaseItems: ShowcasePanel[] = [ + { + header: 'Definition of an Entity', + label: `Entity is basic building block of configuration, here is example how definition of entity should look like. Configuration consist of nodes and texts.`, + example: ` + { + "name": "overview", + "creationTimestamp": "", + "luigiConfigFragment": { + "data": { + "nodes": [ + { + "entityType": "global", + "pathSegment": "showcase", + "label": "Overview", + "icon": "business-one", + "tabNav": true, + "hideFromNav": false, + "defineEntity": { + "id": "main" + }, + "compound": { + } + }, + { + "entityType": "main::compound", + "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", + "context": { + "border": "shadow", + "title": "{{showcase}}", + "description": "" + } + } + ], + "texts": [ + { + "locale": "", + "textDictionary": { + "showcase": "Showcase page" + } + }, + { + "locale": "en", + "textDictionary": { + "showcase": "Showcase page" + } + } + ] + } + } + } + ` + }, + { + header: 'Iframe based Micro Frontend integration', + label: 'Example showcasing entity configuration letting add Micro Frontend via iframe. Integration entity requires "requiredIFramePermissions".', + example: ` + { + "name": "micro-frontend-sample", + "creationTimestamp": "", + "luigiConfigFragment": { + "data": { + "nodes": [ + { + "entityType": "global", + "pathSegment": "showcase", + "label": "Overview", + "virtualTree": true, + "url": "https://example.com/", + "icon": "home", + "loadingIndicator": { + "enabled": false + }, + "requiredIFramePermissions": { + "sandbox": [ + "allow-forms", + "allow-modals", + "allow-popups", + "allow-popups-to-escape-sandbox", + "allow-same-origin", + "allow-scripts", + "allow-download" + ], + "allow": [ + "clipboard-read", + "clipboard-write" + ] + } + } + ] + } + } + } + ` + }, + { + header: 'Navigating in the virtualtree', + label: `Configuration for two entities lets you find two tabs available "First Tab" and "Second Tab".`, + example: ` + { + "name": "overview", + "creationTimestamp": "", + "luigiConfigFragment": { + "data": { + "nodes": [ + { + "entityType": "global", + "pathSegment": "showcase", + "hideFromNav": true, + "defineEntity": { + "id": "main" + }, + "children": [ + { + "pathSegment": "first", + "label": "First Tab", + "defineEntity": { + "id": "first" + }, + "compound": { + } + }, + { + "pathSegment": "second", + "label": "Second Tab", + "defineEntity": { + "id": "second" + }, + "compound": { + } + } + ] + }, + { + "entityType": "main.first::compound", + "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", + "context": { + "border": "shadow", + "title": "First page", + "description": "" + } + }, + { + "entityType": "main.second::compound", + "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", + "context": { + "border": "shadow", + "title": "Second page", + "description": "" + } + } + ] + } + } + } + ` + }, + { + header: 'Integrate Web Component into page', + label: 'explanation', + example: ` + Aute ullamco officia fugiat culpa do tempor tempor aute excepteur magna. + Quis velit adipisicing excepteur do eu duis elit. Sunt ea pariatur nulla est laborum proident sunt labore + commodo Lorem laboris nisi Lorem. + ` + }, + ] +} From 5143a9555cf53da4908f4fa64be5f49deafd3c30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Tue, 28 Jan 2025 17:43:52 +0100 Subject: [PATCH 06/22] feat/develop-example-content-for-openmfp --- .../wc/src/app/showcase/showcase.component.ts | 61 ++++++++++++++++--- 1 file changed, 54 insertions(+), 7 deletions(-) diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.ts b/frontend/projects/wc/src/app/showcase/showcase.component.ts index c7204de2..fe1b2993 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.ts +++ b/frontend/projects/wc/src/app/showcase/showcase.component.ts @@ -22,9 +22,9 @@ export class ShowcaseComponent implements OnChanges { @Input() title = 'Showcase Overview'; ngOnChanges(changes: SimpleChanges) { - if (changes['context']) { - this.title = changes['context'].currentValue.title; - } + if (changes['context']) { + this.title = changes['context'].currentValue.title; + } } showcaseItems: ShowcasePanel[] = [ @@ -186,11 +186,58 @@ export class ShowcaseComponent implements OnChanges { }, { header: 'Integrate Web Component into page', - label: 'explanation', + label: 'Entity can have definition for Web Component, "url" points to the component, "content" pass configuration data over to component.', example: ` - Aute ullamco officia fugiat culpa do tempor tempor aute excepteur magna. - Quis velit adipisicing excepteur do eu duis elit. Sunt ea pariatur nulla est laborum proident sunt labore - commodo Lorem laboris nisi Lorem. + { + "name": "overview", + "creationTimestamp": "", + "luigiConfigFragment": { + "data": { + "nodes": [ + { + "entityType": "global", + "pathSegment": "showcase", + "hideFromNav": true, + "defineEntity": { + "id": "main" + }, + "children": [ + { + "pathSegment": "overview", + "label": "Overview", + "icon": "home", + "defineEntity": { + "id": "overview" + }, + "compound": { + "renderer": { + "use": "grid", + "config": { + "columns": "1fr 1fr 1fr 1fr" + } + } + } + } + ] + }, + { + "entityType": "main.overview::compound", + "url": "https://example.com/frontend/projects/wc/src/main.js#showcase", + "context": { + "title": "Showcase" + }, + "layoutConfig": { + "row": "1", + "column": "1 / -1" + }, + "webcomponent": { + "selfRegistered": true + } + } + ] + } + } + } ` }, ] From 74457cee7c3c3ab94262408b32d94d918905e143 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Tue, 28 Jan 2025 18:08:04 +0100 Subject: [PATCH 07/22] feat/develop-example-content-for-openmfp --- .../src/app/showcase/showcase.component.html | 10 - .../src/app/showcase/showcase.component.scss | 16 -- .../ui/src/app/showcase/showcase.component.ts | 186 ------------------ .../wc/src/app/showcase/showcase.component.ts | 4 +- 4 files changed, 2 insertions(+), 214 deletions(-) delete mode 100644 frontend/projects/ui/src/app/showcase/showcase.component.html delete mode 100644 frontend/projects/ui/src/app/showcase/showcase.component.scss delete mode 100644 frontend/projects/ui/src/app/showcase/showcase.component.ts diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.html b/frontend/projects/ui/src/app/showcase/showcase.component.html deleted file mode 100644 index 3bffcd67..00000000 --- a/frontend/projects/ui/src/app/showcase/showcase.component.html +++ /dev/null @@ -1,10 +0,0 @@ -
- @for (item of showcaseItems; track $index) { - - - {{item.label}} - {{item.example}} - - - } -
diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.scss b/frontend/projects/ui/src/app/showcase/showcase.component.scss deleted file mode 100644 index 0a0587d4..00000000 --- a/frontend/projects/ui/src/app/showcase/showcase.component.scss +++ /dev/null @@ -1,16 +0,0 @@ -.showcase-cards { - display: flex; - flex-wrap: wrap; - gap: 1rem; -} - -.showcase-card { - display: block; - width: 700px; - - .content { - white-space: pre-wrap; - word-spacing: 4px; - } -} - diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.ts b/frontend/projects/ui/src/app/showcase/showcase.component.ts deleted file mode 100644 index ff94cb51..00000000 --- a/frontend/projects/ui/src/app/showcase/showcase.component.ts +++ /dev/null @@ -1,186 +0,0 @@ -import { Component } from '@angular/core'; -import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx'; - -interface ShowcasePanel { - header: string; - label: string; - example: string; -} - -@Component({ - selector: 'app-showcase', - standalone: true, - imports: [Ui5WebcomponentsModule], - templateUrl: './showcase.component.html', - styleUrl: './showcase.component.scss' -}) -export class ShowcaseComponent { - - showcaseItems: ShowcasePanel[] = [ - { - header: 'Definition of an Entity', - label: `Entity is basic building block of configuration, here is example how definition of entity should look like. Configuration consist of nodes and texts.`, - example: ` - { - "name": "overview", - "creationTimestamp": "", - "luigiConfigFragment": { - "data": { - "nodes": [ - { - "entityType": "global", - "pathSegment": "showcase", - "label": "Overview", - "icon": "business-one", - "tabNav": true, - "hideFromNav": false, - "defineEntity": { - "id": "main" - }, - "compound": { - } - }, - { - "entityType": "main::compound", - "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", - "context": { - "border": "shadow", - "title": "{{showcase}}", - "description": "" - } - } - ], - "texts": [ - { - "locale": "", - "textDictionary": { - "showcase": "Showcase page" - } - }, - { - "locale": "en", - "textDictionary": { - "showcase": "Showcase page" - } - } - ] - } - } - } - ` - }, - { - header: 'Iframe based Micro Frontend integration', - label: 'Example showcasing entity configuration letting add Micro Frontend via iframe. Integration entity requires "requiredIFramePermissions".', - example: ` - { - "name": "micro-frontend-sample", - "creationTimestamp": "", - "luigiConfigFragment": { - "data": { - "nodes": [ - { - "entityType": "global", - "pathSegment": "showcase", - "label": "Overview", - "virtualTree": true, - "url": "https://example.com/", - "icon": "home", - "loadingIndicator": { - "enabled": false - }, - "requiredIFramePermissions": { - "sandbox": [ - "allow-forms", - "allow-modals", - "allow-popups", - "allow-popups-to-escape-sandbox", - "allow-same-origin", - "allow-scripts", - "allow-download" - ], - "allow": [ - "clipboard-read", - "clipboard-write" - ] - } - } - ] - } - } - } - ` - }, - { - header: 'Navigating in the virtualtree', - label: `Configuration for two entities lets you find two tabs available "First Tab" and "Second Tab".`, - example: ` - { - "name": "overview", - "creationTimestamp": "", - "luigiConfigFragment": { - "data": { - "nodes": [ - { - "entityType": "global", - "pathSegment": "showcase", - "hideFromNav": true, - "defineEntity": { - "id": "main" - }, - "children": [ - { - "pathSegment": "first", - "label": "First Tab", - "defineEntity": { - "id": "first" - }, - "compound": { - } - }, - { - "pathSegment": "second", - "label": "Second Tab", - "defineEntity": { - "id": "second" - }, - "compound": { - } - } - ] - }, - { - "entityType": "main.first::compound", - "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", - "context": { - "border": "shadow", - "title": "First page", - "description": "" - } - }, - { - "entityType": "main.second::compound", - "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", - "context": { - "border": "shadow", - "title": "Second page", - "description": "" - } - } - ] - } - } - } - ` - }, - { - header: 'Integrate Web Component into page', - label: 'explanation', - example: ` - Aute ullamco officia fugiat culpa do tempor tempor aute excepteur magna. - Quis velit adipisicing excepteur do eu duis elit. Sunt ea pariatur nulla est laborum proident sunt labore - commodo Lorem laboris nisi Lorem. - ` - }, - ] -} diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.ts b/frontend/projects/wc/src/app/showcase/showcase.component.ts index fe1b2993..1ac66f47 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.ts +++ b/frontend/projects/wc/src/app/showcase/showcase.component.ts @@ -186,7 +186,7 @@ export class ShowcaseComponent implements OnChanges { }, { header: 'Integrate Web Component into page', - label: 'Entity can have definition for Web Component, "url" points to the component, "content" pass configuration data over to component.', + label: 'Entity can have definition for Web Component, "url" points to the component, "content" pass configuration data over to component. In this example component is registered under name "showcase"', example: ` { "name": "overview", @@ -222,7 +222,7 @@ export class ShowcaseComponent implements OnChanges { }, { "entityType": "main.overview::compound", - "url": "https://example.com/frontend/projects/wc/src/main.js#showcase", + "url": "https://example.com/main.js#showcase", "context": { "title": "Showcase" }, From b0b4ae7959fa7318751715d7bfc4cee23cab84be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Tue, 28 Jan 2025 18:13:39 +0100 Subject: [PATCH 08/22] feat/develop-example-content-for-openmfp --- frontend/projects/ui/src/app/app.routes.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/projects/ui/src/app/app.routes.ts b/frontend/projects/ui/src/app/app.routes.ts index f6022bbb..bdd3b3b1 100644 --- a/frontend/projects/ui/src/app/app.routes.ts +++ b/frontend/projects/ui/src/app/app.routes.ts @@ -3,10 +3,8 @@ import { CatalogComponent } from './catalog/catalog.component'; import { CatalogItemDetailsComponent } from './catalog-item-details/catalog-item-details.component'; import { OpenmcpComponent } from './openmcp/openmcp.component'; import { IronCoreComponent } from './iron-core/iron-core.component'; -import { ShowcaseComponent } from './showcase/showcase.component'; export const routes: Routes = [ - { path: 'showcase', component: ShowcaseComponent }, { path: 'global-catalog', component: CatalogComponent }, { path: 'catalog-item/:catalogItemId', From a4c4222a3d31fb1d8971692dcdacbc41bca398d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Thu, 30 Jan 2025 10:38:50 +0100 Subject: [PATCH 09/22] improve styling --- .../projects/wc/src/app/showcase/showcase.component.html | 2 +- .../projects/wc/src/app/showcase/showcase.component.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.html b/frontend/projects/wc/src/app/showcase/showcase.component.html index 3bffcd67..6fd60b45 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.html +++ b/frontend/projects/wc/src/app/showcase/showcase.component.html @@ -2,7 +2,7 @@ @for (item of showcaseItems; track $index) { - {{item.label}} + {{item.label}} {{item.example}} diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.scss b/frontend/projects/wc/src/app/showcase/showcase.component.scss index 0a0587d4..2782aceb 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.scss +++ b/frontend/projects/wc/src/app/showcase/showcase.component.scss @@ -2,12 +2,17 @@ display: flex; flex-wrap: wrap; gap: 1rem; + margin-top: 1rem; } .showcase-card { display: block; width: 700px; + .description { + margin: 10px; + } + .content { white-space: pre-wrap; word-spacing: 4px; From ac91d09de62facf87a566faea6902009eefe2a3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Fri, 31 Jan 2025 15:49:53 +0100 Subject: [PATCH 10/22] add show Example button --- .../wc/src/app/showcase/showcase.component.html | 6 +++++- .../wc/src/app/showcase/showcase.component.scss | 11 +++++++++++ .../wc/src/app/showcase/showcase.component.ts | 6 +++++- 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.html b/frontend/projects/wc/src/app/showcase/showcase.component.html index 6fd60b45..b7ca2e26 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.html +++ b/frontend/projects/wc/src/app/showcase/showcase.component.html @@ -1,7 +1,11 @@
@for (item of showcaseItems; track $index) { - + +
+ {{item.header}} + Show Example +
{{item.label}} {{item.example}} diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.scss b/frontend/projects/wc/src/app/showcase/showcase.component.scss index 2782aceb..57b80b5d 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.scss +++ b/frontend/projects/wc/src/app/showcase/showcase.component.scss @@ -19,3 +19,14 @@ } } +.header { + padding: 10px; + display: flex; + justify-content: space-between; + + .button { + padding: 5px; + border-radius: 5px; + } +} + diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.ts b/frontend/projects/wc/src/app/showcase/showcase.component.ts index 1ac66f47..256ba8c5 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.ts +++ b/frontend/projects/wc/src/app/showcase/showcase.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { Component, inject, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { LuigiClient } from '@luigi-project/client/luigi-element'; import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx'; @@ -27,6 +27,10 @@ export class ShowcaseComponent implements OnChanges { } } + show(index: number) { + console.log(index); + } + showcaseItems: ShowcasePanel[] = [ { header: 'Definition of an Entity', From 6bdef68282d047812bd6c0a2036844383823b7b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Fri, 31 Jan 2025 17:12:39 +0100 Subject: [PATCH 11/22] feat/develop-example-content-for-openmfp --- .../wc/src/app/showcase/showcase.component.html | 4 +++- .../wc/src/app/showcase/showcase.component.ts | 13 ++++++++++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.html b/frontend/projects/wc/src/app/showcase/showcase.component.html index b7ca2e26..33d61e9a 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.html +++ b/frontend/projects/wc/src/app/showcase/showcase.component.html @@ -4,7 +4,9 @@
{{item.header}} - Show Example + @if(item.linkToExample) { + Show Example + }
{{item.label}} {{item.example}} diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.ts b/frontend/projects/wc/src/app/showcase/showcase.component.ts index 256ba8c5..49517c50 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.ts +++ b/frontend/projects/wc/src/app/showcase/showcase.component.ts @@ -1,4 +1,4 @@ -import { Component, inject, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { LuigiClient } from '@luigi-project/client/luigi-element'; import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx'; @@ -6,6 +6,7 @@ interface ShowcasePanel { header: string; label: string; example: string; + linkToExample?: string; } @Component({ @@ -27,14 +28,17 @@ export class ShowcaseComponent implements OnChanges { } } - show(index: number) { - console.log(index); + show(pathSegment: string) { + if(this.LuigiClient) { + this.LuigiClient.linkManager().navigate(`/home/${pathSegment}`); + } } showcaseItems: ShowcasePanel[] = [ { header: 'Definition of an Entity', label: `Entity is basic building block of configuration, here is example how definition of entity should look like. Configuration consist of nodes and texts.`, + linkToExample: "firstExample", example: ` { "name": "overview", @@ -87,6 +91,7 @@ export class ShowcaseComponent implements OnChanges { { header: 'Iframe based Micro Frontend integration', label: 'Example showcasing entity configuration letting add Micro Frontend via iframe. Integration entity requires "requiredIFramePermissions".', + linkToExample: "secondExample", example: ` { "name": "micro-frontend-sample", @@ -129,6 +134,7 @@ export class ShowcaseComponent implements OnChanges { { header: 'Navigating in the virtualtree', label: `Configuration for two entities lets you find two tabs available "First Tab" and "Second Tab".`, + linkToExample: "thirdExample", example: ` { "name": "overview", @@ -191,6 +197,7 @@ export class ShowcaseComponent implements OnChanges { { header: 'Integrate Web Component into page', label: 'Entity can have definition for Web Component, "url" points to the component, "content" pass configuration data over to component. In this example component is registered under name "showcase"', + linkToExample: "fourthExample", example: ` { "name": "overview", From 5f40d7342b5fec39e0d774d66d3297f8a1a7589c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Mon, 3 Feb 2025 12:45:50 +0100 Subject: [PATCH 12/22] feat/develop-example-content-for-openmfp --- .../wc/src/app/showcase/showcase.component.ts | 50 +++++++++++-------- 1 file changed, 29 insertions(+), 21 deletions(-) diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.ts b/frontend/projects/wc/src/app/showcase/showcase.component.ts index 49517c50..710b04f8 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.ts +++ b/frontend/projects/wc/src/app/showcase/showcase.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { Component, Input, ViewEncapsulation } from '@angular/core'; import { LuigiClient } from '@luigi-project/client/luigi-element'; import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx'; @@ -17,16 +17,9 @@ interface ShowcasePanel { styleUrl: './showcase.component.scss', encapsulation: ViewEncapsulation.ShadowDom }) -export class ShowcaseComponent implements OnChanges { +export class ShowcaseComponent { @Input() LuigiClient?: LuigiClient; @Input() context?: any; - @Input() title = 'Showcase Overview'; - - ngOnChanges(changes: SimpleChanges) { - if (changes['context']) { - this.title = changes['context'].currentValue.title; - } - } show(pathSegment: string) { if(this.LuigiClient) { @@ -48,24 +41,37 @@ export class ShowcaseComponent implements OnChanges { "nodes": [ { "entityType": "global", - "pathSegment": "showcase", - "label": "Overview", - "icon": "business-one", - "tabNav": true, - "hideFromNav": false, + "pathSegment": "home", + "hideFromNav": true, "defineEntity": { "id": "main" }, - "compound": { - } + "children": [ + { + "pathSegment": "firstExample", + "label": "Overview", + "icon": "home", + "defineEntity": { + "id": "first" + }, + "compound": { + "renderer": { + "use": "grid", + "config": { + "columns": "1fr 1fr 1fr 1fr" + } + } + } + } + ] }, { - "entityType": "main::compound", + "entityType": "main.first::compound", "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", "context": { "border": "shadow", - "title": "{{showcase}}", - "description": "" + "title": "{{firstExampleTitle}}", + "description": "{{firstExampleDescription}}" } } ], @@ -73,13 +79,15 @@ export class ShowcaseComponent implements OnChanges { { "locale": "", "textDictionary": { - "showcase": "Showcase page" + "firstExampleTitle": "Definition of an Entity", + "firstExampleDescription": "Entity is basic building block of configuration." } }, { "locale": "en", "textDictionary": { - "showcase": "Showcase page" + "firstExampleTitle": "Definition of an Entity", + "firstExampleDescription": "Entity is basic building block of configuration." } } ] From 0c632907f7d33e68db57f51ff1ce3830562bacc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Mon, 3 Feb 2025 15:55:57 +0100 Subject: [PATCH 13/22] feat/develop-example-content-for-openmfp --- .../wc/src/app/showcase/showcase.component.ts | 49 ++++++++++++------- 1 file changed, 32 insertions(+), 17 deletions(-) diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.ts b/frontend/projects/wc/src/app/showcase/showcase.component.ts index 710b04f8..cfaec25d 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.ts +++ b/frontend/projects/wc/src/app/showcase/showcase.component.ts @@ -30,11 +30,11 @@ export class ShowcaseComponent { showcaseItems: ShowcasePanel[] = [ { header: 'Definition of an Entity', - label: `Entity is basic building block of configuration, here is example how definition of entity should look like. Configuration consist of nodes and texts.`, + label: `Entity is basic building block of configuration, here is example how definition of entity should look like. Configuration consist nodes and texts.`, linkToExample: "firstExample", example: ` { - "name": "overview", + "name": "entity-definition", "creationTimestamp": "", "luigiConfigFragment": { "data": { @@ -109,11 +109,27 @@ export class ShowcaseComponent { "nodes": [ { "entityType": "global", - "pathSegment": "showcase", - "label": "Overview", - "virtualTree": true, + "pathSegment": "home", + "hideFromNav": true, + "defineEntity": { + "id": "main" + }, + "children": [ + { + "pathSegment": "secondExample", + "label": "Overview", + "icon": "home", + "defineEntity": { + "id": "second" + } + } + ] + }, + { + "entityType": "main.second", + "pathSegment": "secondExample", + "hideFromNav": true, "url": "https://example.com/", - "icon": "home", "loadingIndicator": { "enabled": false }, @@ -140,19 +156,18 @@ export class ShowcaseComponent { ` }, { - header: 'Navigating in the virtualtree', - label: `Configuration for two entities lets you find two tabs available "First Tab" and "Second Tab".`, - linkToExample: "thirdExample", + header: 'Left side menu navigating', + label: `Configuration for two entities lets you find two tabs on the left side menu "First Tab" and "Second Tab".`, example: ` { - "name": "overview", + "name": "left-side-navigation", "creationTimestamp": "", "luigiConfigFragment": { "data": { "nodes": [ { "entityType": "global", - "pathSegment": "showcase", + "pathSegment": "overview", "hideFromNav": true, "defineEntity": { "id": "main" @@ -184,7 +199,7 @@ export class ShowcaseComponent { "context": { "border": "shadow", "title": "First page", - "description": "" + "description": "This is first page" } }, { @@ -193,7 +208,7 @@ export class ShowcaseComponent { "context": { "border": "shadow", "title": "Second page", - "description": "" + "description": "This is second page" } } ] @@ -204,18 +219,18 @@ export class ShowcaseComponent { }, { header: 'Integrate Web Component into page', - label: 'Entity can have definition for Web Component, "url" points to the component, "content" pass configuration data over to component. In this example component is registered under name "showcase"', + label: 'Entity can have definition for Web Component, "url" points to the component, "content" pass configuration data over to component. In this example component is registered under name "account-overview"', linkToExample: "fourthExample", example: ` { - "name": "overview", + "name": "web-component-integration", "creationTimestamp": "", "luigiConfigFragment": { "data": { "nodes": [ { "entityType": "global", - "pathSegment": "showcase", + "pathSegment": "home", "hideFromNav": true, "defineEntity": { "id": "main" @@ -241,7 +256,7 @@ export class ShowcaseComponent { }, { "entityType": "main.overview::compound", - "url": "https://example.com/main.js#showcase", + "url": "http://localhost:4200/main.js#account-overview", "context": { "title": "Showcase" }, From 946bde067f94033085f4e8c5595e2ff83eeaf759 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Tue, 4 Feb 2025 09:48:46 +0100 Subject: [PATCH 14/22] feat/develop-example-content-for-openmfp --- .../wc/src/app/showcase/showcase.component.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.ts b/frontend/projects/wc/src/app/showcase/showcase.component.ts index cfaec25d..068bee42 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.ts +++ b/frontend/projects/wc/src/app/showcase/showcase.component.ts @@ -48,11 +48,11 @@ export class ShowcaseComponent { }, "children": [ { - "pathSegment": "firstExample", + "pathSegment": "overview", "label": "Overview", "icon": "home", "defineEntity": { - "id": "first" + "id": "overview" }, "compound": { "renderer": { @@ -66,7 +66,7 @@ export class ShowcaseComponent { ] }, { - "entityType": "main.first::compound", + "entityType": "main.overview::compound", "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", "context": { "border": "shadow", @@ -116,17 +116,17 @@ export class ShowcaseComponent { }, "children": [ { - "pathSegment": "secondExample", + "pathSegment": "overview", "label": "Overview", "icon": "home", "defineEntity": { - "id": "second" + "id": "overview" } } ] }, { - "entityType": "main.second", + "entityType": "main.overview", "pathSegment": "secondExample", "hideFromNav": true, "url": "https://example.com/", @@ -167,7 +167,7 @@ export class ShowcaseComponent { "nodes": [ { "entityType": "global", - "pathSegment": "overview", + "pathSegment": "home", "hideFromNav": true, "defineEntity": { "id": "main" From 54e99159462bfdc93040f74848d92b5c85f66df7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Tue, 4 Feb 2025 12:42:22 +0100 Subject: [PATCH 15/22] feat/develop-example-content-for-openmfp --- .../wc/src/app/showcase/showcase.component.ts | 45 ++++++++----------- 1 file changed, 19 insertions(+), 26 deletions(-) diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.ts b/frontend/projects/wc/src/app/showcase/showcase.component.ts index 068bee42..f5a6929d 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.ts +++ b/frontend/projects/wc/src/app/showcase/showcase.component.ts @@ -119,35 +119,28 @@ export class ShowcaseComponent { "pathSegment": "overview", "label": "Overview", "icon": "home", - "defineEntity": { - "id": "overview" + "virtualTree": true, + "url": "https://example.com/", + "loadingIndicator": { + "enabled": false + }, + "requiredIFramePermissions": { + "sandbox": [ + "allow-forms", + "allow-modals", + "allow-popups", + "allow-popups-to-escape-sandbox", + "allow-same-origin", + "allow-scripts", + "allow-download" + ], + "allow": [ + "clipboard-read", + "clipboard-write" + ] } } ] - }, - { - "entityType": "main.overview", - "pathSegment": "secondExample", - "hideFromNav": true, - "url": "https://example.com/", - "loadingIndicator": { - "enabled": false - }, - "requiredIFramePermissions": { - "sandbox": [ - "allow-forms", - "allow-modals", - "allow-popups", - "allow-popups-to-escape-sandbox", - "allow-same-origin", - "allow-scripts", - "allow-download" - ], - "allow": [ - "clipboard-read", - "clipboard-write" - ] - } } ] } From ff1d1bd21f9d0ccf7a2a598ab7c0b4de967ec73c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Tue, 4 Feb 2025 15:00:03 +0100 Subject: [PATCH 16/22] feat/develop-example-content-for-openmfp --- frontend/projects/ui/src/app/app.routes.ts | 4 ++++ .../showcase-details.component.html | 9 +++++++++ .../showcase-details.component.scss | 8 ++++++++ .../showcase-details.component.ts | 17 +++++++++++++++++ .../ui/src/app/showcase/showcase.component.html | 10 ++++++++++ .../ui/src/app/showcase/showcase.component.scss | 8 ++++++++ .../ui/src/app/showcase/showcase.component.ts | 17 +++++++++++++++++ .../wc/src/app/showcase/showcase.component.ts | 3 ++- 8 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.html create mode 100644 frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.scss create mode 100644 frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.ts create mode 100644 frontend/projects/ui/src/app/showcase/showcase.component.html create mode 100644 frontend/projects/ui/src/app/showcase/showcase.component.scss create mode 100644 frontend/projects/ui/src/app/showcase/showcase.component.ts diff --git a/frontend/projects/ui/src/app/app.routes.ts b/frontend/projects/ui/src/app/app.routes.ts index bdd3b3b1..3579259c 100644 --- a/frontend/projects/ui/src/app/app.routes.ts +++ b/frontend/projects/ui/src/app/app.routes.ts @@ -3,8 +3,12 @@ import { CatalogComponent } from './catalog/catalog.component'; import { CatalogItemDetailsComponent } from './catalog-item-details/catalog-item-details.component'; import { OpenmcpComponent } from './openmcp/openmcp.component'; import { IronCoreComponent } from './iron-core/iron-core.component'; +import { ShowcaseComponent } from './showcase/showcase.component'; +import { ShowcaseDetailsComponent } from './showcase/showcase-details/showcase-details.component'; export const routes: Routes = [ + { path: 'showcase', component: ShowcaseComponent }, + { path: 'showcase/showcase-details', component: ShowcaseDetailsComponent }, { path: 'global-catalog', component: CatalogComponent }, { path: 'catalog-item/:catalogItemId', diff --git a/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.html b/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.html new file mode 100644 index 00000000..0433f151 --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.html @@ -0,0 +1,9 @@ + + + +
+ Click here ! +
+ + diff --git a/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.scss b/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.scss new file mode 100644 index 00000000..0e0b29b7 --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.scss @@ -0,0 +1,8 @@ +.card { + width: 300px; +} + +.content { + margin-left: 10px; + padding: 5px; +} diff --git a/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.ts b/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.ts new file mode 100644 index 00000000..70e8605b --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase-details/showcase-details.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import { linkManager } from '@luigi-project/client'; +import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx'; + +@Component({ + selector: 'app-showcase-details', + standalone: true, + imports: [Ui5WebcomponentsModule], + templateUrl: './showcase-details.component.html', + styleUrl: './showcase-details.component.scss' +}) +export class ShowcaseDetailsComponent { + + navigate() { + linkManager().fromContext('showcase').navigate(`/`); + } +} diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.html b/frontend/projects/ui/src/app/showcase/showcase.component.html new file mode 100644 index 00000000..0d960ed8 --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase.component.html @@ -0,0 +1,10 @@ + + + +
+ Click here ! +
+ + + diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.scss b/frontend/projects/ui/src/app/showcase/showcase.component.scss new file mode 100644 index 00000000..0e0b29b7 --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase.component.scss @@ -0,0 +1,8 @@ +.card { + width: 300px; +} + +.content { + margin-left: 10px; + padding: 5px; +} diff --git a/frontend/projects/ui/src/app/showcase/showcase.component.ts b/frontend/projects/ui/src/app/showcase/showcase.component.ts new file mode 100644 index 00000000..144e6914 --- /dev/null +++ b/frontend/projects/ui/src/app/showcase/showcase.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx'; +import { linkManager } from '@luigi-project/client'; + +@Component({ + selector: 'app-showcase', + standalone: true, + imports: [Ui5WebcomponentsModule], + templateUrl: './showcase.component.html', + styleUrl: './showcase.component.scss' +}) +export class ShowcaseComponent { + + navigate() { + linkManager().fromContext('showcase').navigate(`/showcase-details`); + } +} diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.ts b/frontend/projects/wc/src/app/showcase/showcase.component.ts index f5a6929d..e36a4ba2 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.ts +++ b/frontend/projects/wc/src/app/showcase/showcase.component.ts @@ -120,7 +120,8 @@ export class ShowcaseComponent { "label": "Overview", "icon": "home", "virtualTree": true, - "url": "https://example.com/", + "navigationContext": "showcase", + "url": "http://localhost:4400/#/showcase", "loadingIndicator": { "enabled": false }, From c43496cb43b46b0a8ac8a69dca210e33eccaed93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Wed, 5 Feb 2025 10:19:15 +0100 Subject: [PATCH 17/22] feat/develop-example-content-for-openmfp --- frontend/projects/wc/src/app/showcase/showcase.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.ts b/frontend/projects/wc/src/app/showcase/showcase.component.ts index e36a4ba2..805f5081 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.ts +++ b/frontend/projects/wc/src/app/showcase/showcase.component.ts @@ -121,7 +121,7 @@ export class ShowcaseComponent { "icon": "home", "virtualTree": true, "navigationContext": "showcase", - "url": "http://localhost:4400/#/showcase", + "url": "https://example-content.some-domain.com/ui/example-content/index.html#/showcase", "loadingIndicator": { "enabled": false }, @@ -250,7 +250,7 @@ export class ShowcaseComponent { }, { "entityType": "main.overview::compound", - "url": "http://localhost:4200/main.js#account-overview", + "url": "https://example-content.some-domain.com/ui/wc/main.js#account-overview", "context": { "title": "Showcase" }, From f465c53cebdb1a85ad49770ae27538bbd44b9c82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Thu, 6 Feb 2025 15:38:41 +0100 Subject: [PATCH 18/22] feat/develop-example-content-for-openmfp --- .../showcase-examples/firstExample.json | 51 ++++++++ .../showcase-examples/fourthExample.json | 34 +++++ .../showcase-examples/secondExample.json | 35 +++++ .../wc/src/app/showcase/showcase.component.ts | 123 ++++++------------ 4 files changed, 163 insertions(+), 80 deletions(-) create mode 100644 frontend/projects/ui/src/assets/showcase-examples/firstExample.json create mode 100644 frontend/projects/ui/src/assets/showcase-examples/fourthExample.json create mode 100644 frontend/projects/ui/src/assets/showcase-examples/secondExample.json diff --git a/frontend/projects/ui/src/assets/showcase-examples/firstExample.json b/frontend/projects/ui/src/assets/showcase-examples/firstExample.json new file mode 100644 index 00000000..0289117a --- /dev/null +++ b/frontend/projects/ui/src/assets/showcase-examples/firstExample.json @@ -0,0 +1,51 @@ +{ + "name": "entity-definition-example", + "creationTimestamp": "", + "luigiConfigFragment": { + "data": { + "nodes": [ + { + "entityType": "main", + "pathSegment": "firstExample", + "hideFromNav": true, + "defineEntity": { + "id": "first-example" + }, + "compound": { + "renderer": { + "use": "grid", + "config": { + "columns": "1fr 1fr 1fr 1fr" + } + } + } + }, + { + "entityType": "main.first-example::compound", + "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", + "context": { + "border": "shadow", + "title": "{{firstExampleTitle}}", + "description": "{{firstExampleDescription}}" + } + } + ], + "texts": [ + { + "locale": "", + "textDictionary": { + "firstExampleTitle": "Definition of an Entity", + "firstExampleDescription": "Entity is basic building block of configuration." + } + }, + { + "locale": "en", + "textDictionary": { + "firstExampleTitle": "Definition of an Entity", + "firstExampleDescription": "Entity is basic building block of configuration." + } + } + ] + } + } +} diff --git a/frontend/projects/ui/src/assets/showcase-examples/fourthExample.json b/frontend/projects/ui/src/assets/showcase-examples/fourthExample.json new file mode 100644 index 00000000..0bb2d99f --- /dev/null +++ b/frontend/projects/ui/src/assets/showcase-examples/fourthExample.json @@ -0,0 +1,34 @@ +{ + "name": "web-component-integration-example", + "creationTimestamp": "", + "luigiConfigFragment": { + "data": { + "nodes": [ + { + "entityType": "main", + "pathSegment": "fourthExample", + "hideFromNav": true, + "defineEntity": { + "id": "fourth-example" + }, + "compound": { + } + }, + { + "entityType": "main.fourth-example::compound", + "url": "http://localhost:4200/main.js#account-overview", + "context": { + "title": "Showcase" + }, + "layoutConfig": { + "row": "1", + "column": "1 / -1" + }, + "webcomponent": { + "selfRegistered": true + } + } + ] + } + } +} diff --git a/frontend/projects/ui/src/assets/showcase-examples/secondExample.json b/frontend/projects/ui/src/assets/showcase-examples/secondExample.json new file mode 100644 index 00000000..bb27b161 --- /dev/null +++ b/frontend/projects/ui/src/assets/showcase-examples/secondExample.json @@ -0,0 +1,35 @@ +{ + "name": "micro-frontend-iframe-example", + "creationTimestamp": "", + "luigiConfigFragment": { + "data": { + "nodes": [ + { + "entityType": "main", + "pathSegment": "secondExample", + "virtualTree": true, + "navigationContext": "showcase", + "url": "http://localhost:4400/index.html#/showcase", + "loadingIndicator": { + "enabled": false + }, + "requiredIFramePermissions": { + "sandbox": [ + "allow-forms", + "allow-modals", + "allow-popups", + "allow-popups-to-escape-sandbox", + "allow-same-origin", + "allow-scripts", + "allow-download" + ], + "allow": [ + "clipboard-read", + "clipboard-write" + ] + } + } + ] + } + } +} diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.ts b/frontend/projects/wc/src/app/showcase/showcase.component.ts index 805f5081..e40db17d 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.ts +++ b/frontend/projects/wc/src/app/showcase/showcase.component.ts @@ -34,39 +34,29 @@ export class ShowcaseComponent { linkToExample: "firstExample", example: ` { - "name": "entity-definition", + "name": "entity-definition-example", "creationTimestamp": "", "luigiConfigFragment": { "data": { "nodes": [ { - "entityType": "global", - "pathSegment": "home", + "entityType": "main", + "pathSegment": "firstExample", "hideFromNav": true, "defineEntity": { - "id": "main" + "id": "first-example" }, - "children": [ - { - "pathSegment": "overview", - "label": "Overview", - "icon": "home", - "defineEntity": { - "id": "overview" - }, - "compound": { - "renderer": { - "use": "grid", - "config": { - "columns": "1fr 1fr 1fr 1fr" - } - } + "compound": { + "renderer": { + "use": "grid", + "config": { + "columns": "1fr 1fr 1fr 1fr" } } - ] + } }, { - "entityType": "main.overview::compound", + "entityType": "main.first-example::compound", "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", "context": { "border": "shadow", @@ -102,46 +92,35 @@ export class ShowcaseComponent { linkToExample: "secondExample", example: ` { - "name": "micro-frontend-sample", + "name": "micro-frontend-iframe-example", "creationTimestamp": "", "luigiConfigFragment": { "data": { "nodes": [ { - "entityType": "global", - "pathSegment": "home", - "hideFromNav": true, - "defineEntity": { - "id": "main" + "entityType": "main", + "pathSegment": "secondExample", + "virtualTree": true, + "navigationContext": "showcase", + "url": "http://localhost:4400/index.html#/showcase", + "loadingIndicator": { + "enabled": false }, - "children": [ - { - "pathSegment": "overview", - "label": "Overview", - "icon": "home", - "virtualTree": true, - "navigationContext": "showcase", - "url": "https://example-content.some-domain.com/ui/example-content/index.html#/showcase", - "loadingIndicator": { - "enabled": false - }, - "requiredIFramePermissions": { - "sandbox": [ - "allow-forms", - "allow-modals", - "allow-popups", - "allow-popups-to-escape-sandbox", - "allow-same-origin", - "allow-scripts", - "allow-download" - ], - "allow": [ - "clipboard-read", - "clipboard-write" - ] - } - } - ] + "requiredIFramePermissions": { + "sandbox": [ + "allow-forms", + "allow-modals", + "allow-popups", + "allow-popups-to-escape-sandbox", + "allow-same-origin", + "allow-scripts", + "allow-download" + ], + "allow": [ + "clipboard-read", + "clipboard-write" + ] + } } ] } @@ -154,7 +133,7 @@ export class ShowcaseComponent { label: `Configuration for two entities lets you find two tabs on the left side menu "First Tab" and "Second Tab".`, example: ` { - "name": "left-side-navigation", + "name": "left-side-navigation-example", "creationTimestamp": "", "luigiConfigFragment": { "data": { @@ -217,40 +196,24 @@ export class ShowcaseComponent { linkToExample: "fourthExample", example: ` { - "name": "web-component-integration", + "name": "web-component-integration-example", "creationTimestamp": "", "luigiConfigFragment": { "data": { "nodes": [ { - "entityType": "global", - "pathSegment": "home", + "entityType": "main", + "pathSegment": "fourthExample", "hideFromNav": true, "defineEntity": { - "id": "main" + "id": "fourth-example" }, - "children": [ - { - "pathSegment": "overview", - "label": "Overview", - "icon": "home", - "defineEntity": { - "id": "overview" - }, - "compound": { - "renderer": { - "use": "grid", - "config": { - "columns": "1fr 1fr 1fr 1fr" - } - } - } - } - ] + "compound": { + } }, { - "entityType": "main.overview::compound", - "url": "https://example-content.some-domain.com/ui/wc/main.js#account-overview", + "entityType": "main.fourth-example::compound", + "url": "http://localhost:4200/main.js#account-overview", "context": { "title": "Showcase" }, From ee7235bd2e89d64eab06c76b337fdeeafe880d0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Thu, 6 Feb 2025 16:04:26 +0100 Subject: [PATCH 19/22] feat/develop-example-content-for-openmfp --- .../projects/wc/src/app/showcase/showcase.component.html | 2 +- .../projects/wc/src/app/showcase/showcase.component.scss | 7 +++++-- .../projects/wc/src/app/showcase/showcase.component.ts | 4 ++-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.html b/frontend/projects/wc/src/app/showcase/showcase.component.html index 33d61e9a..f17f3d8b 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.html +++ b/frontend/projects/wc/src/app/showcase/showcase.component.html @@ -3,7 +3,7 @@
- {{item.header}} + {{item.header}} @if(item.linkToExample) { Show Example } diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.scss b/frontend/projects/wc/src/app/showcase/showcase.component.scss index 57b80b5d..edd87e9c 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.scss +++ b/frontend/projects/wc/src/app/showcase/showcase.component.scss @@ -7,7 +7,6 @@ .showcase-card { display: block; - width: 700px; .description { margin: 10px; @@ -22,9 +21,13 @@ .header { padding: 10px; display: flex; - justify-content: space-between; + + .title { + padding-top: 5px; + } .button { + margin-left: 30px; padding: 5px; border-radius: 5px; } diff --git a/frontend/projects/wc/src/app/showcase/showcase.component.ts b/frontend/projects/wc/src/app/showcase/showcase.component.ts index e40db17d..68dd7c50 100644 --- a/frontend/projects/wc/src/app/showcase/showcase.component.ts +++ b/frontend/projects/wc/src/app/showcase/showcase.component.ts @@ -102,7 +102,7 @@ export class ShowcaseComponent { "pathSegment": "secondExample", "virtualTree": true, "navigationContext": "showcase", - "url": "http://localhost:4400/index.html#/showcase", + "url": "https://example-content.some-domain.com/ui/example-content/index.html#/showcase", "loadingIndicator": { "enabled": false }, @@ -213,7 +213,7 @@ export class ShowcaseComponent { }, { "entityType": "main.fourth-example::compound", - "url": "http://localhost:4200/main.js#account-overview", + "url": "https://example-content.some-domain.com/ui/wc/main.js#account-overview", "context": { "title": "Showcase" }, From 487d02a8949da839490daa7a46ec5f1b10aaeeda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Fri, 7 Feb 2025 11:30:07 +0100 Subject: [PATCH 20/22] feat/develop-example-content-for-openmfp --- .../projects/ui/src/assets/showcase-examples/fourthExample.json | 2 +- .../projects/ui/src/assets/showcase-examples/secondExample.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/projects/ui/src/assets/showcase-examples/fourthExample.json b/frontend/projects/ui/src/assets/showcase-examples/fourthExample.json index 0bb2d99f..f60c50ef 100644 --- a/frontend/projects/ui/src/assets/showcase-examples/fourthExample.json +++ b/frontend/projects/ui/src/assets/showcase-examples/fourthExample.json @@ -16,7 +16,7 @@ }, { "entityType": "main.fourth-example::compound", - "url": "http://localhost:4200/main.js#account-overview", + "urlSuffix": "/main.js#account-overview", "context": { "title": "Showcase" }, diff --git a/frontend/projects/ui/src/assets/showcase-examples/secondExample.json b/frontend/projects/ui/src/assets/showcase-examples/secondExample.json index bb27b161..943e8e3d 100644 --- a/frontend/projects/ui/src/assets/showcase-examples/secondExample.json +++ b/frontend/projects/ui/src/assets/showcase-examples/secondExample.json @@ -9,7 +9,7 @@ "pathSegment": "secondExample", "virtualTree": true, "navigationContext": "showcase", - "url": "http://localhost:4400/index.html#/showcase", + "urlSuffix": "/index.html#/showcase", "loadingIndicator": { "enabled": false }, From 41d04214650afaf3e995367cc1a4f787dbd4dbff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Rogoda?= Date: Fri, 7 Feb 2025 13:19:05 +0100 Subject: [PATCH 21/22] feat/develop-example-content-for-openmfp --- .../projects/ui/src/assets/showcase-examples/fourthExample.json | 2 +- .../projects/ui/src/assets/showcase-examples/secondExample.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/projects/ui/src/assets/showcase-examples/fourthExample.json b/frontend/projects/ui/src/assets/showcase-examples/fourthExample.json index f60c50ef..4b13af2b 100644 --- a/frontend/projects/ui/src/assets/showcase-examples/fourthExample.json +++ b/frontend/projects/ui/src/assets/showcase-examples/fourthExample.json @@ -16,7 +16,7 @@ }, { "entityType": "main.fourth-example::compound", - "urlSuffix": "/main.js#account-overview", + "urlSuffix": "/ui/example-content/main.js#account-overview", "context": { "title": "Showcase" }, diff --git a/frontend/projects/ui/src/assets/showcase-examples/secondExample.json b/frontend/projects/ui/src/assets/showcase-examples/secondExample.json index 943e8e3d..586d7f8f 100644 --- a/frontend/projects/ui/src/assets/showcase-examples/secondExample.json +++ b/frontend/projects/ui/src/assets/showcase-examples/secondExample.json @@ -9,7 +9,7 @@ "pathSegment": "secondExample", "virtualTree": true, "navigationContext": "showcase", - "urlSuffix": "/index.html#/showcase", + "urlSuffix": "/ui/example-content/index.html#/showcase", "loadingIndicator": { "enabled": false }, From f664cdd0c5855e8ba36c44b5c02f82ad5d82ec72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bastian=20Echterh=C3=B6lter?= Date: Fri, 7 Feb 2025 17:24:53 +0100 Subject: [PATCH 22/22] feat: add cdm jsons for example-content --- frontend/package.json | 2 +- frontend/projects/ui/src/assets/accounts.json | 33 ------------- frontend/projects/ui/src/assets/config.json | 49 +++++++++++++++++++ frontend/projects/wc/src/assets/config.json | 23 +++++++++ package.json | 1 + 5 files changed, 74 insertions(+), 34 deletions(-) delete mode 100644 frontend/projects/ui/src/assets/accounts.json create mode 100644 frontend/projects/ui/src/assets/config.json create mode 100644 frontend/projects/wc/src/assets/config.json diff --git a/frontend/package.json b/frontend/package.json index 059771e6..23f62f93 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,7 +4,7 @@ "scripts": { "ng": "ng", "start": "ng serve ui", - "start:wc": "ng serve wc --single-bundle --no-live-reload", + "start:wc": "ng serve wc --single-bundle --no-live-reload --port=4201", "build": "ng build ui", "build:wc": "ng build wc --single-bundle --output-hashing none", "build-prod": "ng build ui -c production", diff --git a/frontend/projects/ui/src/assets/accounts.json b/frontend/projects/ui/src/assets/accounts.json deleted file mode 100644 index d430bbd1..00000000 --- a/frontend/projects/ui/src/assets/accounts.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "name": "accounts", - "luigiConfigFragment": [ - { - "data": { - "nodes": [ - { - "entityType": "global", - "pathSegment": "accounts", - "label": "Accounts", - "icon": "folder", - "hideFromNav": true, - "defineEntity": { - "id": "accounts" - }, - "children": [ - { - "pathSegment": "accounts", - "label": "Accounts", - "icon": "folder", - "urlSuffix": "/index.html#/accounts", - "context": { - "title": "Select or create your account", - "content": " " - } - } - ] - } - ] - } - } - ] -} diff --git a/frontend/projects/ui/src/assets/config.json b/frontend/projects/ui/src/assets/config.json new file mode 100644 index 00000000..3f2dfdef --- /dev/null +++ b/frontend/projects/ui/src/assets/config.json @@ -0,0 +1,49 @@ +{ + "name": "configuration-examples-overview", + "creationTimestamp": "", + "luigiConfigFragment": { + "data": { + "nodes": [ + { + "entityType": "global", + "pathSegment": "home", + "hideFromNav": true, + "defineEntity": { + "id": "main" + }, + "children": [ + { + "pathSegment": "overview", + "label": "Configuration examples overview", + "icon": "home", + "defineEntity": { + "id": "overview" + }, + "compound": { + "renderer": { + "use": "grid", + "config": { + "columns": "1fr 1fr 1fr 1fr" + } + } + } + } + ] + }, + { + "entityType": "main.overview::compound", + "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", + "context": { + "border": "shadow", + "title": "Welcome to OpenMFP Portal", + "description": "Click on Show Example button to preview particular feature." + }, + "layoutConfig": { + "row": "1", + "column": "1 / -1" + } + } + ] + } + } +} diff --git a/frontend/projects/wc/src/assets/config.json b/frontend/projects/wc/src/assets/config.json new file mode 100644 index 00000000..e3176150 --- /dev/null +++ b/frontend/projects/wc/src/assets/config.json @@ -0,0 +1,23 @@ +{ + "name": "configuration-examples-overview", + "creationTimestamp": "", + "luigiConfigFragment": { + "data": { + "nodes": [ + { + "entityType": "main.overview::compound", + "url": "https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js", + "context": { + "border": "shadow", + "title": "Welcome to OpenMFP Portal", + "description": "Click on Show Example button to preview particular feature." + }, + "layoutConfig": { + "row": "1", + "column": "1 / -1" + } + } + ] + } + } +} diff --git a/package.json b/package.json index a3445cad..3c231571 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "scripts": { "npm:install:ui": "cd frontend && npm install", "start": "cd frontend && npm start", + "start:wc": "cd frontend && npm run start:wc", "test": "concurrently 'npm:test:*(!cov)'", "test:ui": "cd frontend && npm run test", "build": "concurrently 'npm:build:*'",