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

1 files changed, 40 insertions, 0 deletions

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>