From 9d94ef2c599a3ac1b4bd886d81d7c4b0b8558993 Mon Sep 17 00:00:00 2001 From: sumeyye Date: Thu, 25 Dec 2025 12:00:14 +0300 Subject: [PATCH 1/4] update: self-closing tag usage --- .../src/lib/lookup-search.component.html | 78 ++++++++++++------- .../resource-permission-list.component.html | 51 +++++++----- 2 files changed, 80 insertions(+), 49 deletions(-) diff --git a/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.html b/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.html index 6dd240c996..23e812717c 100644 --- a/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.html +++ b/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.html @@ -1,46 +1,64 @@
- @if (label()) { + @if (label()) { - } + } -
- - @if (displayValue() && !disabled()) { - - } -
+
+ + @if (displayValue() && !disabled()) { + + } +
- @if (showDropdown() && !disabled()) { -
- @if (isLoading()) { + @if (showDropdown() && !disabled()) { +
+ @if (isLoading()) {
- - {{ 'AbpUi::Loading' | abpLocalization }} + + {{ 'AbpUi::Loading' | abpLocalization }}
- } @else if (searchResults().length > 0) { + } @else if (searchResults().length > 0) { @for (item of searchResults(); track item.key) { - + } - } @else if (displayValue()) { + } @else if (displayValue()) { @if (noResultsTemplate()) { - + } @else { -
+
{{ 'AbpUi::NoRecordsFound' | abpLocalization }} -
- } +
} + }
- } -
\ No newline at end of file + } +
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.html index bdde5056b2..a00c909aff 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.html +++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.html @@ -1,28 +1,41 @@
- +
-
- - -
+
+ + +
@if (state.resourcePermissions().length > 0) { - + } @else { -
+
{{ 'AbpPermissionManagement::NoPermissionsAssigned' | abpLocalization }} -
-} \ No newline at end of file +
+} From 463132553e7f01394984d8f895f4c01cee51111a Mon Sep 17 00:00:00 2001 From: sumeyye Date: Thu, 25 Dec 2025 12:00:34 +0300 Subject: [PATCH 2/4] add: index file for enums --- .../packages/permission-management/src/lib/enums/index.ts | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 npm/ng-packs/packages/permission-management/src/lib/enums/index.ts diff --git a/npm/ng-packs/packages/permission-management/src/lib/enums/index.ts b/npm/ng-packs/packages/permission-management/src/lib/enums/index.ts new file mode 100644 index 0000000000..df29235e5b --- /dev/null +++ b/npm/ng-packs/packages/permission-management/src/lib/enums/index.ts @@ -0,0 +1,2 @@ +export * from './view-modes'; +export * from './components'; From 4fe44e846fcb690aec073056fbf5121f93354ec0 Mon Sep 17 00:00:00 2001 From: sumeyye Date: Thu, 25 Dec 2025 12:00:55 +0300 Subject: [PATCH 3/4] update: auto-save changes --- npm/ng-packs/tsconfig.base.json | 136 ++++++++------------------------ 1 file changed, 34 insertions(+), 102 deletions(-) diff --git a/npm/ng-packs/tsconfig.base.json b/npm/ng-packs/tsconfig.base.json index 07ab8e8ef4..943b41780c 100644 --- a/npm/ng-packs/tsconfig.base.json +++ b/npm/ng-packs/tsconfig.base.json @@ -10,114 +10,46 @@ "importHelpers": true, "target": "es2020", "module": "esnext", - "lib": [ - "es2020", - "dom" - ], + "lib": ["es2020", "dom"], "esModuleInterop": true, "baseUrl": "./", "allowSyntheticDefaultImports": true, "paths": { - "@abp/ng.account": [ - "packages/account/src/public-api.ts" - ], - "@abp/ng.account.core": [ - "packages/account-core/src/public-api.ts" - ], - "@abp/ng.account.core/proxy": [ - "packages/account-core/proxy/src/public-api.ts" - ], - "@abp/ng.account/config": [ - "packages/account/config/src/public-api.ts" - ], - "@abp/ng.components": [ - "packages/components/src/public-api.ts" - ], - "@abp/ng.components/chart.js": [ - "packages/components/chart.js/src/public-api.ts" - ], - "@abp/ng.components/extensible": [ - "packages/components/extensible/src/public-api.ts" - ], - "@abp/ng.components/lookup": [ - "packages/components/lookup/src/public-api.ts" - ], - "@abp/ng.components/page": [ - "packages/components/page/src/public-api.ts" - ], - "@abp/ng.components/tree": [ - "packages/components/tree/src/public-api.ts" - ], - "@abp/ng.core": [ - "packages/core/src/public-api.ts" - ], - "@abp/ng.core/locale": [ - "packages/core/locale/src/public-api.ts" - ], - "@abp/ng.core/testing": [ - "packages/core/testing/src/public-api.ts" - ], - "@abp/ng.feature-management": [ - "packages/feature-management/src/public-api.ts" - ], - "@abp/ng.feature-management/proxy": [ - "packages/feature-management/proxy/src/public-api.ts" - ], - "@abp/ng.identity": [ - "packages/identity/src/public-api.ts" - ], - "@abp/ng.identity/config": [ - "packages/identity/config/src/public-api.ts" - ], - "@abp/ng.identity/proxy": [ - "packages/identity/proxy/src/public-api.ts" - ], - "@abp/ng.oauth": [ - "packages/oauth/src/public-api.ts" - ], - "@abp/ng.permission-management": [ - "packages/permission-management/src/public-api.ts" - ], + "@abp/ng.account": ["packages/account/src/public-api.ts"], + "@abp/ng.account.core": ["packages/account-core/src/public-api.ts"], + "@abp/ng.account.core/proxy": ["packages/account-core/proxy/src/public-api.ts"], + "@abp/ng.account/config": ["packages/account/config/src/public-api.ts"], + "@abp/ng.components": ["packages/components/src/public-api.ts"], + "@abp/ng.components/chart.js": ["packages/components/chart.js/src/public-api.ts"], + "@abp/ng.components/extensible": ["packages/components/extensible/src/public-api.ts"], + "@abp/ng.components/lookup": ["packages/components/lookup/src/public-api.ts"], + "@abp/ng.components/page": ["packages/components/page/src/public-api.ts"], + "@abp/ng.components/tree": ["packages/components/tree/src/public-api.ts"], + "@abp/ng.core": ["packages/core/src/public-api.ts"], + "@abp/ng.core/locale": ["packages/core/locale/src/public-api.ts"], + "@abp/ng.core/testing": ["packages/core/testing/src/public-api.ts"], + "@abp/ng.feature-management": ["packages/feature-management/src/public-api.ts"], + "@abp/ng.feature-management/proxy": ["packages/feature-management/proxy/src/public-api.ts"], + "@abp/ng.identity": ["packages/identity/src/public-api.ts"], + "@abp/ng.identity/config": ["packages/identity/config/src/public-api.ts"], + "@abp/ng.identity/proxy": ["packages/identity/proxy/src/public-api.ts"], + "@abp/ng.oauth": ["packages/oauth/src/public-api.ts"], + "@abp/ng.permission-management": ["packages/permission-management/src/public-api.ts"], "@abp/ng.permission-management/proxy": [ "packages/permission-management/proxy/src/public-api.ts" ], - "@abp/ng.setting-management": [ - "packages/setting-management/src/public-api.ts" - ], - "@abp/ng.setting-management/config": [ - "packages/setting-management/config/src/public-api.ts" - ], - "@abp/ng.setting-management/proxy": [ - "packages/setting-management/proxy/src/public-api.ts" - ], - "@abp/ng.tenant-management": [ - "packages/tenant-management/src/public-api.ts" - ], - "@abp/ng.tenant-management/config": [ - "packages/tenant-management/config/src/public-api.ts" - ], - "@abp/ng.tenant-management/proxy": [ - "packages/tenant-management/proxy/src/public-api.ts" - ], - "@abp/ng.theme.basic": [ - "packages/theme-basic/src/public-api.ts" - ], - "@abp/ng.theme.basic/testing": [ - "packages/theme-basic/testing/src/public-api.ts" - ], - "@abp/ng.theme.shared": [ - "packages/theme-shared/src/public-api.ts" - ], - "@abp/ng.theme.shared/testing": [ - "packages/theme-shared/testing/src/public-api.ts" - ], - "@abp/nx.generators": [ - "packages/generators/src/index.ts" - ] + "@abp/ng.setting-management": ["packages/setting-management/src/public-api.ts"], + "@abp/ng.setting-management/config": ["packages/setting-management/config/src/public-api.ts"], + "@abp/ng.setting-management/proxy": ["packages/setting-management/proxy/src/public-api.ts"], + "@abp/ng.tenant-management": ["packages/tenant-management/src/public-api.ts"], + "@abp/ng.tenant-management/config": ["packages/tenant-management/config/src/public-api.ts"], + "@abp/ng.tenant-management/proxy": ["packages/tenant-management/proxy/src/public-api.ts"], + "@abp/ng.theme.basic": ["packages/theme-basic/src/public-api.ts"], + "@abp/ng.theme.basic/testing": ["packages/theme-basic/testing/src/public-api.ts"], + "@abp/ng.theme.shared": ["packages/theme-shared/src/public-api.ts"], + "@abp/ng.theme.shared/testing": ["packages/theme-shared/testing/src/public-api.ts"], + "@abp/nx.generators": ["packages/generators/src/index.ts"] } }, - "exclude": [ - "node_modules", - "tmp" - ] -} \ No newline at end of file + "exclude": ["node_modules", "tmp"] +} From faf4ea1bda24c4f0eb4441e95bde43d8718ca821 Mon Sep 17 00:00:00 2001 From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com> Date: Thu, 25 Dec 2025 15:40:27 +0300 Subject: [PATCH 4/4] Refactor lookup and permission components, add styles Refactored lookup-search and permission-checkbox-list components to use SCSS for dropdown and list container styling. Improved resource permission management component with signals and untracked for state updates, and replaced manual destroy logic with Angular's DestroyRef and takeUntilDestroyed. Updated HTML templates for better readability and accessibility. --- .../src/lib/lookup-search.component.html | 83 +++++++------------ .../src/lib/lookup-search.component.scss | 5 ++ .../lookup/src/lib/lookup-search.component.ts | 23 +++-- .../permission-checkbox-list.component.html | 10 +-- .../permission-checkbox-list.component.scss | 4 + .../permission-checkbox-list.component.ts | 1 + .../provider-key-search.component.ts | 17 ++-- ...esource-permission-management.component.ts | 29 +++++-- 8 files changed, 83 insertions(+), 89 deletions(-) create mode 100644 npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.scss create mode 100644 npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.scss diff --git a/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.html b/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.html index 23e812717c..e795025aec 100644 --- a/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.html +++ b/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.html @@ -1,64 +1,45 @@
@if (label()) { - + }
- + @if (displayValue() && !disabled()) { - + }
@if (showDropdown() && !disabled()) { -
- @if (isLoading()) { -
- - {{ 'AbpUi::Loading' | abpLocalization }} -
- } @else if (searchResults().length > 0) { - @for (item of searchResults(); track item.key) { - - } - } @else if (displayValue()) { - @if (noResultsTemplate()) { - - } @else { -
- {{ 'AbpUi::NoRecordsFound' | abpLocalization }} -
- } +
+ @if (isLoading()) { +
+ + {{ 'AbpUi::Loading' | abpLocalization }} +
+ } @else if (searchResults().length > 0) { + @for (item of searchResults(); track item.key) { + + } + } @else if (displayValue()) { + @if (noResultsTemplate()) { + + } @else { +
+ {{ 'AbpUi::NoRecordsFound' | abpLocalization }}
+ } + } +
} -
+
\ No newline at end of file diff --git a/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.scss b/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.scss new file mode 100644 index 0000000000..6fd1e2dc26 --- /dev/null +++ b/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.scss @@ -0,0 +1,5 @@ +.abp-lookup-dropdown { + z-index: 1050; + max-height: 200px; + overflow-y: auto; +} diff --git a/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.ts b/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.ts index 80770839bf..9633b15ab8 100644 --- a/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.ts +++ b/npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.ts @@ -5,15 +5,17 @@ import { model, signal, OnInit, - OnDestroy, ChangeDetectionStrategy, TemplateRef, contentChild, + DestroyRef, + inject, } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { LocalizationPipe } from '@abp/ng.core'; -import { Subject, Observable, debounceTime, distinctUntilChanged, takeUntil, of } from 'rxjs'; +import { Subject, Observable, debounceTime, distinctUntilChanged, of, finalize } from 'rxjs'; export interface LookupItem { key: string; @@ -26,10 +28,12 @@ export type LookupSearchFn = (filter: string) => Observable @Component({ selector: 'abp-lookup-search', templateUrl: './lookup-search.component.html', + styleUrl: './lookup-search.component.scss', imports: [CommonModule, FormsModule, LocalizationPipe], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class LookupSearchComponent implements OnInit, OnDestroy { +export class LookupSearchComponent implements OnInit { + private readonly destroyRef = inject(DestroyRef); readonly label = input(); readonly placeholder = input(''); @@ -55,23 +59,17 @@ export class LookupSearchComponent implements readonly isLoading = signal(false); private readonly searchSubject = new Subject(); - private readonly destroy$ = new Subject(); ngOnInit() { this.searchSubject.pipe( debounceTime(this.debounceTime()), distinctUntilChanged(), - takeUntil(this.destroy$) + takeUntilDestroyed(this.destroyRef) ).subscribe(filter => { this.performSearch(filter); }); } - ngOnDestroy() { - this.destroy$.next(); - this.destroy$.complete(); - } - onSearchInput(filter: string) { this.displayValue.set(filter); this.showDropdown.set(true); @@ -120,15 +118,14 @@ export class LookupSearchComponent implements this.isLoading.set(true); this.searchFn()(filter).pipe( - takeUntil(this.destroy$) + takeUntilDestroyed(this.destroyRef), + finalize(() => this.isLoading.set(false)) ).subscribe({ next: results => { this.searchResults.set(results); - this.isLoading.set(false); }, error: () => { this.searchResults.set([]); - this.isLoading.set(false); } }); } diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.html index 87c8f27d70..07db143b00 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.html +++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.html @@ -3,20 +3,20 @@
{{ title() | abpLocalization }}
}
- -
-
+
@for (perm of permissions(); track perm.name) {
- -
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.scss b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.scss new file mode 100644 index 0000000000..0562864716 --- /dev/null +++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.scss @@ -0,0 +1,4 @@ +.abp-permission-list-container { + max-height: 300px; + overflow-y: auto; +} \ No newline at end of file diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.ts index fe36cbb800..26c5a314f9 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.ts +++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.ts @@ -10,6 +10,7 @@ interface PermissionItem { @Component({ selector: 'abp-permission-checkbox-list', templateUrl: './permission-checkbox-list.component.html', + styleUrl: './permission-checkbox-list.component.scss', imports: [LocalizationPipe], changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.ts index 1e7e54b88c..0aceed0c5f 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.ts +++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.ts @@ -1,7 +1,8 @@ -import { Component, input, inject, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core'; +import { Component, input, inject, OnInit, ChangeDetectionStrategy, DestroyRef } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { PermissionsService } from '@abp/ng.permission-management/proxy'; import { LookupSearchComponent, LookupItem } from '@abp/ng.components/lookup'; -import { Observable, map, Subject, takeUntil } from 'rxjs'; +import { Observable, map } from 'rxjs'; import { ResourcePermissionStateService } from '../../../services/resource-permission-state.service'; interface ProviderKeyLookupItem extends LookupItem { @@ -15,25 +16,19 @@ interface ProviderKeyLookupItem extends LookupItem { imports: [LookupSearchComponent], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class ProviderKeySearchComponent implements OnInit, OnDestroy { +export class ProviderKeySearchComponent implements OnInit { readonly state = inject(ResourcePermissionStateService); private readonly service = inject(PermissionsService); + private readonly destroyRef = inject(DestroyRef); readonly resourceName = input.required(); - private readonly destroy$ = new Subject(); - searchFn: (filter: string) => Observable = () => new Observable(); ngOnInit() { this.searchFn = (filter: string) => this.loadProviderKeys(filter); } - ngOnDestroy() { - this.destroy$.next(); - this.destroy$.complete(); - } - onItemSelected(item: ProviderKeyLookupItem) { // State is already updated via displayValue and selectedValue bindings // This handler can be used for additional side effects if needed @@ -60,7 +55,7 @@ export class ProviderKeySearchComponent implements OnInit, OnDestroy { providerKey: k.providerKey || '', providerDisplayName: k.providerDisplayName || undefined, }))), - takeUntil(this.destroy$) + takeUntilDestroyed(this.destroyRef) ); } } diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-management.component.ts index c38d6036ee..fc534f128d 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-management.component.ts +++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-management.component.ts @@ -18,6 +18,8 @@ import { model, OnInit, effect, + untracked, + signal, } from '@angular/core'; import { finalize, switchMap, of } from 'rxjs'; import { ResourcePermissionStateService } from '../../services/resource-permission-state.service'; @@ -26,6 +28,8 @@ import { ResourcePermissionFormComponent } from './resource-permission-form/reso import { eResourcePermissionViewModes } from '../../enums/view-modes'; +const DEFAULT_MAX_RESULT_COUNT = 10; + @Component({ selector: 'abp-resource-permission-management', templateUrl: './resource-permission-management.component.html', @@ -55,33 +59,40 @@ export class ResourcePermissionManagementComponent implements OnInit { readonly visible = model(false); - private previousVisible = false; + private readonly previousVisible = signal(false); constructor() { effect(() => { - this.state.resourceName.set(this.resourceName()); - this.state.resourceKey.set(this.resourceKey()); - this.state.resourceDisplayName.set(this.resourceDisplayName()); + const resourceName = this.resourceName(); + const resourceKey = this.resourceKey(); + const resourceDisplayName = this.resourceDisplayName(); + + untracked(() => { + this.state.resourceName.set(resourceName); + this.state.resourceKey.set(resourceKey); + this.state.resourceDisplayName.set(resourceDisplayName); + }); }); effect(() => { const isVisible = this.visible(); - if (isVisible && !this.previousVisible) { + const wasVisible = this.previousVisible(); + if (isVisible && !wasVisible) { this.openModal(); - } else if (!isVisible && this.previousVisible) { + } else if (!isVisible && wasVisible) { this.state.reset(); } - this.previousVisible = isVisible; + untracked(() => this.previousVisible.set(isVisible)); }); } ngOnInit() { - this.list.maxResultCount = 10; + this.list.maxResultCount = DEFAULT_MAX_RESULT_COUNT; this.list.hookToQuery(query => { const allData = this.state.allResourcePermissions(); const skipCount = query.skipCount || 0; - const maxResultCount = query.maxResultCount || 10; + const maxResultCount = query.maxResultCount || DEFAULT_MAX_RESULT_COUNT; const paginatedData = allData.slice(skipCount, skipCount + maxResultCount);