Link from group summary to individual projects

Those will be populated directly by Vuex.

lib/www/client/source/src/App.vue

@@ -85,7 +85,9 @@ export default {
     },
 
     handleProject (context, {payload}) {
+      if (payload?.table == "public") {
         this.refreshProjects();
+      }
     },
 
     registerNotificationHandlers () {

lib/www/client/source/src/router/index.js

@@ -211,7 +211,7 @@ Vue.use(VueRouter)
     component: GroupList,
     meta: {
       breadcrumbs: [
-        { text: "Groups", href: "/groups", disabled: true }
+        { text: "Comparisons", href: "/groups", disabled: true }
       ],
       appBarExtension: {
         // component: DougalAppBarExtensionProjectList
@@ -230,8 +230,22 @@ Vue.use(VueRouter)
     component: Group,
     meta: {
       breadcrumbs: [
-        { text: "Groups", href: "/groups" },
+        { text: "Comparisons", href: "/groups" },
+        { text: (ctx) => ctx.$route.params.group }
+        /*
+        {
+          text: (ctx) => ctx.$store.state.project.projectName || "…",
+          href: (ctx) => `/projects/${ctx.$store.state.project.projectId || ctx.$route.params.project || ""}/`,
+          title: (ctx) => Object.entries(ctx.$store.getters.projectConfiguration?.organisations ?? {}).map( ([org, ops]) => `* ${org}: ${Object.entries(ops).filter( ([k, v]) => v ).map( ([k, v]) => k ).join(", ")}`).join("\n"),
+          organisations: (ctx) => ctx.$store.getters.projectConfiguration?.organisations ?? {}
+        }
+        */
       ],
+      /*
+      appBarExtension: {
+        component: DougalAppBarExtensionGroup
+      }
+      */
     },
     children: [
     ]

lib/www/client/source/src/store/modules/projects/actions.js

@@ -5,6 +5,17 @@ import { duration_to_ms, ms_to_duration, normalise_duration, add_durations } fro
  */
 async function refreshProjects ({commit, dispatch, state, rootState}) {
 
+  async function getSummary (project) {
+      const url = `/project/${project.pid}/summary`;
+      const init = {};
+      const summary = await dispatch('api', [url, init, null, {silent:true}]);
+      if (summary) {
+        return {...project, ...summary};
+      } else {
+        return project;
+      }
+  }
+
   if (state.loading) {
     commit('abortProjectsLoading');
   }
@@ -20,23 +31,22 @@ async function refreshProjects ({commit, dispatch, state, rootState}) {
   const res = await dispatch('api', [url, init, null, {silent:true}]);
 
   if (res) {
-    for (let index in res) {
-      const project = res[index];
 
-      if (!project.pid) {
+    let projects;
-        console.warn("Project has no Project ID!");
+
-        continue;
+    if (res.some( project => project.pid == null )) {
+      console.warn("At least one project found with no PID!");
+      projects = res.filter( project => project.pid != null );
+    } else {
+      projects = res;
     }
 
-      const url = `/project/${project.pid}/summary`;
+    commit('setProjects', projects); // First without summaries
-      const init = {};
-      const summary = await dispatch('api', [url, init, null, {silent:true}]);
-      if (summary) {
-        res[index] = {...project, ...summary};
-      }
-    }
-    commit('setProjects', res);
     commit('setProjectsTimestamp', tstamp);
+
+    projects = await Promise.all(projects.map( getSummary ));
+
+    commit('setProjects', projects); // Then with summaries
   }
   commit('clearProjectsLoading');
   dispatch('prepareGroups');

lib/www/client/source/src/views/Group.vue

@@ -48,7 +48,13 @@
           </template>
 
           <template v-slot:item.pid="{item, value}">
-            <v-chip label small outlined>{{ value }}</v-chip>
+            <v-chip
+              label
+              small
+              outlined
+              :href="`/projects/${item.pid}`"
+              :color="!item.archived ? 'primary' : ''"
+            >{{ value }}</v-chip>
           </template>
 
           <template v-slot:item.fsp="{item, value}">

lib/www/client/source/src/views/ProjectList.vue

@@ -189,19 +189,20 @@ export default {
     ...mapGetters(['loading', 'projects'])
   },
 
+  watch: {
+
+    async projects () {
+      await this.load();
+    }
+
+  },
+
   methods: {
 
     async list () {
       this.items = [...this.projects];
     },
 
-    async summary (item) {
-      const details = await this.api([`/project/${item.pid}/summary`]);
-      if (details) {
-        return Object.assign({}, details, item);
-      }
-    },
-
     title (item) {
       if (item.organisations) {
         return "Access:\n" + Object.entries(item.organisations).map( org =>
@@ -212,30 +213,22 @@ export default {
     },
 
     async load () {
-      await this.refreshProjects();
+      if (!this.projects.length) {
-      await this.list();
+        this.refreshProjects();
-      const promises = [];
-      for (const key in this.items) {
-        const item = this.items[key];
-        const promise = this.summary(item)
-        .then( expanded => {
-          if (expanded) {
-            this.$set(this.items, key, expanded);
       }
-        });
+      await this.list();
-        promises.push(promise);
+    },
+
+    handlerLoad (context, {payload}) {
+      if (payload?.table == "public") {
+        this.load();
       }
     },
 
     registerNotificationHandlers () {
       this.$store.dispatch('registerHandler', {
         table: 'project`',
-
+        handler: this.handlerLoad
-        handler: (context, message) => {
-          if (message.payload?.table == "public") {
-            this.load();
-          }
-        }
       });
     },