[fahrigedik]

Description

Resolves #24299 (write the related issue number if available)

How to test it?

you have to change test-branch-24299
you have to run dbmigrator and hostwithids on app templates
you have to run dev-app

[sumeyyeKurtulus]

It is better to use the latest input and output signal functions instead.

[sumeyyeKurtulus]

I think, we can improve the readability here like this

toggleAllPermissions(selectAll: boolean) {
        let toggleAction = selectAll ? this.permissionsWithProvider().map(p => p.name || '') : [];
        if (this.viewMode() === 'add') {
            toggleAction = this.permissionDefinitions().map(p => p.name || '');
        }
        this.selectedPermissions.set(toggleAction);
    }

[sumeyyeKurtulus]

We can extract this and create generic component to behave like a lookup search component. You can check this as a reference https://github.com/volosoft/volo/tree/dev/abp/npm/ng-packs/packages/commercial-ui/src/lib/components/lookup

[sumeyyeKurtulus]

These buttons does not seem configured to be a dropdown as an action button. We should try the bootstrap dropdown if possible.

[erdemcaygor]

The subscription should be unsubscribed when the page is destroyed.

[erdemcaygor]

Maybe we can define enum for ViewModes instead of using hardcoded string. Example;

export enum ViewModeValues {
  List = 'list',
  Add = 'add',
  Edit = 'edit'
}

[sumeyyeKurtulus]

We can use takeUntilDestroyed instead. By this means, we will not need this un-subscription on destroy

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

The same applies for this component :: npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.ts

Here is a quick reference https://www.reddit.com/r/angular/comments/12vbfbd/angular_16_takeuntildestroyed_operator/

[sumeyyeKurtulus]

We can set the load false on finalize inside pipe to remove the duplication.

[sumeyyeKurtulus]

We can make this effect work more efficiently. Here is a quick example

    effect(() => {
      // Read all input values to track them
      const resourceName = this.resourceName();
      const resourceKey = this.resourceKey();
      const resourceDisplayName = this.resourceDisplayName();

      // Use untracked to prevent this effect from tracking writes to state signals
      // This prevents circular dependencies and reduces unnecessary re-executions
      untracked(() => {
        // Only update if values have actually changed (signals optimize this internally)
        this.state.resourceName.set(resourceName);
        this.state.resourceKey.set(resourceKey);
        this.state.resourceDisplayName.set(resourceDisplayName);
      });
    });

[erdemcaygor]

it's better to use class instead of inline styles

[erdemcaygor]

we can use string interpolation. it's more readable.

id="perm-{{ idPrefix() }}-{{ perm.name }}"

[erdemcaygor]

it's better to use class instead of inline styles

[erdemcaygor]

we can use signal for previousVisible

[erdemcaygor]

maybe we can define constant variable for maxResultCount instead of using hardcoded value