Mercurial > gemma

comparison client/src/components/usermanagement/Usermanagement.vue @ 1606:a4d8f284db93

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
spacer in admin interface added
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 17 Dec 2018 15:54:27 +0100
parents 32a34151d9d7
children f2d24dceecc7
comparison
equal deleted inserted replaced
1605:ef5cc5f1c757 1606:a4d8f284db93
1 <template> 1 <template>
2 <div class="main d-flex flex-row"> 2 <div class="main d-flex flex-row">
3 <div :class="spacerStyle"></div> 3 <Spacer></Spacer>
4 <div class="d-flex content flex-column"> 4 <div class="d-flex content flex-column">
5 <div class="d-flex flex-row"> 5 <div class="d-flex flex-row">
6 <div :class="userlistStyle"> 6 <div :class="userlistStyle">
7 <div class="card"> 7 <div class="card">
8 <h6 8 <h6
129 } 129 }
130 130
131 .userdetails { 131 .userdetails {
132 width: 50%; 132 width: 50%;
133 } 133 }
134 .spacer {
135 height: 100vh;
136 margin-left: $offset;
137 }
138
139 .spacer-collapsed {
140 min-width: $icon-width + $offset;
141 transition: $transition-fast;
142 }
143
144 .spacer-expanded {
145 min-width: $sidebar-width + $offset;
146 }
147 134
148 .main { 135 .main {
149 height: 100vh; 136 height: 100vh;
150 } 137 }
151 138
209 */ 196 */
210 import Userdetail from "./Userdetail"; 197 import Userdetail from "./Userdetail";
211 import store from "../../store"; 198 import store from "../../store";
212 import { mapGetters, mapState } from "vuex"; 199 import { mapGetters, mapState } from "vuex";
213 import { displayError } from "../../lib/errors.js"; 200 import { displayError } from "../../lib/errors.js";
201 import Spacer from "../Spacer";
214 202
215 export default { 203 export default {
216 name: "userview", 204 name: "userview",
217 data() { 205 data() {
218 return { 206 return {
220 pageSize: 20, 208 pageSize: 20,
221 currentPage: 1 209 currentPage: 1
222 }; 210 };
223 }, 211 },
224 components: { 212 components: {
225 Userdetail 213 Userdetail,
214 Spacer
226 }, 215 },
227 computed: { 216 computed: {
228 ...mapGetters("usermanagement", ["isUserDetailsVisible"]), 217 ...mapGetters("usermanagement", ["isUserDetailsVisible"]),
229 ...mapState("application", ["showSidebar"]), 218 ...mapState("application", ["showSidebar"]),
230 spacerStyle() {
231 return [
232 "spacer",
233 {
234 "spacer-expanded": this.showSidebar,
235 "spacer-collapsed": !this.showSidebar
236 }
237 ];
238 },
239 users() { 219 users() {
240 let users = [...this.$store.getters["usermanagement/users"]]; 220 let users = [...this.$store.getters["usermanagement/users"]];
241 users.sort((a, b) => { 221 users.sort((a, b) => {
242 if ( 222 if (
243 a[this.sortCriterion].toLowerCase() < 223 a[this.sortCriterion].toLowerCase() <