| Yoshie Muranaka | 5b8cef8 | 2019-09-10 08:09:43 -0700 | [diff] [blame] | 1 | window.angular && (function(angular) { |
| 2 | 'use strict'; |
| 3 | |
| 4 | /** |
| 5 | * |
| 6 | * tableToolbar Component |
| 7 | * |
| 8 | * To use: |
| 9 | * The <table-toolbar> component expects an 'actions' attribute |
| 10 | * that should be an array of action objects. |
| 11 | * Each action object should have 'type', 'label', and 'file' |
| 12 | * properties. |
| 13 | * |
| 14 | * actions: [ |
| 15 | * {type: 'Edit', label: 'Edit', file: 'icon-edit.svg'}, |
| 16 | * {type: 'Delete', label: 'Edit', file: 'icon-trashcan.svg'} |
| 17 | * ] |
| 18 | * |
| 19 | * The 'type' property is a string value that will be emitted to the |
| 20 | * parent component when clicked. |
| 21 | * |
| 22 | * The 'label' property is a string value that will render as text in |
| 23 | * the button |
| 24 | * |
| 25 | * The 'file' property is a string value of the filename of the svg icon |
| 26 | * to provide <icon> directive. |
| 27 | * |
| 28 | */ |
| 29 | |
| 30 | const controller = function() { |
| 31 | /** |
| 32 | * Set defaults if properties undefined |
| 33 | * @param {[]} actions |
| 34 | */ |
| 35 | const setActions = (actions = []) => { |
| 36 | return actions |
| 37 | .map((action) => { |
| 38 | if (action.type === undefined) { |
| 39 | return; |
| 40 | } |
| 41 | if (action.file === undefined) { |
| 42 | action.file = null; |
| 43 | } |
| 44 | return action; |
| 45 | }) |
| 46 | .filter((action) => action); |
| 47 | }; |
| 48 | |
| 49 | /** |
| 50 | * Callback when button action clicked |
| 51 | * Emits the action type to the parent component |
| 52 | */ |
| 53 | this.onClick = (action) => { |
| 54 | this.emitAction({action}); |
| 55 | }; |
| 56 | |
| 57 | this.onClickClose = () => { |
| 58 | this.emitClose(); |
| 59 | }; |
| 60 | |
| 61 | /** |
| 62 | * onInit Component lifecycle hook |
| 63 | */ |
| 64 | this.$onInit = () => { |
| 65 | this.actions = setActions(this.actions); |
| 66 | }; |
| 67 | }; |
| 68 | |
| 69 | /** |
| 70 | * Component template |
| 71 | */ |
| 72 | const template = ` |
| 73 | <div class="bmc-table__toolbar" ng-if="$ctrl.active"> |
| 74 | <p class="toolbar__selection-count">{{$ctrl.selectionCount}} selected</p> |
| 75 | <div class="toolbar__batch-actions" ng-show="$ctrl.actions.length > 0"> |
| 76 | <button |
| 77 | class="btn btn-tertiary" |
| 78 | type="button" |
| 79 | aria-label="{{action.label}}" |
| 80 | ng-repeat="action in $ctrl.actions" |
| 81 | ng-click="$ctrl.onClick(action.type)"> |
| 82 | <icon ng-if="action.file !== null" |
| 83 | ng-file="{{action.file}}" |
| 84 | aria-hidden="true"> |
| 85 | </icon> |
| 86 | {{action.label || action.type}} |
| 87 | </button> |
| 88 | <button |
| 89 | class="btn btn-tertiary btn-close" |
| 90 | type="button" |
| 91 | aria-label="Cancel" |
| 92 | ng-click="$ctrl.onClickClose()"> |
| 93 | Cancel |
| 94 | </button> |
| 95 | </div> |
| 96 | </div>` |
| 97 | |
| 98 | /** |
| 99 | * Register tableToolbar component |
| 100 | */ |
| 101 | angular.module('app.common.components').component('tableToolbar', { |
| 102 | controller, |
| 103 | template, |
| 104 | bindings: { |
| 105 | actions: '<', |
| 106 | selectionCount: '<', |
| 107 | active: '<', |
| 108 | emitAction: '&', |
| 109 | emitClose: '&' |
| 110 | } |
| 111 | }) |
| 112 | })(window.angular); |