@memberjunction/ng-explorer-settings

Angular components for the Settings section of MemberJunction Explorer. Provides a tabbed settings interface covering general preferences, user management, role management, application management, entity permissions, appearance, notifications, SQL logging, and profile settings.

Overview

The SettingsComponent serves as the main container, registered via @RegisterClass(BaseNavigationComponent, 'Settings'). It provides a searchable, tabbed interface for administrative and user settings. Each settings area is implemented as a standalone component that can be used independently.

graph TD
    SC["SettingsComponent\n(<mj-settings>)"] --> GS["GeneralSettingsComponent"]
    SC --> AI["AccountInfoComponent"]
    SC --> AS["AppearanceSettingsComponent"]
    SC --> APS["ApplicationSettingsComponent"]
    SC --> UM["UserManagementComponent"]
    SC --> RM["RoleManagementComponent"]
    SC --> AM["ApplicationManagementComponent"]
    SC --> EP["EntityPermissionsComponent"]
    SC --> NP["NotificationPreferencesComponent"]
    SC --> SL["SQLLoggingComponent"]
    SC --> UP["UserProfileSettingsComponent"]
    SC --> UAC["UserAppConfigComponent"]

    UM --> UD["UserDialogComponent"]
    RM --> RD["RoleDialogComponent"]
    AM --> AD["ApplicationDialogComponent"]
    EP --> PD["PermissionDialogComponent"]

    style SC fill:#7c5295,stroke:#563a6b,color:#fff
    style GS fill:#2d6a9f,stroke:#1a4971,color:#fff
    style AI fill:#2d6a9f,stroke:#1a4971,color:#fff
    style AS fill:#2d6a9f,stroke:#1a4971,color:#fff
    style APS fill:#2d6a9f,stroke:#1a4971,color:#fff
    style UM fill:#2d8659,stroke:#1a5c3a,color:#fff
    style RM fill:#2d8659,stroke:#1a5c3a,color:#fff
    style AM fill:#2d8659,stroke:#1a5c3a,color:#fff
    style EP fill:#2d8659,stroke:#1a5c3a,color:#fff
    style NP fill:#b8762f,stroke:#8a5722,color:#fff
    style SL fill:#b8762f,stroke:#8a5722,color:#fff
    style UP fill:#b8762f,stroke:#8a5722,color:#fff
    style UAC fill:#b8762f,stroke:#8a5722,color:#fff
    style UD fill:#2d8659,stroke:#1a5c3a,color:#fff
    style RD fill:#2d8659,stroke:#1a5c3a,color:#fff
    style AD fill:#2d8659,stroke:#1a5c3a,color:#fff
    style PD fill:#2d8659,stroke:#1a5c3a,color:#fff

Features

• Tabbed settings interface with search across all settings
• General settings: Core application preferences
• Account info: User account details
• Appearance settings: Theme and display preferences
• Application settings: Application-specific configuration
• User management: CRUD for users with dialog-based editing
• Role management: CRUD for roles with dialog-based editing
• Application management: CRUD for applications with dialog-based editing
• Entity permissions: Permission grid integrated from @memberjunction/ng-entity-permissions
• Notification preferences: Notification configuration
• SQL logging: SQL query logging viewer
• User profile settings: Profile editing
• User app configuration: Per-user application configuration
• Reusable settings card: SettingsCardComponent for consistent card layout
• Shared settings module: Common settings UI elements

Installation

npm install @memberjunction/ng-explorer-settings

Key Dependencies

Dependency	Purpose
@memberjunction/core, @memberjunction/core-entities	Entity metadata and data
@memberjunction/ng-base-application	BaseNavigationComponent
@memberjunction/ng-entity-permissions	Entity permission grid
@memberjunction/ng-entity-form-dialog	Entity form dialogs
@memberjunction/ng-simple-record-list	Simple record CRUD lists
@memberjunction/ng-join-grid	Join/relationship grid
@memberjunction/ng-user-avatar	User avatar display
@progress/kendo-angular-*	Kendo UI components
@angular/cdk	Angular CDK utilities

Usage

import { ExplorerSettingsModule } from '@memberjunction/ng-explorer-settings';

@NgModule({
  imports: [ExplorerSettingsModule]
})
export class AppModule {}

The SettingsComponent is registered via @RegisterClass(BaseNavigationComponent, 'Settings') and is typically loaded through Explorer’s navigation system.

Exported API

Export	Type	Description
ExplorerSettingsModule	NgModule	Main settings module
SettingsComponent	Component	Main tabbed settings container
GeneralSettingsComponent	Component	General preferences
AccountInfoComponent	Component	Account information
AppearanceSettingsComponent	Component	Theme/display settings
ApplicationSettingsComponent	Component	Application preferences
UserManagementComponent	Component	User CRUD management
RoleManagementComponent	Component	Role CRUD management
ApplicationManagementComponent	Component	Application CRUD management
EntityPermissionsSettingsComponent	Component	Entity permission management
NotificationPreferencesComponent	Component	Notification settings
SQLLoggingComponent	Component	SQL logging viewer
UserProfileSettingsComponent	Component	Profile editing
UserAppConfigComponent	Component	User app configuration
SettingsCardComponent	Component	Reusable settings card layout
UserDialogComponent	Component	User edit dialog
RoleDialogComponent	Component	Role edit dialog
ApplicationDialogComponent	Component	Application edit dialog
PermissionDialogComponent	Component	Permission edit dialog

Build

cd packages/Angular/Explorer/explorer-settings && npm run build

License

ISC