UI component which facilitates bulk actions on a collection of items

Params

action-list

An array of objects with following properties:

• gylph (the icon to display for this action)
• name (the text to display for this action)
• actionFn (the callback function to execute when this action is called)

on-close-action

The callback function to execute when the close button is clicked

selected-items

An array of objects which represent the items that are selected

total-item-count

The total count of objects (selected and unselected)

Bulk Action Bar (styling examples)

Showing off the different types of styling options on the actions

HTML

<div ng-controller="BulkActionBarExampleController as ctrl" class="t-content">

    <p> Buttons with icons and text </p>

    <inv-bulk-action-bar action-list="ctrl.stylingActionList1"
                           on-close-action="ctrl.emptyFunction"
                           selected-items="[]"
                           total-item-count="0">
    </inv-bulk-action-bar>

    <p> Buttons with icons only </p>

    <inv-bulk-action-bar action-list="ctrl.stylingActionList2"
                           on-close-action="ctrl.emptyFunction"
                           selected-items="[]"
                           total-item-count="0">
    </inv-bulk-action-bar>

    <p> Buttons with text only (and no close button) </p>

    <inv-bulk-action-bar action-list="ctrl.stylingActionList3"
                           selected-items="[]"
                           total-item-count="0">
    </inv-bulk-action-bar>
</div>

Bulk Action Bar (checkbox list example)

An example of the component being used in tandem with a checkbox list

HTML

<div ng-controller="BulkActionBarExampleController as ctrl" class="t-content">
    <inv-bulk-action-bar action-list="ctrl.actionList"
                           on-close-action="ctrl.deselectAll"
                           selected-items="ctrl.selectedItems"
                           total-item-count="ctrl.checkboxItems.length"
                           ng-if="ctrl.selectedItems.length > 0">
    </inv-bulk-action-bar>
    <form class="c-form c-generalForm u-mt+">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item"
                 ng-repeat="item in ctrl.checkboxItems track by item.id">
                <div class="c-checkbox">
                    <input type="checkbox"
                           id="{{::item.id}}"
                           ng-model="item.selected"
                           ng-change="ctrl.updateSelectedItems()">
                    <label for="{{::item.id}}" ng-bind="item.label"></label>
                </div>
            </div>
        </fieldset>
    </form>
</div>

Bulk Action Bar (datatable example)

An example of the component being used in tandem with a datatable

HTML

<div ng-controller="BulkActionBarDatatableExampleController as ctrl" class="t-content">
    <inv-bulk-action-bar action-list="ctrl.actionList"
                           on-close-action="ctrl.deselectAll"
                           selected-items="ctrl.selectedItems"
                           total-item-count="datatable.tableData.length"
                           ng-if="ctrl.selectedItems.length > 0">
    </inv-bulk-action-bar>
    <div class="s-datatable c-datatable"
         ui-grid-resize-columns
         ui-grid-selection
         inv-grid-autosize-column
         ui-grid="{ data: datatable.tableData,
                    onRegisterApi: datatable.init }">
    </div>
</div>