refactor(planet): rename app's host to hostParent, add settings for demo

BREAKING CHANGES:
should change host to hostParent when register app

examples/app2/src/app/app.component.ts

@@ -1,10 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostBinding } from '@angular/core';
 
 @Component({
     selector: 'app2-root-container',
     template: '<router-outlet></router-outlet>'
 })
 export class AppComponent implements OnInit {
+    @HostBinding(`class.thy-layout`) isThyLayout = true;
+
     constructor() {}
 
     ngOnInit() {}

examples/app2/src/app/root/root.component.ts

@@ -1,6 +1,6 @@
 import { Component, HostBinding, ComponentFactoryResolver, Injector, ApplicationRef } from '@angular/core';
 @Component({
-    selector: 'app2-root-container',
+    selector: 'app2-root',
     templateUrl: './root.component.html',
     styleUrls: ['./root.component.scss']
 })

examples/common/cache.ts

@@ -0,0 +1,82 @@
+import { helpers } from 'ngx-tethys/util';
+const { isString, isNumber } = helpers;
+const NUMBER_PREFIX = `____n____`;
+
+const SupportedStorage = window && window.localStorage;
+const storageSource = window.localStorage || window.sessionStorage;
+
+const cache = {
+    /**
+     * set item to local storage
+     *
+     * @example
+     * cache.set('key1', 'key1-value');
+     * cache.set('key1', 10);
+     * cache.set('key1', { id: 1, name: 'name 1'});
+     * cache.set('key1', 'key1-value', false);
+     * @param key string
+     * @param value string | number | object
+     */
+    set<TValue = string>(key: string, value: TValue) {
+        const itemValue = isString(value)
+            ? value
+            : isNumber(value)
+            ? `${NUMBER_PREFIX}${value}`
+            : JSON.stringify(value);
+        if (SupportedStorage) {
+            storageSource.setItem(key, itemValue as string);
+        }
+    },
+    /**
+     * get item from local storage
+     *
+     * @example
+     * cache.get('key1');
+     * cache.get<number>('key1');
+     * cache.get<User>('key1');
+     * cache.get<User[]>('key1');
+     * cache.get('key1', false);
+     *
+     * @param key string
+     */
+    get<TValue = string>(key: string): TValue {
+        if (SupportedStorage) {
+            const value = storageSource.getItem(key);
+            if (value) {
+                try {
+                    const result = JSON.parse(value);
+                    return result;
+                } catch (error) {
+                    if (isString(value) && value.includes(NUMBER_PREFIX)) {
+                        return parseInt(value.replace(NUMBER_PREFIX, ''), 10) as any;
+                    } else {
+                        return value as any;
+                    }
+                }
+            } else {
+                return undefined;
+            }
+        } else {
+            return undefined;
+        }
+    },
+    /**
+     * remove key from storage
+     * @param key cache key
+     */
+    remove(key: string) {
+        if (SupportedStorage) {
+            storageSource.removeItem(key);
+        }
+    },
+    /**
+     * clear all storage
+     */
+    clear() {
+        if (SupportedStorage) {
+            storageSource.clear();
+        }
+    }
+};
+
+export { cache };

examples/common/index.ts

@@ -1,2 +1,3 @@
 export * from './app-root-context';
 export * from './module';
+export * from './cache';

examples/portal/src/app/app-routing.module.ts

@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { AboutComponent } from './about/about.component';
 import { HostContainerComponent } from './host-container/host-container.component';
 import { SettingsComponent } from './settings/settings.component';
+import { EmptyComponent } from 'ngx-planet';
 
 const routes: Routes = [
     {
@@ -20,31 +21,31 @@ const routes: Routes = [
     },
     {
         path: 'app1',
-        component: HostContainerComponent,
+        component: EmptyComponent,
         children: [
             {
                 path: '**',
-                component: HostContainerComponent
+                component: EmptyComponent
             }
         ]
     },
     {
         path: 'app2',
-        component: HostContainerComponent,
+        component: EmptyComponent,
         children: [
             {
                 path: '**',
-                component: HostContainerComponent
+                component: EmptyComponent
             }
         ]
     },
     {
         path: 'app4',
-        component: HostContainerComponent,
+        component: EmptyComponent,
         children: [
             {
                 path: '**',
-                component: HostContainerComponent
+                component: EmptyComponent
             }
         ]
     }

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

@@ -55,6 +55,6 @@
     </thy-nav>
   </thy-sidebar>
   <router-outlet></router-outlet>
-  <div id="app-host-container" class="thy-layout"></div>
+  <div id="app-host-container" class="thy-layout" [ngClass]="{ hide: !loadingDone }"></div>
   <thy-loading *ngIf="!loadingDone" [thyDone]="loadingDone"></thy-loading>
 </thy-layout>

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

@@ -5,6 +5,7 @@ import { ThyDialog } from 'ngx-tethys/dialog';
 import { ADetailComponent } from './a-detail/a-detail.component';
 import { ThyConfirmService, ThyNotifyService } from 'ngx-tethys';
 import { AppRootContext } from '@demo/common';
+import { CustomSettingsService } from './custom-settings.service';
 
 @Component({
     selector: 'app-root',
@@ -20,8 +21,7 @@ export class AppComponent implements OnInit {
     }
 
     constructor(
-        private router: Router,
-        private route: ActivatedRoute,
+        private customSettingsService: CustomSettingsService,
         private planet: Planet,
         private globalEventDispatcher: GlobalEventDispatcher,
         private thyDialog: ThyDialog,
@@ -43,18 +43,19 @@ export class AppComponent implements OnInit {
             appRootContext: this.appRootContext
         });
 
-        const appHostContainerSelector = '#app-host-container';
-        const appHostContainerClass = 'thy-layout';
+        const appHostClass = 'thy-layout';
 
+        const settings = this.customSettingsService.get();
         this.planet.registerApps([
             {
                 name: 'app1',
-                host: appHostContainerSelector,
-                hostClass: appHostContainerClass,
+                hostParent: '#app-host-container',
+                hostClass: appHostClass,
                 routerPathPrefix: /\/app1|app4/, // '/app1',
                 selector: 'app1-root-container',
                 resourcePathPrefix: '/app1/static/',
-                preload: true,
+                preload: settings.app1.preload,
+                switchMode: settings.app1.switchMode,
                 loadSerial: true,
                 // prettier-ignore
                 scripts: [
@@ -70,11 +71,12 @@ export class AppComponent implements OnInit {
             },
             {
                 name: 'app2',
-                host: appHostContainerSelector,
-                hostClass: appHostContainerClass,
-                routerPathPrefix: '/app2',
+                hostParent: '#app-host-container',
                 selector: 'app2-root-container',
-                preload: true,
+                hostClass: appHostClass,
+                routerPathPrefix: '/app2',
+                preload: settings.app2.preload,
+                switchMode: settings.app2.switchMode,
                 // prettier-ignore
                 scripts: [
                     '/app2/static/main.js'

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

@@ -5,16 +5,24 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NgxTethysModule } from 'ngx-tethys';
 import { AboutComponent } from './about/about.component';
-import { HostContainerComponent } from './host-container/host-container.component';
 import { NgxPlanetModule } from 'ngx-planet';
 import { ThyDialogModule, ThyIconRegistry } from 'ngx-tethys';
 import { ADetailComponent } from './a-detail/a-detail.component';
 import { SettingsComponent } from './settings/settings.component';
 import { AppRootContext, DemoCommonModule } from '@demo/common';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
-    declarations: [AppComponent, AboutComponent, SettingsComponent, HostContainerComponent, ADetailComponent],
-    imports: [BrowserModule, NgxTethysModule, ThyDialogModule, AppRoutingModule, NgxPlanetModule, DemoCommonModule],
+    declarations: [AppComponent, AboutComponent, SettingsComponent, ADetailComponent],
+    imports: [
+        BrowserModule,
+        FormsModule,
+        NgxTethysModule,
+        ThyDialogModule,
+        AppRoutingModule,
+        NgxPlanetModule,
+        DemoCommonModule
+    ],
     providers: [AppRootContext],
     bootstrap: [AppComponent],
     entryComponents: [ADetailComponent]

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);
+    }
+}

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

@@ -1,4 +1,31 @@
 <section-card title="Settings">
-  <label thyCheckbox name="app1-preload" thyLabelText="App1 Preload"></label>
-  <label thyCheckbox name="app2-preload" thyLabelText="App2 Preload"></label>
+  <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>