From 0e893f03bbcb2fa2cc6ce128091ba68b8ea93e8f Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Tue, 18 Feb 2020 13:39:45 -0800
Subject: Create TableRowAction component

Creating a reusable component to help ensure visual
consistency and code reuse for table actions.
Updated local user management table to use this new
component.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ib94df901c5b6a70ee3299f6844b60fa761842b13
---
 src/assets/styles/_table.scss                      |  8 ---
 src/components/Global/TableRowAction.vue           | 40 +++++++++++++++
 .../LocalUserManagement/LocalUserManagement.vue    | 57 +++++++++++++---------
 3 files changed, 74 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Global/TableRowAction.vue

diff --git a/src/assets/styles/_table.scss b/src/assets/styles/_table.scss
index 7d265c8e..069a37c3 100644
--- a/src/assets/styles/_table.scss
+++ b/src/assets/styles/_table.scss
@@ -15,12 +15,4 @@ table {
     border: none;
     color: $gray-900;
   }
-}
-
-.table-cell__actions {
-  text-align: right;
-  .btn {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
 }
\ No newline at end of file
diff --git a/src/components/Global/TableRowAction.vue b/src/components/Global/TableRowAction.vue
new file mode 100644
index 00000000..c8d2d0cf
--- /dev/null
+++ b/src/components/Global/TableRowAction.vue
@@ -0,0 +1,40 @@
+<template>
+  <b-button
+    :aria-label="title ? title : value"
+    :title="title"
+    variant="link"
+    :disabled="!enabled"
+    @click="$emit('click:tableAction', value)"
+  >
+    <slot name="icon">
+      {{ value }}
+    </slot>
+  </b-button>
+</template>
+
+<script>
+export default {
+  name: 'TableRowAction',
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    enabled: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: null
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.btn {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+</style>
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index d68c9534..8797da77 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -46,25 +46,19 @@
           </template>
 
           <!-- table actions column -->
-          <template v-slot:cell(actions)="data">
-            <b-button
-              aria-label="Edit user"
-              title="Edit user"
-              variant="link"
-              :disabled="!data.value.edit"
-              @click="initModalUser(data.item)"
+          <template v-slot:cell(actions)="{ item }">
+            <table-row-action
+              v-for="(action, index) in item.actions"
+              :key="index"
+              :value="action.value"
+              :enabled="action.enabled"
+              @click:tableAction="onTableRowAction($event, item)"
             >
-              <icon-edit />
-            </b-button>
-            <b-button
-              aria-label="Delete user"
-              title="Delete user"
-              variant="link"
-              :disabled="!data.value.delete"
-              @click="initModalDelete(data.item)"
-            >
-              <icon-trashcan />
-            </b-button>
+              <template v-slot:icon>
+                <icon-edit v-if="action.value === 'edit'" />
+                <icon-trashcan v-if="action.value === 'delete'" />
+              </template>
+            </table-row-action>
           </template>
         </b-table>
       </b-col>
@@ -101,6 +95,7 @@ import TableToolbar from '../../../components/Global/TableToolbar';
 
 import BVTableSelectableMixin from '../../../components/Mixins/BVTableSelectableMixin';
 import BVToastMixin from '../../../components/Mixins/BVToastMixin';
+import TableRowAction from '../../../components/Global/TableRowAction';
 
 export default {
   name: 'LocalUsers',
@@ -114,6 +109,7 @@ export default {
     ModalUser,
     PageTitle,
     TableRoles,
+    TableRowAction,
     TableToolbar
   },
   mixins: [BVTableSelectableMixin, BVToastMixin],
@@ -134,7 +130,7 @@ export default {
         {
           key: 'actions',
           label: '',
-          tdClass: 'table-cell__actions'
+          tdClass: 'text-right'
         }
       ],
       tableToolbarActions: [
@@ -168,10 +164,13 @@ export default {
             : user.Enabled
             ? 'Enabled'
             : 'Disabled',
-          actions: {
-            edit: true,
-            delete: user.UserName === 'root' ? false : true
-          },
+          actions: [
+            { value: 'edit', enabled: true },
+            {
+              value: 'delete',
+              enabled: user.UserName === 'root' ? false : true
+            }
+          ],
           ...user
         };
       });
@@ -264,6 +263,18 @@ export default {
         default:
           break;
       }
+    },
+    onTableRowAction(action, row) {
+      switch (action) {
+        case 'edit':
+          this.initModalUser(row);
+          break;
+        case 'delete':
+          this.initModalDelete(row);
+          break;
+        default:
+          break;
+      }
     }
   }
 };
-- 
cgit v1.2.3