1<template> 2 <div> 3 <b-row> 4 <b-col md="9"> 5 <alert :show="isServiceEnabled === false" variant="info"> 6 {{ $t('pageLdap.tableRoleGroups.alertContent') }} 7 </alert> 8 </b-col> 9 </b-row> 10 <b-row> 11 <b-col class="text-right" md="9"> 12 <b-btn 13 variant="primary" 14 :disabled="!isServiceEnabled" 15 @click="initRoleGroupModal(null)" 16 > 17 <icon-add /> 18 {{ $t('pageLdap.addRoleGroup') }} 19 </b-btn> 20 </b-col> 21 </b-row> 22 <b-row> 23 <b-col md="9"> 24 <table-toolbar 25 ref="toolbar" 26 :selected-items-count="selectedRows.length" 27 :actions="batchActions" 28 @clear-selected="clearSelectedRows($refs.table)" 29 @batch-action="onBatchAction" 30 /> 31 <b-table 32 ref="table" 33 responsive 34 selectable 35 show-empty 36 no-select-on-click 37 hover 38 no-sort-reset 39 sort-icon-left 40 :busy="isBusy" 41 :items="tableItems" 42 :fields="fields" 43 :empty-text="$t('global.table.emptyMessage')" 44 @row-selected="onRowSelected($event, tableItems.length)" 45 > 46 <!-- Checkbox column --> 47 <template #head(checkbox)> 48 <b-form-checkbox 49 v-model="tableHeaderCheckboxModel" 50 :indeterminate="tableHeaderCheckboxIndeterminate" 51 :disabled="!isServiceEnabled" 52 @change="onChangeHeaderCheckbox($refs.table)" 53 > 54 <span class="sr-only">{{ $t('global.table.selectAll') }}</span> 55 </b-form-checkbox> 56 </template> 57 <template #cell(checkbox)="row"> 58 <b-form-checkbox 59 v-model="row.rowSelected" 60 :disabled="!isServiceEnabled" 61 @change="toggleSelectRow($refs.table, row.index)" 62 > 63 <span class="sr-only">{{ $t('global.table.selectItem') }}</span> 64 </b-form-checkbox> 65 </template> 66 67 <!-- table actions column --> 68 <template #cell(actions)="{ item }"> 69 <table-row-action 70 v-for="(action, index) in item.actions" 71 :key="index" 72 :value="action.value" 73 :enabled="action.enabled" 74 :title="action.title" 75 @click-table-action="onTableRowAction($event, item)" 76 > 77 <template #icon> 78 <icon-edit v-if="action.value === 'edit'" /> 79 <icon-trashcan v-if="action.value === 'delete'" /> 80 </template> 81 </table-row-action> 82 </template> 83 </b-table> 84 </b-col> 85 </b-row> 86 <modal-add-role-group 87 :role-group="activeRoleGroup" 88 @ok="saveRoleGroup" 89 @hidden="activeRoleGroup = null" 90 /> 91 </div> 92</template> 93 94<script> 95import IconEdit from '@carbon/icons-vue/es/edit/20'; 96import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; 97import IconAdd from '@carbon/icons-vue/es/add--alt/20'; 98import { mapGetters } from 'vuex'; 99 100import Alert from '@/components/Global/Alert'; 101import TableToolbar from '@/components/Global/TableToolbar'; 102import TableRowAction from '@/components/Global/TableRowAction'; 103import BVTableSelectableMixin, { 104 selectedRows, 105 tableHeaderCheckboxModel, 106 tableHeaderCheckboxIndeterminate, 107} from '@/components/Mixins/BVTableSelectableMixin'; 108import BVToastMixin from '@/components/Mixins/BVToastMixin'; 109import ModalAddRoleGroup from './ModalAddRoleGroup'; 110import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; 111import { useI18n } from 'vue-i18n'; 112import i18n from '@/i18n'; 113 114export default { 115 components: { 116 Alert, 117 IconAdd, 118 IconEdit, 119 IconTrashcan, 120 ModalAddRoleGroup, 121 TableRowAction, 122 TableToolbar, 123 }, 124 mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin], 125 data() { 126 return { 127 $t: useI18n().t, 128 isBusy: true, 129 activeRoleGroup: null, 130 fields: [ 131 { 132 key: 'checkbox', 133 sortable: false, 134 }, 135 { 136 key: 'groupName', 137 sortable: true, 138 label: i18n.global.t('pageLdap.tableRoleGroups.groupName'), 139 }, 140 { 141 key: 'groupPrivilege', 142 sortable: true, 143 label: i18n.global.t('pageLdap.tableRoleGroups.groupPrivilege'), 144 }, 145 { 146 key: 'actions', 147 sortable: false, 148 label: '', 149 tdClass: 'text-right', 150 }, 151 ], 152 batchActions: [ 153 { 154 value: 'delete', 155 label: i18n.global.t('global.action.delete'), 156 }, 157 ], 158 selectedRows: selectedRows, 159 tableHeaderCheckboxModel: tableHeaderCheckboxModel, 160 tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate, 161 }; 162 }, 163 computed: { 164 ...mapGetters('ldap', ['isServiceEnabled', 'enabledRoleGroups']), 165 tableItems() { 166 return this.enabledRoleGroups.map(({ LocalRole, RemoteGroup }) => { 167 return { 168 groupName: RemoteGroup, 169 groupPrivilege: LocalRole, 170 actions: [ 171 { 172 value: 'edit', 173 title: i18n.global.t('global.action.edit'), 174 enabled: this.isServiceEnabled, 175 }, 176 { 177 value: 'delete', 178 title: i18n.global.t('global.action.delete'), 179 enabled: this.isServiceEnabled, 180 }, 181 ], 182 }; 183 }); 184 }, 185 }, 186 created() { 187 this.$store.dispatch('userManagement/getAccountRoles').finally(() => { 188 this.isBusy = false; 189 }); 190 }, 191 methods: { 192 onBatchAction() { 193 this.$bvModal 194 .msgBoxConfirm( 195 i18n.global.t( 196 'pageLdap.modal.deleteRoleGroupBatchConfirmMessage', 197 this.selectedRows.length, 198 ), 199 { 200 title: i18n.global.t('pageLdap.modal.deleteRoleGroup'), 201 okTitle: i18n.global.t('global.action.delete'), 202 cancelTitle: i18n.global.t('global.action.cancel'), 203 autoFocusButton: 'ok', 204 }, 205 ) 206 .then((deleteConfirmed) => { 207 if (deleteConfirmed) { 208 this.startLoader(); 209 this.$store 210 .dispatch('ldap/deleteRoleGroup', { 211 roleGroups: this.selectedRows, 212 }) 213 .then((success) => this.successToast(success)) 214 .catch(({ message }) => this.errorToast(message)) 215 .finally(() => this.endLoader()); 216 } 217 }); 218 }, 219 onTableRowAction(action, row) { 220 switch (action) { 221 case 'edit': 222 this.initRoleGroupModal(row); 223 break; 224 case 'delete': 225 this.$bvModal 226 .msgBoxConfirm( 227 i18n.global.t('pageLdap.modal.deleteRoleGroupConfirmMessage', { 228 groupName: row.groupName, 229 }), 230 { 231 title: i18n.global.t('pageLdap.modal.deleteRoleGroup'), 232 okTitle: i18n.global.t('global.action.delete'), 233 cancelTitle: i18n.global.t('global.action.cancel'), 234 autoFocusButton: 'ok', 235 }, 236 ) 237 .then((deleteConfirmed) => { 238 if (deleteConfirmed) { 239 this.startLoader(); 240 this.$store 241 .dispatch('ldap/deleteRoleGroup', { roleGroups: [row] }) 242 .then((success) => this.successToast(success)) 243 .catch(({ message }) => this.errorToast(message)) 244 .finally(() => this.endLoader()); 245 } 246 }); 247 break; 248 } 249 }, 250 initRoleGroupModal(roleGroup) { 251 this.activeRoleGroup = roleGroup; 252 this.$bvModal.show('modal-role-group'); 253 }, 254 saveRoleGroup({ addNew, groupName, groupPrivilege }) { 255 this.activeRoleGroup = null; 256 const data = { groupName, groupPrivilege }; 257 this.startLoader(); 258 if (addNew) { 259 this.$store 260 .dispatch('ldap/addNewRoleGroup', data) 261 .then((success) => this.successToast(success)) 262 .catch(({ message }) => this.errorToast(message)) 263 .finally(() => this.endLoader()); 264 } else { 265 this.$store 266 .dispatch('ldap/saveRoleGroup', data) 267 .then((success) => this.successToast(success)) 268 .catch(({ message }) => this.errorToast(message)) 269 .finally(() => this.endLoader()); 270 } 271 }, 272 }, 273}; 274</script> 275