From 328d2fadf0fdeaf0a38c1ac806c269112cae488e Mon Sep 17 00:00:00 2001 From: erdemcaygor Date: Mon, 2 Jun 2025 11:33:08 +0300 Subject: [PATCH] transferState added to user and roles list to support ssr --- .../packages/core/src/lib/services/index.ts | 1 + .../core/src/lib/services/ssr.service.ts | 2 +- .../lib/components/roles/roles.component.ts | 27 ++++++++++++++----- .../lib/components/users/users.component.ts | 25 +++++++++++++---- 4 files changed, 43 insertions(+), 12 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/services/index.ts b/npm/ng-packs/packages/core/src/lib/services/index.ts index 6b006be74e..fbf09e044d 100644 --- a/npm/ng-packs/packages/core/src/lib/services/index.ts +++ b/npm/ng-packs/packages/core/src/lib/services/index.ts @@ -25,3 +25,4 @@ export * from './local-storage-listener.service'; export * from './title-strategy.service'; export * from './timezone.service'; export * from './time.service'; +export * from './ssr.service'; diff --git a/npm/ng-packs/packages/core/src/lib/services/ssr.service.ts b/npm/ng-packs/packages/core/src/lib/services/ssr.service.ts index ddb36ca6df..64b4966c28 100644 --- a/npm/ng-packs/packages/core/src/lib/services/ssr.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/ssr.service.ts @@ -7,7 +7,7 @@ import { isPlatformServer } from '@angular/common'; export class SSRService { constructor(@Inject(PLATFORM_ID) private platformId: unknown) {} - isSsr() { + get isSsr() { return isPlatformServer(this.platformId); } } diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts index 6645e9dd2b..bf0591aa15 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts +++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts @@ -5,6 +5,7 @@ import { PagedAndSortedResultRequestDto, PagedResultDto, ReplaceableTemplateDirective, + SSRService, } from '@abp/ng.core'; import { IdentityRoleDto, IdentityRoleService } from '@abp/ng.identity/proxy'; import { @@ -26,7 +27,7 @@ import { FormPropData, generateFormFromProps, } from '@abp/ng.components/extensible'; -import { Component, inject, Injector, OnInit } from '@angular/core'; +import { Component, inject, Injector, makeStateKey, OnInit, TransferState } from '@angular/core'; import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms'; import { finalize } from 'rxjs/operators'; import { eIdentityComponents } from '../../enums/components'; @@ -64,6 +65,8 @@ export class RolesComponent implements OnInit { protected readonly toasterService = inject(ToasterService); private readonly injector = inject(Injector); protected readonly service = inject(IdentityRoleService); + protected readonly ssrService = inject(SSRService); + ROLES_KEY = makeStateKey('roles'); data: PagedResultDto = { items: [], totalCount: 0 }; @@ -81,6 +84,8 @@ export class RolesComponent implements OnInit { permissionManagementKey = ePermissionManagementComponents.PermissionManagement; + constructor(private transferState: TransferState) {} + onVisiblePermissionChange = (event: boolean) => { this.visiblePermissions = event; }; @@ -142,12 +147,22 @@ export class RolesComponent implements OnInit { } private hookToQuery() { - this.list - .hookToQuery(query => this.service.getList(query)) - .subscribe(res => { - console.log(res); - this.data = res; + if (this.transferState.hasKey(this.ROLES_KEY)) { + this.data = this.transferState.get>(this.ROLES_KEY, { + items: [], + totalCount: 0, }); + this.transferState.remove(this.ROLES_KEY); + } else { + this.list + .hookToQuery(query => this.service.getList(query)) + .subscribe(res => { + this.data = res; + if (this.ssrService.isSsr) { + this.transferState.set(this.ROLES_KEY, res); + } + }); + } } openPermissionsModal(providerKey: string) { diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts index 4e312bc925..fe3c62a66f 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts @@ -4,6 +4,7 @@ import { LocalizationPipe, PagedResultDto, ReplaceableTemplateDirective, + SSRService, } from '@abp/ng.core'; import { GetIdentityUsersInput, @@ -34,13 +35,13 @@ import { } from '@abp/ng.components/extensible'; import { Component, - Inject, inject, Injector, + makeStateKey, OnInit, - PLATFORM_ID, TemplateRef, TrackByFunction, + TransferState, ViewChild, } from '@angular/core'; import { @@ -56,7 +57,6 @@ import { eIdentityComponents } from '../../enums/components'; import { PageComponent } from '@abp/ng.components/page'; import { NgbDropdownModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap'; import { NgxValidateCoreModule } from '@ngx-validate/core'; -import { isPlatformBrowser } from '@angular/common'; @Component({ selector: 'abp-users', @@ -94,6 +94,7 @@ export class UsersComponent implements OnInit { protected readonly toasterService = inject(ToasterService); private readonly fb = inject(UntypedFormBuilder); private readonly injector = inject(Injector); + USERS_KEY = makeStateKey('users'); data: PagedResultDto = { items: [], totalCount: 0 }; @@ -124,7 +125,9 @@ export class UsersComponent implements OnInit { trackByFn: TrackByFunction = (index, item) => Object.keys(item)[0] || index; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + public ssrService = inject(SSRService); + + constructor(private transferState: TransferState) {} onVisiblePermissionChange = (event: boolean) => { this.visiblePermissions = event; @@ -237,7 +240,19 @@ export class UsersComponent implements OnInit { } private hookToQuery() { - this.list.hookToQuery(query => this.service.getList(query)).subscribe(res => (this.data = res)); + if (this.transferState.hasKey(this.USERS_KEY)) { + this.data = this.transferState.get(this.USERS_KEY, { items: [], totalCount: 0 }); + this.transferState.remove(this.USERS_KEY); + } else { + this.list + .hookToQuery(query => this.service.getList(query)) + .subscribe(res => { + this.data = res; + if (this.ssrService.isSsr) { + this.transferState.set(this.USERS_KEY, res); + } + }); + } } openPermissionsModal(providerKey: string, entityDisplayName?: string) {