@memberjunction/ng-action-gallery

A filterable gallery component for browsing and selecting MemberJunction actions, with grid and list views, category navigation, search, and dialog integration.

Overview

The Action Gallery provides a rich interface for discovering, browsing, and selecting actions. It features both grid and list view modes, hierarchical category navigation with counts, real-time search filtering, and single or multi-selection support. The gallery integrates with the AI Test Harness for quick action testing.

graph TD
    A[ActionGalleryModule] --> B[ActionGalleryComponent]
    A --> C[ActionGalleryDialogService]

    B --> D[Category Tree Panel]
    B --> E[Grid / List View]
    B --> F[Search & Filter]

    C --> G[Single Selection Dialog]
    C --> H[Multi-Selection Dialog]
    C --> I[Browse-Only Dialog]

    E --> J["Action Cards
    (expandable details)"]
    J --> K[Parameters Display]
    J --> L[Result Codes Display]
    J --> M[Quick Test Button]

    style A fill:#2d6a9f,stroke:#1a4971,color:#fff
    style B fill:#7c5295,stroke:#563a6b,color:#fff
    style C fill:#2d8659,stroke:#1a5c3a,color:#fff
    style E fill:#b8762f,stroke:#8a5722,color:#fff

Installation

npm install @memberjunction/ng-action-gallery

Usage

Module Import

import { ActionGalleryModule } from '@memberjunction/ng-action-gallery';

@NgModule({
  imports: [ActionGalleryModule]
})
export class YourModule { }

Standalone Gallery

<mj-action-gallery
  [config]="galleryConfig"
  [preSelectedActions]="selectedIds"
  (actionSelected)="onActionSelected($event)"
  (actionsSelected)="onActionsSelected($event)"
  (actionTestRequested)="onTestRequested($event)">
</mj-action-gallery>

galleryConfig: ActionGalleryConfig = {
  selectionMode: true,
  multiSelect: true,
  showCategories: true,
  showSearch: true,
  defaultView: 'grid',
  gridColumns: 3,
  enableQuickTest: true,
  theme: 'light'
};

Dialog Mode

import { ActionGalleryDialogService } from '@memberjunction/ng-action-gallery';

constructor(private actionGallery: ActionGalleryDialogService) {}

// Single selection
selectSingleAction() {
  this.actionGallery.openForSingleSelection({
    title: 'Select an Action',
    showCategories: true,
    enableQuickTest: true
  }).subscribe(action => {
    if (action) {
      console.log('Selected:', action);
    }
  });
}

// Multi-selection
selectMultipleActions() {
  this.actionGallery.openForMultiSelection({
    title: 'Select Actions',
    preSelectedActions: ['id1', 'id2'],
    submitButtonText: 'Add Selected Actions'
  }).subscribe(actions => {
    console.log('Selected actions:', actions);
  });
}

// Browse only (no selection)
browseActions() {
  this.actionGallery.openForBrowsing({
    title: 'Action Browser',
    enableQuickTest: true
  });
}

Configuration

ActionGalleryConfig

| Property | Type | Default | Description | |----------|------|---------|-------------| | selectionMode | boolean | false | Enable selection mode | | multiSelect | boolean | false | Allow multiple selections | | showCategories | boolean | true | Show category sidebar | | showSearch | boolean | true | Show search bar | | defaultView | 'grid' \| 'list' | 'grid' | Default view mode | | gridColumns | number | 3 | Number of grid columns | | enableQuickTest | boolean | true | Show test buttons | | theme | 'light' \| 'dark' | 'light' | Visual theme |

ActionGalleryDialogConfig

Extends ActionGalleryConfig with:

| Property | Type | Default | Description | |----------|------|---------|-------------| | title | string | 'Select Actions' | Dialog title | | width | number | 1200 | Dialog width | | height | number | 800 | Dialog height | | submitButtonText | string | 'Select' | Submit button text | | cancelButtonText | string | 'Cancel' | Cancel button text | | preSelectedActions | string[] | [] | Pre-selected action IDs |

Features

Category Navigation

• Hierarchical category tree with action counts per category
• Collapsible/expandable nodes
• "All Actions" and "Uncategorized" special categories

Action Cards

Each action displays as an expandable card showing:

• Action name and icon with category badge
• Description text
• Quick test button (if enabled)
• Expanded details with parameters (types and required status) and result codes

Search and Filtering

Real-time search across action names, descriptions, and categories.

View Modes

• Grid View: Visual cards in a responsive grid layout
• List View: Compact table format for scanning many actions

Integration with AI Test Harness

enableQuickTest: true

onTestRequested(action: ActionEntity) {
  this.testHarness.openForAction(action.ID).subscribe(result => {
    console.log('Test result:', result);
  });
}

CSS Customization

:root {
  --gallery-primary: #007bff;
  --gallery-hover: #0056b3;
  --gallery-selected: #e3f2fd;
  --gallery-background: #ffffff;
  --gallery-text: #212529;
  --gallery-border: #dee2e6;
}

Dependencies

| Package | Description | |---------|-------------| | @memberjunction/core | Core framework | | @memberjunction/core-entities | Entity type definitions | | @memberjunction/ng-ai-test-harness | AI test harness integration | | @memberjunction/ng-container-directives | Layout directives | | @memberjunction/ng-shared-generic | Shared generic components | | @progress/kendo-angular-* | Kendo UI components |

Peer Dependencies

• @angular/common ^21.x
• @angular/core ^21.x
• @angular/forms ^21.x
• @angular/animations ^21.x

Build

cd packages/Angular/Generic/action-gallery
npm run build

License

ISC