SecurityAndAccess/UserManagement/UserManagement.vue

2   <b-container fluid="xl">
3     <page-title />
4     <b-row>
5       <b-col xl="9" class="text-end">
6         <b-button variant="link" @click="initModalSettings">
7           <icon-settings />
9         </b-button>
10         <b-button
12           data-test-id="userManagement-button-addUser"
15           <icon-add />
17         </b-button>
18       </b-col>
19     </b-row>
20     <b-row>
21       <b-col xl="9">
22         <table-toolbar
24           :selected-items-count="
28           @clear-selected="clearSelectedRows($refs.table)"
29           @batch-action="onBatchAction"
31         <b-table
35           show-empty
36           no-select-on-click
38           thead-class="table-light"
42           :empty-text="$t('global.table.emptyMessage')"
43           @row-selected="onRowSelected($event, tableItems.length)"
45           <!-- Checkbox column -->
47             <b-form-checkbox
48               v-model="tableHeaderCheckboxModel"
49               data-test-id="userManagement-checkbox-tableHeaderCheckbox"
53               <span class="visually-hidden-focusable">
56             </b-form-checkbox>
59             <b-form-checkbox
60               v-model="row.rowSelected"
61               data-test-id="userManagement-checkbox-toggleSelectRow"
64               <span class="visually-hidden-focusable">
67             </b-form-checkbox>
70           <!-- table actions column -->
72             <table-row-action
73               v-for="(action, index) in item.actions"
78               @click-table-action="onTableRowAction($event, item)"
81                 <icon-edit
82                   v-if="action.value === 'edit'"
83                   :data-test-id="`userManagement-tableRowAction-edit-${index}`"
85                 <icon-trashcan
86                   v-if="action.value === 'delete'"
87                   :data-test-id="`userManagement-tableRowAction-delete-${index}`"
90             </table-row-action>
92         </b-table>
93       </b-col>
94     </b-row>
95     <b-row>
96       <b-col xl="8">
97         <b-button
98           data-test-id="userManagement-button-viewPrivilegeRoleDescriptions"
100           class="mt-3"
103           <icon-chevron />
105         </b-button>
106         <b-collapse id="collapse-role-table" :visible="showRoles" class="mt-3">
107           <table-roles />
108         </b-collapse>
109       </b-col>
110     </b-row>
111     <!-- Modals -->
112     <modal-settings
113       v-model="showSettingsModal"
117     <modal-user
118       v-model="showUserModal"
119       :user="activeUser"
120       :password-requirements="passwordRequirements"
124   </b-container>
128 import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
129 import IconEdit from '@carbon/icons-vue/es/edit/20';
130 import IconAdd from '@carbon/icons-vue/es/add--alt/20';
131 import IconSettings from '@carbon/icons-vue/es/settings/20';
132 import IconChevron from '@carbon/icons-vue/es/chevron--up/20';
148 import { useI18n } from 'vue-i18n';
150 import { useModal } from 'bootstrap-vue-next';
201           tdClass: 'text-end text-nowrap',
231       // transform user data to table data
232       return this.allUsers.map((user) => {
234           username: user.UserName,
235           privilege: user.RoleId,
236           status: user.Locked
238             : user.Enabled
244               enabled: this.editEnable(user),
250                 user.UserName === this.$store.getters['global/username']
252                   : true && user.UserName === 'root'
258           ...user,
279     editEnable(user) {
283         return user.UserName === 'root' ? false : true;
286     initModalUser(user) {
287       this.activeUser = user;
290     initModalDelete(user) {
293           user: user.username,
303           this.deleteUser(user);