Mercurial > gemma
changeset 424:abe4efa339bc
Merged.
| author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
|---|---|
| date | Thu, 16 Aug 2018 15:35:47 +0200 |
| parents | 42e64da55095 (current diff) 9869bc03155e (diff) |
| children | c49f4c1808b1 |
| files | |
| diffstat | 3 files changed, 61 insertions(+), 25 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Userdetail.vue Thu Aug 16 15:35:20 2018 +0200 +++ b/client/src/components/Userdetail.vue Thu Aug 16 15:35:47 2018 +0200 @@ -1,7 +1,7 @@ <template> <div class="userdetails shadow"> <div class="card"> - <div class="card-header text-white bg-info mb-3"> + <div class="card-header shadow-sm text-white bg-info mb-3"> {{ currentUser.user }} <span @click="closeDetailview" class="pull-right"><i class="fa fa-close"></i></span> </div> @@ -17,9 +17,7 @@ <label for="country">Country</label> <select class="form-control form-control-sm" v-on:change="validateCountry" v-model="currentUser.country"> <option disabled value="">Please select one</option> - <option>AT</option> - <option>RO</option> - <option>BG</option> + <option v-for="country in countries" v-bind:value="country" v-bind:key="country">{{country}}</option> </select> <div v-show="errors.country" class="text-danger"><small><i class="fa fa-warning"></i> {{ errors.country }}</small></div> </div> @@ -50,7 +48,7 @@ </div> </div> <div> - <button type="submit" :disabled="submitted" class="btn btn-info pull-right">Submit</button> + <button type="submit" :disabled="submitted" class="shadow-sm btn btn-info pull-right">Submit</button> </div> </form> </div> @@ -76,13 +74,10 @@ margin-left: $offset; font-size: 0.9rem; } - -.shadow { - box-shadow: $basic-shadow-light !important; -} </style> <script> import { displayError } from "../lib/errors.js"; +import { mapGetters } from "vuex"; const emptyErrormessages = () => { return { @@ -142,6 +137,7 @@ } }, computed: { + ...mapGetters("application", ["countries"]), user() { return this.$store.getters["usermanagement/currentUser"]; },
--- a/client/src/stores/application.js Thu Aug 16 15:35:20 2018 +0200 +++ b/client/src/stores/application.js Thu Aug 16 15:35:47 2018 +0200 @@ -5,9 +5,13 @@ secondaryLogo: process.env.VUE_APP_SECONDARY_LOGO_URL, sidebar: { iscollapsed: false - } + }, + countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"] }, getters: { + countries: state => { + return state.countries; + }, sidebarCollapsed: state => { return state.sidebar.iscollapsed; },
--- a/client/src/views/Users.vue Thu Aug 16 15:35:20 2018 +0200 +++ b/client/src/views/Users.vue Thu Aug 16 15:35:47 2018 +0200 @@ -2,23 +2,20 @@ <div class="main d-flex"> <Sidebar v-bind:isOverlay="false"></Sidebar> <div class="d-flex content flex-column"> - <div> - <h1>User Management</h1> - </div> <div class="d-flex flex-row"> <div :class="userlistStyle"> <div class="card"> - <div class="card-header text-white bg-info mb-3"> - users + <div class="card-header shadow-sm text-white bg-info mb-3"> + Users </div> <div class="card-body"> - <table class="table table-hover"> + <table :class="tableStyle"> <thead> <tr> - <th scope="col">Username</th> - <th scope="col">Country</th> - <th scope="col">Email</th> - <th scope="col">Role</th> + <th scope="col" @click="sortBy('user')" ><span>Username <i v-if="sortCriterion=='user'" class="fa fa-angle-down"></i></span></th> + <th scope="col" @click="sortBy('country')"><span>Country <i v-if="sortCriterion=='country'" class="fa fa-angle-down"></i></span></th> + <th scope="col" @click="sortBy('email')"><span>Email <i v-if="sortCriterion=='email'" class="fa fa-angle-down"></i></span></th> + <th scope="col" @click="sortBy('role')"><span>Role <i v-if="sortCriterion=='role'" class="fa fa-angle-down"></i></span></th> <th scope="col"></th> </tr> </thead> @@ -34,7 +31,7 @@ </table> </div> <div class="adduser"> - <button @click="addUser" class="btn btn-info pull-right">Add User</button> + <button @click="addUser" class="btn btn-info pull-right shadow-sm">Add User</button> </div> </div> </div> @@ -65,6 +62,7 @@ margin-top: $large-offset; margin-right: $offset; height: 100%; + min-width: 520px; } .userlistsmall { @@ -75,20 +73,31 @@ width: 70vw; } -.shadow { - box-shadow: $basic-shadow-light !important; +.table { + width: 90% !important; + margin: auto; +} + +.table th { + cursor: pointer; } .table th, td { font-size: 0.9rem; border-top: 0px !important; + text-align: left; + padding: 0.5rem !important; } .table td { font-size: 0.9rem; cursor: pointer; } + +tr span { + display: flex; +} </style> <script> @@ -101,14 +110,38 @@ export default { name: "userview", data() { - return {}; + return { sortCriterion: "user" }; }, components: { Sidebar, Userdetail }, computed: { - ...mapGetters("usermanagement", ["users", "isUserDetailsVisible"]), + ...mapGetters("usermanagement", ["isUserDetailsVisible"]), + users() { + let users = [...this.$store.getters["usermanagement/users"]]; + users.sort((a, b) => { + if ( + a[this.sortCriterion].toLowerCase() < + b[this.sortCriterion].toLowerCase() + ) + return -1; + if ( + a[this.sortCriterion].toLowerCase() > + b[this.sortCriterion].toLowerCase() + ) + return 1; + return 0; + }); + return users; + }, + tableStyle() { + return { + table: true, + "table-hover": true, + "table-sm": this.isUserDetailsVisible + }; + }, userlistStyle() { return { userlist: true, @@ -119,6 +152,9 @@ } }, methods: { + sortBy(criterion) { + this.sortCriterion = criterion; + }, deleteUser(name) { this.$store .dispatch("usermanagement/deleteUser", { name: name })