added user repo and group management working now

src/components/User.vue

@@ -5,6 +5,38 @@
             <div class="hero-body">
                 <div class="container has-text-centered">
                     <h3 class="title">Manage users</h3>
+                        <div>{{users}}</div>
+
+                    <div id="userTable">
+                        <table>
+                            <thead>
+                            <tr>
+                                <th v-for="col in columns" v-on:click="sortTable(col)">{{col}}
+                                    <div class="arrow" v-if="col == sortColumn" v-bind:class="[ascending ? 'arrow_up' : 'arrow_down']"></div>
+                                </th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr v-for="row in get_rows()">
+                                <td v-for="col in columns">{{row[col]}}</td>
+                            </tr>
+                            </tbody>
+                        </table>
+                        <div class="pagination">
+                            <div class="number"
+                                 v-for="i in num_pages()"
+                                 v-bind:class="[i === currentPage ? 'active' : '']"
+                                 v-on:click="change_page(i)">{{i}}</div>
+                        </div>
+                    </div>
+
+                    <h3 class="title">Add User</h3>
+                    <label>
+                        <input v-model="user.first_name" placeholder="First name">
+                    </label>
+                    <p>Name is: {{ user.first_name }}</p>
+
+                    <button v-on:click="createUser">{{$t('create_user')}}</button>
 
                     <p class="subtitle error-msg">{{ errorMsg }}</p>
                 </div>
@@ -17,24 +49,80 @@
 <script>
     import { EventBus } from '@/utils'
     import {getRemainingJwtValiditySeconds} from "../utils";
+    import { RepositoryFactory} from "@/api/RepositoryFactory";
+    const UserRepository = RepositoryFactory.get('user');
 
     export default {
-        data () {
+        data() {
             return {
-                users: '',
+                user: {},
+                users: [],
                 errorMsg: '',
+                sortColumn: '',
+                currentPage: 1,
+                elementsPerPage: 5
             };
         },
         methods: {
+            fetch() {
+                this.isLoading = true;
+                // const { data } = await GroupRepository.get();
+                UserRepository.getUsers()
+                    .then(response => {
+                        this.users = response.data;
+                        this.isLoading = false;
+                        this.$log.debug(response);
+                    });
 
-        },
-        mounted () {
+            },
+            get_rows() {
+                var start = (this.currentPage-1) * this.elementsPerPage;
+                var end = start + this.elementsPerPage;
+                return this.users.slice(start, end);
+            },
+            num_pages() {
+                return Math.ceil(this.users.length / this.elementsPerPage);
+            },
+            change_page(page) {
+                this.currentPage = page;
+            },
+            sortTable(col) {
+                if (this.sortColumn === col) {
+                    this.ascending = !this.ascending;
+                } else {
+                    this.ascending = true;
+                    this.sortColumn = col;
+                }
 
+                var ascending = this.ascending;
+
+                this.users.sort(function(a, b) {
+                    if (a[col] > b[col]) {
+                        return ascending ? 1 : -1
+                    } else if (a[col] < b[col]) {
+                        return ascending ? -1 : 1
+                    }
+                    return 0;
+                })
+            },
+            createUser(){
+                this.$log.info("Creating new user...");
+                UserRepository.createUser(this.user);
+                this.fetch();
+            },
         },
-        beforeDestroy () {
+        mounted() {
+            this.fetch();
+        },
+        beforeDestroy() {
         },
         computed: {
-
+            columns() {
+                if (this.users.length === 0) {
+                    return [];
+                }
+                return Object.keys(this.users[0]);
+            },
         },
     }
 </script>