|
@@ -1,5 +1,5 @@
|
1
|
1
|
<template>
|
2
|
|
- <!-- <section class="intro-single"> -->
|
|
2
|
+ <!-- eslint-disable max-len -->
|
3
|
3
|
<div class="container">
|
4
|
4
|
<br />
|
5
|
5
|
<br />
|
|
@@ -7,34 +7,71 @@
|
7
|
7
|
<br />
|
8
|
8
|
<div class="row">
|
9
|
9
|
<div class="col-md-12 col-lg-8">
|
10
|
|
- <!-- <div class="title-single-box"> -->
|
11
|
|
- <!-- <h1 class="title-single" style="text-align:left;">User Management</h1> -->
|
12
|
|
- <!-- </div> -->
|
13
|
10
|
<div class="title-box-d">
|
14
|
11
|
<h1 class="title-d" style="text-align:left; font-size: 250%">User Management</h1>
|
15
|
12
|
</div>
|
16
|
13
|
<br />
|
17
|
14
|
</div>
|
18
|
15
|
</div>
|
19
|
|
- <div id="table" class="col-xs-12 table-responsive">
|
20
|
|
- <datatable :columns="columns" :data="rows"></datatable>
|
|
16
|
+ <div class="container">
|
|
17
|
+ <table class="table table-bordered">
|
|
18
|
+ <thead>
|
|
19
|
+ <tr>
|
|
20
|
+ <th>ID</th>
|
|
21
|
+ <th>Name</th>
|
|
22
|
+ <th>Surname</th>
|
|
23
|
+ <th>Cell Number</th>
|
|
24
|
+ <th>Telephone Number</th>
|
|
25
|
+ <th>Email</th>
|
|
26
|
+ <th>Role</th>
|
|
27
|
+ <th></th>
|
|
28
|
+ <th></th>
|
|
29
|
+ </tr>
|
|
30
|
+ </thead>
|
|
31
|
+ <tbody>
|
|
32
|
+ <tr v-for="(item, i) in individuals" :key="i">
|
|
33
|
+ <td>{{ item.id }}</td>
|
|
34
|
+ <td>{{ item.name }}</td>
|
|
35
|
+ <td>{{ item.surname }}</td>
|
|
36
|
+ <td>{{ item.cellNumber }}</td>
|
|
37
|
+ <td>{{ item.telephone }}</td>
|
|
38
|
+ <td>{{ item.email }}</td>
|
|
39
|
+ <td v-if="item.user">{{ item.user.role }}</td>
|
|
40
|
+ <td v-else></td>
|
|
41
|
+ <td>
|
|
42
|
+ <button
|
|
43
|
+ type="button"
|
|
44
|
+ @click="Edit(item)"
|
|
45
|
+ class="btn btn-b-n"
|
|
46
|
+ style="width: 85px; height:40px;"
|
|
47
|
+ >Edit</button>
|
|
48
|
+ </td>
|
|
49
|
+ <td>
|
|
50
|
+ <button type="button" class="btn btn-b-n" style="width: 85px; height:40px">Delete</button>
|
|
51
|
+ </td>
|
|
52
|
+ </tr>
|
|
53
|
+ </tbody>
|
|
54
|
+ </table>
|
21
|
55
|
</div>
|
|
56
|
+ <br />
|
22
|
57
|
</div>
|
23
|
|
- <!-- </section> -->
|
24
|
58
|
</template>
|
25
|
59
|
<script>
|
26
|
60
|
import { mapState, mapActions } from 'vuex';
|
27
|
61
|
|
28
|
62
|
export default {
|
29
|
63
|
name: 'userManagementPage',
|
30
|
|
- created() {
|
31
|
|
- this.getuserManagementPage();
|
32
|
|
- },
|
33
|
|
- computed: {
|
34
|
|
- ...mapState('status', ['userManagementPage']),
|
|
64
|
+ data() {
|
|
65
|
+ return {};
|
35
|
66
|
},
|
36
|
67
|
methods: {
|
37
|
|
- ...mapActions('status', ['getuserManagementPage']),
|
|
68
|
+ ...mapActions('registerIndividual', ['getIndividuals']),
|
|
69
|
+ },
|
|
70
|
+ mounted() {
|
|
71
|
+ this.getIndividuals();
|
|
72
|
+ },
|
|
73
|
+ computed: {
|
|
74
|
+ ...mapState('registerIndividual', ['individuals']),
|
38
|
75
|
},
|
39
|
76
|
};
|
40
|
77
|
</script>
|