Browse Source

feat(dev-server): Add examples for lazy & shared UI plugins

Michael Bromley 6 years ago
parent
commit
0aadbd8d29

+ 40 - 0
packages/dev-server/ui-plugin/lazy-module/ui-plugin.module.ts

@@ -0,0 +1,40 @@
+import { Component, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ModalService, SharedModule } from '@vendure/admin-ui/src';
+
+@Component({
+    selector: 'plugin-test-component',
+    template: `
+        <p>Test component works!!</p>
+        <button class="btn btn-primary" (click)="handleClick()">Click me!</button>
+    `,
+})
+export class TestComponent {
+    constructor(private modalService: ModalService) {}
+
+    handleClick() {
+        this.modalService
+            .dialog({
+                title: 'Did it work?',
+                buttons: [{ label: 'Yes!!!!', returnValue: true, type: 'primary' }],
+            })
+            .subscribe(val => {
+                // tslint:disable-next-line:no-console
+                console.log(val);
+            });
+    }
+}
+
+@NgModule({
+    imports: [
+        SharedModule,
+        RouterModule.forChild([
+            {
+                path: 'test',
+                component: TestComponent,
+            },
+        ]),
+    ],
+    declarations: [TestComponent],
+})
+export class TestModule {}

+ 37 - 0
packages/dev-server/ui-plugin/shared-module/ui-shared-plugin.module.ts

@@ -0,0 +1,37 @@
+import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { NavBuilderService, SharedModule } from '@vendure/admin-ui/src';
+import { interval } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@NgModule({
+    imports: [SharedModule],
+    providers: [
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: addNavItems,
+            deps: [NavBuilderService],
+        },
+    ],
+})
+export class TestSharedModule {}
+
+export function addNavItems(navBuilder: NavBuilderService) {
+    return () => {
+        navBuilder.addNavMenuSection(
+            {
+                id: 'test-plugin',
+                label: 'Test Plugin',
+                items: [
+                    {
+                        id: 'stats',
+                        label: 'Test',
+                        routerLink: ['/extensions/test'],
+                        icon: 'line-chart',
+                    },
+                ],
+            },
+            'settings',
+        );
+    };
+}

+ 8 - 1
packages/dev-server/ui-plugin/ui-plugin.ts

@@ -6,9 +6,16 @@ import path from 'path';
 export class UiPlugin {
     static uiExtensions: AdminUiExtension[] = [
         {
-            ngModulePath: path.join(__dirname, 'module'),
+            type: 'lazy',
+            ngModulePath: path.join(__dirname, 'lazy-module'),
             ngModuleFileName: 'ui-plugin.module.ts',
             ngModuleName: 'TestModule',
         },
+        {
+            type: 'shared',
+            ngModulePath: path.join(__dirname, 'shared-module'),
+            ngModuleFileName: 'ui-shared-plugin.module.ts',
+            ngModuleName: 'TestSharedModule',
+        },
     ];
 }