Add group display to admin panel

Author: ml-evs

webapp/src/components/AdminDisplay.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="admin-display">
     <template v-if="selectedItem === 'Users'"> <UserTable /> </template>
+    <template v-else-if="selectedItem === 'Groups'"> <GroupTable /> </template>
   </div>
 </template>
 
 <script>
 import UserTable from "./UserTable.vue";
+import GroupTable from "./GroupTable.vue";
 
 export default {
   name: "AdminDisplay",
-  components: { UserTable },
+  components: { UserTable, GroupTable },
   props: {
     selectedItem: {
       type: String,

webapp/src/components/GroupTable.vue

@@ -0,0 +1,67 @@
+<template>
+  <table class="table table-hover table-sm" data-testid="user-table">
+    <thead>
+      <tr>
+        <th scope="col">Group ID</th>
+        <th scope="col">Name</th>
+        <th scope="col">Description</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="group in groups" :key="group.group_id">
+        <td align="left">
+          <span class="badge badge-light table-group-id">{{ group.group_id }}</span>
+        </td>
+        <td align="left">{{ group.display_name }}</td>
+        <td align="left">{{ group.description }}</td>
+        <td align="right"><font-awesome-icon :icon="['far', 'plus-square']" /></td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import { getGroupsList } from "@/server_fetch_utils.js";
+
+export default {
+  data() {
+    return {
+      groups: null,
+      original_groups: null,
+    };
+  },
+  created() {
+    this.getGroups();
+  },
+  methods: {
+    async getGroups() {
+      let data = await getGroupsList();
+      if (data != null) {
+        this.groups = JSON.parse(JSON.stringify(data));
+        this.original_groups = JSON.parse(JSON.stringify(data));
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+td {
+  vertical-align: middle;
+}
+
+.table-group-id {
+  border: 2px solid #ccc;
+}
+
+select {
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+}
+
+.badge {
+  margin-left: 1em;
+  font-family: "Andalé Mono", monospace;
+}
+</style>

webapp/src/components/UserTable.vue

@@ -9,7 +9,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr v-for="user in users" :key="user._id">
+      <tr v-for="user in users" :key="user.immutable_id">
         <td align="left">
           {{ user.display_name }}
           <span v-if="user.account_status === 'active'" class="badge badge-success text-uppercase">

webapp/src/server_fetch_utils.js

@@ -269,6 +269,19 @@ export function getUsersList() {
     });
 }
 
+export function getGroupsList() {
+  return fetch_get(`${API_URL}/groups`)
+    .then(function (response_json) {
+      const groups = response_json.data;
+      return groups;
+    })
+    .catch((error) => {
+      console.error("Error when fetching groups list");
+      console.error(error);
+      throw error;
+    });
+}
+
 export function getStartingMaterialList() {
   return fetch_get(`${API_URL}/starting-materials/`)
     .then(function (response_json) {

webapp/src/views/Admin.vue

@@ -23,7 +23,7 @@ export default {
   },
   data() {
     return {
-      items: ["Users"],
+      items: ["Users", "Groups"],
       selectedItem: "Users",
       user: null,
     };