Mercurial > gemma

annotate client/src/components/Userdetail.vue @ 362:2c58906649be

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refactor: user detail view refactored to accordion
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 08 Aug 2018 18:14:16 +0200
parents dc8052b60485
children c63200982ce7
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
362
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
2 <div class="userdetail card">
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
3 <div @click="showDetails" class="card-header bg-light" id="headingOne">
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
4 <h5 class="mb-0">
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
5 <div class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
6 <div class="d-flex d-flex-row">
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
7 <div class="name">Name: {{this.user.user}}</div>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
8 <div class="mail">Email: {{this.user.email}}</div>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
9 <div class="country">Country: {{this.user.country}}</div>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
10 <div class="role">Role: {{this.user.role}}</div>
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
11 </div>
362
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
12 </div>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
13 </h5>
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
14 </div>
362
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
15 <div id="collapseOne" :class="collapseStyle" aria-labelledby="headingOne" data-parent="#accordion">
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
16 <div class="card-body">
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
17 <div>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
18 <form class="details" @submit.prevent="editUser">
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
19 <div class="form-group"><label for="user">User</label><input class="form-control" id="user" v-model="currentUser.user"></div>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
20 <div class="form-group"><label for="email">Email</label><input class="form-control" id="email" v-model="currentUser.email"></div>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
21 <div class="form-group">
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
22 <label for="country">Country</label>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
23 <select id="country" class="form-control" v-model="currentUser.country">
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
24 <option disabled value="">Please select one</option>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
25 <option>AT</option>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
26 <option>RO</option>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
27 <option>BG</option>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
28 </select>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
29 </div>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
30 <div class="form-group">
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
31 <label for="role">Role</label>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
32 <select id="role" class="form-control" v-model="currentUser.role">
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
33 <option disabled value="">Please select one</option>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
34 <option value="sys_admin">Sysadmin</option>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
35 <option value="waterway_admin">Waterway Admin</option>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
36 <option value="waterway_user">Waterway User</option>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
37 </select>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
38 </div>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
39 <button class="btn btn-primary pull-right">Submit</button>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
40 </form>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
41 </div>
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
42 </div>
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
43 </div>
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
44 </div>
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
45 </template>
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
46
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47 <style lang="scss">
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48 @import "../assets/application.scss";
362
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
49 .userdetail {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
50 text-align: left !important;
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
51 }
362
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
52 .details {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
53 width: 30vw;
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
54 height: 45vh;
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
55 }
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
56 .name,
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
57 .mail,
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
58 .country,
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
59 .role {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
60 padding-right: $large-offset;
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
61 }
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
62 </style>
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
63 <script>
362
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
64 import { HTTP } from "../lib/http";
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
65 import app from "../main";
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
66 import store from "../store";
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
67
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
68 export default {
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 name: "userdetail",
362
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
70 props: ["user"],
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
71 data() {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
72 return {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
73 currentUser: Object.assign({}, this.user),
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
74 show: false
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
75 };
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
76 },
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
77 computed: {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
78 collapseStyle() {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
79 return {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
80 collapse: true,
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
81 show: this.show
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
82 };
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
83 }
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
84 },
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
85 methods: {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
86 editUser() {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
87 HTTP.put("/users/" + this.user.user, {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
88 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
89 })
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
90 .then(() => {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
91 this.show = false;
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
92 store.dispatch("usermanagement/loadUsers").catch(error => {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
93 const { status, data } = error.response;
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
94 app.$toast.error({
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
95 title: "Backend Error",
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
96 message: `${status}: ${data}`
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
97 });
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
98 });
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
99 })
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
100 .catch(error => {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
101 const { status, data } = error.response;
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
102 app.$toast.error({
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
103 title: "Backend Error",
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
104 message: `${status}: ${data}`
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
105 });
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
106 });
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
107 },
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
108 showDetails() {
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
109 this.show = !this.show;
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
110 }
2c58906649be refactor: user detail view refactored to accordion
Thomas Junk <thomas.junk@intevation.de>
parents: 356
diff changeset
111 }
356
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
112 };
dc8052b60485 feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
113 </script>