From ae6ca7a38e8cd625814abbd1f08989e017c608d7 Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Wed, 24 Dec 2025 13:15:34 +0300 Subject: [PATCH] Refactor view modes to use enum in permission management Replaced string literals for view modes with the new eResourcePermissionViewModes enum across components and services. This improves type safety and maintainability. Added the enum definition in a new file. --- .../lookup/src/lib/lookup-search.component.ts | 7 +------ .../provider-key-search.component.ts | 5 ++--- .../resource-permission-form.component.html | 2 +- .../resource-permission-form.component.ts | 6 ++++-- ...ource-permission-management.component.html | 10 +++++----- ...esource-permission-management.component.ts | 6 ++++-- .../src/lib/enums/view-modes.ts | 5 +++++ .../resource-permission-state.service.ts | 19 +++++++++---------- 8 files changed, 31 insertions(+), 29 deletions(-) create mode 100644 npm/ng-packs/packages/permission-management/src/lib/enums/view-modes.ts 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 17f30f83a8..80770839bf 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 @@ -30,7 +30,7 @@ export type LookupSearchFn = (filter: string) => Observable changeDetection: ChangeDetectionStrategy.OnPush, }) export class LookupSearchComponent implements OnInit, OnDestroy { - // Inputs + readonly label = input(); readonly placeholder = input(''); readonly debounceTime = input(300); @@ -39,22 +39,17 @@ export class LookupSearchComponent implements readonly valueKey = input('key' as keyof T); readonly disabled = input(false); - // Search function - should be provided by parent readonly searchFn = input>(() => of([])); - // Two-way binding for selected value readonly selectedValue = model(''); readonly displayValue = model(''); - // Outputs readonly itemSelected = output(); readonly searchChanged = output(); - // Custom templates readonly itemTemplate = contentChild>('itemTemplate'); readonly noResultsTemplate = contentChild>('noResultsTemplate'); - // Internal state readonly searchResults = signal([]); readonly showDropdown = signal(false); readonly isLoading = signal(false); 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 d8f626db54..1e7e54b88c 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,6 +1,5 @@ import { Component, input, inject, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core'; -import { LocalizationPipe } from '@abp/ng.core'; -import { PermissionsService, SearchProviderKeyInfo } from '@abp/ng.permission-management/proxy'; +import { PermissionsService } from '@abp/ng.permission-management/proxy'; import { LookupSearchComponent, LookupItem } from '@abp/ng.components/lookup'; import { Observable, map, Subject, takeUntil } from 'rxjs'; import { ResourcePermissionStateService } from '../../../services/resource-permission-state.service'; @@ -13,7 +12,7 @@ interface ProviderKeyLookupItem extends LookupItem { @Component({ selector: 'abp-provider-key-search', templateUrl: './provider-key-search.component.html', - imports: [LocalizationPipe, LookupSearchComponent], + imports: [LookupSearchComponent], changeDetection: ChangeDetectionStrategy.OnPush, }) export class ProviderKeySearchComponent implements OnInit, OnDestroy { 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 b2018b6c7c..ed1feb243c 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,4 +1,4 @@ -@if (mode() === 'add') { +@if (mode() === eResourcePermissionViewModes.Add) {
} @else { @switch (state.viewMode()) { - @case ('list') { + @case (eResourcePermissionViewModes.List) { } - @case ('add') { + @case (eResourcePermissionViewModes.Add) { } - @case ('edit') { + @case (eResourcePermissionViewModes.Edit) { } } 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 18b810fd51..c38d6036ee 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 @@ -24,6 +24,8 @@ import { ResourcePermissionStateService } from '../../services/resource-permissi import { ResourcePermissionListComponent } from './resource-permission-list/resource-permission-list.component'; import { ResourcePermissionFormComponent } from './resource-permission-form/resource-permission-form.component'; +import { eResourcePermissionViewModes } from '../../enums/view-modes'; + @Component({ selector: 'abp-resource-permission-management', templateUrl: './resource-permission-management.component.html', @@ -39,6 +41,8 @@ import { ResourcePermissionFormComponent } from './resource-permission-form/reso ], }) export class ResourcePermissionManagementComponent implements OnInit { + readonly eResourcePermissionViewModes = eResourcePermissionViewModes; + protected readonly service = inject(PermissionsService); protected readonly toasterService = inject(ToasterService); protected readonly confirmationService = inject(ConfirmationService); @@ -54,14 +58,12 @@ export class ResourcePermissionManagementComponent implements OnInit { private previousVisible = false; constructor() { - // Sync input values to state effect(() => { this.state.resourceName.set(this.resourceName()); this.state.resourceKey.set(this.resourceKey()); this.state.resourceDisplayName.set(this.resourceDisplayName()); }); - // Handle visibility changes effect(() => { const isVisible = this.visible(); if (isVisible && !this.previousVisible) { diff --git a/npm/ng-packs/packages/permission-management/src/lib/enums/view-modes.ts b/npm/ng-packs/packages/permission-management/src/lib/enums/view-modes.ts new file mode 100644 index 0000000000..4611dda210 --- /dev/null +++ b/npm/ng-packs/packages/permission-management/src/lib/enums/view-modes.ts @@ -0,0 +1,5 @@ +export enum eResourcePermissionViewModes { + List = 'list', + Add = 'add', + Edit = 'edit', +} diff --git a/npm/ng-packs/packages/permission-management/src/lib/services/resource-permission-state.service.ts b/npm/ng-packs/packages/permission-management/src/lib/services/resource-permission-state.service.ts index 8fa2daeda5..e27bcd10c4 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/services/resource-permission-state.service.ts +++ b/npm/ng-packs/packages/permission-management/src/lib/services/resource-permission-state.service.ts @@ -6,13 +6,12 @@ import { SearchProviderKeyInfo, ResourcePermissionWithProdiverGrantInfoDto, } from '@abp/ng.permission-management/proxy'; - -export type ViewMode = 'list' | 'add' | 'edit'; +import { eResourcePermissionViewModes } from '../enums/view-modes'; @Injectable() export class ResourcePermissionStateService { // View state - readonly viewMode = signal('list'); + readonly viewMode = signal(eResourcePermissionViewModes.List); readonly modalBusy = signal(false); readonly hasResourcePermission = signal(false); readonly hasProviderKeyLookupService = signal(false); @@ -45,9 +44,9 @@ export class ResourcePermissionStateService { readonly showDropdown = signal(false); // Computed properties - readonly isAddMode = computed(() => this.viewMode() === 'add'); - readonly isEditMode = computed(() => this.viewMode() === 'edit'); - readonly isListMode = computed(() => this.viewMode() === 'list'); + readonly isAddMode = computed(() => this.viewMode() === eResourcePermissionViewModes.Add); + readonly isEditMode = computed(() => this.viewMode() === eResourcePermissionViewModes.Edit); + readonly isListMode = computed(() => this.viewMode() === eResourcePermissionViewModes.List); readonly currentPermissionsList = computed(() => this.isAddMode() ? this.permissionDefinitions() : this.permissionsWithProvider() @@ -68,12 +67,12 @@ export class ResourcePermissionStateService { // State transition methods goToListMode() { - this.viewMode.set('list'); + this.viewMode.set(eResourcePermissionViewModes.List); this.selectedPermissions.set([]); } goToAddMode() { - this.viewMode.set('add'); + this.viewMode.set(eResourcePermissionViewModes.Add); this.selectedPermissions.set([]); this.selectedProviderKey.set(''); this.searchResults.set([]); @@ -90,7 +89,7 @@ export class ResourcePermissionStateService { this.selectedPermissions.set( permissions.filter(p => p.isGranted).map(p => p.name || '') ); - this.viewMode.set('edit'); + this.viewMode.set(eResourcePermissionViewModes.Edit); } // Permission selection methods @@ -131,7 +130,7 @@ export class ResourcePermissionStateService { // Reset all state reset() { - this.viewMode.set('list'); + this.viewMode.set(eResourcePermissionViewModes.List); this.allResourcePermissions.set([]); this.resourcePermissions.set([]); this.totalCount.set(0);