FE: Added mock calls; source auto-indent

gms-ui/src/api/mock/data/groups.json

 {
-  "breadcrumb": ["LBT","INAF"],
-  "groups": [
-    {
-      "id": "1",
-      "name": "G1",
-      "hasChildren": true,
-      "permission": "ADMIN"
-    }
-  ],
-  "page": 2,
-  "paginator": [1, 2, 3],
-  "pageSize": 3
+  "breadcrumbs": [{
+    "groupId": "ROOT",
+    "groupName": "ROOT"
+  }],
+  "groupsPanel": {
+    "items": [{
+      "groupId": "744e38e8f6d04e4e9418ae5f131c9b6b",
+      "groupName": "LBT",
+      "permission": "ADMIN",
+      "hasChildren": true
+    }, {
+      "groupId": "1204eaef67604c2a8711bc73819a0e3b",
+      "groupName": "Radio",
+      "permission": "ADMIN",
+      "hasChildren": false
+    }, {
+      "groupId": "243f1c56a99b4f89adc9fa52568be5f2",
+      "groupName": "TNG",
+      "permission": "ADMIN",
+      "hasChildren": true
+    }],
+    "currentPage": 1,
+    "links": [1],
+    "totalItems": 3,
+    "pageSize": 20,
+    "totalPages": 1,
+    "hasPreviousPages": false,
+    "hasFollowingPages": false
+  },
+  "permission": "ADMIN"
 }

gms-ui/src/api/mock/data/groupsPanel.json

+{
+  "items": [{
+    "groupId": "744e38e8f6d04e4e9418ae5f131c9b6b",
+    "groupName": "LBT",
+    "permission": "ADMIN",
+    "hasChildren": true
+  }, {
+    "groupId": "1204eaef67604c2a8711bc73819a0e3b",
+    "groupName": "Radio",
+    "permission": "ADMIN",
+    "hasChildren": false
+  }, {
+    "groupId": "243f1c56a99b4f89adc9fa52568be5f2",
+    "groupName": "TNG",
+    "permission": "ADMIN",
+    "hasChildren": true
+  }],
+  "currentPage": 1,
+  "links": [1],
+  "totalItems": 3,
+  "pageSize": 20,
+  "totalPages": 1,
+  "hasPreviousPages": false,
+  "hasFollowingPages": false
+}

gms-ui/src/api/mock/data/home.json

+{
+  "breadcrumbs": [{
+    "groupId": "ROOT",
+    "groupName": "ROOT"
+  }],
+  "groupsPanel": {
+    "items": [{
+      "groupId": "744e38e8f6d04e4e9418ae5f131c9b6b",
+      "groupName": "LBT",
+      "permission": "ADMIN",
+      "hasChildren": true
+    }, {
+      "groupId": "1204eaef67604c2a8711bc73819a0e3b",
+      "groupName": "Radio",
+      "permission": "ADMIN",
+      "hasChildren": false
+    }, {
+      "groupId": "243f1c56a99b4f89adc9fa52568be5f2",
+      "groupName": "TNG",
+      "permission": "ADMIN",
+      "hasChildren": true
+    }],
+    "currentPage": 1,
+    "links": [1],
+    "totalItems": 3,
+    "pageSize": 20,
+    "totalPages": 1,
+    "hasPreviousPages": false,
+    "hasFollowingPages": false
+  },
+  "permission": "ADMIN",
+  "user": "4"
+}

gms-ui/src/api/mock/data/main-model.json

-{
-  "breadcrumbs": [
-    {
-      "id": "1",
-      "name": "LBT"
-    },
-    {
-      "id": "2",
-      "name": "INAF"
-    }
-  ],
-  "groupsPanel": {
-    "groups": [
-      {
-        "id": "1",
-        "name": "G1",
-        "permission": "ADMIN"
-      },
-      {
-        "id": "2",
-        "name": "G2",
-        "permission": "TRAVERSE"
-      },
-      {
-        "id": "3",
-        "name": "G3",
-        "permission": "PI"
-      },
-      {
-        "id": "4",
-        "name": "G4",
-        "permission": "COI"
-      }
-    ],
-    "paginator": {
-      "page": 2,
-      "links": [1, 2, 3],
-      "totalItems": 200,
-      "pageSize": 20
-    }
-  },
-  "membersPanel": {
-    "members": [
-      {
-        "user": {
-          "id": "1",
-          "label": "NC1 (mail)",
-          "identities": ["EDUGAIN"]
-        },
-        "permission": "ADMIN"
-      }
-    ],
-    "paginator": {
-      "page": 1,
-      "links": [1],
-      "totalItems": 4,
-      "pageSize": 3
-    }
-  },
-  "permission": "ADMIN",
-  "user": "pippo",
-  "page": "main"
-}

gms-ui/src/api/mock/data/membersPanel.json

+{
+  "items": [{
+    "id": "4",
+    "identities": [{
+      "type": "Google",
+      "email": "sonia.zorba@inaf.it",
+      "name": "Sonia",
+      "surname": "Zorba",
+      "primary": true
+    }],
+    "displayName": "Sonia Zorba (Google)"
+  }],
+  "currentPage": 1,
+  "links": [1],
+  "totalItems": 1,
+  "pageSize": 20,
+  "totalPages": 1,
+  "hasPreviousPages": false,
+  "hasFollowingPages": false
+}

gms-ui/src/api/mock/data/permission.json

+{"permission":"ADMIN"}

gms-ui/src/api/mock/data/permissionsPanel.json

+{
+  "items": [{
+    "user": {
+      "id": "4",
+      "identities": [{
+        "type": "Google",
+        "email": "sonia.zorba@inaf.it",
+        "name": "Sonia",
+        "surname": "Zorba",
+        "primary": true
+      }],
+      "displayName": "Sonia Zorba (Google)"
+    },
+    "permission": "ADMIN"
+  }],
+  "currentPage": 1,
+  "links": [1],
+  "totalItems": 1,
+  "pageSize": 20,
+  "totalPages": 1,
+  "hasPreviousPages": false,
+  "hasFollowingPages": false
+}

gms-ui/src/api/mock/data/searchUser.json

+[{
+  "id": "4",
+  "identities": [{
+    "type": "Google",
+    "email": "sonia.zorba@inaf.it",
+    "name": "Sonia",
+    "surname": "Zorba",
+    "primary": true
+  }],
+  "displayName": "Sonia Zorba (Google)"
+}]

gms-ui/src/api/mock/index.js

-import mainModel from './data/main-model'
+import home from './data/home';
+import groups from './data/groups';
+import groupsPanel from './data/groupsPanel';
+import membersPanel from './data/membersPanel';
+import permissionsPanel from './data/permissionsPanel';
+import searchUser from './data/searchUser';
+import permission from './data/permission';
 
 const fetch = (mockData, time = 0) => {
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve(mockData)
-    }, time)
-  })
-}
+    }, time);
+  });
+};
 
 export default {
-  fetchMainModel () {
-    return fetch(mainModel, 500) // wait 500ms before returning data
+  fetchHomePageModel() {
+    return fetch(home, 500);
+  },
+  fetchGroupsTab() {
+    return fetch(groups, 500);
+  },
+  fetchGroupsPanel() {
+    return fetch(groupsPanel, 500);
+  },
+  fetchMembersPanel() {
+    return fetch(membersPanel, 500);
+  },
+  fetchPermissionsPanel() {
+    return fetch(permissionsPanel, 500);
+  },
+  addGroup() {
+    return fetch(groupsPanel, 500);
+  },
+  renameGroup() {
+    return fetch(groupsPanel, 500);
+  },
+  removeGroup() {
+    return fetch(groupsPanel, 500);
+  },
+  searchUser() {
+    return fetch(searchUser, 500);
+  },
+  addPermission() {
+    return fetch(permissionsPanel, 500);
+  },
+  getPermission() {
+    return fetch(permission, 500);
+  },
+  removePermission() {
+    return fetch(permissionsPanel, 500);
+  },
+  addMember() {
+    return fetch(membersPanel, 500);
+  },
+  removeMember() {
+    return fetch(membersPanel, 500);
   }
 }

gms-ui/src/api/server/index.js

@@ -6,7 +6,7 @@ function apiRequest(url, options) {
     fetch(url, options)
       .then(response => {
         loading(false);
-        if([200, 201, 204, 400].includes(response.status)) { // valid status codes
+        if ([200, 201, 204, 400].includes(response.status)) { // valid status codes
           resolve(response.json());
         } else {
           response.json().then(jsonValue => dispatchApiErrorEvent(jsonValue));
@@ -21,7 +21,7 @@ function apiRequest(url, options) {
 
 function dispatchApiErrorEvent(error) {
   let message;
-  if(error.message) {
+  if (error.message) {
     message = error.message;
   } else {
     message = 'Generic error';
@@ -40,11 +40,11 @@ function loading(value) {
 }
 
 export default {
-  fetchHomePageModel (input) {
-    let url = BASE_API_URL
-            + 'home?groupId=' + input.selectedGroupId
-            + '&paginatorPageSize=' + input.paginatorPageSize
-            + '&paginatorPage=' + input.paginatorPage;
+  fetchHomePageModel(input) {
+    let url = BASE_API_URL +
+      'home?groupId=' + input.selectedGroupId +
+      '&paginatorPageSize=' + input.paginatorPageSize +
+      '&paginatorPage=' + input.paginatorPage;
     return apiRequest(url, {
       method: 'GET',
       cache: 'no-cache',
@@ -55,13 +55,13 @@ export default {
       }
     });
   },
-  fetchGroupsTab (input) {
-    let url = BASE_API_URL
-            + 'groups?groupId=' + input.selectedGroupId
-            + '&paginatorPageSize=' + input.paginatorPageSize
-            + '&paginatorPage=' + input.paginatorPage
-            + '&onlyPanel=false';
-    if(input.searchFilter !== null) {
+  fetchGroupsTab(input) {
+    let url = BASE_API_URL +
+      'groups?groupId=' + input.selectedGroupId +
+      '&paginatorPageSize=' + input.paginatorPageSize +
+      '&paginatorPage=' + input.paginatorPage +
+      '&onlyPanel=false';
+    if (input.searchFilter !== null) {
       url += '&searchFilter=' + input.searchFilter;
     }
     return apiRequest(url, {
@@ -74,13 +74,13 @@ export default {
       }
     });
   },
-  fetchGroupsPanel (input) {
-    let url = BASE_API_URL
-            + 'groups?groupId=' + input.selectedGroupId
-            + '&paginatorPageSize=' + input.paginatorPageSize
-            + '&paginatorPage=' + input.paginatorPage
-            + '&onlyPanel=true';
-    if(input.searchFilter !== null) {
+  fetchGroupsPanel(input) {
+    let url = BASE_API_URL +
+      'groups?groupId=' + input.selectedGroupId +
+      '&paginatorPageSize=' + input.paginatorPageSize +
+      '&paginatorPage=' + input.paginatorPage +
+      '&onlyPanel=true';
+    if (input.searchFilter !== null) {
       url += '&searchFilter=' + input.searchFilter;
     }
     return apiRequest(url, {
@@ -93,11 +93,11 @@ export default {
       }
     });
   },
-  fetchMembersPanel (input) {
-    let url = BASE_API_URL
-            + 'members?groupId=' + input.selectedGroupId
-            + '&paginatorPageSize=' + input.paginatorPageSize
-            + '&paginatorPage=' + input.paginatorPage;
+  fetchMembersPanel(input) {
+    let url = BASE_API_URL +
+      'members?groupId=' + input.selectedGroupId +
+      '&paginatorPageSize=' + input.paginatorPageSize +
+      '&paginatorPage=' + input.paginatorPage;
     return apiRequest(url, {
       method: 'GET',
       cache: 'no-cache',
@@ -108,11 +108,11 @@ export default {
       }
     });
   },
-  fetchPermissionsPanel (input) {
-    let url = BASE_API_URL
-            + 'permissions?groupId=' + input.selectedGroupId
-            + '&paginatorPageSize=' + input.paginatorPageSize
-            + '&paginatorPage=' + input.paginatorPage;
+  fetchPermissionsPanel(input) {
+    let url = BASE_API_URL +
+      'permissions?groupId=' + input.selectedGroupId +
+      '&paginatorPageSize=' + input.paginatorPageSize +
+      '&paginatorPage=' + input.paginatorPage;
     return apiRequest(url, {
       method: 'GET',
       cache: 'no-cache',
@@ -123,7 +123,7 @@ export default {
       }
     });
   },
-  addGroup (newGroupName, input) {
+  addGroup(newGroupName, input) {
     let url = BASE_API_URL + 'group';
     return apiRequest(url, {
       method: 'POST',
@@ -142,7 +142,7 @@ export default {
       })
     });
   },
-  renameGroup (groupId, newGroupName, input) {
+  renameGroup(groupId, newGroupName, input) {
     let url = BASE_API_URL + 'group/' + groupId;
     return apiRequest(url, {
       method: 'PUT',
@@ -160,11 +160,11 @@ export default {
       })
     });
   },
-  removeGroup (groupId, input) {
-    let url = BASE_API_URL + 'group/' + groupId
-            + '?paginatorPageSize=' + input.paginatorPageSize
-            + '&paginatorPage=' + input.paginatorPage;
-    if(input.searchFilter !== null) {
+  removeGroup(groupId, input) {
+    let url = BASE_API_URL + 'group/' + groupId +
+      '?paginatorPageSize=' + input.paginatorPageSize +
+      '&paginatorPage=' + input.paginatorPage;
+    if (input.searchFilter !== null) {
       url += '&searchFilter=' + input.searchFilter;
     }
     return apiRequest(url, {
@@ -177,7 +177,7 @@ export default {
       }
     });
   },
-  searchUser (searchInput) {
+  searchUser(searchInput) {
     let url = BASE_API_URL + 'users?search=' + searchInput;
 
     return apiRequest(url, {
@@ -190,7 +190,7 @@ export default {
       }
     });
   },
-  addPermission (userId, permission, input) {
+  addPermission(userId, permission, input) {
     let url = BASE_API_URL + 'permission';
 
     return apiRequest(url, {
@@ -210,7 +210,7 @@ export default {
       })
     });
   },
-  getPermission (groupId, userId) {
+  getPermission(groupId, userId) {
     let url = BASE_API_URL + 'permission?groupId=' + groupId + '&userId=' + userId;
 
     return apiRequest(url, {
@@ -223,7 +223,7 @@ export default {
       }
     });
   },
-  addMember (userId, permission, input) {
+  addMember(userId, permission, input) {
     let url = BASE_API_URL + 'member';
 
     return apiRequest(url, {
@@ -243,13 +243,13 @@ export default {
       })
     });
   },
-  removeMember (userId, removeAlsoPermission, input) {
-    let url = BASE_API_URL + 'member'
-            + '?groupId=' + input.selectedGroupId
-            + '&userId=' + userId
-            + '&removeAlsoPermission=' + removeAlsoPermission
-            + '&paginatorPageSize=' + input.paginatorPageSize
-            + '&paginatorPage=' + input.paginatorPage;
+  removeMember(userId, removeAlsoPermission, input) {
+    let url = BASE_API_URL + 'member' +
+      '?groupId=' + input.selectedGroupId +
+      '&userId=' + userId +
+      '&removeAlsoPermission=' + removeAlsoPermission +
+      '&paginatorPageSize=' + input.paginatorPageSize +
+      '&paginatorPage=' + input.paginatorPage;
     return apiRequest(url, {
       method: 'DELETE',
       cache: 'no-cache',
@@ -260,12 +260,12 @@ export default {
       }
     });
   },
-  removePermission (userId, input) {
-    let url = BASE_API_URL + 'permission'
-            + '?groupId=' + input.selectedGroupId
-            + '&userId=' + userId
-            + '&paginatorPageSize=' + input.paginatorPageSize
-            + '&paginatorPage=' + input.paginatorPage;
+  removePermission(userId, input) {
+    let url = BASE_API_URL + 'permission' +
+      '?groupId=' + input.selectedGroupId +
+      '&userId=' + userId +
+      '&paginatorPageSize=' + input.paginatorPageSize +
+      '&paginatorPage=' + input.paginatorPage;
     return apiRequest(url, {
       method: 'DELETE',
       cache: 'no-cache',

gms-ui/src/components/GroupsBreadcrumb.vue

 <template>
-  <nav aria-label="breadcrumb">
-    <ol class="breadcrumb">
-      <li class="breadcrumb-item" v-for="group in groups" v-bind:class="{ active: group.active }">
-        <a href="#" v-on:click="changeBreadcrumb(group.groupId)" v-if="!group.active">{{group.groupName}}</a>
-        <span v-if="group.active">{{group.groupName}}</span>
-      </li>
-    </ol>
-  </nav>
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item" v-for="group in groups" v-bind:class="{ active: group.active }">
+      <a href="#" v-on:click="changeBreadcrumb(group.groupId)" v-if="!group.active">{{group.groupName}}</a>
+      <span v-if="group.active">{{group.groupName}}</span>
+    </li>
+  </ol>
+</nav>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import {
+  mapState
+} from 'vuex';
 import client from 'api-client';
 
 function buildItems(values) {
   let groups = [];
 
-  for(let i = 0; i < values.length; i++) {
+  for (let i = 0; i < values.length; i++) {
     let group = values[i];
     group.active = false;
     groups.push(group);
   }
 
   // Activate the last item
-  if(groups.length > 0) {
+  if (groups.length > 0) {
     groups[groups.length - 1].active = true;
   }
 
@@ -41,7 +43,7 @@ export default {
     changeBreadcrumb: function(groupId) {
       this.input.selectedGroupId = groupId;
       this.input.searchFilter = null;
-      if(this.input.selectedTab === 'groups') {
+      if (this.input.selectedTab === 'groups') {
         client.fetchGroupsTab(this.input)
           .then(model => {
             this.$store.commit('updateGroups', model);

gms-ui/src/components/GroupsPanel.vue

 <template>
-  <b-tab title="Groups" active>
-    <b-row>
-      <b-col xs="12">
-        <b-form-input placeholder="Search group" v-model="input.searchFilter" v-on:input="filterGroups"></b-form-input>
-      </b-col>
-    </b-row>
-    <div id="groups-list" v-if="model.groupsPanel !== null">
-      <b-list-group v-for="group in model.groupsPanel.items">
-        <b-list-group-item href="#" v-on:click="openGroup(group)">
-          <span class="float-left">{{group.groupName}}</span>
-          <span v-if="group.permission === 'ADMIN'" class="float-right">
-            <a href="#" v-on:click.stop="openRenameGroupModal(group)" title="Rename">
-              <font-awesome-icon icon="edit"></font-awesome-icon>
-            </a>
-            &nbsp;
-            <a href="#" v-on:click.stop="openRemoveGroupModal(group)" class="text-danger" title="Delete">
-              <font-awesome-icon icon="trash"></font-awesome-icon>
-            </a>
-          </span>
-        </b-list-group-item>