SecurityAndAccess/UserManagement/UserManagement.vue

2   <b-container fluid="xl">
3     <page-title />
4     <b-row>
5       <b-col xl="9" class="text-right">
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="selectedRows.length"
26           @clear-selected="clearSelectedRows($refs.table)"
27           @batch-action="onBatchAction"
29         <b-table
33           show-empty
34           no-select-on-click
39           :empty-text="$t('global.table.emptyMessage')"
40           @row-selected="onRowSelected($event, tableItems.length)"
42           <!-- Checkbox column -->
44             <b-form-checkbox
45               v-model="tableHeaderCheckboxModel"
46               data-test-id="userManagement-checkbox-tableHeaderCheckbox"
50               <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
51             </b-form-checkbox>
54             <b-form-checkbox
55               v-model="row.rowSelected"
56               data-test-id="userManagement-checkbox-toggleSelectRow"
59               <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
60             </b-form-checkbox>
63           <!-- table actions column -->
65             <table-row-action
66               v-for="(action, index) in item.actions"
71               @click-table-action="onTableRowAction($event, item)"
74                 <icon-edit
75                   v-if="action.value === 'edit'"
76                   :data-test-id="`userManagement-tableRowAction-edit-${index}`"
78                 <icon-trashcan
79                   v-if="action.value === 'delete'"
80                   :data-test-id="`userManagement-tableRowAction-delete-${index}`"
83             </table-row-action>
85         </b-table>
86       </b-col>
87     </b-row>
88     <b-row>
89       <b-col xl="8">
90         <b-button
91           v-b-toggle.collapse-role-table
92           data-test-id="userManagement-button-viewPrivilegeRoleDescriptions"
94           class="mt-3"
96           <icon-chevron />
98         </b-button>
99         <b-collapse id="collapse-role-table" class="mt-3">
100           <table-roles />
101         </b-collapse>
102       </b-col>
103     </b-row>
104     <!-- Modals -->
105     <modal-settings :settings="setting" @ok="saveAccountSettings" />
106     <modal-user
108       :password-requirements="passwordRequirements"
112   </b-container>
116 import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
117 import IconEdit from '@carbon/icons-vue/es/edit/20';
118 import IconAdd from '@carbon/icons-vue/es/add--alt/20';
119 import IconSettings from '@carbon/icons-vue/es/settings/20';
120 import IconChevron from '@carbon/icons-vue/es/chevron--up/20';
136 import { useI18n } from 'vue-i18n';
184           tdClass: 'text-right text-nowrap',
193           value: 'enable',
194           label: i18n.global.t('global.action.enable'),
268       this.$bvModal.show('modal-user');
291       this.$bvModal.show('modal-settings');
354         case 'enable':