1window.angular && (function(angular) { 2 'use strict'; 3 4 /** 5 * 6 * tableActions Component 7 * 8 * To use: 9 * The <table-actions> component expects an 'actions' attribute 10 * that should be an array of action objects. 11 * Each action object should have 'type', 'enabled', and 'file' 12 * properties. 13 * 14 * actions: [ 15 * {type: 'Edit', enabled: true, file: 'icon-edit.svg'}, 16 * {type: 'Delete', enabled: false, 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 'enabled' property is a boolean that will enable/disable 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 if (action.enabled === undefined) { 45 action.enabled = true; 46 } 47 return action; 48 }) 49 .filter((action) => action); 50 }; 51 52 /** 53 * Callback when button action clicked 54 * Emits the action type to the parent component 55 */ 56 this.onClick = (action) => { 57 this.emitAction({action}); 58 }; 59 60 /** 61 * onInit Component lifecycle hook 62 */ 63 this.$onInit = () => { 64 this.actions = setActions(this.actions); 65 }; 66 }; 67 68 /** 69 * Component template 70 */ 71 const template = ` 72 <button 73 class="btn btn-tertiary" 74 type="button" 75 aria-label="{{action.type}}" 76 ng-repeat="action in $ctrl.actions" 77 ng-disabled="!action.enabled" 78 ng-click="$ctrl.onClick(action.type)"> 79 <icon ng-if="action.file !== null" ng-file="{{action.file}}"></icon> 80 <span ng-if="action.file === null">{{action.type}}</span> 81 </button>` 82 83 /** 84 * Register tableActions component 85 */ 86 angular.module('app.common.components').component('tableActions', { 87 controller, 88 template, 89 bindings: {actions: '<', emitAction: '&'} 90 }) 91})(window.angular);