added repo for API access, still strange error in Group.vue

src/App.vue

@@ -43,10 +43,10 @@
 
       this.$nextTick(() =>{
         window.setInterval(() => {
-          this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token));
+          // this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token));
           this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
           this.refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);
-          this.$log.debug(this.$store.state);
+          // this.$log.debug(this.$store.state);
         }, 1000);
       });
 

src/api/Repository.js

@@ -1,12 +1,12 @@
 // Repository.js
 
-import Vue from 'vue';
+import Vue from "vue";
 import axios from "axios";
+import store from "@/store";
 
 const baseDomain = "http://localhost:5443";
 const API_URL = `${baseDomain}/api/v1`;
 
 export default axios.create({
-    API_URL,
-    headers: { headers: { Authorization: `Bearer ${jwt}` } },
+    baseURL: API_URL, headers: { Authorization: `Bearer ${store.state.access_token}` },
 });

src/api/RepositoryFactory.js

@@ -0,0 +1,11 @@
+// RepositoryFactory.js
+
+import GroupRepository from "./groupRepository";
+
+const repositories = {
+    group: GroupRepository,
+};
+
+export const RepositoryFactory = {
+    get: name => repositories[name],
+};

src/api/groupRepository.js

@@ -0,0 +1,19 @@
+// groupRepository.js
+
+import Repository from "./Repository";
+
+const resource = "/group";
+
+export default {
+    get() {
+        return Repository.get(`${resource}`);
+    },
+
+    getGroup(groupId) {
+        return Repository.get(`${resource}/${groupId}`);
+    },
+
+    createGroup(groupData) {
+        return Repository.post(`${resource}`, groupData);
+    },
+};

src/components/Group.vue

@@ -5,6 +5,55 @@
             <div class="hero-body">
                 <div class="container has-text-centered">
                     <h2 class="title">Groups</h2>
+
+
+                    <div id="groupTable">
+                        <table>
+                            <thead>
+                            <tr>
+                                <th v-for="col in group_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_group_rows()">
+                                <td v-for="col in group_columns">{{row[col]}}</td>
+                            </tr>
+                            </tbody>
+                        </table>
+                        <div class="pagination">
+                            <div class="number"
+                                 v-for="i in num_group_pages()"
+                                 v-bind:class="[i == currentPage ? 'active' : '']"
+                                 v-on:click="change_page(i)">{{i}}</div>
+                        </div>
+                    </div>
+
+
+                    <div id="sixthTable">
+                        <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>
+
                     <p class="subtitle error-msg">{{ errorMsg }}</p>
                     <h3 class="title">Add Group</h3>
                     <input v-model="group.name" placeholder="Group name">
@@ -23,29 +72,98 @@
 
 <script>
     import { EventBus } from '@/utils'
-    import {getRemainingJwtValiditySeconds} from "../utils";
+    import { RepositoryFactory} from "@/api/RepositoryFactory";
+    const GroupRepository = RepositoryFactory.get('group');
 
     export default {
         data () {
             return {
-                email: '',
+                isLoading: false,
                 errorMsg: '',
+                groups: [],
                 group: {},
+                currentPage: 1,
+                elementsPerPage: 3,
+                ascending: false,
+                sortColumn: '',
+                rows: [
+                    { id: 1, name: "Chandler Bing", phone: '305-917-1301', profession: 'IT Manager' },
+                    { id: 2, name: "Ross Geller", phone: '210-684-8953', profession: 'Paleontologist' },
+                    { id: 3, name: "Rachel Green", phone: '765-338-0312', profession: 'Waitress'},
+                    { id: 4, name: "Monica Geller", phone: '714-541-3336', profession: 'Head Chef' },
+                    { id: 5, name: "Joey Tribbiani", phone: '972-297-6037', profession: 'Actor' },
+                    { id: 6, name: "Phoebe Buffay", phone: '760-318-8376', profession: 'Masseuse' }
+                ],
             };
         },
         methods: {
-            create_group () {
+            fetch(){
+                this.isLoading = true;
+                // const { data } = await GroupRepository.get();
+                GroupRepository.get()
+                    .then(response => {
+                        this.groups = response.data;
+                        this.isLoading = false;
+                        this.$log.debug(response);
+                    });
 
             },
+            sortTable(col) {
+                if (this.sortColumn === col) {
+                    this.ascending = !this.ascending;
+                } else {
+                    this.ascending = true;
+                    this.sortColumn = col;
+                }
+
+                var ascending = this.ascending;
+
+                this.rows.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;
+                })
+            },
+            num_pages() {
+                return Math.ceil(this.rows.length / this.elementsPerPage);
+            },
+            num_group_pages() {
+                return Math.ceil(this.groups.length / this.elementsPerPage);
+            },
+            get_rows() {
+                var start = (this.currentPage-1) * this.elementsPerPage;
+                var end = start + this.elementsPerPage;
+                return this.rows.slice(start, end);
+            },
+            get_group_rows() {
+                var start = (this.currentPage-1) * this.elementsPerPage;
+                var end = start + this.elementsPerPage;
+                return this.groups.slice(start, end);
+            },
+            change_page(page) {
+                this.currentPage = page;
+            },
+
         },
         mounted () {
-
-
-
-        },
-        beforeDestroy () {
+            this.fetch();
         },
         computed: {
+            columns() {
+                if (this.rows.length === 0) {
+                    return [];
+                }
+                return Object.keys(this.rows[0])
+            },
+            group_columns() {
+                if (this.groups.length === 0) {
+                    return [];
+                }
+                return Object.keys(this.groups[0])
+            }
 
         },
     }
@@ -56,4 +174,102 @@
         color: red;
         font-weight: bold;
     }
+    table {
+        font-family: 'Open Sans', sans-serif;
+        width: 750px;
+        border-collapse: collapse;
+        border: 3px solid #44475C;
+        margin: 10px 10px 0 10px;
+    }
+
+    table th {
+        text-transform: uppercase;
+        text-align: left;
+        background: #44475C;
+        color: #FFF;
+        cursor: pointer;
+        padding: 8px;
+        min-width: 30px;
+    }
+    table th:hover {
+        background: #717699;
+    }
+    table td {
+        text-align: left;
+        padding: 8px;
+        border-right: 2px solid #7D82A8;
+    }
+    table td:last-child {
+        border-right: none;
+    }
+    table tbody tr:nth-child(2n) td {
+        background: #D4D8F9;
+    }
+
+    table {
+        font-family: 'Open Sans', sans-serif;
+        width: 750px;
+        border-collapse: collapse;
+        border: 3px solid #44475C;
+        margin: 10px 10px 0 10px;
+    }
+
+    table th {
+        text-transform: uppercase;
+        text-align: left;
+        background: #44475C;
+        color: #FFF;
+        cursor: pointer;
+        padding: 8px;
+        min-width: 30px;
+    }
+    table th:hover {
+        background: #717699;
+    }
+    table td {
+        text-align: left;
+        padding: 8px;
+        border-right: 2px solid #7D82A8;
+    }
+    table td:last-child {
+        border-right: none;
+    }
+    table tbody tr:nth-child(2n) td {
+        background: #D4D8F9;
+    }
+
+    .pagination {
+        font-family: 'Open Sans', sans-serif;
+        text-align: right;
+        width: 750px;
+        padding: 8px;
+    }
+
+    .arrow_down {
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAaCAYAAABPY4eKAAAAAXNSR0IArs4c6QAAAvlJREFUSA29Vk1PGlEUHQaiiewslpUJiyYs2yb9AyRuJGm7c0VJoFXSX9A0sSZN04ULF12YEBQDhMCuSZOm1FhTiLY2Rky0QPlQBLRUsICoIN/0PCsGyox26NC3eTNn3r3n3TvnvvsE1PkwGo3yUqkkEQqFgw2Mz7lWqwng7ztN06mxsTEv8U0Aam5u7r5EInkplUol/f391wAJCc7nEAgE9Uwmkzo4OPiJMa1Wq6cFs7Ozt0H6RqlUDmJXfPIx+qrX69Ti4mIyHA5r6Wq1egND+j+IyW6QAUoul18XiUTDNHaSyGazKcZtdgk8wqhUKh9o/OMvsVgsfHJy0iWqVrcQNRUMBnd6enqc9MjISAmRP3e73T9al3XnbWNjIw2+KY1Gc3imsNHR0YV4PP5+d3e32h3K316TySQFoX2WyWR2glzIO5fLTSD6IElLNwbqnFpbWyO/96lCoai0cZjN5kfYQAYi5H34fL6cxWIZbya9iJyAhULBHAqFVlMpfsV/fHxMeb3er+Vy+VUzeduzwWC45XA4dlD/vEXvdDrj8DvURsYEWK3WF4FA4JQP9mg0WrHZbEYmnpa0NxYgPVObm5teiLABdTQT8a6vrwdRWhOcHMzMzCiXlpb2/yV6qDttMpkeshEzRk4Wo/bfoe4X9vb2amzGl+HoXNT29vZqsVi0sK1jJScG+Xx+HGkL4Tew2TPi5zUdQQt9otPpuBk3e0TaHmMDh1zS7/f780S0zX6Yni+NnBj09fUZUfvudDrNZN+GkQbl8Xi8RLRtHzsB9Hr9nfn5+SjSeWUCXC7XPq5kw53wsNogjZNohYXL2EljstvtrAL70/mVaW8Y4OidRO1/gwgbUMvcqGmcDc9aPvD1gnTeQ+0nmaInokRj0nHh+uvIiVOtVvt2a2vLv7Ky0tL3cRTXIcpPAwMDpq6R4/JXE4vFQ5FI5CN+QTaRSFCYc8vLy1l0rge4ARe5kJ/d27kYkLXoy2Jo4C7K8CZOsEBvb+9rlUp1xNXPL7v3IDwxvPD6AAAAAElFTkSuQmCC')
+    }
+    .arrow_up {
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAAXNSR0IArs4c6QAAAwpJREFUSA21Vt1PUmEYP4dvkQ8JFMwtBRocWAkDbiqXrUWXzU1rrTt0bdVqXbb1tbW16C9IBUSmm27cODdneoXjputa6069qwuW6IIBIdLvdaF4OAcOiGeDc87zPs/vd57P96WpFq7p6enbGo1mjKZpeTabjU1MTCRagGnOZHFxcXxtbe1XKpUq7+zslJeXl//Mz8+Hy+Uy3RxSE9qTk5M3otFooVQqgef4Wl9f343FYoEmoISrxuNxFX5f9vb2jhn/PxUKhfLS0tIPfFifUESRUMV8Pv/M6XReRm5rTGQyGeXxeGxYe1ezeBpBOBx2rKysbO7v79d4Wy3Y2Nj4GQqFbgnhaugxwiuGJx99Pp9FLBbXxYTXvTqd7v3MzIy6riIWGxJnMpl7AwMD14xGYyMsSq1WUyQdUqn0eSPlusQIsbGrq+vl4OCgvhFQZd1utyv1en0gEolcqsi47nWJlUrlG5fLZVcoFFy2nDKSDpIWlUoVTCQSEk4lCHmJMZ2GTCbTiMVikfIZ88l7enoos9l8dXt7+z6fDicxSJUokqDX6xXcl2wCROoc0vQCWL3sNfLOSdzR0fHY4XC4tVotl40gmVwup9xuN4OQv+UyqCFGH9rg7SOGYVRcBs3IEG4J0nVnamrqOtvuBDGGgQg9+wHFcVEi4a0LNkbdd6TrPKo8ODc311mteIIYjT/a398/jK+s1jnVM0kXoufCFvq0GuiIGEVgQIhfoygM1QrteEa9dAL7ITiYCt4RMabOK5AyKKzKWtvupLcRciu8D5J0EuDDPyT/Snd39yh6VtY2NhYQSR9G79Ds7OxdskRjEyAufvb7/cPoO5Z6e1+xtVKrq6vfcFzyi/A3ZrPZ3GdNSlwgo5ekE4X2RIQGf2C1WlufFE0GBeGWYQ8YERWLxQtnUVB830MKLZfL9RHir8lkssCn2G751tZWEWe03zTKm15YWPiEiXXTYDB0Ig/t7yd8PRws4EicwWHxO4jHD8/C5HiTTqd1BwcHFozKU89origB+y/kmzgYpgOBQP4fGmUiZmJ+WNgAAAAASUVORK5CYII=')
+    }
+    .arrow {
+        float: right;
+        width: 12px;
+        height: 15px;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position-y: bottom;
+    }
+
+    .number {
+        display: inline-block;
+        padding: 4px 10px;
+        color: #FFF;
+        border-radius: 4px;
+        background: #44475C;
+        margin: 0px 5px;
+        cursor: pointer;
+    }
+    .number:hover, .number.active {
+        background: #717699;
+    }
 </style>