From 3da88e76272c6c6a979957d4aec9aa5d5182ccb7 Mon Sep 17 00:00:00 2001 From: ps37 Date: Wed, 21 Apr 2021 21:12:07 -0400 Subject: [PATCH] Add examples to show different configs in which datagrid action menu can be displayed **What was the change?** Examples to show different configs in which datagrid action menu can be displayed **Why was this change made?** The action display config input to datagrid is a nested object that is used to display action menu inside a datagrid in different ways. And there is no example that would help the library users to learn this quickly. # What testing was performed on this change? Opened the examples app on local server and tested that the example is rendered correctly Signed-off-by: ps37 --- ...grid-action-display.example.component.html | 34 ++++ ...grid-action-display.example.component.scss | 7 + ...tagrid-action-display.example.component.ts | 159 ++++++++++++++++++ .../datagrid-action-display.example.module.ts | 18 ++ .../datagrid/datagrid.examples.module.ts | 9 + 5 files changed, 227 insertions(+) create mode 100644 projects/examples/src/components/datagrid/datagrid-action-display.example.component.html create mode 100644 projects/examples/src/components/datagrid/datagrid-action-display.example.component.scss create mode 100644 projects/examples/src/components/datagrid/datagrid-action-display.example.component.ts create mode 100644 projects/examples/src/components/datagrid/datagrid-action-display.example.module.ts diff --git a/projects/examples/src/components/datagrid/datagrid-action-display.example.component.html b/projects/examples/src/components/datagrid/datagrid-action-display.example.component.html new file mode 100644 index 00000000..61a8104e --- /dev/null +++ b/projects/examples/src/components/datagrid/datagrid-action-display.example.component.html @@ -0,0 +1,34 @@ +

Actions displayed on top as inline bar

+

+ 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 +

+ + +

Contextual actions displayed in rows as inline bar

+

Only contextual actions are displayed in rows and static actions are always displayed on top

+ + +

Contextual actions displayed in rows as dropdown

+

Only contextual actions are displayed in rows and static actions are always displayed on top

+ diff --git a/projects/examples/src/components/datagrid/datagrid-action-display.example.component.scss b/projects/examples/src/components/datagrid/datagrid-action-display.example.component.scss new file mode 100644 index 00000000..2409a221 --- /dev/null +++ b/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; + } + } +} diff --git a/projects/examples/src/components/datagrid/datagrid-action-display.example.component.ts b/projects/examples/src/components/datagrid/datagrid-action-display.example.component.ts new file mode 100644 index 00000000..f4468d71 --- /dev/null +++ b/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 { + @ViewChild(DatagridComponent, { static: true }) dg: DatagridComponent; + + gridData: GridDataFetchResult = { + items: [], + }; + + singleSelectionType = GridSelectionType.Single; + + columns: GridColumn[] = [ + { + displayName: 'Some Value', + renderer: 'value', + }, + ]; + + actions: ActionItem[] = [ + { + 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): void { + this.gridData = { + items: [ + { value: 'a', paused: false }, + { value: 'b', paused: true }, + { value: 'a', paused: true }, + { value: 'b', paused: false }, + ], + totalItems: 2, + }; + } +} diff --git a/projects/examples/src/components/datagrid/datagrid-action-display.example.module.ts b/projects/examples/src/components/datagrid/datagrid-action-display.example.module.ts new file mode 100644 index 00000000..9090c2e9 --- /dev/null +++ b/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 {} diff --git a/projects/examples/src/components/datagrid/datagrid.examples.module.ts b/projects/examples/src/components/datagrid/datagrid.examples.module.ts index 81c15ceb..1185d2b6 100644 --- a/projects/examples/src/components/datagrid/datagrid.examples.module.ts +++ b/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 {}