Mercurial > gemma
changeset 375:112527683ee9
Backed out changeset 2c58906649be
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Fri, 10 Aug 2018 11:21:58 +0200 |
| parents | 650f0dca5608 |
| children | e42f42eb9353 |
| files | client/package.json client/src/assets/application.scss client/src/components/Sidebar.vue client/src/components/Userdetail.vue client/src/main.js client/src/views/Users.vue client/yarn.lock |
| diffstat | 7 files changed, 77 insertions(+), 116 deletions(-) [+] |
line wrap: on
line diff
--- a/client/package.json Fri Aug 10 11:21:34 2018 +0200 +++ b/client/package.json Fri Aug 10 11:21:58 2018 +0200 @@ -16,10 +16,8 @@ "bootstrap": "^4.1.1", "cxlt-vue2-toastr": "^1.1.0", "font-awesome": "^4.7.0", - "jquery": "^3.3.1", "locale2": "^2.2.0", "ol": "^5.0.0", - "popper.js": "^1.14.4", "vue": "^2.5.16", "vue-router": "^3.0.1", "vuex": "^3.0.1"
--- a/client/src/assets/application.scss Fri Aug 10 11:21:34 2018 +0200 +++ b/client/src/assets/application.scss Fri Aug 10 11:21:58 2018 +0200 @@ -6,9 +6,7 @@ $iconwidth: 20px; $basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75); $basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75); -$transition: 0.5s; -$transition-fast: 0.1s; -$transition-slow: 2s; + %fully-centered { position: absolute;
--- a/client/src/components/Sidebar.vue Fri Aug 10 11:21:34 2018 +0200 +++ b/client/src/components/Sidebar.vue Fri Aug 10 11:21:58 2018 +0200 @@ -92,6 +92,9 @@ $sidebar-full-width: 210px; $collapser-left-offset: 170px; $sidebar-collapsed-width: 0px; +$transition: 0.5s; +$transition-fast: 0.1s; +$transition-slow: 2s; .collapser { position: absolute;
--- a/client/src/components/Userdetail.vue Fri Aug 10 11:21:34 2018 +0200 +++ b/client/src/components/Userdetail.vue Fri Aug 10 11:21:58 2018 +0200 @@ -1,113 +1,58 @@ <template> - <div class="userdetail card"> - <div @click="showDetails" class="card-header bg-light" id="headingOne"> - <h5 class="mb-0"> - <div class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> - <div class="d-flex d-flex-row"> - <div class="name">Name: {{this.user.user}}</div> - <div class="mail">Email: {{this.user.email}}</div> - <div class="country">Country: {{this.user.country}}</div> - <div class="role">Role: {{this.user.role}}</div> - </div> - </div> - </h5> - </div> - <div id="collapseOne" :class="collapseStyle" aria-labelledby="headingOne" data-parent="#accordion"> + <div class="userdetails card shadow" style="width: 35rem;"> + <div class="card" style="width: 35rem;"> + <div class="card-header text-white bg-info mb-3"> + {{ currentUser.user }} + </div> <div class="card-body"> - <div> - <form class="details" @submit.prevent="editUser"> - <div class="form-group"><label for="user">User</label><input class="form-control" id="user" v-model="currentUser.user"></div> - <div class="form-group"><label for="email">Email</label><input class="form-control" id="email" v-model="currentUser.email"></div> - <div class="form-group"> - <label for="country">Country</label> - <select id="country" class="form-control" v-model="currentUser.country"> - <option disabled value="">Please select one</option> - <option>AT</option> - <option>RO</option> - <option>BG</option> - </select> - </div> - <div class="form-group"> - <label for="role">Role</label> - <select id="role" class="form-control" v-model="currentUser.role"> - <option disabled value="">Please select one</option> - <option value="sys_admin">Sysadmin</option> - <option value="waterway_admin">Waterway Admin</option> - <option value="waterway_user">Waterway User</option> - </select> - </div> - <button class="btn btn-primary pull-right">Submit</button> - </form> - </div> - </div> + <form> + <div class="form-group"> + <label for="country">Country</label> + <select v-model="currentUser.country"> + <option disabled value="">Please select one</option> + <option>AT</option> + <option>RO</option> + <option>BG</option> + </select> + </div> + <div class="form-group"> + <label for="email">Email address</label> + <input type="email" class="form-control" id="email" aria-describedby="emailHelp" v-model="currentUser.email"> + </div> + <div class="form-group"> + <label for="role">Role</label> + <select v-model="currentUser.role"> + <option disabled value="">Please select one</option> + <option value="sys_admin">Sysadmin</option> + <option value="waterway_admin">Waterway Admin</option> + <option value="waterway_user">Waterway User</option> + </select> + </div> + <button type="submit" class="btn btn-primary">Submit</button> + </form> + </div> </div> </div> </template> <style lang="scss"> @import "../assets/application.scss"; -.userdetail { - text-align: left !important; + +.userdetails { + margin-top: 20px; + width: 50vw; } -.details { - width: 30vw; - height: 45vh; -} -.name, -.mail, -.country, -.role { - padding-right: $large-offset; + +.shadow { + box-shadow: $basic-shadow-light !important; } </style> <script> -import { HTTP } from "../lib/http"; -import app from "../main"; -import store from "../store"; - export default { name: "userdetail", - props: ["user"], - data() { - return { - currentUser: Object.assign({}, this.user), - show: false - }; - }, - computed: { - collapseStyle() { - return { - collapse: true, - show: this.show - }; - } - }, - methods: { - editUser() { - HTTP.put("/users/" + this.user.user, { - headers: { "X-Gemma-Auth": localStorage.getItem("token") } - }) - .then(() => { - this.show = false; - store.dispatch("usermanagement/loadUsers").catch(error => { - const { status, data } = error.response; - app.$toast.error({ - title: "Backend Error", - message: `${status}: ${data}` - }); - }); - }) - .catch(error => { - const { status, data } = error.response; - app.$toast.error({ - title: "Backend Error", - message: `${status}: ${data}` - }); - }); - }, - showDetails() { - this.show = !this.show; - } - } + props: ["currentUser"], + data() {}, + computed: {}, + methods: {} }; </script>
--- a/client/src/main.js Fri Aug 10 11:21:34 2018 +0200 +++ b/client/src/main.js Fri Aug 10 11:21:58 2018 +0200 @@ -10,7 +10,6 @@ import "../node_modules/font-awesome/css/font-awesome.min.css"; import "../node_modules/ol/ol.css"; import "../node_modules/cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css"; -import "bootstrap"; var toastrConfigs = { position: "bottom center",
--- a/client/src/views/Users.vue Fri Aug 10 11:21:34 2018 +0200 +++ b/client/src/views/Users.vue Fri Aug 10 11:21:58 2018 +0200 @@ -12,12 +12,28 @@ users </div> <div class="card-body"> - <div class="accordion" v-for="user in this.users" v-bind:key="user.name"> - <Userdetail :user="user"></Userdetail> - </div> - </div> + <table class="table table-hover"> + <thead> + <tr> + <th scope="col">Username</th> + <th scope="col">Country</th> + <th scope="col">Email</th> + <th scope="col">Role</th> + </tr> + </thead> + <tbody> + <tr v-for="user in users" :key="user.user" @click="selectUser(user.user)"> + <td>{{ user.user }}</td> + <td>{{ user.country }}</td> + <td>{{ user.email}}</td> + <td>{{ user.role }}</td> + </tr> + </tbody> + </table> + </div> </div> </div> + <Userdetail v-bind:currentUser="currentUser"></Userdetail> </div> </div> </div> @@ -61,6 +77,11 @@ export default { name: "userview", + data() { + return { + currentUser: null + }; + }, components: { Sidebar, Userdetail @@ -68,7 +89,12 @@ computed: { ...mapGetters("usermanagement", ["users"]) }, - methods: {}, + methods: { + selectUser(name) { + const user = this.$store.getters["usermanagement/getUserByName"](name); + this.currentUser = user; + } + }, beforeRouteEnter(to, from, next) { store .dispatch("usermanagement/loadUsers")
--- a/client/yarn.lock Fri Aug 10 11:21:34 2018 +0200 +++ b/client/yarn.lock Fri Aug 10 11:21:58 2018 +0200 @@ -5195,10 +5195,6 @@ isemail "3.x.x" topo "2.x.x" -jquery@^3.3.1: - version "3.3.1" - resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca" - js-base64@^2.1.8, js-base64@^2.1.9: version "2.4.5" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.5.tgz#e293cd3c7c82f070d700fc7a1ca0a2e69f101f92" @@ -6756,10 +6752,6 @@ version "1.0.11" resolved "https://registry.yarnpkg.com/pofile/-/pofile-1.0.11.tgz#35aff58c17491d127a07336d5522ebc9df57c954" -popper.js@^1.14.4: - version "1.14.4" - resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6" - portfinder@^1.0.13, portfinder@^1.0.9: version "1.0.13" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"