Mercurial > gemma
changeset 362:2c58906649be
refactor: user detail view refactored to accordion
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Wed, 08 Aug 2018 18:14:16 +0200 |
| parents | 55388227e7da |
| children | 45d4399f6c15 |
| 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, 115 insertions(+), 76 deletions(-) [+] |
line wrap: on
line diff
--- a/client/package.json Tue Aug 07 19:28:03 2018 +0200 +++ b/client/package.json Wed Aug 08 18:14:16 2018 +0200 @@ -16,8 +16,10 @@ "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 Tue Aug 07 19:28:03 2018 +0200 +++ b/client/src/assets/application.scss Wed Aug 08 18:14:16 2018 +0200 @@ -6,7 +6,9 @@ $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 Tue Aug 07 19:28:03 2018 +0200 +++ b/client/src/components/Sidebar.vue Wed Aug 08 18:14:16 2018 +0200 @@ -92,9 +92,6 @@ $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 Tue Aug 07 19:28:03 2018 +0200 +++ b/client/src/components/Userdetail.vue Wed Aug 08 18:14:16 2018 +0200 @@ -1,58 +1,113 @@ <template> - <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"> - <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 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 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> + </h5> </div> + <div id="collapseOne" :class="collapseStyle" aria-labelledby="headingOne" data-parent="#accordion"> + <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> </div> </div> </template> <style lang="scss"> @import "../assets/application.scss"; - -.userdetails { - margin-top: 20px; - width: 50vw; +.userdetail { + text-align: left !important; } - -.shadow { - box-shadow: $basic-shadow-light !important; +.details { + width: 30vw; + height: 45vh; +} +.name, +.mail, +.country, +.role { + padding-right: $large-offset; } </style> <script> +import { HTTP } from "../lib/http"; +import app from "../main"; +import store from "../store"; + export default { name: "userdetail", - props: ["currentUser"], - data() {}, - computed: {}, - methods: {} + 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; + } + } }; </script>
--- a/client/src/main.js Tue Aug 07 19:28:03 2018 +0200 +++ b/client/src/main.js Wed Aug 08 18:14:16 2018 +0200 @@ -10,6 +10,7 @@ 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 Tue Aug 07 19:28:03 2018 +0200 +++ b/client/src/views/Users.vue Wed Aug 08 18:14:16 2018 +0200 @@ -12,28 +12,12 @@ users </div> <div class="card-body"> - <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 class="accordion" v-for="user in this.users" v-bind:key="user.name"> + <Userdetail :user="user"></Userdetail> + </div> + </div> </div> </div> - <Userdetail v-bind:currentUser="currentUser"></Userdetail> </div> </div> </div> @@ -77,11 +61,6 @@ export default { name: "userview", - data() { - return { - currentUser: null - }; - }, components: { Sidebar, Userdetail @@ -89,12 +68,7 @@ computed: { ...mapGetters("usermanagement", ["users"]) }, - methods: { - selectUser(name) { - const user = this.$store.getters["usermanagement/getUserByName"](name); - this.currentUser = user; - } - }, + methods: {}, beforeRouteEnter(to, from, next) { store .dispatch("usermanagement/loadUsers")
--- a/client/yarn.lock Tue Aug 07 19:28:03 2018 +0200 +++ b/client/yarn.lock Wed Aug 08 18:14:16 2018 +0200 @@ -5195,6 +5195,10 @@ 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" @@ -6752,6 +6756,10 @@ 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"