Update local user table to new design
This commit will introduce a reusable data table component.
By creating a reusable component, we can ensure tables in the
GUI will look consistent and common table actions (sort, select row)
are shared.
- Created new components directory to store shared components
- Add password-confirmation directive
- Remove some error handling from API utils so it can be
handled in the UI
TODO:
- Add show/hide toggle to password fields
- Enhance table component with icons
- Manual user unlock
- Batch table actions
- Role table
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I03c95874d2942a2450a5da2f1d2a8bb895aa1746
diff --git a/app/common/components/table/table.html b/app/common/components/table/table.html
new file mode 100644
index 0000000..6ec520c
--- /dev/null
+++ b/app/common/components/table/table.html
@@ -0,0 +1,36 @@
+<table class="bmc-table">
+ <thead>
+ <!-- Header row -->
+ <tr>
+ <th ng-repeat="header in $ctrl.model.header"
+ class="bmc-table__column-header">
+ {{header}}
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- Data rows -->
+ <tr ng-if="$ctrl.model.data.length > 0"
+ ng-repeat="row in $ctrl.model.data"
+ class="bmc-table__row">
+ <!-- Row item -->
+ <td ng-repeat="item in row.uiData"
+ class="bmc-table__cell">
+ {{item}}
+ </td>
+ <!-- Row Actions -->
+ <td ng-if="$ctrl.model.actions.length > 0"
+ class="bmc-table__cell bmc-table__row-actions">
+ <button ng-repeat="action in $ctrl.model.actions"
+ ng-click="$ctrl.onClickAction(action, row);"
+ class="btn btn-tertiary">
+ {{action}}
+ </button>
+ </td>
+ </tr>
+ <!-- Empty table -->
+ <tr ng-if="$ctrl.model.data.length === 0">
+ <td>No data</td>
+ </tr>
+ </tbody>
+</table>
\ No newline at end of file