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..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,46 +1,45 @@
- @if (label()) { - + @if (label()) { + + } + +
+ + @if (displayValue() && !disabled()) { + } +
-
- - @if (displayValue() && !disabled()) { - - } + @if (showDropdown() && !disabled()) { +
+ @if (isLoading()) { +
+ + {{ 'AbpUi::Loading' | abpLocalization }}
- - @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 }} -
- } - } + } @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-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 +
+} 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); 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'; 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"] +}