@worktile/planet 10.0.0 → 12.1.1

package/examples/portal/src/app/app.component.ts

@@ -0,0 +1,111 @@
+import { Component, OnInit, ChangeDetectorRef, ApplicationRef, NgZone, HostBinding } from '@angular/core';
+import { Planet, SwitchModes, GlobalEventDispatcher, ApplicationStatus, PlanetApplication } from 'ngx-planet';
+import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
+import { ThyDialog } from 'ngx-tethys/dialog';
+import { ADetailComponent } from './a-detail/a-detail.component';
+import { ThyNotifyService } from 'ngx-tethys/notify';
+import { AppRootContext } from '@demo/common';
+import { CustomSettingsService } from './custom-settings.service';
+import { debug } from 'debug';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html'
+})
+export class AppComponent implements OnInit {
+    // @HostBinding('class.portal') class = true;
+
+    title = 'ngx-planet';
+
+    activeAppNames: string[] = [];
+
+    get loadingDone() {
+        return this.planet.loadingDone;
+    }
+
+    constructor(
+        private customSettingsService: CustomSettingsService,
+        private planet: Planet,
+        private globalEventDispatcher: GlobalEventDispatcher,
+        private thyDialog: ThyDialog,
+        private thyNotify: ThyNotifyService,
+        public appRootContext: AppRootContext
+    ) {}
+
+    ngOnInit() {
+        this.planet.setOptions({
+            switchMode: SwitchModes.coexist,
+            errorHandler: error => {
+                this.thyNotify.error(`错误`, '加载资源失败');
+                console.error(error);
+            },
+            debugFactory: debug
+        });
+
+        this.appRootContext.setName(`my name is app root context`);
+
+        this.planet.setPortalAppData({
+            appRootContext: this.appRootContext
+        });
+
+        const appHostClass = 'thy-layout';
+
+        const settings = this.customSettingsService.get();
+        this.planet.registerApps([
+            {
+                name: 'app1',
+                hostParent: '#app-host-container',
+                hostClass: appHostClass,
+                routerPathPrefix: /\/app1|app4/, // '/app1',
+                resourcePathPrefix: '/static/app1/',
+                preload: settings.app1.preload,
+                switchMode: settings.app1.switchMode,
+                loadSerial: true,
+                stylePrefix: 'app1',
+                // prettier-ignore
+                scripts: [
+                    'main.js',
+                    // 'polyfills.js'
+                ],
+                styles: ['styles.css'],
+                manifest: '/static/app1/assets-manifest.json',
+                extra: {
+                    name: '应用1',
+                    color: '#ffa415'
+                }
+            },
+            {
+                name: 'app2',
+                hostParent: '#app-host-container',
+                hostClass: appHostClass,
+                routerPathPrefix: '/app2',
+                resourcePathPrefix: '/static/app2/',
+                preload: settings.app2.preload,
+                switchMode: settings.app2.switchMode,
+                sandbox: true,
+                stylePrefix: 'app2',
+                // prettier-ignore
+                scripts: [
+                    'main.js'
+                ],
+                styles: ['styles.css'],
+                manifest: '/static/app2/assets-manifest.json',
+                extra: {
+                    name: '应用2',
+                    color: '#66c060'
+                }
+            }
+        ]);
+
+        this.planet.start();
+
+        this.globalEventDispatcher.register('openADetail').subscribe(event => {
+            this.thyDialog.open(ADetailComponent);
+        });
+
+        this.planet.appsLoadingStart.subscribe(event => {
+            this.activeAppNames = event.shouldLoadApps.map(item => item.name);
+            console.log(`active app names: ${this.activeAppNames.join(',')}`);
+        });
+    }
+}

package/examples/portal/src/app/app.module.ts

@@ -0,0 +1,64 @@
+import { CommonModule } from '@angular/common';
+import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { AboutComponent } from './about/about.component';
+import { NgxPlanetModule } from 'ngx-planet';
+import { ThyIconModule, ThyIconRegistry } from 'ngx-tethys/icon';
+import { ThyButtonModule } from 'ngx-tethys/button';
+import { ThyDialogModule } from 'ngx-tethys/dialog';
+import { ThyLayoutModule } from 'ngx-tethys/layout';
+import { ThyTableModule } from 'ngx-tethys/table';
+import { ThyNotifyModule } from 'ngx-tethys/notify';
+import { ThyLoadingModule } from 'ngx-tethys/loading';
+import { ThyNavModule } from 'ngx-tethys/nav';
+import { ThyActionMenuModule } from 'ngx-tethys/action-menu';
+import { ThyTooltipModule } from 'ngx-tethys/tooltip';
+import { ThyPopoverModule } from 'ngx-tethys/popover';
+import { ThyFormModule } from 'ngx-tethys/form';
+import { ThyRadioModule } from 'ngx-tethys/radio';
+import { ThyCheckboxModule } from 'ngx-tethys/checkbox';
+import { ADetailComponent } from './a-detail/a-detail.component';
+import { SettingsComponent } from './settings/settings.component';
+import { AppRootContext, DemoCommonModule, OVERLAY_PROVIDER } from '@demo/common';
+import { FormsModule } from '@angular/forms';
+import { Overlay } from '@angular/cdk/overlay';
+import { AppOverlay } from './overlay';
+
+@NgModule({
+    declarations: [AppComponent, AboutComponent, SettingsComponent, ADetailComponent],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        FormsModule,
+        CommonModule,
+        ThyIconModule,
+        ThyButtonModule,
+        ThyDialogModule,
+        ThyTableModule,
+        ThyLayoutModule,
+        ThyNotifyModule,
+        ThyLoadingModule,
+        ThyNavModule,
+        ThyActionMenuModule,
+        ThyTooltipModule,
+        ThyPopoverModule,
+        ThyFormModule,
+        ThyRadioModule,
+        ThyCheckboxModule,
+        AppRoutingModule,
+        NgxPlanetModule,
+        DemoCommonModule
+    ],
+    providers: [AppRootContext, OVERLAY_PROVIDER, { provide: Overlay, useClass: AppOverlay }],
+    bootstrap: [AppComponent],
+    entryComponents: [ADetailComponent]
+})
+export class AppModule {
+    constructor(iconRegistry: ThyIconRegistry, domSanitizer: DomSanitizer) {
+        iconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/sprite.defs.svg'));
+    }
+}

package/examples/portal/src/app/custom-settings.service.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { cache } from '@demo/common';
+import { SwitchModes } from 'ngx-planet';
+const SETTINGS_KEY = 'custom-settings';
+
+export interface CustomSettingsInfo {
+    app1: {
+        preload: boolean;
+        switchMode?: SwitchModes;
+    };
+    app2: {
+        preload: boolean;
+        switchMode?: SwitchModes;
+    };
+}
+
+const DEFAULT_SETTINGS: CustomSettingsInfo = {
+    app1: {
+        preload: true,
+        switchMode: SwitchModes.coexist
+    },
+    app2: {
+        preload: true,
+        switchMode: SwitchModes.coexist
+    }
+};
+
+@Injectable({
+    providedIn: 'root'
+})
+export class CustomSettingsService {
+    get(): CustomSettingsInfo {
+        const settings = cache.get<CustomSettingsInfo>(SETTINGS_KEY);
+        return settings || JSON.parse(JSON.stringify(DEFAULT_SETTINGS));
+    }
+
+    save(settings: CustomSettingsInfo) {
+        cache.set<CustomSettingsInfo>(SETTINGS_KEY, settings);
+    }
+
+    restore() {
+        cache.set<CustomSettingsInfo>(SETTINGS_KEY, DEFAULT_SETTINGS);
+    }
+}

package/examples/portal/src/app/overlay.ts

@@ -0,0 +1,26 @@
+import { Directionality } from '@angular/cdk/bidi';
+import {
+    Overlay,
+    OverlayConfig,
+    OverlayContainer,
+    OverlayKeyboardDispatcher,
+    OverlayPositionBuilder,
+    OverlayRef,
+    ScrollStrategyOptions
+} from '@angular/cdk/overlay';
+import { DOCUMENT, Location } from '@angular/common';
+import { ComponentFactoryResolver, Inject, Injectable, Injector, NgZone } from '@angular/core';
+import { isArray, concatArray } from 'ngx-tethys/util';
+
+@Injectable({ providedIn: 'root' })
+export class AppOverlay extends Overlay {
+    create(config?: OverlayConfig): OverlayRef {
+        const overlayConfig: OverlayConfig = {
+            ...config,
+            panelClass: concatArray(config.panelClass, 'portal')
+        };
+        const overlayRef = super.create(overlayConfig);
+        overlayRef.addPanelClass(overlayConfig.panelClass);
+        return overlayRef;
+    }
+}

package/examples/portal/src/app/settings/settings.component.html

@@ -0,0 +1,31 @@
+<section-card title="Settings">
+  <form thyForm name="settings">
+    <thy-form-group thyLabelText="Preload" thyLabelPaddingTopClear="true">
+      <label thyCheckbox name="app1-preload" thyLabelText="App1 Preload" [(ngModel)]="settings.app1.preload"></label>
+      <label thyCheckbox name="app2-preload" thyLabelText="App2 Preload" [(ngModel)]="settings.app2.preload"></label>
+    </thy-form-group>
+
+    <thy-form-group thyLabelText="App1 Switch Mode" thyLabelPaddingTopClear="true">
+      <thy-radio-group name="app1SwitchMode" [(ngModel)]="settings.app1.switchMode" thyLayout="flex" required>
+        <label thyRadio thyLabelText="Default (Destroy App when not active)" thyValue="default"></label>
+        <label thyRadio thyLabelText="Coexist (Hide App when when not active)" thyValue="coexist"></label>
+      </thy-radio-group>
+    </thy-form-group>
+
+    <thy-form-group thyLabelText="App2 Switch Mode" thyLabelPaddingTopClear="true">
+      <thy-radio-group name="app2SwitchMode" [(ngModel)]="settings.app2.switchMode" thyLayout="flex" required>
+        <label thyRadio thyLabelText="Default (Destroy App when not active)" thyValue="default"></label>
+        <label thyRadio thyLabelText="Coexist (Hide App when when not active)" thyValue="coexist"></label>
+      </thy-radio-group>
+    </thy-form-group>
+
+    <thy-form-group-footer>
+      <button thyButton="primary" (thyFormSubmit)="save()">Save</button>
+      <button thyButton="link-secondary" (click)="reset()">Reset</button>
+      <button thyButton="outline-info" (click)="restore()">Restore to default</button>
+    </thy-form-group-footer>
+    <!-- <thy-form-group>
+      {{ settings | json }}
+    </thy-form-group> -->
+  </form>
+</section-card>

package/examples/portal/src/app/settings/settings.component.scss

@@ -0,0 +1,3 @@
+// .help {
+//     color: blue;
+// }

package/examples/portal/src/app/settings/settings.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { Router } from '@angular/router';
+import { ThyNotifyService } from 'ngx-tethys/notify';
+import { ADetailComponent } from '../a-detail/a-detail.component';
+import { AppRootContext } from '@demo/common';
+import { CustomSettingsService, CustomSettingsInfo } from '../custom-settings.service';
+
+@Component({
+    selector: 'app-settings',
+    templateUrl: './settings.component.html',
+    styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+    @HostBinding(`class.thy-layout-content`) isThyLayoutContent = true;
+
+    settings: CustomSettingsInfo;
+
+    constructor(
+        public appRootContext: AppRootContext,
+        private customSettingsService: CustomSettingsService,
+        private thyNotifyService: ThyNotifyService
+    ) {}
+
+    ngOnInit() {
+        this.reset();
+    }
+
+    save() {
+        this.customSettingsService.save(this.settings);
+        this.thyNotifyService.success(`Save success`);
+    }
+
+    reset() {
+        this.settings = {
+            ...this.customSettingsService.get()
+        };
+    }
+
+    restore() {
+        this.customSettingsService.restore();
+        this.reset();
+    }
+}

package/examples/portal/src/assets/apps.json

@@ -0,0 +1,29 @@
+[
+  {
+    "name": "app1",
+    "host": "#app-host-container",
+    "selector": "app1-root-container",
+    "routerPathPrefix": "/app1",
+    "hostClass": "thy-layout",
+    "preload": false,
+    "switchMode": "default",
+    "assetsUrl": "/app1/assets/app.json",
+    "stylePathPrefix": "",
+    "styles": [],
+    "scriptPathPrefix": "/app1/assets/",
+    "scripts": ["main.js"]
+  },
+  {
+    "name": "app2",
+    "host": "#app-host-container",
+    "selector": "app2-root-container",
+    "routerPathPrefix": "/app2",
+    "hostClass": "thy-layout",
+    "preload": false,
+    "switchMode": "default",
+    "stylePathPrefix": "",
+    "styles": [],
+    "scriptPathPrefix": "/app2/assets/",
+    "scripts": ["main.js"]
+  }
+]