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.

npm/ng-packs/packages/components/lookup/src/lib/lookup-search.component.ts

@@ -30,7 +30,7 @@ export type LookupSearchFn<T = LookupItem> = (filter: string) => Observable<T[]>
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LookupSearchComponent<T extends LookupItem = LookupItem> implements OnInit, OnDestroy {
-    // Inputs
+
     readonly label = input<string>();
     readonly placeholder = input<string>('');
     readonly debounceTime = input<number>(300);
@@ -39,22 +39,17 @@ export class LookupSearchComponent<T extends LookupItem = LookupItem> implements
     readonly valueKey = input<keyof T>('key' as keyof T);
     readonly disabled = input<boolean>(false);
 
-    // Search function - should be provided by parent
     readonly searchFn = input<LookupSearchFn<T>>(() => of([]));
 
-    // Two-way binding for selected value
     readonly selectedValue = model<string>('');
     readonly displayValue = model<string>('');
 
-    // Outputs
     readonly itemSelected = output<T>();
     readonly searchChanged = output<string>();
 
-    // Custom templates
     readonly itemTemplate = contentChild<TemplateRef<{ $implicit: T }>>('itemTemplate');
     readonly noResultsTemplate = contentChild<TemplateRef<void>>('noResultsTemplate');
 
-    // Internal state
     readonly searchResults = signal<T[]>([]);
     readonly showDropdown = signal(false);
     readonly isLoading = signal(false);

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 {

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) {
 <div class="mb-3">
     <label class="form-label fw-bold">
         {{ 'AbpPermissionManagement::SelectProvider' | abpLocalization }}

npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.ts

@@ -5,7 +5,7 @@ import { ResourcePermissionStateService } from '../../../services/resource-permi
 import { ProviderKeySearchComponent } from '../provider-key-search/provider-key-search.component';
 import { PermissionCheckboxListComponent } from '../permission-checkbox-list/permission-checkbox-list.component';
 
-export type FormMode = 'add' | 'edit';
+import { eResourcePermissionViewModes } from '../../../enums/view-modes';
 
 @Component({
     selector: 'abp-resource-permission-form',
@@ -20,10 +20,12 @@ export type FormMode = 'add' | 'edit';
 })
 export class ResourcePermissionFormComponent {
     readonly state = inject(ResourcePermissionStateService);
+    readonly eResourcePermissionViewModes = eResourcePermissionViewModes;
 
-    readonly mode = input.required<FormMode>();
+    readonly mode = input.required<eResourcePermissionViewModes>();
     readonly resourceName = input.required<string>();
 
     readonly save = output<void>();
     readonly cancel = output<void>();
 }
+

npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-management.component.html

@@ -2,10 +2,10 @@
     <ng-template #abpHeader>
         <h5 class="modal-title">
             @switch (state.viewMode()) {
-            @case ('edit') {
+            @case (eResourcePermissionViewModes.Edit) {
             {{ 'AbpPermissionManagement::UpdatePermission' | abpLocalization }}
             }
-            @case ('add') {
+            @case (eResourcePermissionViewModes.Add) {
             {{ 'AbpPermissionManagement::AddResourcePermission' | abpLocalization }}
             }
             @default {
@@ -29,14 +29,14 @@
         </div>
         } @else {
         @switch (state.viewMode()) {
-        @case ('list') {
+        @case (eResourcePermissionViewModes.List) {
         <abp-resource-permission-list (addClicked)="onAddClicked()" (editClicked)="onEditClicked($event)"
             (deleteClicked)="onDeleteClicked($event)" />
         }
-        @case ('add') {
+        @case (eResourcePermissionViewModes.Add) {
         <abp-resource-permission-form mode="add" [resourceName]="resourceName()" />
         }
-        @case ('edit') {
+        @case (eResourcePermissionViewModes.Edit) {
         <abp-resource-permission-form mode="edit" [resourceName]="resourceName()" />
         }
         }

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) {

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',
+}

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<ViewMode>('list');
+    readonly viewMode = signal<eResourcePermissionViewModes>(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);