UI components library: Actions

This document explains the Actions service in the Components Library.

Overview

Using Action Handlers, the Actions service handles specific actions based on a specific format within a specific context (such as a Table, Overlay, HTTP Response). As a result, the backend can control what the UI looks like without changing anything on the frontend (for example, updating tables, closing drawers).

The context within which Actions are handled is defined by the invoker of the Action (Table, Button, Http).

<spy-button-action
    [action]="{
        type: 'close-drawer'
    }"
>
</spy-button-action>

Main Service

Actions is an Angular Service that implements a specific interface (ActionHandler) and is registered in the Action Module via ActionModule.withActions(). The main service injects all registered types from the ActionTypesToken. trigger() method finds specific service from the ActionTypesToken by the config.type (from the argument) and returns observable with data by ActionHandler.handleAction().

Action Handler

Actions must implement a specific interface (ActionHandler) and then be registered to the Root Module via ActionModule.withActions(). Action Handler encapsulates the algorithm of how the data is loaded into the Component.

// Module augmentation
import { ActionConfig } from '@spryker/actions';

declare module '@spryker/actions' {
    interface ActionsRegistry {
        custom: CustomActionHandlerService;
    }
}

export interface CustomActionConfig extends ActionConfig {
    data: unknown;
    ...
}

// Service implementation
@Injectable({
    providedIn: 'root',
})
export class CustomActionHandlerService implements ActionHandler<unknown, void> {
    handleAction(
        injector: Injector,
        config: CustomActionConfig,
        context: unknown,
    ): Observable<void> {
        ...
    }
}

@NgModule({
    imports: [
        ActionsModule.withActions({
            custom: CustomActionHandlerService,
        }),
    ],
})
export class RootModule {}

The context within which Actions operate is defined by the local injector where it’s being used.

Interfaces

Below you can find interfaces for the Actions configuration and Action type:

export interface ActionConfig {
    type: ActionType;

    // Reserved for types that may have extra configuration
    [k: string]: unknown;
}

export interface ActionHandler<C = unknown, R = unknown>
    extends Generics<[C, R]> {
    handleAction(
        injector: Injector,
        config: ActionConfig,
        context: C,
    ): Observable<R>;
}

Action types

The following common Actions are available in UI library as separate packages:

| ACTION | DESCRIPTION |

| Close-drawer | Closes the first Drawer in the current context.| | Confirmation | Calls another registered action with a confirmation.| | Drawer | Opens a component in the Drawer.| | HTTP | Renders content via an HTML request.| | Notification | Renders a notification box.| | Redirect | Performs a hard redirect to the URL. | | Refresh-drawer | Refreshes or rerenders an opened Drawer in the current context. | | Refresh-parent-table | Refreshes the data of the parent Table of a Table the in current context. | | Refresh-table | Refreshes the data of the Table the in the current context. |