1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
<template>
<b-container fluid>
<b-row>
<b-col lg="8">
<h1>Local user management</h1>
</b-col>
</b-row>
<b-row>
<b-col lg="8" md="10">
<b-button v-b-modal.modal-settings variant="secondary"
>Account policy settings</b-button
>
<b-button v-b-modal.modal-add-user variant="primary">Add user</b-button>
</b-col>
</b-row>
<b-row>
<b-col lg="8" md="10">
<b-table bordered head-variant="dark" :items="tableItems" show-empty>
<template v-slot:head(actions)="data"></template>
<template v-slot:cell(actions)="data">
<b-button
:disabled="!data.value.edit"
v-b-modal.modal-user-settings
>
<Edit20 />
</b-button>
<b-button
:disabled="!data.value.delete"
v-b-modal.modal-user-delete
>
<TrashCan20 />
</b-button>
</template>
</b-table>
</b-col>
</b-row>
<b-row>
<b-col lg="6" md="8">
<b-button v-b-toggle.collapse-role-table variant="info" class="mt-3"
>View privilege role descriptions</b-button
>
<b-collapse id="collapse-role-table" class="mt-3">
<role-table />
</b-collapse>
</b-col>
</b-row>
<!-- Modals -->
<b-modal id="modal-add-user" title="Add user" ref="modal">
<template v-slot:modal-footer="{ ok, cancel, hide }">
<b-button
size="sm"
variant="secondary"
@click="$bvModal.hide('modal-add-user')"
>Cancel</b-button
>
<b-button
size="sm"
variant="primary"
@click="$bvModal.hide('modal-add-user')"
>Add user</b-button
>
</template>
</b-modal>
<b-modal id="modal-settings" title="Account policy settings"></b-modal>
<b-modal id="modal-user-delete" title="Delete user"></b-modal>
<b-modal id="modal-user-settings" title="User settings"></b-modal>
</b-container>
</template>
<script>
import LocalUserManagementRoleTable from "./LocalUserMangementRoleTable";
import TrashCan20 from "@carbon/icons-vue/es/trash-can/20";
import Edit20 from "@carbon/icons-vue/es/edit/20";
export default {
name: "local-users",
components: {
TrashCan20,
Edit20,
roleTable: LocalUserManagementRoleTable
},
created() {
this.getUsers();
},
computed: {
allUsers() {
return this.$store.getters["localUsers/allUsers"];
},
tableItems() {
// transform user data to table data
return this.allUsers.map(user => {
return {
username: user.UserName,
privilege: user.RoleId,
status: user.Locked
? "Locked"
: user.Enabled
? "Enabled"
: "Disabled",
actions: {
edit: true,
delete: user.UserName === "root" ? false : true
}
};
});
}
},
methods: {
getUsers() {
this.$store.dispatch("localUsers/getUsers");
}
}
};
</script>
<style lang="scss" scoped>
h1 {
margin-bottom: 2rem;
}
</style>
|
