From 11829555cf2cc09906f7b322505e641a473d22f9 Mon Sep 17 00:00:00 2001
From: "D. Berge" <dberge@aaltronav.eu>
Date: Fri, 25 Jul 2025 13:33:59 +0200
Subject: [PATCH] Add <v-tooltip/> showing permissions.

Hovering over the user avatar or a project name in the breadcrumbs
shows a tooltip with the relevant permissions.
---
 .../source/src/components/navigation.vue      | 63 +++++++++++++++++--
 lib/www/client/source/src/router/index.js     |  3 +-
 2 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/lib/www/client/source/src/components/navigation.vue b/lib/www/client/source/src/components/navigation.vue
index 70badf4..3ffe7d0 100644
--- a/lib/www/client/source/src/components/navigation.vue
+++ b/lib/www/client/source/src/components/navigation.vue
@@ -43,7 +43,33 @@
 
     <v-breadcrumbs :items="path">
       <template v-slot:item="{ item }">
-        <v-breadcrumbs-item :href="item.href" :disabled="item.disabled" :title="item.title">
+        <v-breadcrumbs-item :href="item.href" :disabled="item.disabled" v-if="item.organisations">
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on, attrs }">
+              <span v-bind="attrs" v-on="on">{{ item.text }}</span>
+            </template>
+            <div class="text-overline">Project permissions</div>
+            <v-simple-table dense>
+              <template v-slot:default>
+                <thead>
+                  <tr>
+                    <th>Organisation</th><th>Read</th><th>Write</th><th>Edit</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(operations, name) in item.organisations">
+                    <td v-if="name == '*'"><v-chip small label color="primary">All</v-chip></td>
+                    <td v-else><v-chip small label outlined>{{ name }}</v-chip></td>
+                    <td>{{ operations.read ? "✔" : " " }}</td>
+                    <td>{{ operations.write ? "✔" : " " }}</td>
+                    <td>{{ operations.edit ? "✔" : " " }}</td>
+                  </tr>
+                </tbody>
+              </template>
+            </v-simple-table>
+          </v-tooltip>
+        </v-breadcrumbs-item>
+        <v-breadcrumbs-item :href="item.href" :disabled="item.disabled" v-else>
           {{ item.text }}
         </v-breadcrumbs-item>
       </template>
@@ -56,10 +82,37 @@
         <v-menu
           offset-y
         >
-          <template v-slot:activator="{on, attrs}">
-            <v-avatar :color="user.colour || 'primary'" :title="title" v-bind="attrs" v-on="on">
-              <span class="white--text">{{user.name.slice(0, 5)}}</span>
-            </v-avatar>
+          <template v-slot:activator="{ on: menu, attrs }">
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on: tooltip }">
+              <v-avatar :color="user.colour || 'primary'" v-bind="attrs" v-on="{...tooltip, ...menu}">
+                <span class="white--text">{{user.name.slice(0, 5)}}</span>
+              </v-avatar>
+              </template>
+              <div class="text-overline">{{ user.name }}</div>
+              <v-card flat class="my-1" v-if="user.description">
+                <v-card-text class="pb-1" v-html="$root.markdown(user.description)">
+                </v-card-text>
+              </v-card>
+              <v-simple-table dense>
+                <template v-slot:default>
+                  <thead>
+                    <tr>
+                      <th>Organisation</th><th>Read</th><th>Write</th><th>Edit</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="org in user.organisations">
+                      <td v-if="org.name == '*'"><v-chip small label color="primary">All</v-chip></td>
+                      <td v-else><v-chip small label outlined>{{ org.name }}</v-chip></td>
+                      <td>{{ org.operations.read ? "✔" : " " }}</td>
+                      <td>{{ org.operations.write ? "✔" : " " }}</td>
+                      <td>{{ org.operations.edit ? "✔" : " " }}</td>
+                    </tr>
+                  </tbody>
+                </template>
+              </v-simple-table>
+            </v-tooltip>
           </template>
 
           <v-list dense>
diff --git a/lib/www/client/source/src/router/index.js b/lib/www/client/source/src/router/index.js
index dfa9b1b..1504128 100644
--- a/lib/www/client/source/src/router/index.js
+++ b/lib/www/client/source/src/router/index.js
@@ -118,7 +118,8 @@ Vue.use(VueRouter)
         {
           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")
+          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: {