From 5210820c5d5e1d09bcf1a6e46519813e11baec1f Mon Sep 17 00:00:00 2001 From: bnymncoskuner Date: Wed, 24 Mar 2021 17:50:20 +0300 Subject: [PATCH 1/6] feat: add page component to ng.components pkg --- .../packages/components/ngcc.config.js | 1 + npm/ng-packs/packages/components/package.json | 1 + .../packages/components/page/ng-package.json | 7 ++ .../page/src/page-part.directive.ts | 77 +++++++++++++++++++ .../page/src/page-parts.component.ts | 28 +++++++ .../components/page/src/page.component.html | 41 ++++++++++ .../components/page/src/page.component.ts | 32 ++++++++ .../components/page/src/page.module.ts | 27 +++++++ .../components/page/src/public-api.ts | 4 + npm/ng-packs/tsconfig.json | 1 + 10 files changed, 219 insertions(+) create mode 100644 npm/ng-packs/packages/components/page/ng-package.json create mode 100644 npm/ng-packs/packages/components/page/src/page-part.directive.ts create mode 100644 npm/ng-packs/packages/components/page/src/page-parts.component.ts create mode 100644 npm/ng-packs/packages/components/page/src/page.component.html create mode 100644 npm/ng-packs/packages/components/page/src/page.component.ts create mode 100644 npm/ng-packs/packages/components/page/src/page.module.ts create mode 100644 npm/ng-packs/packages/components/page/src/public-api.ts diff --git a/npm/ng-packs/packages/components/ngcc.config.js b/npm/ng-packs/packages/components/ngcc.config.js index b30487d734..b475a18996 100644 --- a/npm/ng-packs/packages/components/ngcc.config.js +++ b/npm/ng-packs/packages/components/ngcc.config.js @@ -2,6 +2,7 @@ module.exports = { entryPoints: { '.': {}, './tree': {}, + './page': {}, './dist': { ignore: true }, }, }; diff --git a/npm/ng-packs/packages/components/package.json b/npm/ng-packs/packages/components/package.json index 55419a710b..d58f31f923 100644 --- a/npm/ng-packs/packages/components/package.json +++ b/npm/ng-packs/packages/components/package.json @@ -8,6 +8,7 @@ }, "peerDependencies": { "@abp/ng.core": ">=4.2.2", + "@abp/ng.theme.shared": ">=4.2.2", "@ng-bootstrap/ng-bootstrap": ">=6.0.0" }, "dependencies": { diff --git a/npm/ng-packs/packages/components/page/ng-package.json b/npm/ng-packs/packages/components/page/ng-package.json new file mode 100644 index 0000000000..d78dbd102b --- /dev/null +++ b/npm/ng-packs/packages/components/page/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/components/page", + "lib": { + "entryFile": "src/public-api.ts" + } +} diff --git a/npm/ng-packs/packages/components/page/src/page-part.directive.ts b/npm/ng-packs/packages/components/page/src/page-part.directive.ts new file mode 100644 index 0000000000..5d2273f26b --- /dev/null +++ b/npm/ng-packs/packages/components/page/src/page-part.directive.ts @@ -0,0 +1,77 @@ +import { + Directive, + TemplateRef, + ViewContainerRef, + Input, + InjectionToken, + Optional, + Inject, + OnInit, + OnDestroy, + Injector, + OnChanges, + SimpleChanges, + SimpleChange, +} from '@angular/core'; + +export interface PageRenderStrategy { + shouldRender(type: string); + onInit?(type: string, injector: Injector, context?: any); + onDestroy?(type: string, injector?: Injector, context?: any); + onContextUpdate?(change: SimpleChange); +} + +export const PAGE_RENDER_STRATEGY = new InjectionToken('PAGE_RENDER_STRATEGY'); + +@Directive({ selector: '[abpPagePart]' }) +export class PagePartDirective implements OnInit, OnDestroy, OnChanges { + hasRendered = false; + type: string; + + @Input() set abpPagePart(type: string) { + this.type = type; + const shouldRender = this.shouldRender(type); + + if (shouldRender && !this.hasRendered) { + this.viewContainer.createEmbeddedView(this.templateRef); + this.hasRendered = true; + } else if (!shouldRender && this.hasRendered) { + this.viewContainer.clear(); + this.hasRendered = false; + } + } + + @Input('abpPagePartContext') context: any; + + constructor( + private templateRef: TemplateRef, + private viewContainer: ViewContainerRef, + @Optional() @Inject(PAGE_RENDER_STRATEGY) private renderLogic: PageRenderStrategy, + private injector: Injector, + ) {} + + ngOnChanges({ context }: SimpleChanges): void { + if (this.renderLogic?.onContextUpdate) { + this.renderLogic.onContextUpdate(context); + } + } + + ngOnInit() { + if (this.renderLogic?.onInit) { + this.renderLogic.onInit(this.type, this.injector, this.context); + } + } + + ngOnDestroy() { + if (this.renderLogic?.onDestroy) { + this.renderLogic.onDestroy(this.type, this.injector, this.context); + } + } + + shouldRender(type: string) { + if (this.renderLogic) { + return this.renderLogic.shouldRender(type); + } + return true; + } +} diff --git a/npm/ng-packs/packages/components/page/src/page-parts.component.ts b/npm/ng-packs/packages/components/page/src/page-parts.component.ts new file mode 100644 index 0000000000..720a14c4a9 --- /dev/null +++ b/npm/ng-packs/packages/components/page/src/page-parts.component.ts @@ -0,0 +1,28 @@ +import { Component, ViewEncapsulation } from '@angular/core'; + +export enum PageParts { + title = 'PageTitleContainerComponent', + breadcrumb = 'PageBreadcrumbContainerComponent', + toolbar = 'PageToolbarContainerComponent', +} + +@Component({ + selector: 'abp-page-title-container', + template: ` `, + encapsulation: ViewEncapsulation.None, +}) +export class PageTitleContainerComponent {} + +@Component({ + selector: 'abp-page-breadcrumb-container', + template: ` `, + encapsulation: ViewEncapsulation.None, +}) +export class PageBreadcrumbContainerComponent {} + +@Component({ + selector: 'abp-page-toolbar-container', + template: ` `, + encapsulation: ViewEncapsulation.None, +}) +export class PageToolbarContainerComponent {} diff --git a/npm/ng-packs/packages/components/page/src/page.component.html b/npm/ng-packs/packages/components/page/src/page.component.html new file mode 100644 index 0000000000..ffb01a14bc --- /dev/null +++ b/npm/ng-packs/packages/components/page/src/page.component.html @@ -0,0 +1,41 @@ +
+ + + + + + + + + + + + + + + + + +
+ + + + +
+

+ {{ title }} +

+
+ + + +
+ +
+ + + +
+ +
+ diff --git a/npm/ng-packs/packages/components/page/src/page.component.ts b/npm/ng-packs/packages/components/page/src/page.component.ts new file mode 100644 index 0000000000..3536dc0357 --- /dev/null +++ b/npm/ng-packs/packages/components/page/src/page.component.ts @@ -0,0 +1,32 @@ +import { Component, Input, ViewEncapsulation, ContentChild } from '@angular/core'; +import { + PageTitleContainerComponent, + PageBreadcrumbContainerComponent, + PageToolbarContainerComponent, + PageParts, +} from './page-parts.component'; + +@Component({ + selector: 'abp-page', + templateUrl: './page.component.html', + encapsulation: ViewEncapsulation.None, +}) +export class PageComponent { + @Input() title: string; + @Input() record: any; + + @Input() titleVisible = true; + @Input() breadcrumbVisible = true; + @Input() toolbarVisible = true; + + pageParts = { + title: PageParts.title, + breadcrumb: PageParts.breadcrumb, + toolbar: PageParts.toolbar, + }; + + @ContentChild(PageTitleContainerComponent) customTitle: PageTitleContainerComponent; + @ContentChild(PageBreadcrumbContainerComponent) + customBreadcrumb: PageBreadcrumbContainerComponent; + @ContentChild(PageToolbarContainerComponent) customToolbar: PageToolbarContainerComponent; +} diff --git a/npm/ng-packs/packages/components/page/src/page.module.ts b/npm/ng-packs/packages/components/page/src/page.module.ts new file mode 100644 index 0000000000..3f12543be7 --- /dev/null +++ b/npm/ng-packs/packages/components/page/src/page.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { UiExtensionsModule } from '@abp/ng.theme.shared/extensions'; +import { ThemeSharedModule } from '@abp/ng.theme.shared'; +import { CoreModule } from '@abp/ng.core'; +import { PageComponent } from './page.component'; +import { + PageTitleContainerComponent, + PageBreadcrumbContainerComponent, + PageToolbarContainerComponent, +} from './page-parts.component'; +import { PagePartDirective } from './page-part.directive'; + +const exportedDeclarations = [ + PageComponent, + PageTitleContainerComponent, + PageBreadcrumbContainerComponent, + PageToolbarContainerComponent, + PagePartDirective, +]; + +@NgModule({ + declarations: [...exportedDeclarations], + imports: [CommonModule, UiExtensionsModule, CoreModule, ThemeSharedModule], + exports: [...exportedDeclarations], +}) +export class PageModule {} diff --git a/npm/ng-packs/packages/components/page/src/public-api.ts b/npm/ng-packs/packages/components/page/src/public-api.ts new file mode 100644 index 0000000000..980f8de374 --- /dev/null +++ b/npm/ng-packs/packages/components/page/src/public-api.ts @@ -0,0 +1,4 @@ +export * from './page.module'; +export * from './page-part.directive'; +export * from './page-parts.component'; +export * from './page.component'; diff --git a/npm/ng-packs/tsconfig.json b/npm/ng-packs/tsconfig.json index b35406a4db..75ff03b711 100644 --- a/npm/ng-packs/tsconfig.json +++ b/npm/ng-packs/tsconfig.json @@ -21,6 +21,7 @@ "@abp/ng.theme.shared": ["packages/theme-shared/src/public-api.ts"], "@abp/ng.theme.shared/extensions": ["packages/theme-shared/extensions/src/public-api.ts"], "@abp/ng.components/tree": ["packages/components/tree/src/public-api.ts"], + "@abp/ng.components/page": ["packages/components/page/src/public-api.ts"], "@abp/ng.theme.basic": ["packages/theme-basic/src/public-api.ts"], "@abp/ng.account": ["packages/account/src/public-api.ts"], "@abp/ng.account/config": ["packages/account/config/src/public-api.ts"], From 0a15b3afef7e147c6982443dc70a8ddfa6d07ecc Mon Sep 17 00:00:00 2001 From: bnymncoskuner Date: Wed, 24 Mar 2021 17:51:07 +0300 Subject: [PATCH 2/6] feat: utilize page component in setting-mng --- .../packages/setting-management/package.json | 1 + .../setting-management.component.html | 68 ++++++++----------- .../src/lib/setting-management.module.ts | 2 + 3 files changed, 32 insertions(+), 39 deletions(-) diff --git a/npm/ng-packs/packages/setting-management/package.json b/npm/ng-packs/packages/setting-management/package.json index 43c56f8216..31bae4be53 100644 --- a/npm/ng-packs/packages/setting-management/package.json +++ b/npm/ng-packs/packages/setting-management/package.json @@ -8,6 +8,7 @@ }, "dependencies": { "@abp/ng.theme.shared": "~4.2.2", + "@abp/ng.components": "~4.2.2", "tslib": "^2.0.0" }, "publishConfig": { diff --git a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html index 345f818890..90b3fe9c9e 100644 --- a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html +++ b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html @@ -1,46 +1,36 @@ -
-
-

{{ 'AbpSettingManagement::Settings' | abpLocalization }}

-
- -
-
-
-
- -
-
-
-
-
- +
+
+
+
+ +
- + diff --git a/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts b/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts index fe2c0fdacc..c0df97dc22 100644 --- a/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts +++ b/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts @@ -2,6 +2,7 @@ import { CoreModule, LazyModuleFactory } from '@abp/ng.core'; import { ThemeSharedModule } from '@abp/ng.theme.shared'; import { ModuleWithProviders, NgModule, NgModuleFactory } from '@angular/core'; import { NgxsModule } from '@ngxs/store'; +import { PageModule } from '@abp/ng.components/page'; import { SettingManagementComponent } from './components/setting-management.component'; import { SettingManagementRoutingModule } from './setting-management-routing.module'; import { SettingManagementState } from './states/setting-management.state'; @@ -13,6 +14,7 @@ import { SettingManagementState } from './states/setting-management.state'; SettingManagementRoutingModule, CoreModule, ThemeSharedModule, + PageModule, NgxsModule.forFeature([SettingManagementState]), ], }) From 5c76ab0a44a70ade5bfb2b6517e7110dd617e19a Mon Sep 17 00:00:00 2001 From: bnymncoskuner Date: Wed, 24 Mar 2021 18:56:09 +0300 Subject: [PATCH 3/6] fix: linting problem --- .../components/page/src/page-parts.component.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/components/page/src/page-parts.component.ts b/npm/ng-packs/packages/components/page/src/page-parts.component.ts index 720a14c4a9..8438593268 100644 --- a/npm/ng-packs/packages/components/page/src/page-parts.component.ts +++ b/npm/ng-packs/packages/components/page/src/page-parts.component.ts @@ -8,21 +8,27 @@ export enum PageParts { @Component({ selector: 'abp-page-title-container', - template: ` `, + template: ` + + `, encapsulation: ViewEncapsulation.None, }) export class PageTitleContainerComponent {} @Component({ selector: 'abp-page-breadcrumb-container', - template: ` `, + template: ` + + `, encapsulation: ViewEncapsulation.None, }) export class PageBreadcrumbContainerComponent {} @Component({ selector: 'abp-page-toolbar-container', - template: ` `, + template: ` + + `, encapsulation: ViewEncapsulation.None, }) export class PageToolbarContainerComponent {} From 3c5c2c314a11b3b2449c5c01a796f413e3f23529 Mon Sep 17 00:00:00 2001 From: bnymncoskuner Date: Wed, 24 Mar 2021 19:44:25 +0300 Subject: [PATCH 4/6] chore: replace deprecated ng-packagr option --- npm/ng-packs/packages/account/ng-package.json | 2 +- npm/ng-packs/packages/components/ng-package.json | 2 +- npm/ng-packs/packages/core/ng-package.json | 2 +- npm/ng-packs/packages/feature-management/ng-package.json | 2 +- npm/ng-packs/packages/identity/ng-package.json | 2 +- npm/ng-packs/packages/permission-management/ng-package.json | 2 +- npm/ng-packs/packages/setting-management/ng-package.json | 2 +- npm/ng-packs/packages/tenant-management/ng-package.json | 2 +- npm/ng-packs/packages/theme-basic/ng-package.json | 2 +- npm/ng-packs/packages/theme-shared/ng-package.json | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/npm/ng-packs/packages/account/ng-package.json b/npm/ng-packs/packages/account/ng-package.json index 9e94619264..a6d54898f0 100644 --- a/npm/ng-packs/packages/account/ng-package.json +++ b/npm/ng-packs/packages/account/ng-package.json @@ -4,5 +4,5 @@ "lib": { "entryFile": "src/public-api.ts" }, - "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared"] + "allowedNonPeerDependencies": ["@abp/ng.theme.shared"] } diff --git a/npm/ng-packs/packages/components/ng-package.json b/npm/ng-packs/packages/components/ng-package.json index bb62ea377a..c7afa1d2c1 100644 --- a/npm/ng-packs/packages/components/ng-package.json +++ b/npm/ng-packs/packages/components/ng-package.json @@ -5,5 +5,5 @@ "lib": { "entryFile": "src/public-api.ts" }, - "whitelistedNonPeerDependencies": ["ng-zorro-antd"] + "allowedNonPeerDependencies": ["ng-zorro-antd"] } diff --git a/npm/ng-packs/packages/core/ng-package.json b/npm/ng-packs/packages/core/ng-package.json index e8328e938b..c613dcd94a 100644 --- a/npm/ng-packs/packages/core/ng-package.json +++ b/npm/ng-packs/packages/core/ng-package.json @@ -5,7 +5,7 @@ "entryFile": "src/public-api.ts" }, "deleteDestPath": false, - "whitelistedNonPeerDependencies": [ + "allowedNonPeerDependencies": [ "@abp/utils", "@angular/localize", "@ngxs/store", diff --git a/npm/ng-packs/packages/feature-management/ng-package.json b/npm/ng-packs/packages/feature-management/ng-package.json index 36ae3f8b13..f2282c2e6e 100644 --- a/npm/ng-packs/packages/feature-management/ng-package.json +++ b/npm/ng-packs/packages/feature-management/ng-package.json @@ -4,5 +4,5 @@ "lib": { "entryFile": "src/public-api.ts" }, - "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared"] + "allowedNonPeerDependencies": ["@abp/ng.theme.shared"] } diff --git a/npm/ng-packs/packages/identity/ng-package.json b/npm/ng-packs/packages/identity/ng-package.json index aa178ed0d5..c51f2a9422 100644 --- a/npm/ng-packs/packages/identity/ng-package.json +++ b/npm/ng-packs/packages/identity/ng-package.json @@ -4,5 +4,5 @@ "lib": { "entryFile": "src/public-api.ts" }, - "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared", "@abp/ng.permission-management"] + "allowedNonPeerDependencies": ["@abp/ng.theme.shared", "@abp/ng.permission-management"] } diff --git a/npm/ng-packs/packages/permission-management/ng-package.json b/npm/ng-packs/packages/permission-management/ng-package.json index 03f80c37cc..ab1214088b 100644 --- a/npm/ng-packs/packages/permission-management/ng-package.json +++ b/npm/ng-packs/packages/permission-management/ng-package.json @@ -4,5 +4,5 @@ "lib": { "entryFile": "src/public-api.ts" }, - "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared"] + "allowedNonPeerDependencies": ["@abp/ng.theme.shared"] } diff --git a/npm/ng-packs/packages/setting-management/ng-package.json b/npm/ng-packs/packages/setting-management/ng-package.json index e5ba9f97fc..54f02c5a00 100644 --- a/npm/ng-packs/packages/setting-management/ng-package.json +++ b/npm/ng-packs/packages/setting-management/ng-package.json @@ -4,5 +4,5 @@ "lib": { "entryFile": "src/public-api.ts" }, - "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared"] + "allowedNonPeerDependencies": ["@abp/ng.theme.shared", "@abp/ng.components"] } diff --git a/npm/ng-packs/packages/tenant-management/ng-package.json b/npm/ng-packs/packages/tenant-management/ng-package.json index 07fbab773b..625bfee8d8 100644 --- a/npm/ng-packs/packages/tenant-management/ng-package.json +++ b/npm/ng-packs/packages/tenant-management/ng-package.json @@ -4,5 +4,5 @@ "lib": { "entryFile": "src/public-api.ts" }, - "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared", "@abp/ng.feature-management"] + "allowedNonPeerDependencies": ["@abp/ng.theme.shared", "@abp/ng.feature-management"] } diff --git a/npm/ng-packs/packages/theme-basic/ng-package.json b/npm/ng-packs/packages/theme-basic/ng-package.json index 600c112dee..606f2b1fc8 100644 --- a/npm/ng-packs/packages/theme-basic/ng-package.json +++ b/npm/ng-packs/packages/theme-basic/ng-package.json @@ -4,5 +4,5 @@ "lib": { "entryFile": "src/public-api.ts" }, - "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared"] + "allowedNonPeerDependencies": ["@abp/ng.theme.shared"] } diff --git a/npm/ng-packs/packages/theme-shared/ng-package.json b/npm/ng-packs/packages/theme-shared/ng-package.json index 0c3b5e300f..8af12353fd 100644 --- a/npm/ng-packs/packages/theme-shared/ng-package.json +++ b/npm/ng-packs/packages/theme-shared/ng-package.json @@ -5,7 +5,7 @@ "lib": { "entryFile": "src/public-api.ts" }, - "whitelistedNonPeerDependencies": [ + "allowedNonPeerDependencies": [ "@abp/ng.core", "@fortawesome/fontawesome-free", "@ng-bootstrap/ng-bootstrap", From 0de90d01c898372573da216241942e327f42bc5d Mon Sep 17 00:00:00 2001 From: bnymncoskuner Date: Thu, 25 Mar 2021 11:46:36 +0300 Subject: [PATCH 5/6] fix: modal test --- .../packages/theme-shared/src/lib/tests/modal.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/modal.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/modal.component.spec.ts index 6dd3f8d6db..7c693211f1 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/tests/modal.component.spec.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/modal.component.spec.ts @@ -184,7 +184,7 @@ describe('ModalComponent', () => { reduce((acc, v) => acc.concat(v), []), ) .subscribe(([event1, event2]) => { - expect(event1.returnValue).toBe(true); + expect(event1.returnValue).toBe(false); expect(event2.returnValue).toBe(false); done(); }); From 52601c296cff5eb047dfe1acbcda59e2190a0c5c Mon Sep 17 00:00:00 2001 From: bnymncoskuner Date: Thu, 25 Mar 2021 13:27:28 +0300 Subject: [PATCH 6/6] fix: dest folders of page and tree --- npm/ng-packs/packages/components/page/ng-package.json | 2 +- npm/ng-packs/packages/components/tree/ng-package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/components/page/ng-package.json b/npm/ng-packs/packages/components/page/ng-package.json index d78dbd102b..827df3978e 100644 --- a/npm/ng-packs/packages/components/page/ng-package.json +++ b/npm/ng-packs/packages/components/page/ng-package.json @@ -1,6 +1,6 @@ { "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../dist/components/page", + "dest": "../../../dist/components/page", "lib": { "entryFile": "src/public-api.ts" } diff --git a/npm/ng-packs/packages/components/tree/ng-package.json b/npm/ng-packs/packages/components/tree/ng-package.json index 961dd7a8a9..c7a2782c24 100644 --- a/npm/ng-packs/packages/components/tree/ng-package.json +++ b/npm/ng-packs/packages/components/tree/ng-package.json @@ -1,6 +1,6 @@ { "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../dist/components/tree", + "dest": "../../../dist/components/tree", "lib": { "entryFile": "src/public-api.ts" }