Mercurial > gemma

diff client/src/views/Users.vue @ 542:505656a9947f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: layout refactored Introduced Topbar and Hamburger Menu
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 30 Aug 2018 14:39:24 +0200
parents d7a06b9fffc9
children b91791664554
line wrap: on
line diff
--- a/client/src/views/Users.vue	Thu Aug 30 12:57:27 2018 +0200
+++ b/client/src/views/Users.vue	Thu Aug 30 14:39:24 2018 +0200
@@ -1,42 +1,64 @@
 <template>
-  <div class="main d-flex">
-    <Sidebar v-bind:isOverlay="false"></Sidebar>
+  <div class="main d-flex flex-column">
+    <Topbar></Topbar>
+    <Sidebar></Sidebar>
     <div class="d-flex content flex-column">
-        <div class="d-flex flex-row">
-          <div :class="userlistStyle">
-            <div class="card">
-                <div class="card-header shadow-sm text-white bg-info mb-3">
-                  Users
-                </div>
-                <div class="card-body">
-                  <table id="datatable" :class="tableStyle">
-                    <thead>
-                      <tr>
-                        <th scope="col" @click="sortBy('user')" ><span>Username&nbsp;<i v-if="sortCriterion=='user'" class="fa fa-angle-down"></i></span></th>
-                        <th scope="col" @click="sortBy('country')"><span>Country&nbsp;<i v-if="sortCriterion=='country'" class="fa fa-angle-down"></i></span></th>
-                        <th scope="col" @click="sortBy('email')"><span>Email&nbsp;<i v-if="sortCriterion=='email'" class="fa fa-angle-down"></i></span></th>
-                        <th scope="col" @click="sortBy('role')"><span>Role&nbsp;<i v-if="sortCriterion=='role'" class="fa fa-angle-down"></i></span></th>
-                        <th scope="col"></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>
-                      <td><i @click="deleteUser(user.user)" class="fa fa-trash-o"></i></td>
-                      </tr>
-                    </tbody>
-                </table>
-              </div>
-              <div><i @click="prevPage" v-if="this.currentPage!=1" class="pages fa fa-caret-left"></i> {{this.currentPage}} / {{this.pages}} <i @click="nextPage" class="pages fa fa-caret-right"></i></div>
-                <div class="adduser">
-                  <button @click="addUser" class="btn btn-info pull-right shadow-sm">Add User</button>
-                </div>
+      <div class="d-flex flex-row">
+        <div :class="userlistStyle">
+          <div class="card">
+            <div class="card-header shadow-sm text-white bg-info mb-3">
+              Users
+            </div>
+            <div class="card-body">
+              <table id="datatable" :class="tableStyle">
+                <thead>
+                  <tr>
+                    <th scope="col" @click="sortBy('user')">
+                      <span>Username&nbsp;
+                        <i v-if="sortCriterion=='user'" class="fa fa-angle-down"></i>
+                      </span>
+                    </th>
+                    <th scope="col" @click="sortBy('country')">
+                      <span>Country&nbsp;
+                        <i v-if="sortCriterion=='country'" class="fa fa-angle-down"></i>
+                      </span>
+                    </th>
+                    <th scope="col" @click="sortBy('email')">
+                      <span>Email&nbsp;
+                        <i v-if="sortCriterion=='email'" class="fa fa-angle-down"></i>
+                      </span>
+                    </th>
+                    <th scope="col" @click="sortBy('role')">
+                      <span>Role&nbsp;
+                        <i v-if="sortCriterion=='role'" class="fa fa-angle-down"></i>
+                      </span>
+                    </th>
+                    <th scope="col"></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>
+                    <td>
+                      <i @click="deleteUser(user.user)" class="fa fa-trash-o"></i>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div>
+              <i @click="prevPage" v-if="this.currentPage!=1" class="pages fa fa-caret-left"></i> {{this.currentPage}} / {{this.pages}}
+              <i @click="nextPage" class="pages fa fa-caret-right"></i>
+            </div>
+            <div class="adduser">
+              <button @click="addUser" class="btn btn-info pull-right shadow-sm">Add User</button>
             </div>
           </div>
-          <Userdetail v-if="isUserDetailsVisible"></Userdetail>
+        </div>
+        <Userdetail v-if="isUserDetailsVisible"></Userdetail>
       </div>
     </div>
   </div>
@@ -103,6 +125,7 @@
 
 <script>
 import Sidebar from "../components/Sidebar";
+import Topbar from "../components/Topbar";
 import Userdetail from "../components/Userdetail";
 import store from "../store";
 import { mapGetters } from "vuex";
@@ -119,7 +142,8 @@
   },
   components: {
     Sidebar,
-    Userdetail
+    Userdetail,
+    Topbar
   },
   computed: {
     ...mapGetters("usermanagement", ["isUserDetailsVisible"]),