diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-02-19 00:39:45 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-02-24 17:54:47 +0300 |
commit | 0e893f03bbcb2fa2cc6ce128091ba68b8ea93e8f (patch) | |
tree | 4d7b3dfd421ffb798b307ad145eef55eb6e831eb /src/views | |
parent | 2c69921cf85dcf83b6a9c3b04d9f4885ef8b6d40 (diff) | |
download | webui-vue-0e893f03bbcb2fa2cc6ce128091ba68b8ea93e8f.tar.xz |
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
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue | 57 |
1 files changed, 34 insertions, 23 deletions
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; + } } } }; |