Home Esplora Aiuto
Accedi
cturan
/
vendure
mirror da https://github.com/vendure-ecommerce/vendure
1
0
Forka 0
File Problemi 0 Wiki
Sfoglia il codice sorgente

feat(dev-server): Example embedded UI extensions

Relates to #225
Michael Bromley 6 anni fa
parent
085c7cf969
commit
532b952792
8 ha cambiato i file con 139 aggiunte e 13 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 1 1
      packages/admin-ui/src/app/core/components/notification/notification.component.ts
  2. 2 2
      packages/dev-server/dev-config.ts
  3. 1 0
      packages/dev-server/package.json
  4. 10 0
      packages/dev-server/ui-plugin/extensions/js-app/index.html
  5. 29 4
      packages/dev-server/ui-plugin/extensions/ui-plugin.module.ts
  6. 11 6
      packages/dev-server/ui-plugin/extensions/ui-shared-plugin.module.ts
  7. 81 0
      packages/dev-server/ui-plugin/extensions/vue-app/index.html
  8. 4 0
      packages/dev-server/ui-plugin/ui-plugin.ts

+ 1 - 1
packages/admin-ui/src/app/core/components/notification/notification.component.ts
Vedi File 

@@ -1,4 +1,4 @@
 
-import { ChangeDetectionStrategy, Component, ElementRef, HostListener, ViewChild } from '@angular/core';
 
+import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
 
 
 import { NotificationType } from '../../providers/notification/notification.service';

+ 2 - 2
packages/dev-server/dev-config.ts
Vedi File 

@@ -72,8 +72,8 @@ export const devConfig: VendureConfig = {
 
         UiPlugin,
 
         AdminUiPlugin.init({
 
             port: 5001,
 
-            // extensions: UiPlugin.uiExtensions,
 
-            // watch: true,
 
+            extensions: UiPlugin.uiExtensions,
 
+            watch: true,
 
         }),
 
     ],
 
 };

+ 1 - 0
packages/dev-server/package.json
Vedi File 

@@ -25,6 +25,7 @@
 
   "devDependencies": {
 
     "@types/csv-stringify": "^3.1.0",
 
     "@vendure/testing": "^0.6.4",
 
+    "@vendure/ui-devkit": "^0.6.4",
 
     "concurrently": "^5.0.0",
 
     "csv-stringify": "^5.3.3"
 
   }

+ 10 - 0
packages/dev-server/ui-plugin/extensions/js-app/index.html
Vedi File 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<h1>Hello from the plain JS app</h1>
 
+</body>
 
+</html>

+ 29 - 4
packages/dev-server/ui-plugin/extensions/ui-plugin.module.ts
Vedi File 

@@ -1,6 +1,11 @@
 
 import { Component, NgModule } from '@angular/core';
 
 import { RouterModule } from '@angular/router';
 
-import { ModalService, SharedModule } from '@vendure/admin-ui/src';
 
+import {
 
+    ExtensionHostComponent,
 
+    ExtensionHostConfig,
 
+    ModalService,
 
+    SharedModule,
 
+} from '@vendure/admin-ui/src';
 
 
 @Component({
 
     selector: 'plugin-test-component',
 
@@ -26,15 +31,35 @@ export class TestComponent {
 
 }
 
 
 @NgModule({
 
+    declarations: [TestComponent],
 
     imports: [
 
         SharedModule,
 
         RouterModule.forChild([
 
             {
 
-                path: 'test',
 
-                component: TestComponent,
 
+                path: 'js-app',
 
+                component: ExtensionHostComponent,
 
+                data: {
 
+                    extensionHostConfig: new ExtensionHostConfig({
 
+                        extensionUrl: './assets/js-app/index.html',
 
+                    }),
 
+                },
 
+            },
 
+            {
 
+                path: 'vue-app',
 
+                component: ExtensionHostComponent,
 
+                data: {
 
+                    breadcrumb: [
 
+                        {
 
+                            label: 'Vue.js extension',
 
+                            link: ['./'],
 
+                        },
 
+                    ],
 
+                    extensionHostConfig: new ExtensionHostConfig({
 
+                        extensionUrl: './assets/vue-app/index.html',
 
+                    }),
 
+                },
 
             },
 
         ]),
 
     ],
 
-    declarations: [TestComponent],
 
 })
 
 export class TestModule {}

+ 11 - 6
packages/dev-server/ui-plugin/extensions/ui-shared-plugin.module.ts
Vedi File 

@@ -10,7 +10,6 @@ import {
 
     NavBuilderService,
 
     SharedModule,
 
 } from '@vendure/admin-ui/src';
 
-import { unique } from '@vendure/common/lib/unique';
 
 import gql from 'graphql-tag';
 
 import { Observable, of } from 'rxjs';
 
 import { startWith, switchMap } from 'rxjs/operators';
 
@@ -142,13 +141,19 @@ export function addNavItems(navBuilder: NavBuilderService) {
 
         navBuilder.addNavMenuSection(
 
             {
 
                 id: 'test-plugin',
 
-                label: 'Test Plugin',
 
+                label: 'UI Test Plugin',
 
                 items: [
 
                     {
 
-                        id: 'stats',
 
-                        label: 'Test',
 
-                        routerLink: ['/extensions/test'],
 
-                        icon: 'line-chart',
 
+                        id: 'js-app',
 
+                        label: 'Plain JS App',
 
+                        routerLink: ['/extensions/js-app'],
 
+                        icon: 'code',
 
+                    },
 
+                    {
 
+                        id: 'vue-app',
 
+                        label: 'Vue App',
 
+                        routerLink: ['/extensions/vue-app'],
 
+                        icon: 'code',
 
                     },
 
                 ],
 
             },

+ 81 - 0
packages/dev-server/ui-plugin/extensions/vue-app/index.html
Vedi File 

@@ -0,0 +1,81 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="UTF-8" />
 
+        <title>Vue App</title>
 
+        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
+        <script src="../devkit/ui-devkit.js"></script>
 
+        <link rel="stylesheet" href="https://unpkg.com/@clr/ui/clr-ui.min.css" />
 
+    </head>
 
+    <body>
 
+        <div id="app" style="padding: 1rem;">
 
+            <div>
 
+                <h1>Hello from Vue.js!</h1>
 
+                <button v-on:click="getProducts" class="btn btn-primary">Get products</button>
 
+                <h3>Products</h3>
 
+                <ol>
 
+                    <li v-for="product in products">
 
+                        {{ product.name }}
 
+                        <span class="label label-success" v-if="product.enabled">Enabled</span>
 
+                        <span class="label label-danger" v-else>Disabled</span>
 
+                        <button
 
+                            v-on:click="toggleEnabled(product.id, !product.enabled)"
 
+                            class="btn btn-sm btn-secondary"
 
+                        >
 
+                            toggle
 
+                        </button>
 
+                    </li>
 
+                </ol>
 
+            </div>
 
+        </div>
 
+        <script>
 
+            var app = new Vue({
 
+                el: '#app',
 
+                data: {
 
+                    message: 'Hello Vue!',
 
+                    products: [],
 
+                },
 
+                methods: {
 
+                    getProducts: function() {
 
+                        const query = `
 
+                        query GetProducts($skip: Int, $take: Int) {
 
+                            products(options: { skip: $skip, take: $take }) {
 
+                                items { id, name, enabled },
 
+                                totalItems
 
+                            }
 
+                        }`;
 
+                        this.sub = VendureUiDevkit.graphQlQuery(query, {
 
+                            skip: 0,
 
+                            take: 10,
 
+                        }).stream.subscribe(
 
+                            val => {
 
+                                this.products = val.products.items;
 
+                            },
 
+                            err => console.error(err),
 
+                            () => console.log('completed products stream'),
 
+                        );
 
+                    },
 
+                    toggleEnabled: function(id, enabled) {
 
+                        const mutation = `
 
+                        mutation ToggleEnabled($id: ID!, $enabled: Boolean!) {
 
+                            updateProduct(input: { id: $id, enabled: $enabled }) {
 
+                                id
 
+                                enabled
 
+                            }
 
+                        }
 
+                        `;
 
+                        VendureUiDevkit.graphQlMutation(mutation, { id, enabled }).then(val => {
 
+                            VendureUiDevkit.notify({
 
+                                message: 'Updated Product',
 
+                            });
 
+                        });
 
+                    },
 
+                },
 
+                beforeDestroy: function() {
 
+                    console.log('destroying!');
 
+                    this.sub.unsubscribe();
 
+                },
 
+            });
 
+        </script>
 
+    </body>
 
+</html>

+ 4 - 0
packages/dev-server/ui-plugin/ui-plugin.ts
Vedi File 

@@ -19,6 +19,10 @@ export class UiPlugin {
 
                     ngModuleName: 'TestSharedModule',
 
                 },
 
             ],
 
+            staticAssets: [
 
+                path.join(__dirname, 'extensions/js-app'),
 
+                path.join(__dirname, 'extensions/vue-app'),
 
+            ],
 
         },
 
     ];
 
 }