Skip to content

Commit 1bdb21e

Browse files
why520crazywhy520crazy
committed
refactor(planet): rename app's host to hostParent, add settings for demo
BREAKING CHANGES: should change host to hostParent when register app
1 parent e51746c commit 1bdb21e

24 files changed

+234
-80
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, HostBinding } from '@angular/core';
22

33
@Component({
44
selector: 'app2-root-container',
55
template: '<router-outlet></router-outlet>'
66
})
77
export class AppComponent implements OnInit {
8+
@HostBinding(`class.thy-layout`) isThyLayout = true;
9+
810
constructor() {}
911

1012
ngOnInit() {}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, HostBinding, ComponentFactoryResolver, Injector, ApplicationRef } from '@angular/core';
22
@Component({
3-
selector: 'app2-root-container',
3+
selector: 'app2-root',
44
templateUrl: './root.component.html',
55
styleUrls: ['./root.component.scss']
66
})

‎examples/common/cache.ts

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { helpers } from 'ngx-tethys/util';
2+
const { isString, isNumber } = helpers;
3+
const NUMBER_PREFIX = `____n____`;
4+
5+
const SupportedStorage = window && window.localStorage;
6+
const storageSource = window.localStorage || window.sessionStorage;
7+
8+
const cache = {
9+
/**
10+
* set item to local storage
11+
*
12+
* @example
13+
* cache.set('key1', 'key1-value');
14+
* cache.set('key1', 10);
15+
* cache.set('key1', { id: 1, name: 'name 1'});
16+
* cache.set('key1', 'key1-value', false);
17+
* @param key string
18+
* @param value string | number | object
19+
*/
20+
set<TValue = string>(key: string, value: TValue) {
21+
const itemValue = isString(value)
22+
? value
23+
: isNumber(value)
24+
? `${NUMBER_PREFIX}${value}`
25+
: JSON.stringify(value);
26+
if (SupportedStorage) {
27+
storageSource.setItem(key, itemValue as string);
28+
}
29+
},
30+
/**
31+
* get item from local storage
32+
*
33+
* @example
34+
* cache.get('key1');
35+
* cache.get<number>('key1');
36+
* cache.get<User>('key1');
37+
* cache.get<User[]>('key1');
38+
* cache.get('key1', false);
39+
*
40+
* @param key string
41+
*/
42+
get<TValue = string>(key: string): TValue {
43+
if (SupportedStorage) {
44+
const value = storageSource.getItem(key);
45+
if (value) {
46+
try {
47+
const result = JSON.parse(value);
48+
return result;
49+
} catch (error) {
50+
if (isString(value) && value.includes(NUMBER_PREFIX)) {
51+
return parseInt(value.replace(NUMBER_PREFIX, ''), 10) as any;
52+
} else {
53+
return value as any;
54+
}
55+
}
56+
} else {
57+
return undefined;
58+
}
59+
} else {
60+
return undefined;
61+
}
62+
},
63+
/**
64+
* remove key from storage
65+
* @param key cache key
66+
*/
67+
remove(key: string) {
68+
if (SupportedStorage) {
69+
storageSource.removeItem(key);
70+
}
71+
},
72+
/**
73+
* clear all storage
74+
*/
75+
clear() {
76+
if (SupportedStorage) {
77+
storageSource.clear();
78+
}
79+
}
80+
};
81+
82+
export { cache };

‎examples/common/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './app-root-context';
22
export * from './module';
3+
export * from './cache';

‎examples/portal/src/app/host-container/host-container.component.scss renamed to ‎examples/common/utils.ts

File renamed without changes.

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
33
import { AboutComponent } from './about/about.component';
44
import { HostContainerComponent } from './host-container/host-container.component';
55
import { SettingsComponent } from './settings/settings.component';
6+
import { EmptyComponent } from 'ngx-planet';
67

78
const routes: Routes = [
89
{
@@ -20,31 +21,31 @@ const routes: Routes = [
2021
},
2122
{
2223
path: 'app1',
23-
component: HostContainerComponent,
24+
component: EmptyComponent,
2425
children: [
2526
{
2627
path: '**',
27-
component: HostContainerComponent
28+
component: EmptyComponent
2829
}
2930
]
3031
},
3132
{
3233
path: 'app2',
33-
component: HostContainerComponent,
34+
component: EmptyComponent,
3435
children: [
3536
{
3637
path: '**',
37-
component: HostContainerComponent
38+
component: EmptyComponent
3839
}
3940
]
4041
},
4142
{
4243
path: 'app4',
43-
component: HostContainerComponent,
44+
component: EmptyComponent,
4445
children: [
4546
{
4647
path: '**',
47-
component: HostContainerComponent
48+
component: EmptyComponent
4849
}
4950
]
5051
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,6 @@
5555
</thy-nav>
5656
</thy-sidebar>
5757
<router-outlet></router-outlet>
58-
<div id="app-host-container" class="thy-layout"></div>
58+
<div id="app-host-container" class="thy-layout" [ngClass]="{ hide: !loadingDone }"></div>
5959
<thy-loading *ngIf="!loadingDone" [thyDone]="loadingDone"></thy-loading>
6060
</thy-layout>

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ThyDialog } from 'ngx-tethys/dialog';
55
import { ADetailComponent } from './a-detail/a-detail.component';
66
import { ThyConfirmService, ThyNotifyService } from 'ngx-tethys';
77
import { AppRootContext } from '@demo/common';
8+
import { CustomSettingsService } from './custom-settings.service';
89

910
@Component({
1011
selector: 'app-root',
@@ -20,8 +21,7 @@ export class AppComponent implements OnInit {
2021
}
2122

2223
constructor(
23-
private router: Router,
24-
private route: ActivatedRoute,
24+
private customSettingsService: CustomSettingsService,
2525
private planet: Planet,
2626
private globalEventDispatcher: GlobalEventDispatcher,
2727
private thyDialog: ThyDialog,
@@ -43,18 +43,19 @@ export class AppComponent implements OnInit {
4343
appRootContext: this.appRootContext
4444
});
4545

46-
const appHostContainerSelector = '#app-host-container';
47-
const appHostContainerClass = 'thy-layout';
46+
const appHostClass = 'thy-layout';
4847

48+
const settings = this.customSettingsService.get();
4949
this.planet.registerApps([
5050
{
5151
name: 'app1',
52-
host: appHostContainerSelector,
53-
hostClass: appHostContainerClass,
52+
hostParent: '#app-host-container',
53+
hostClass: appHostClass,
5454
routerPathPrefix: /\/app1|app4/, // '/app1',
5555
selector: 'app1-root-container',
5656
resourcePathPrefix: '/app1/static/',
57-
preload: true,
57+
preload: settings.app1.preload,
58+
switchMode: settings.app1.switchMode,
5859
loadSerial: true,
5960
// prettier-ignore
6061
scripts: [
@@ -70,11 +71,12 @@ export class AppComponent implements OnInit {
7071
},
7172
{
7273
name: 'app2',
73-
host: appHostContainerSelector,
74-
hostClass: appHostContainerClass,
75-
routerPathPrefix: '/app2',
74+
hostParent: '#app-host-container',
7675
selector: 'app2-root-container',
77-
preload: true,
76+
hostClass: appHostClass,
77+
routerPathPrefix: '/app2',
78+
preload: settings.app2.preload,
79+
switchMode: settings.app2.switchMode,
7880
// prettier-ignore
7981
scripts: [
8082
'/app2/static/main.js'

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,24 @@ import { AppRoutingModule } from './app-routing.module';
55
import { AppComponent } from './app.component';
66
import { NgxTethysModule } from 'ngx-tethys';
77
import { AboutComponent } from './about/about.component';
8-
import { HostContainerComponent } from './host-container/host-container.component';
98
import { NgxPlanetModule } from 'ngx-planet';
109
import { ThyDialogModule, ThyIconRegistry } from 'ngx-tethys';
1110
import { ADetailComponent } from './a-detail/a-detail.component';
1211
import { SettingsComponent } from './settings/settings.component';
1312
import { AppRootContext, DemoCommonModule } from '@demo/common';
13+
import { FormsModule } from '@angular/forms';
1414

1515
@NgModule({
16-
declarations: [AppComponent, AboutComponent, SettingsComponent, HostContainerComponent, ADetailComponent],
17-
imports: [BrowserModule, NgxTethysModule, ThyDialogModule, AppRoutingModule, NgxPlanetModule, DemoCommonModule],
16+
declarations: [AppComponent, AboutComponent, SettingsComponent, ADetailComponent],
17+
imports: [
18+
BrowserModule,
19+
FormsModule,
20+
NgxTethysModule,
21+
ThyDialogModule,
22+
AppRoutingModule,
23+
NgxPlanetModule,
24+
DemoCommonModule
25+
],
1826
providers: [AppRootContext],
1927
bootstrap: [AppComponent],
2028
entryComponents: [ADetailComponent]

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Injectable } from '@angular/core';
2+
import { cache } from '@demo/common';
3+
import { SwitchModes } from 'ngx-planet';
4+
const SETTINGS_KEY = 'custom-settings';
5+
6+
export interface CustomSettingsInfo {
7+
app1: {
8+
preload: boolean;
9+
switchMode?: SwitchModes;
10+
};
11+
app2: {
12+
preload: boolean;
13+
switchMode?: SwitchModes;
14+
};
15+
}
16+
17+
const DEFAULT_SETTINGS: CustomSettingsInfo = {
18+
app1: {
19+
preload: true,
20+
switchMode: SwitchModes.coexist
21+
},
22+
app2: {
23+
preload: true,
24+
switchMode: SwitchModes.coexist
25+
}
26+
};
27+
28+
@Injectable({
29+
providedIn: 'root'
30+
})
31+
export class CustomSettingsService {
32+
get(): CustomSettingsInfo {
33+
const settings = cache.get<CustomSettingsInfo>(SETTINGS_KEY);
34+
return settings || JSON.parse(JSON.stringify(DEFAULT_SETTINGS));
35+
}
36+
37+
save(settings: CustomSettingsInfo) {
38+
cache.set<CustomSettingsInfo>(SETTINGS_KEY, settings);
39+
}
40+
41+
restore() {
42+
cache.set<CustomSettingsInfo>(SETTINGS_KEY, DEFAULT_SETTINGS);
43+
}
44+
}

‎examples/portal/src/app/host-container/host-container.component.spec.ts

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎examples/portal/src/app/host-container/host-container.component.ts

Lines changed: 0 additions & 11 deletions
This file was deleted.

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

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,31 @@
11
<section-card title="Settings">
2-
<label thyCheckbox name="app1-preload" thyLabelText="App1 Preload"></label>
3-
<label thyCheckbox name="app2-preload" thyLabelText="App2 Preload"></label>
2+
<form thyForm name="settings">
3+
<thy-form-group thyLabelText="Preload" thyLabelPaddingTopClear="true">
4+
<label thyCheckbox name="app1-preload" thyLabelText="App1 Preload" [(ngModel)]="settings.app1.preload"></label>
5+
<label thyCheckbox name="app2-preload" thyLabelText="App2 Preload" [(ngModel)]="settings.app2.preload"></label>
6+
</thy-form-group>
7+
8+
<thy-form-group thyLabelText="App1 Switch Mode" thyLabelPaddingTopClear="true">
9+
<thy-radio-group name="app1SwitchMode" [(ngModel)]="settings.app1.switchMode" thyLayout="flex" required>
10+
<label thyRadio thyLabelText="Default (Destroy App when not active)" thyValue="default"></label>
11+
<label thyRadio thyLabelText="Coexist (Hide App when when not active)" thyValue="coexist"></label>
12+
</thy-radio-group>
13+
</thy-form-group>
14+
15+
<thy-form-group thyLabelText="App2 Switch Mode" thyLabelPaddingTopClear="true">
16+
<thy-radio-group name="app2SwitchMode" [(ngModel)]="settings.app2.switchMode" thyLayout="flex" required>
17+
<label thyRadio thyLabelText="Default (Destroy App when not active)" thyValue="default"></label>
18+
<label thyRadio thyLabelText="Coexist (Hide App when when not active)" thyValue="coexist"></label>
19+
</thy-radio-group>
20+
</thy-form-group>
21+
22+
<thy-form-group-footer>
23+
<button thyButton="primary" (thyFormSubmit)="save()">Save</button>
24+
<button thyButton="link-secondary" (click)="reset()">Reset</button>
25+
<button thyButton="outline-info" (click)="restore()">Restore to default</button>
26+
</thy-form-group-footer>
27+
<!-- <thy-form-group>
28+
{{ settings | json }}
29+
</thy-form-group> -->
30+
</form>
431
</section-card>

0 commit comments

Comments
 (0)