diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-04-17 19:39:41 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-05-01 19:08:33 +0300 |
commit | dc3d5411a7bd2afd84ed5d4b8f1e86a48f0fc962 (patch) | |
tree | d1788233eab6134df54361b1b5551aa9e3b7c607 /src/views/AccessControl/Ldap/TableRoleGroups.vue | |
parent | f7aa7f9c8abe8480edfdf758ec25b26032e759a2 (diff) | |
download | webui-vue-dc3d5411a7bd2afd84ed5d4b8f1e86a48f0fc962.tar.xz |
Add LDAP role groups table
Adds ability to add, edit, and delete RemoteRoleMapping
objects from the GUI.
Role group table functionality includes sort, single row
edit and delete, and batch delete.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id9168c90b78a6f4090ab0ab3e37e74b8cd821d54
Diffstat (limited to 'src/views/AccessControl/Ldap/TableRoleGroups.vue')
-rw-r--r-- | src/views/AccessControl/Ldap/TableRoleGroups.vue | 240 |
1 files changed, 240 insertions, 0 deletions
diff --git a/src/views/AccessControl/Ldap/TableRoleGroups.vue b/src/views/AccessControl/Ldap/TableRoleGroups.vue new file mode 100644 index 00000000..a851a033 --- /dev/null +++ b/src/views/AccessControl/Ldap/TableRoleGroups.vue @@ -0,0 +1,240 @@ +<template> + <div> + <b-row> + <b-col md="9"> + <alert :show="isServiceEnabled === false" variant="info"> + {{ $t('pageLdap.tableRoleGroups.alertContent') }} + </alert> + </b-col> + </b-row> + <b-row> + <b-col class="text-right" md="9"> + <b-btn + variant="primary" + :disabled="!isServiceEnabled" + @click="initRoleGroupModal(null)" + > + <icon-add /> + {{ $t('pageLdap.addRoleGroup') }} + </b-btn> + </b-col> + </b-row> + <b-row> + <b-col md="9"> + <table-toolbar + ref="toolbar" + :selected-items-count="selectedRows.length" + :actions="batchActions" + @clearSelected="clearSelectedRows($refs.table)" + @batchAction="onBatchAction" + /> + <b-table + ref="table" + selectable + no-select-on-click + no-sort-reset + sort-icon-left + :items="tableItems" + :fields="fields" + @row-selected="onRowSelected($event, tableItems.length)" + > + <!-- Checkbox column --> + <template v-slot:head(checkbox)> + <b-form-checkbox + v-model="tableHeaderCheckboxModel" + :indeterminate="tableHeaderCheckboxIndeterminate" + :disabled="!isServiceEnabled" + @change="onChangeHeaderCheckbox($refs.table)" + /> + </template> + <template v-slot:cell(checkbox)="row"> + <b-form-checkbox + v-model="row.rowSelected" + :disabled="!isServiceEnabled" + @change="toggleSelectRow($refs.table, row.index)" + /> + </template> + + <!-- table actions column --> + <template v-slot:cell(actions)="{ item }"> + <table-row-action + v-for="(action, index) in item.actions" + :key="index" + :value="action.value" + :enabled="action.enabled" + :title="action.title" + @click:tableAction="onTableRowAction($event, item)" + > + <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> + </b-row> + <modal-add-role-group + :role-group="activeRoleGroup" + @ok="saveRoleGroup" + @hidden="activeRoleGroup = null" + /> + </div> +</template> + +<script> +import IconEdit from '@carbon/icons-vue/es/edit/20'; +import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; +import IconAdd from '@carbon/icons-vue/es/add--alt/20'; +import { mapGetters } from 'vuex'; + +import Alert from '@/components/Global/Alert'; +import TableToolbar from '@/components/Global/TableToolbar'; +import TableRowAction from '@/components/Global/TableRowAction'; +import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import ModalAddRoleGroup from './ModalAddRoleGroup'; + +export default { + components: { + Alert, + IconAdd, + IconEdit, + IconTrashcan, + ModalAddRoleGroup, + TableRowAction, + TableToolbar + }, + mixins: [BVTableSelectableMixin, BVToastMixin], + data() { + return { + activeRoleGroup: null, + fields: [ + { + key: 'checkbox', + sortable: false + }, + { + key: 'groupName', + sortable: true, + label: this.$t('pageLdap.tableRoleGroups.groupName') + }, + { + key: 'groupPrivilege', + sortable: true, + label: this.$t('pageLdap.tableRoleGroups.groupPrivilege') + }, + { + key: 'actions', + sortable: false, + label: '', + tdClass: 'text-right' + } + ], + batchActions: [ + { + value: 'delete', + label: this.$t('global.action.delete') + } + ] + }; + }, + computed: { + ...mapGetters('ldap', ['isServiceEnabled', 'enabledRoleGroups']), + tableItems() { + return this.enabledRoleGroups.map(({ LocalRole, RemoteGroup }) => { + return { + groupName: RemoteGroup, + groupPrivilege: LocalRole, + actions: [ + { + value: 'edit', + title: this.$t('global.action.edit'), + enabled: this.isServiceEnabled + }, + { + value: 'delete', + title: this.$t('global.action.delete'), + enabled: this.isServiceEnabled + } + ] + }; + }); + } + }, + created() { + this.$store.dispatch('localUsers/getAccountRoles'); + }, + methods: { + onBatchAction() { + this.$bvModal + .msgBoxConfirm( + this.$tc( + 'pageLdap.modal.deleteRoleGroupBatchConfirmMessage', + this.selectedRows.length + ), + { + title: this.$t('pageLdap.modal.deleteRoleGroup'), + okTitle: this.$t('global.action.delete') + } + ) + .then(deleteConfirmed => { + if (deleteConfirmed) { + this.$store + .dispatch('ldap/deleteRoleGroup', { + roleGroups: this.selectedRows + }) + .then(success => this.successToast(success)) + .catch(({ message }) => this.errorToast(message)); + } + }); + }, + onTableRowAction(action, row) { + switch (action) { + case 'edit': + this.initRoleGroupModal(row); + break; + case 'delete': + this.$bvModal + .msgBoxConfirm( + this.$t('pageLdap.modal.deleteRoleGroupConfirmMessage', { + groupName: row.groupName + }), + { + title: this.$t('pageLdap.modal.deleteRoleGroup'), + okTitle: this.$t('global.action.delete') + } + ) + .then(deleteConfirmed => { + if (deleteConfirmed) { + this.$store + .dispatch('ldap/deleteRoleGroup', { roleGroups: [row] }) + .then(success => this.successToast(success)) + .catch(({ message }) => this.errorToast(message)); + } + }); + break; + } + }, + initRoleGroupModal(roleGroup) { + this.activeRoleGroup = roleGroup; + this.$bvModal.show('modal-role-group'); + }, + saveRoleGroup({ addNew, groupName, groupPrivilege }) { + this.activeRoleGroup = null; + const data = { groupName, groupPrivilege }; + if (addNew) { + this.$store + .dispatch('ldap/addNewRoleGroup', data) + .then(success => this.successToast(success)) + .catch(({ message }) => this.errorToast(message)); + } else { + this.$store + .dispatch('ldap/saveRoleGroup', data) + .then(success => this.successToast(success)) + .catch(({ message }) => this.errorToast(message)); + } + } + } +}; +</script> |