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-checkbox.js b/app/common/components/table/table-checkbox.js
new file mode 100644
index 0000000..b15e4ed
--- /dev/null
+++ b/app/common/components/table/table-checkbox.js
@@ -0,0 +1,67 @@
+window.angular && (function(angular) {
+ 'use strict';
+
+ /**
+ *
+ * tableCheckbox Component
+ *
+ */
+
+ const controller = function($element) {
+ // <input> element ref needed to add indeterminate state
+ let inputEl;
+
+ /**
+ * Callback when the input select value changes
+ */
+ this.onSelectChange = () => {
+ const checked = this.ngModel;
+ this.emitChange({checked});
+ };
+
+ /**
+ * onChanges Component lifecycle hook
+ */
+ this.$onChanges = (onChangesObj) => {
+ const indeterminateChange = onChangesObj.indeterminate;
+ if (indeterminateChange && inputEl) {
+ inputEl.prop('indeterminate', this.indeterminate);
+ }
+ };
+
+ /**
+ * postLink Component lifecycle hook
+ */
+ this.$postLink = () => {
+ inputEl = $element.find('input');
+ };
+ };
+
+ /**
+ * Component template
+ */
+ const template = `
+ <div class="bmc-table__checkbox-container">
+ <label class="bmc-table__checkbox"
+ ng-class="{
+ 'checked': $ctrl.ngModel,
+ 'indeterminate': $ctrl.indeterminate
+ }">
+ <input type="checkbox"
+ class="bmc-table__checkbox-input"
+ ng-model="$ctrl.ngModel"
+ ng-change="$ctrl.onSelectChange()"
+ aria-label="Select row"/>
+ <span class="screen-reader-offscreen">Select row</span>
+ </label>
+ </div>`
+
+ /**
+ * Register tableCheckbox component
+ */
+ angular.module('app.common.components').component('tableCheckbox', {
+ controller: ['$element', controller],
+ template,
+ bindings: {ngModel: '=', indeterminate: '<', emitChange: '&'}
+ })
+})(window.angular);
\ No newline at end of file