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 07db143b00..aeaefdff20 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 @@ -1,25 +1,33 @@
- @if (showTitle()) { + @if (showTitle()) {
{{ title() | abpLocalization }}
- } -
- -
+ } +
+ diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.html index 41740a1f64..b04e1552c9 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.html +++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.html @@ -1,4 +1,10 @@ - \ No newline at end of file + 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 0aceed0c5f..d8379890fb 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,4 +1,11 @@ -import { Component, input, inject, OnInit, ChangeDetectionStrategy, DestroyRef } 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'; @@ -6,56 +13,55 @@ import { Observable, map } from 'rxjs'; import { ResourcePermissionStateService } from '../../../services/resource-permission-state.service'; interface ProviderKeyLookupItem extends LookupItem { - providerKey: string; - providerDisplayName?: string; + providerKey: string; + providerDisplayName?: string; } @Component({ - selector: 'abp-provider-key-search', - templateUrl: './provider-key-search.component.html', - imports: [LookupSearchComponent], - changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'abp-provider-key-search', + templateUrl: './provider-key-search.component.html', + imports: [LookupSearchComponent], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class ProviderKeySearchComponent implements OnInit { - readonly state = inject(ResourcePermissionStateService); - private readonly service = inject(PermissionsService); - private readonly destroyRef = inject(DestroyRef); + readonly state = inject(ResourcePermissionStateService); + private readonly service = inject(PermissionsService); + private readonly destroyRef = inject(DestroyRef); - readonly resourceName = input.required(); + readonly resourceName = input.required(); - searchFn: (filter: string) => Observable = () => new Observable(); + searchFn: (filter: string) => Observable = () => new Observable(); - ngOnInit() { - this.searchFn = (filter: string) => this.loadProviderKeys(filter); - } + ngOnInit() { + this.searchFn = (filter: string) => this.loadProviderKeys(filter); + } - onItemSelected(item: ProviderKeyLookupItem) { - // State is already updated via displayValue and selectedValue bindings - // This handler can be used for additional side effects if needed - } + onItemSelected(item: ProviderKeyLookupItem) { + // State is already updated via displayValue and selectedValue bindings + // This handler can be used for additional side effects if needed + } - private loadProviderKeys(filter: string): Observable { - const providerName = this.state.selectedProviderName(); - if (!providerName) { - return new Observable(subscriber => { - subscriber.next([]); - subscriber.complete(); - }); - } - - return this.service.searchResourceProviderKey( - this.resourceName(), - providerName, - filter, - 1 - ).pipe( - map(res => (res.keys || []).map(k => ({ - key: k.providerKey || '', - displayName: k.providerDisplayName || k.providerKey || '', - providerKey: k.providerKey || '', - providerDisplayName: k.providerDisplayName || undefined, - }))), - takeUntilDestroyed(this.destroyRef) - ); + private loadProviderKeys(filter: string): Observable { + const providerName = this.state.selectedProviderName(); + if (!providerName) { + return new Observable(subscriber => { + subscriber.next([]); + subscriber.complete(); + }); } + + return this.service + .searchResourceProviderKey(this.resourceName(), providerName, filter, 1) + .pipe( + map(res => + (res.keys || []).map(k => ({ + key: k.providerKey || '', + displayName: k.providerDisplayName || k.providerKey || '', + providerKey: k.providerKey || '', + providerDisplayName: k.providerDisplayName || undefined, + })), + ), + takeUntilDestroyed(this.destroyRef), + ); + } } diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.html index ed1feb243c..50d6370185 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.html +++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.html @@ -1,28 +1,37 @@ @if (mode() === eResourcePermissionViewModes.Add) { -
+
- @for (provider of state.providers(); track provider.name; let i = $index) { + @for (provider of state.providers(); track provider.name; let i = $index) {
- - + +
- } + }
-
+
- + } @else { -
+

{{ 'AbpPermissionManagement::Permissions' | 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.html b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-management.component.html index 571880a25f..aa26f12bb3 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-management.component.html +++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-management.component.html @@ -1,60 +1,67 @@ - - -
- @switch (state.viewMode()) { - @case (eResourcePermissionViewModes.Edit) { - {{ 'AbpPermissionManagement::UpdatePermission' | abpLocalization }} - } - @case (eResourcePermissionViewModes.Add) { - {{ 'AbpPermissionManagement::AddResourcePermission' | abpLocalization }} - } - @default { - {{ 'AbpPermissionManagement::ResourcePermissions' | abpLocalization }} - @if (resourceDisplayName()) { + + +
+ @switch (state.viewMode()) { + @case (eResourcePermissionViewModes.Edit) { + {{ 'AbpPermissionManagement::UpdatePermission' | abpLocalization }} + } + @case (eResourcePermissionViewModes.Add) { + {{ 'AbpPermissionManagement::AddResourcePermission' | abpLocalization }} + } + @default { + {{ 'AbpPermissionManagement::ResourcePermissions' | abpLocalization }} + @if (resourceDisplayName()) { - {{ resourceDisplayName() }} - } - } - } -
- + } + } + } +
+ - - @if (!state.hasResourcePermission() || !state.hasProviderKeyLookupService()) { - + + @if (!state.hasResourcePermission() || !state.hasProviderKeyLookupService()) { + + } @else { + @switch (state.viewMode()) { @case (eResourcePermissionViewModes.List) { - + } @case (eResourcePermissionViewModes.Add) { - + } @case (eResourcePermissionViewModes.Edit) { - - } - } + } - + } + } + - - @if (state.isListMode()) { - - } @else { - - - {{ 'AbpUi::Save' | abpLocalization }} - - } - - \ No newline at end of file + + @if (state.isListMode()) { + + } @else { + + + {{ 'AbpUi::Save' | abpLocalization }} + + } + + 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 fc534f128d..49437e183e 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 @@ -1,26 +1,17 @@ import { ListService, LocalizationPipe } from '@abp/ng.core'; import { - ButtonComponent, - Confirmation, - ConfirmationService, - ModalCloseDirective, - ModalComponent, - ToasterService, + ButtonComponent, + Confirmation, + ConfirmationService, + ModalCloseDirective, + ModalComponent, + ToasterService, } from '@abp/ng.theme.shared'; import { - PermissionsService, - ResourcePermissionGrantInfoDto, + PermissionsService, + ResourcePermissionGrantInfoDto, } from '@abp/ng.permission-management/proxy'; -import { - Component, - inject, - input, - model, - OnInit, - effect, - untracked, - signal, -} from '@angular/core'; +import { Component, inject, input, model, OnInit, effect, untracked, signal } from '@angular/core'; import { finalize, switchMap, of } from 'rxjs'; import { ResourcePermissionStateService } from '../../services/resource-permission-state.service'; import { ResourcePermissionListComponent } from './resource-permission-list/resource-permission-list.component'; @@ -31,187 +22,195 @@ import { eResourcePermissionViewModes } from '../../enums/view-modes'; const DEFAULT_MAX_RESULT_COUNT = 10; @Component({ - selector: 'abp-resource-permission-management', - templateUrl: './resource-permission-management.component.html', - exportAs: 'abpResourcePermissionManagement', - providers: [ResourcePermissionStateService, ListService], - imports: [ - ModalComponent, - LocalizationPipe, - ButtonComponent, - ModalCloseDirective, - ResourcePermissionListComponent, - ResourcePermissionFormComponent, - ], + selector: 'abp-resource-permission-management', + templateUrl: './resource-permission-management.component.html', + exportAs: 'abpResourcePermissionManagement', + providers: [ResourcePermissionStateService, ListService], + imports: [ + ModalComponent, + LocalizationPipe, + ButtonComponent, + ModalCloseDirective, + ResourcePermissionListComponent, + ResourcePermissionFormComponent, + ], }) export class ResourcePermissionManagementComponent implements OnInit { - readonly eResourcePermissionViewModes = eResourcePermissionViewModes; - - protected readonly service = inject(PermissionsService); - protected readonly toasterService = inject(ToasterService); - protected readonly confirmationService = inject(ConfirmationService); - protected readonly state = inject(ResourcePermissionStateService); - private readonly list = inject(ListService); - - readonly resourceName = input.required(); - readonly resourceKey = input.required(); - readonly resourceDisplayName = input(); - - readonly visible = model(false); - - private readonly previousVisible = signal(false); - - constructor() { - effect(() => { - 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(); - const wasVisible = this.previousVisible(); - if (isVisible && !wasVisible) { - this.openModal(); - } else if (!isVisible && wasVisible) { - this.state.reset(); - } - untracked(() => this.previousVisible.set(isVisible)); - }); - } - - ngOnInit() { - 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 || DEFAULT_MAX_RESULT_COUNT; - - const paginatedData = allData.slice(skipCount, skipCount + maxResultCount); - - return of({ - items: paginatedData, - totalCount: allData.length - }); - }).subscribe(result => { - this.state.resourcePermissions.set(result.items); - this.state.totalCount.set(result.totalCount); + readonly eResourcePermissionViewModes = eResourcePermissionViewModes; + + protected readonly service = inject(PermissionsService); + protected readonly toasterService = inject(ToasterService); + protected readonly confirmationService = inject(ConfirmationService); + protected readonly state = inject(ResourcePermissionStateService); + private readonly list = inject(ListService); + + readonly resourceName = input.required(); + readonly resourceKey = input.required(); + readonly resourceDisplayName = input(); + + readonly visible = model(false); + + private readonly previousVisible = signal(false); + + constructor() { + effect(() => { + 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(); + const wasVisible = this.previousVisible(); + if (isVisible && !wasVisible) { + this.openModal(); + } else if (!isVisible && wasVisible) { + this.state.reset(); + } + untracked(() => this.previousVisible.set(isVisible)); + }); + } + + ngOnInit() { + 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 || DEFAULT_MAX_RESULT_COUNT; + + const paginatedData = allData.slice(skipCount, skipCount + maxResultCount); + + return of({ + items: paginatedData, + totalCount: allData.length, }); - } - - openModal() { - this.state.modalBusy.set(true); - - this.service.getResource(this.resourceName(), this.resourceKey()).pipe( - switchMap(permRes => { - this.state.setResourceData(permRes.permissions || []); - this.list.get(); - return this.service.getResourceProviderKeyLookupServices(this.resourceName()); - }), - switchMap(providerRes => { - this.state.setProviders(providerRes.providers || []); - return this.service.getResourceDefinitions(this.resourceName()); - }), - finalize(() => this.state.modalBusy.set(false)) - ).subscribe({ - next: defRes => { - this.state.setDefinitions(defRes.permissions || []); - }, - error: () => { - this.toasterService.error('AbpPermissionManagement::ErrorLoadingPermissions'); - } - }); - } - - onAddClicked() { - this.state.goToAddMode(); - } - - onEditClicked(grant: ResourcePermissionGrantInfoDto) { - this.state.prepareEditMode(grant); - this.state.modalBusy.set(true); - - this.service.getResourceByProvider( - this.resourceName(), - this.resourceKey(), - grant.providerName || '', - grant.providerKey || '' - ).pipe( - finalize(() => this.state.modalBusy.set(false)) - ).subscribe({ - next: res => { - this.state.setEditModePermissions(res.permissions || []); - } - }); - } - - onDeleteClicked(grant: ResourcePermissionGrantInfoDto) { - this.confirmationService - .warn( - 'AbpPermissionManagement::PermissionDeletionConfirmationMessage', - 'AbpPermissionManagement::AreYouSure', - { - messageLocalizationParams: [grant.providerKey || ''], - } + }) + .subscribe(result => { + this.state.resourcePermissions.set(result.items); + this.state.totalCount.set(result.totalCount); + }); + } + + openModal() { + this.state.modalBusy.set(true); + + this.service + .getResource(this.resourceName(), this.resourceKey()) + .pipe( + switchMap(permRes => { + this.state.setResourceData(permRes.permissions || []); + this.list.get(); + return this.service.getResourceProviderKeyLookupServices(this.resourceName()); + }), + switchMap(providerRes => { + this.state.setProviders(providerRes.providers || []); + return this.service.getResourceDefinitions(this.resourceName()); + }), + finalize(() => this.state.modalBusy.set(false)), + ) + .subscribe({ + next: defRes => { + this.state.setDefinitions(defRes.permissions || []); + }, + error: () => { + this.toasterService.error('AbpPermissionManagement::ErrorLoadingPermissions'); + }, + }); + } + + onAddClicked() { + this.state.goToAddMode(); + } + + onEditClicked(grant: ResourcePermissionGrantInfoDto) { + this.state.prepareEditMode(grant); + this.state.modalBusy.set(true); + + this.service + .getResourceByProvider( + this.resourceName(), + this.resourceKey(), + grant.providerName || '', + grant.providerKey || '', + ) + .pipe(finalize(() => this.state.modalBusy.set(false))) + .subscribe({ + next: res => { + this.state.setEditModePermissions(res.permissions || []); + }, + }); + } + + onDeleteClicked(grant: ResourcePermissionGrantInfoDto) { + this.confirmationService + .warn( + 'AbpPermissionManagement::ResourcePermissionDeletionConfirmationMessage', + 'AbpPermissionManagement::AreYouSure', + { + messageLocalizationParams: [grant.providerKey || ''], + }, + ) + .subscribe((status: Confirmation.Status) => { + if (status === Confirmation.Status.confirm) { + this.state.modalBusy.set(true); + this.service + .deleteResource( + this.resourceName(), + this.resourceKey(), + grant.providerName || '', + grant.providerKey || '', ) - .subscribe((status: Confirmation.Status) => { - if (status === Confirmation.Status.confirm) { - this.state.modalBusy.set(true); - this.service.deleteResource( - this.resourceName(), - this.resourceKey(), - grant.providerName || '', - grant.providerKey || '' - ).pipe( - switchMap(() => this.service.getResource(this.resourceName(), this.resourceKey())), - finalize(() => this.state.modalBusy.set(false)) - ).subscribe({ - next: res => { - this.state.setResourceData(res.permissions || []); - this.list.get(); - this.toasterService.success('AbpUi::SuccessfullyDeleted'); - } - }); - } + .pipe( + switchMap(() => this.service.getResource(this.resourceName(), this.resourceKey())), + finalize(() => this.state.modalBusy.set(false)), + ) + .subscribe({ + next: res => { + this.state.setResourceData(res.permissions || []); + this.list.get(); + this.toasterService.success('AbpUi::DeletedSuccessfully'); + }, }); - } - - savePermission() { - const isEdit = this.state.isEditMode(); - const providerName = isEdit ? this.state.editProviderName() : this.state.selectedProviderName(); - const providerKey = isEdit ? this.state.editProviderKey() : this.state.selectedProviderKey(); - - if (!isEdit && !this.state.canSave()) { - this.toasterService.warn('AbpPermissionManagement::PleaseSelectProviderAndPermissions'); - return; } + }); + } - this.state.modalBusy.set(true); - this.service.updateResource( - this.resourceName(), - this.resourceKey(), - { - providerName, - providerKey, - permissions: this.state.selectedPermissions() - } - ).pipe( - switchMap(() => this.service.getResource(this.resourceName(), this.resourceKey())), - finalize(() => this.state.modalBusy.set(false)) - ).subscribe({ - next: res => { - this.state.setResourceData(res.permissions || []); - this.list.get(); - this.toasterService.success('AbpUi::SavedSuccessfully'); - this.state.goToListMode(); - } - }); + savePermission() { + const isEdit = this.state.isEditMode(); + const providerName = isEdit ? this.state.editProviderName() : this.state.selectedProviderName(); + const providerKey = isEdit ? this.state.editProviderKey() : this.state.selectedProviderKey(); + + if (!isEdit && !this.state.canSave()) { + this.toasterService.warn('AbpPermissionManagement::PleaseSelectProviderAndPermissions'); + return; } + + this.state.modalBusy.set(true); + this.service + .updateResource(this.resourceName(), this.resourceKey(), { + providerName, + providerKey, + permissions: this.state.selectedPermissions(), + }) + .pipe( + switchMap(() => this.service.getResource(this.resourceName(), this.resourceKey())), + finalize(() => this.state.modalBusy.set(false)), + ) + .subscribe({ + next: res => { + this.state.setResourceData(res.permissions || []); + this.list.get(); + this.toasterService.success('AbpUi::SavedSuccessfully'); + this.state.goToListMode(); + }, + }); + } }