Add examples to show different configs in which datagrid action menu can be displayed

projects/examples/src/components/datagrid/datagrid-action-display.example.component.html

@@ -0,0 +1,34 @@
+<h4 class="example-heading">Actions displayed on top as inline bar</h4>
+<p>
+    This is the default display configuration used by datagrid if no display config is provided. When displayed inline,
+    Contextual actions that are marked as featured are shown towards the left outside the dropdown containing all the
+    contextual actions
+</p>
+<vcd-datagrid
+    [gridData]="gridData"
+    (gridRefresh)="refresh($event)"
+    [columns]="columns"
+    [actions]="actions"
+    [actionDisplayConfig]="topAndInlineActionDisplayConfig"
+    [selectionType]="singleSelectionType"
+></vcd-datagrid>
+
+<h4 class="example-heading">Contextual actions displayed in rows as inline bar</h4>
+<p>Only contextual actions are displayed in rows and static actions are always displayed on top</p>
+<vcd-datagrid
+    [gridData]="gridData"
+    (gridRefresh)="refresh($event)"
+    [columns]="columns"
+    [actions]="actions"
+    [actionDisplayConfig]="rowAndInlineActionDisplayConfig"
+></vcd-datagrid>
+
+<h4 class="example-heading">Contextual actions displayed in rows as dropdown</h4>
+<p>Only contextual actions are displayed in rows and static actions are always displayed on top</p>
+<vcd-datagrid
+    [gridData]="gridData"
+    (gridRefresh)="refresh($event)"
+    [columns]="columns"
+    [actions]="actions"
+    [actionDisplayConfig]="rowAndDropdownActionDisplayConfig"
+></vcd-datagrid>

projects/examples/src/components/datagrid/datagrid-action-display.example.component.scss

@@ -0,0 +1,7 @@
+vcd-datagrid ::ng-deep .inline-actions-container {
+    & .inline-action-dropdown {
+        & ::ng-deep .nested-dropdown > .first-dropdown-toggle {
+            margin-top: 0 !important;
+        }
+    }
+}

projects/examples/src/components/datagrid/datagrid-action-display.example.component.ts

@@ -0,0 +1,159 @@
+/*!
+ * Copyright 2019 VMware, Inc.
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+import { Component, ViewChild } from '@angular/core';
+import {
+    ActionDisplayConfig,
+    ActionItem,
+    ActionStyling,
+    ActionType,
+    DatagridActionDisplayConfig,
+    DatagridComponent,
+    DatagridContextualActionPosition,
+    getDefaultDatagridActionDisplayConfig,
+    GridColumn,
+    GridDataFetchResult,
+    GridSelectionType,
+    GridState,
+    TextIcon,
+} from '@vcd/ui-components';
+
+interface Record {
+    value: string;
+    paused: boolean;
+}
+
+interface Blah {
+    foo: string;
+    bar: string;
+}
+
+type HandlerData = Record[] | Blah;
+
+/**
+ *
+ */
+@Component({
+    selector: 'vcd-datagrid-action-display-example',
+    templateUrl: `./datagrid-action-display.example.component.html`,
+    styleUrls: ['datagrid-action-display.example.component.scss'],
+})
+export class DatagridActionDisplayExampleComponent<R extends Record> {
+    @ViewChild(DatagridComponent, { static: true }) dg: DatagridComponent<R>;
+
+    gridData: GridDataFetchResult<Record> = {
+        items: [],
+    };
+
+    singleSelectionType = GridSelectionType.Single;
+
+    columns: GridColumn<R>[] = [
+        {
+            displayName: 'Some Value',
+            renderer: 'value',
+        },
+    ];
+
+    actions: ActionItem<R, HandlerData>[] = [
+        {
+            textKey: 'Add',
+            handler: () => {
+                console.log('Adding stuff!');
+            },
+            class: 'add',
+            actionType: ActionType.STATIC_FEATURED,
+            isTranslatable: false,
+        },
+        {
+            textKey: 'Custom handler data',
+            handler: (rec: R[], data: Blah) => {
+                console.log('Custom handler data ' + JSON.stringify(data));
+            },
+            handlerData: { foo: 'foo', bar: 'bar' },
+            class: 'b',
+            icon: 'pause',
+            actionType: ActionType.STATIC,
+            isTranslatable: false,
+        },
+        {
+            textKey: 'Contextual action',
+            handler: () => {
+                console.log('Contextual action output');
+            },
+            availability: (rec: R[]) => rec.length === 1,
+            isTranslatable: false,
+        },
+        {
+            textKey: 'power.actions',
+            children: [
+                {
+                    textKey: 'Start',
+                    handler: (rec: R[]) => {
+                        console.log('Starting ' + rec[0].value);
+                        rec[0].paused = false;
+                    },
+                    availability: (rec: R[]) => rec.length === 1 && rec[0].paused,
+                    actionType: ActionType.CONTEXTUAL_FEATURED,
+                    isTranslatable: false,
+                },
+                {
+                    textKey: 'Stop',
+                    handler: (rec: R[]) => {
+                        console.log('Stopping ' + (rec as R[])[0].value);
+                        rec[0].paused = true;
+                    },
+                    availability: (rec: R[]) => rec.length === 1 && !rec[0].paused,
+                    actionType: ActionType.CONTEXTUAL_FEATURED,
+                    isTranslatable: false,
+                },
+            ],
+        },
+        {
+            textKey: 'grouped.actions',
+            children: [
+                {
+                    textKey: 'Contextual featured',
+                    actionType: ActionType.CONTEXTUAL_FEATURED,
+                    handler: () => null,
+                    isTranslatable: false,
+                },
+                {
+                    textKey: 'Contextual 2',
+                    handler: () => null,
+                    isTranslatable: false,
+                },
+            ],
+            isTranslatable: true,
+        },
+    ];
+
+    topAndInlineActionDisplayConfig: DatagridActionDisplayConfig = getDefaultDatagridActionDisplayConfig();
+
+    rowAndInlineActionDisplayConfig: DatagridActionDisplayConfig = {
+        contextual: {
+            styling: ActionStyling.INLINE,
+            position: DatagridContextualActionPosition.ROW,
+        },
+    };
+
+    rowAndDropdownActionDisplayConfig: DatagridActionDisplayConfig = {
+        contextual: {
+            styling: ActionStyling.DROPDOWN,
+            position: DatagridContextualActionPosition.ROW,
+        },
+    };
+
+    refresh(eventData: GridState<R>): void {
+        this.gridData = {
+            items: [
+                { value: 'a', paused: false },
+                { value: 'b', paused: true },
+                { value: 'a', paused: true },
+                { value: 'b', paused: false },
+            ],
+            totalItems: 2,
+        };
+    }
+}

projects/examples/src/components/datagrid/datagrid-action-display.example.module.ts

@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2019 VMware, Inc.
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ClarityModule } from '@clr/angular';
+import { VcdComponentsModule } from '@vcd/ui-components';
+import { DatagridActionDisplayExampleComponent } from './datagrid-action-display.example.component';
+
+@NgModule({
+    declarations: [DatagridActionDisplayExampleComponent],
+    imports: [CommonModule, ClarityModule, VcdComponentsModule],
+    exports: [DatagridActionDisplayExampleComponent],
+    entryComponents: [DatagridActionDisplayExampleComponent],
+})
+export class DatagridActionDisplayExampleModule {}

projects/examples/src/components/datagrid/datagrid.examples.module.ts

@@ -6,6 +6,8 @@
 import { NgModule } from '@angular/core';
 import { DatagridComponent } from '@vcd/ui-components';
 import { Documentation } from '@vmw/ng-live-docs';
+import { DatagridActionDisplayExampleComponent } from './datagrid-action-display.example.component';
+import { DatagridActionDisplayExampleModule } from './datagrid-action-display.example.module';
 import { DatagridActionMenuTrackingExampleComponent } from './datagrid-action-menu-tracking-example.component';
 import { DatagridActionMenuTrackerExampleModule } from './datagrid-action-menu-tracking.example.module';
 import { DatagridActivityReporterExampleComponent } from './datagrid-activity-reporter.example.component';
@@ -156,6 +158,12 @@ Documentation.registerDocumentationEntry({
             title: 'Set the width of columns through CSS class names',
             urlSegment: 'datagrid-column-width',
         },
+        {
+            component: DatagridActionDisplayExampleComponent,
+            forComponent: null,
+            title: 'Action menu display configurations',
+            urlSegment: 'datagrid-action-display',
+        },
     ],
 });
 /**
@@ -181,6 +189,7 @@ Documentation.registerDocumentationEntry({
         DatagridLoadingPlaceholderExampleModule,
         DatagridDetailPaneExampleModule,
         DatagridColumnWidthExampleModule,
+        DatagridActionDisplayExampleModule,
     ],
 })
 export class DatagridExamplesModule {}