org: add basic org members display

src/components/orgmembers.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <h4 class="title is-4">Organization Members</h4>
+    <ul v-if="members.length" class="item-list">
+      <li class="item" v-for="member in members" v-bind:key="member.user.id">
+        <span class="name">{{member.user.username}}</span>
+        <span class="role">{{member.role}}</span>
+      </li>
+    </ul>
+    <div v-else class="item-list">No Members</div>
+  </div>
+</template>
+
+<script>
+import { fetchOrgMembers } from "@/util/data.js";
+
+export default {
+  components: {},
+  name: "orgmembers",
+  props: {
+    orgname: String
+  },
+  data() {
+    return {
+      members: []
+    };
+  },
+  watch: {
+    $route: async function() {
+      this.fetchOrgMembers(this.orgname);
+    }
+  },
+  methods: {
+    async fetchOrgMembers(orgname) {
+      let { data, error } = await fetchOrgMembers(orgname);
+      if (error) {
+        this.$store.dispatch("setError", error);
+        return;
+      }
+      this.members = data.members;
+    }
+  },
+  created: function() {
+    this.fetchOrgMembers(this.orgname);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/css/_variables.scss";
+
+.item-list {
+  .item {
+    border: 1px solid $grey-lighter;
+    border-bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+  }
+
+  .item:last-child {
+    border-bottom: 1px solid $grey-lighter;
+  }
+
+  .name {
+    flex: 0 0 30%;
+    font-weight: bold;
+    cursor: pointer;
+  }
+
+  .role {
+    flex: 0 0 40%;
+  }
+
+  .stillrunning {
+    flex: 0 0 10%;
+  }
+
+  .waitingapproval {
+    flex: 0 0 10%;
+  }
+
+  .source-info {
+    flex: 0 0 10%;
+    overflow: hidden;
+    white-space: nowrap;
+
+    a {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .commit {
+    display: block;
+    font-size: 0.8rem;
+  }
+}
+</style>

src/components/usersettings.vue

@@ -8,9 +8,9 @@
             class="message-body"
           >Removing a Linked Account will also block all the projects that uses this Linked Account to access their remote repository</div>
         </div>
-        <div v-if="user.linked_accounts">
+        <ul v-if="user.linked_accounts">
-          <div class="item-list" v-for="(la, index) in user.linked_accounts" v-bind:key="index">
+          <li class="item-list" v-for="(la, index) in user.linked_accounts" v-bind:key="index">
-            <nav class="level item">
+            <div class="level item">
               <div class="level-left">
                 <div class="level-item">
                   <div>
@@ -24,12 +24,12 @@
                   <button class="button is-primary" @click="deleteLinkedAccount(la)">Delete</button>
                 </div>
               </div>
-            </nav>
             </div>
+          </li>
           <div v-if="deleteLinkedAccountError" class="message is-danger">
             <div class="message-body">{{ deleteLinkedAccountError }}</div>
           </div>
-        </div>
+        </ul>
         <div v-else>No linked accounts</div>
       </div>
     </nav>

src/router.js

@@ -12,6 +12,7 @@ import projectgroupsettings from "./components/projectgroupsettings.vue";
 import createproject from "./components/createproject.vue";
 import createprojectgroup from "./components/createprojectgroup.vue";
 import createorganization from "./components/createorganization.vue";
+import orgmembers from "./components/orgmembers.vue";
 import runs from "./components/runs.vue";
 import run from "./components/run.vue";
 import task from "./components/task.vue";
@@ -224,6 +225,12 @@ const router = new VueRouter({
           component: projects,
           props: (route) => ({ ownertype: "org", ownername: route.params.orgname })
         },
+        {
+          path: "members",
+          name: "org members",
+          component: orgmembers,
+          props: (route) => ({ orgname: route.params.orgname })
+        },
         {
           path: "createprojectgroup",
           name: "org create project group",

src/util/data.js

@@ -46,6 +46,10 @@ export async function fetchCurrentUser() {
     return await fetch(apiurl(path));
 }
 
+export async function fetchOrgMembers(orgref) {
+    let path = "/orgs/" + orgref + "/members"
+    return await fetch(apiurl(path));
+}
 export async function fetchRuns(group, lastrun) {
     let u = apiurl("/runs");
     if (group) {

src/util/link.js

@@ -35,6 +35,9 @@ export function userLocalRunTaskLink(username, runid, taskid) {
     return { name: "user local run task", params: { username: username, runid: runid, taskid: taskid } }
 }
 
+export function orgMembersLink(orgname) {
+    return { name: "org members", params: { orgname: orgname } }
+}
 
 // Note, when creating a router link containing a project/projectgroup ref (a
 // path), unfortunately, we cannot use route name and params since it will path

src/views/Org.vue

@@ -28,6 +28,14 @@
             <span>Projects</span>
           </router-link>
         </li>
+        <li :class="[{ 'is-active': $route.name === 'org members' }]">
+          <router-link :to="orgMembersLink(orgname)">
+            <span class="icon is-small">
+              <i class="mdi mdi-account-group"/>
+            </span>
+            <span>Members</span>
+          </router-link>
+        </li>
       </ul>
       <ul class="is-right">
         <li :class="[{ 'is-active': $route.name.endsWith('project group settings') }]">
@@ -50,6 +58,7 @@ import {
   ownerLink,
   ownerProjectsLink,
   ownerSettingsLink,
+  orgMembersLink,
   projectGroupCreateProjectGroupLink,
   projectGroupCreateProjectLink
 } from "@/util/link.js";
@@ -66,6 +75,7 @@ export default {
     ownerLink: ownerLink,
     ownerProjectsLink: ownerProjectsLink,
     ownerSettingsLink: ownerSettingsLink,
+    orgMembersLink: orgMembersLink,
     projectGroupCreateProjectGroupLink: projectGroupCreateProjectGroupLink,
     projectGroupCreateProjectLink: projectGroupCreateProjectLink,
     goToCreate(type) {