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
diff --git a/src/assets/styles/_table.scss b/src/assets/styles/_table.scss
index 7d265c8..069a37c 100644
--- a/src/assets/styles/_table.scss
+++ b/src/assets/styles/_table.scss
@@ -15,12 +15,4 @@
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 0000000..c8d2d0c
--- /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 d68c953..8797da7 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 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 @@
ModalUser,
PageTitle,
TableRoles,
+ TableRowAction,
TableToolbar
},
mixins: [BVTableSelectableMixin, BVToastMixin],
@@ -134,7 +130,7 @@
{
key: 'actions',
label: '',
- tdClass: 'table-cell__actions'
+ tdClass: 'text-right'
}
],
tableToolbarActions: [
@@ -168,10 +164,13 @@
: 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 @@
default:
break;
}
+ },
+ onTableRowAction(action, row) {
+ switch (action) {
+ case 'edit':
+ this.initModalUser(row);
+ break;
+ case 'delete':
+ this.initModalDelete(row);
+ break;
+ default:
+ break;
+ }
}
}
};