diff --git a/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md b/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md index 11a7f6dfb8..3e6d9ab328 100644 --- a/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md +++ b/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md @@ -17,6 +17,10 @@ yarn ng generate component my-roles/my-roles --flat --export Open the generated `src/app/my-roles/my-roles.component.ts` file and replace its content with the following: ```js +import { Component, Injector, inject, OnInit } from '@angular/core'; +import { FormGroup } from '@angular/forms'; +import { finalize } from 'rxjs/operators'; + import { ListService, PagedAndSortedResultRequestDto, PagedResultDto } from '@abp/ng.core'; import { eIdentityComponents, RolesComponent } from '@abp/ng.identity'; import { IdentityRoleDto, IdentityRoleService } from '@abp/ng.identity/proxy'; @@ -27,9 +31,6 @@ import { FormPropData, generateFormFromProps } from '@abp/ng.components/extensible'; -import { Component, Injector, OnInit } from '@angular/core'; -import { FormGroup } from '@angular/forms'; -import { finalize } from 'rxjs/operators'; @Component({ selector: 'app-my-roles', @@ -40,13 +41,18 @@ import { finalize } from 'rxjs/operators'; provide: EXTENSIONS_IDENTIFIER, useValue: eIdentityComponents.Roles, }, - { - provide: RolesComponent, - useExisting: MyRolesComponent - } + { + provide: RolesComponent, + useExisting: MyRolesComponent, + }, ], }) export class MyRolesComponent implements OnInit { + public readonly list = inject>(ListService); + protected readonly confirmationService = inject(ConfirmationService); + protected readonly injector = inject(Injector); + protected readonly service = inject(IdentityRoleService); + data: PagedResultDto = { items: [], totalCount: 0 }; form: FormGroup; @@ -63,17 +69,10 @@ export class MyRolesComponent implements OnInit { permissionManagementKey = ePermissionManagementComponents.PermissionManagement; - onVisiblePermissionChange = event => { + onVisiblePermissionChange = (event) => { this.visiblePermissions = event; }; - constructor( - public readonly list: ListService, - protected confirmationService: ConfirmationService, - protected injector: Injector, - protected service: IdentityRoleService, - ) {} - ngOnInit() { this.hookToQuery(); } @@ -253,13 +252,18 @@ export class MyRolesModule {} As the last step, it is needs to be replaced the `RolesComponent` with the `MyRolesComponent`. Open the `app.component.ts` and modify its content as shown below: ```js +import { Component, inject } from '@angular/core'; import { ReplaceableComponentsService } from '@abp/ng.core'; import { eIdentityComponents } from '@abp/ng.identity'; import { MyRolesComponent } from './my-roles/my-roles.component'; -@Component(/* component metadata */) +@Component({ + // component metadata +}) export class AppComponent { - constructor(private replaceableComponents: ReplaceableComponentsService) { + private replaceableComponents = inject(ReplaceableComponentsService); + + constructor() { this.replaceableComponents.add({ component: MyRolesComponent, key: eIdentityComponents.Roles }); } } diff --git a/docs/en/framework/ui/angular/http-error-reporter-service.md b/docs/en/framework/ui/angular/http-error-reporter-service.md index 5e85fc95dc..e7f9a6f5a8 100644 --- a/docs/en/framework/ui/angular/http-error-reporter-service.md +++ b/docs/en/framework/ui/angular/http-error-reporter-service.md @@ -7,13 +7,14 @@ See the example below to learn how to report an error: ```ts import { HttpErrorReporterService } from '@abp/ng.core'; import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { of } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable() export class SomeService { - constructor(private http: HttpClient, private httpErrorReporter: HttpErrorReporterService) {} + private http = inject(HttpClient); + private httpErrorReporter = inject(HttpErrorReporterService); getData() { return this.http.get('http://example.com/get-data').pipe( @@ -31,17 +32,19 @@ See the following example to learn listening the reported errors: ```ts import { HttpErrorReporterService } from '@abp/ng.core'; import { HttpErrorResponse } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; @Injectable() export class MyErrorHandler { - constructor(private httpErrorReporter: HttpErrorReporterService) { + private httpErrorReporter = inject(HttpErrorReporterService); + + constructor() { this.handleErrors(); } handleErrors() { this.httpErrorReporter.reporter$.subscribe((err: HttpErrorResponse) => { - // handle the errors here + // handle the errors here }); } } diff --git a/docs/en/framework/ui/angular/permission-management-component-replacement.md b/docs/en/framework/ui/angular/permission-management-component-replacement.md index 677100381a..c6041cc784 100644 --- a/docs/en/framework/ui/angular/permission-management-component-replacement.md +++ b/docs/en/framework/ui/angular/permission-management-component-replacement.md @@ -19,7 +19,7 @@ import { import { LocaleDirection } from '@abp/ng.theme.shared'; import { Component, - EventEmitter, Inject, Input, Optional, Output, TrackByFunction + EventEmitter, Inject, inject, Input, Optional, Output, TrackByFunction } from '@angular/core'; import { of } from 'rxjs'; import { finalize, switchMap, tap } from 'rxjs/operators'; @@ -42,16 +42,18 @@ type PermissionWithStyle = PermissionGrantInfoDto & { }) export class PermissionManagementComponent implements - PermissionManagement.PermissionManagementComponentInputs, - PermissionManagement.PermissionManagementComponentOutputs { + PermissionManagement.PermissionManagementComponentInputs, + PermissionManagement.PermissionManagementComponentOutputs { + + private readonly service = inject(PermissionsService); + private readonly configState = inject(ConfigStateService); + protected _providerName: string; @Input() get providerName(): string { if (this.replaceableData) return this.replaceableData.inputs.providerName; - return this._providerName; } - set providerName(value: string) { this._providerName = value; } @@ -60,10 +62,8 @@ export class PermissionManagementComponent @Input() get providerKey(): string { if (this.replaceableData) return this.replaceableData.inputs.providerKey; - return this._providerKey; } - set providerKey(value: string) { this._providerKey = value; } @@ -72,10 +72,8 @@ export class PermissionManagementComponent @Input() get hideBadges(): boolean { if (this.replaceableData) return this.replaceableData.inputs.hideBadges; - return this._hideBadges; } - set hideBadges(value: boolean) { this._hideBadges = value; } @@ -85,7 +83,6 @@ export class PermissionManagementComponent get visible(): boolean { return this._visible; } - set visible(value: boolean) { if (value === this._visible) return; @@ -106,15 +103,10 @@ export class PermissionManagementComponent @Output() readonly visibleChange = new EventEmitter(); data: GetPermissionListResultDto = { groups: [], entityDisplayName: null }; - selectedGroup: PermissionGroupDto; - permissions: PermissionGrantInfoDto[] = []; - selectThisTab = false; - selectAllTab = false; - modalBusy = false; trackByFn: TrackByFunction = (_, item) => item.name; @@ -142,7 +134,6 @@ export class PermissionManagementComponent get isVisible(): boolean { if (!this.replaceableData) return this.visible; - return this.replaceableData.inputs.visible; } @@ -152,9 +143,7 @@ export class PermissionManagementComponent public replaceableData: ReplaceableComponents.ReplaceableTemplateData< PermissionManagement.PermissionManagementComponentInputs, PermissionManagement.PermissionManagementComponentOutputs - >, - private service: PermissionsService, - private configState: ConfigStateService + > ) {} getChecked(name: string) { @@ -162,17 +151,11 @@ export class PermissionManagementComponent } isGrantedByOtherProviderName(grantedProviders: ProviderInfoDto[]): boolean { - if (grantedProviders.length) { - return grantedProviders.findIndex(p => p.providerName !== this.providerName) > -1; - } - return false; + return grantedProviders?.some(p => p.providerName !== this.providerName); } onClickCheckbox(clickedPermission: PermissionGrantInfoDto, value) { - if ( - clickedPermission.isGranted && - this.isGrantedByOtherProviderName(clickedPermission.grantedProviders) - ) + if (clickedPermission.isGranted && this.isGrantedByOtherProviderName(clickedPermission.grantedProviders)) return; setTimeout(() => { @@ -184,7 +167,6 @@ export class PermissionManagementComponent } else if (clickedPermission.parentName === per.name && !clickedPermission.isGranted) { return { ...per, isGranted: true }; } - return per; }); @@ -255,16 +237,11 @@ export class PermissionManagementComponent this.setTabCheckboxState(); } - submit() { const unchangedPermissions = getPermissions(this.data.groups); - const changedPermissions: UpdatePermissionDto[] = this.permissions .filter(per => - unchangedPermissions.find(unchanged => unchanged.name === per.name).isGranted === - per.isGranted - ? false - : true, + unchangedPermissions.find(unchanged => unchanged.name === per.name).isGranted !== per.isGranted ) .map(({ name, isGranted }) => ({ name, isGranted })); @@ -321,26 +298,23 @@ export class PermissionManagementComponent this.replaceableData.outputs.visibleChange(visible); } } - + shouldFetchAppConfig() { const currentUser = this.configState.getOne('currentUser') as CurrentUserDto; if (this.providerName === 'R') return currentUser.roles.some(role => role === this.providerKey); - if (this.providerName === 'U') return currentUser.id === this.providerKey; return false; } } -function findMargin(permissions: PermissionGrantInfoDto[], permission: PermissionGrantInfoDto) { +function findMargin(permissions: PermissionGrantInfoDto[], permission: PermissionGrantInfoDto): number { const parentPermission = permissions.find(per => per.name === permission.parentName); - if (parentPermission && parentPermission.parentName) { let margin = 20; - return (margin += findMargin(permissions, parentPermission)); + return margin + findMargin(permissions, parentPermission); } - return parentPermission ? 20 : 0; } @@ -461,12 +435,12 @@ Open `app.component.ts` in `src/app` folder and modify it as shown below: ```js import { ReplaceableComponentsService } from '@abp/ng.core'; import { ePermissionManagementComponents } from '@abp/ng.permission-management'; -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { PermissionManagementComponent } from './permission-management/permission-management.component'; //... export class AppComponent implements OnInit { - constructor(private replaceableComponents: ReplaceableComponentsService) {} // injected ReplaceableComponentsService + private readonly replaceableComponents = inject(ReplaceableComponentsService); // injected ReplaceableComponentsService ngOnInit() { this.replaceableComponents.add({ diff --git a/docs/en/framework/ui/angular/theming.md b/docs/en/framework/ui/angular/theming.md index 177d87c382..70928bd16a 100644 --- a/docs/en/framework/ui/angular/theming.md +++ b/docs/en/framework/ui/angular/theming.md @@ -224,7 +224,7 @@ All of the options are shown below. You can choose either of them. ````ts import { eUserMenuItems } from '@abp/ng.theme.basic'; import { UserMenuService } from '@abp/ng.theme.shared'; -import { Component, inject, Inject } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { Router } from '@angular/router'; // make sure that you import this component in a NgModule @@ -239,7 +239,7 @@ import { Router } from '@angular/router'; }) export class UserMenuItemComponent { // you can inject the data through `INJECTOR_PIPE_DATA_TOKEN` token - constructor(@Inject(INJECTOR_PIPE_DATA_TOKEN) public data: UserMenu) {} + public data = inject(INJECTOR_PIPE_DATA_TOKEN); } @Component({/* component metadata */}) diff --git a/docs/en/modules/setting-management.md b/docs/en/modules/setting-management.md index 842233e8b4..7772e7f1f5 100644 --- a/docs/en/modules/setting-management.md +++ b/docs/en/modules/setting-management.md @@ -289,16 +289,18 @@ yarn ng generate component my-settings Open the `app.component.ts` and modify the file as shown below: ```js -import { Component } from '@angular/core'; -import { SettingTabsService } from '@abp/ng.setting-management/config'; // imported SettingTabsService -import { MySettingsComponent } from './my-settings/my-settings.component'; // imported MySettingsComponent +import { Component, inject } from '@angular/core'; +import { SettingTabsService } from '@abp/ng.setting-management/config'; +import { MySettingsComponent } from './my-settings/my-settings.component'; -@Component(/* component metadata */) +@Component({ + // component metadata +}) export class AppComponent { - constructor(private settingTabs: SettingTabsService) // injected MySettingsComponent - { - // added below - settingTabs.add([ + private readonly settingTabs = inject(SettingTabsService); + + constructor() { + this.settingTabs.add([ { name: 'MySettings', order: 1,