Add batch action functionality to table Component
These changes aren't currently implemented on any table.
It will be added to event logs and local user table.
- Create tableCheckbox component to handle custom styles
and indeterminate state which needs to be set with JS
- Update tableComponent layout to allow transition for
toolbar. Updated user-accounts layout and styles to
account for these changes
Tested on Chrome, Safari, Firefox, Edge, IE
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic57a090db1ef66f9d33facfdc425db868ae8d8c6
diff --git a/app/common/components/table/table-toolbar.js b/app/common/components/table/table-toolbar.js
new file mode 100644
index 0000000..830bbd1
--- /dev/null
+++ b/app/common/components/table/table-toolbar.js
@@ -0,0 +1,112 @@
+window.angular && (function(angular) {
+ 'use strict';
+
+ /**
+ *
+ * tableToolbar Component
+ *
+ * To use:
+ * The <table-toolbar> component expects an 'actions' attribute
+ * that should be an array of action objects.
+ * Each action object should have 'type', 'label', and 'file'
+ * properties.
+ *
+ * actions: [
+ * {type: 'Edit', label: 'Edit', file: 'icon-edit.svg'},
+ * {type: 'Delete', label: 'Edit', file: 'icon-trashcan.svg'}
+ * ]
+ *
+ * The 'type' property is a string value that will be emitted to the
+ * parent component when clicked.
+ *
+ * The 'label' property is a string value that will render as text in
+ * the button
+ *
+ * The 'file' property is a string value of the filename of the svg icon
+ * to provide <icon> directive.
+ *
+ */
+
+ const controller = function() {
+ /**
+ * Set defaults if properties undefined
+ * @param {[]} actions
+ */
+ const setActions = (actions = []) => {
+ return actions
+ .map((action) => {
+ if (action.type === undefined) {
+ return;
+ }
+ if (action.file === undefined) {
+ action.file = null;
+ }
+ return action;
+ })
+ .filter((action) => action);
+ };
+
+ /**
+ * Callback when button action clicked
+ * Emits the action type to the parent component
+ */
+ this.onClick = (action) => {
+ this.emitAction({action});
+ };
+
+ this.onClickClose = () => {
+ this.emitClose();
+ };
+
+ /**
+ * onInit Component lifecycle hook
+ */
+ this.$onInit = () => {
+ this.actions = setActions(this.actions);
+ };
+ };
+
+ /**
+ * Component template
+ */
+ const template = `
+ <div class="bmc-table__toolbar" ng-if="$ctrl.active">
+ <p class="toolbar__selection-count">{{$ctrl.selectionCount}} selected</p>
+ <div class="toolbar__batch-actions" ng-show="$ctrl.actions.length > 0">
+ <button
+ class="btn btn-tertiary"
+ type="button"
+ aria-label="{{action.label}}"
+ ng-repeat="action in $ctrl.actions"
+ ng-click="$ctrl.onClick(action.type)">
+ <icon ng-if="action.file !== null"
+ ng-file="{{action.file}}"
+ aria-hidden="true">
+ </icon>
+ {{action.label || action.type}}
+ </button>
+ <button
+ class="btn btn-tertiary btn-close"
+ type="button"
+ aria-label="Cancel"
+ ng-click="$ctrl.onClickClose()">
+ Cancel
+ </button>
+ </div>
+ </div>`
+
+ /**
+ * Register tableToolbar component
+ */
+ angular.module('app.common.components').component('tableToolbar', {
+ controller,
+ template,
+ bindings: {
+ actions: '<',
+ selectionCount: '<',
+ active: '<',
+ emitAction: '&',
+ emitClose: '&'
+ }
+ })
+})(window.angular);
\ No newline at end of file