@zssz-soft/role

Angular library for role management with CRUD operations, permission assignments, and admin UI components.

Features

• RoleTableComponent: Sortable table displaying roles with permission chips and actions
• RoleFormComponent: Reactive form for creating/editing roles with permission multi-select
• RoleStore: NgRx Signal Store for state management
• Permission-based access control: Integrated with @zssz-soft/authorization

Installation

npm install @zssz-soft/role

Required Dependencies

The host application must provide the following dependencies in app.config.ts:

1. Entity Engine Infrastructure

import { provideEntityEngine } from '@zssz-soft/entity-engine';

export const appConfig: ApplicationConfig = {
  providers: [...provideEntityEngine()],
};

2. Authorization Infrastructure

import { provideAuthorization } from '@zssz-soft/authorization';

export const appConfig: ApplicationConfig = {
  providers: [...provideAuthorization()],
};

3. Repository Engine Creator

For Firestore backend:

import { FIRESTORE_ENGINE_CREATOR } from '@zssz-soft/core-api';
import { createFirestoreEngineCreator } from '@zssz-soft/firestore-repository-engine';

export const appConfig: ApplicationConfig = {
  providers: [{ provide: FIRESTORE_ENGINE_CREATOR, useFactory: createFirestoreEngineCreator }],
};

For testing/demo (in-memory):

import { FIRESTORE_ENGINE_CREATOR } from '@zssz-soft/core-api';

export const appConfig: ApplicationConfig = {
  providers: [{ provide: FIRESTORE_ENGINE_CREATOR, useFactory: createInMemoryEngineCreator }],
};

4. Authentication Store Service

import { AUTHENTICATION_STORE_SERVICE_TOKEN } from '@zssz-soft/core-api';
import { AuthenticationStoreServiceImpl } from '@zssz-soft/firebase-auth';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: AUTHENTICATION_STORE_SERVICE_TOKEN, useClass: AuthenticationStoreServiceImpl },
  ],
};

5. Error Utility Service

import { ErrorUtilService } from '@zssz-soft/core-api';

export const appConfig: ApplicationConfig = {
  providers: [{ provide: ErrorUtilService, useClass: YourErrorUtilServiceImpl }],
};

Complete Example

import { ApplicationConfig } from '@angular/core';
import { provideEntityEngine } from '@zssz-soft/entity-engine';
import { provideAuthorization } from '@zssz-soft/authorization';
import {
  AUTHENTICATION_STORE_SERVICE_TOKEN,
  FIRESTORE_ENGINE_CREATOR,
  ErrorUtilService,
} from '@zssz-soft/core-api';

export const appConfig: ApplicationConfig = {
  providers: [
    // Entity engine infrastructure
    ...provideEntityEngine(),

    // Authorization infrastructure
    ...provideAuthorization(),

    // Repository engine (Firestore or mock)
    { provide: FIRESTORE_ENGINE_CREATOR, useFactory: createFirestoreEngineCreator },

    // Authentication service
    { provide: AUTHENTICATION_STORE_SERVICE_TOKEN, useClass: AuthenticationStoreServiceImpl },

    // Error handling service
    { provide: ErrorUtilService, useClass: ErrorUtilServiceImpl },
  ],
};

Usage

Using RoleModule

import { RoleModule } from '@zssz-soft/role';

@Component({
  imports: [RoleModule],
  template: `
    <app-role-table />
    <app-role-form [roleId]="selectedRoleId" />
  `,
})
export class MyComponent {}

Accessing the Store

import { ROLE_STORE_VIEW_TOKEN, RoleStoreView } from '@zssz-soft/role';

@Component({...})
export class MyComponent {
  readonly roleStore = inject<RoleStoreView>(ROLE_STORE_VIEW_TOKEN);

  ngOnInit() {
    this.roleStore.listEntities({ pathParams: [], queryParams: [] });
  }
}

Permissions

The library defines the following permissions:

| Permission | Description | | ---------------------------- | --------------------- | | role:create | Create new roles | | role:view | View roles | | role:update | Update existing roles | | role:delete | Delete roles | | role-admin:view-admin-page | Access admin page | | role-admin:view-edit-page | Access edit page | | role-admin:view-list-page | Access list page |

Building

ng build role

Running Unit Tests

ng test role