@7365admin1/layer-common 4.80.1 → 4.81.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.81.0
+
+### Minor Changes
+
+- db2b9e9: Members table: one compact "Role & access" cell (each role once; one site by name, several as "N sites" opening the full site list), name with email underneath, one-line dates, clean role labels.
+
 ## 4.80.1
 
 ### Patch Changes
@@ -1944,11 +1950,11 @@
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                                              GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                                              GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                                                GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                                                GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                                              owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                                              staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                                                owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                                                staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/MemberMain.vue

@@ -115,32 +115,86 @@
           <template #item.nature="{ item }">
             {{ replaceMatch(item.nature, "_", " ") }}
           </template>
-          <!-- The role is a soft pill in the design, not a plain word. The
-               member's REAL role name; a deleted / other-organisation / missing
-               role says so instead of reading as a working grant
-               (memberRoleChip in utils/role.ts, server roleState). -->
-          <template #item.roleName="{ item }">
-            <StatusChip
-              v-if="memberRoleChip(item, orgLevel)"
-              :dot="false"
-              pill
-              :tone="memberRoleChip(item, orgLevel)?.tone"
-              class="member-role-chip"
-              data-test="member-role-chip"
-            >
-              {{ memberRoleChip(item, orgLevel)?.text }}
-            </StatusChip>
+          <!-- Name on top, email underneath in grey - only when it is not the
+               name again (owner report 2026-09-30). Search still matches the
+               email (server side). -->
+          <template #item.name="{ item }">
+            <div class="member-person" data-test="member-person">
+              <div class="member-person__name" :title="memberPerson(item).name">{{ memberPerson(item).name }}</div>
+              <div
+                v-if="memberPerson(item).email"
+                class="member-person__email"
+                :title="memberPerson(item).email"
+              >{{ memberPerson(item).email }}</div>
+            </div>
           </template>
-          <!-- Organization app: every person, and where they may go
-               (owner report 2026-09-29: a site-limited person stays listed). -->
-          <template v-if="orgLevel" #item.siteName="{ item }">
-            <span data-test="member-site-scope">{{ siteAccessLabel(item) }}</span>
+          <!-- ONE compact "Role & access" cell (owner report 2026-09-30, Aigle:
+               an 18-site person's roles and sites were two long paragraphs).
+               Each role once; one site by name, several as "N sites" that opens
+               the full site -> role list (utils/member-row.ts). A deleted /
+               other-organisation / missing role still says so (memberRoleChip,
+               server roleState). -->
+          <template #item.roleName="{ item }">
+            <div class="member-access" data-test="member-access">
+              <StatusChip
+                v-for="r in memberAccess(item, orgLevel).roles.slice(0, 2)"
+                :key="r"
+                :dot="false"
+                pill
+                :tone="memberAccess(item, orgLevel).tone"
+                class="member-role-chip"
+                :class="{ 'member-role-chip--warn': memberAccess(item, orgLevel).tone === 'warn' }"
+                :title="r"
+                data-test="member-role-chip"
+              >
+                {{ r }}
+              </StatusChip>
+              <span
+                v-if="memberAccess(item, orgLevel).roles.length > 2"
+                class="member-access__more"
+              >+{{ memberAccess(item, orgLevel).roles.length - 2 }}</span>
+              <v-menu
+                v-if="memberAccess(item, orgLevel).sites.length > 1"
+                location="bottom start"
+                :close-on-content-click="false"
+              >
+                <template #activator="{ props: siteProps }">
+                  <button
+                    v-bind="siteProps"
+                    type="button"
+                    class="member-access__sites"
+                    data-test="member-site-count"
+                  >
+                    {{ memberAccess(item, orgLevel).scope }}
+                  </button>
+                </template>
+                <v-card class="member-sites-card" data-test="member-site-list">
+                  <v-card-title class="text-subtitle-2">
+                    {{ memberPerson(item).name }} - {{ memberAccess(item, orgLevel).scope }}
+                  </v-card-title>
+                  <v-list density="compact">
+                    <v-list-item
+                      v-for="s in memberAccess(item, orgLevel).sites"
+                      :key="s.siteName"
+                      :title="s.siteName"
+                      :subtitle="s.roleName"
+                    />
+                  </v-list>
+                </v-card>
+              </v-menu>
+              <span
+                v-else-if="memberAccess(item, orgLevel).scope"
+                class="member-access__scope"
+                :title="memberAccess(item, orgLevel).scope"
+                data-test="member-site-scope"
+              >{{ memberAccess(item, orgLevel).scope }}</span>
+            </div>
           </template>
           <template #item.dateInvited="{ item }">
-            {{ formatDateInvited(item.dateInvited) }}
+            <span class="member-nowrap">{{ formatMemberDate(item.dateInvited) }}</span>
           </template>
           <template #item.lastLoginAt="{ item }">
-            <span data-test="member-last-active">{{ formatLastActive(item.lastLoginAt) }}</span>
+            <span class="member-nowrap" data-test="member-last-active">{{ formatLastActive(item.lastLoginAt) }}</span>
           </template>
           <template #item.action-table="{ item }">
            <div class="d-flex align-center justify-end ga-1">
@@ -371,11 +425,11 @@ import {
   otherSiteBannerText,
   roleUsableHere,
   safeReturnTo,
-  siteAccessLabel,
   limitedSites,
   withCurrentRole,
 } from "../utils/role";
 import { formatLastActive } from "../utils/last-active";
+import { formatMemberDate, memberAccess, memberPerson } from "../utils/member-row";
 
 const props = defineProps({
   /** The design's page title. Every app that mounts this screen calls it
@@ -434,40 +488,14 @@ const props = defineProps({
   },
   headers: {
     type: Array as PropType<Array<Record<string, string>>>,
+    // Email sits under the name and the sites inside "Role & access" (owner
+    // report 2026-09-30): two long columns became one compact cell.
     default: () => [
-      {
-        title: "Name",
-
-        value: "name",
-      },
-      {
-        title: "Email",
-
-        value: "email",
-      },
-      {
-        title: "Roles and Permission",
-
-        value: "roleName",
-      },
-      {
-        title: "Site Invited To",
-
-        value: "siteName",
-      },
-      {
-        title: "Date",
-
-        value: "dateInvited",
-      },
-      {
-        title: "Last active",
-        value: "lastLoginAt",
-      },
-      {
-        title: "Action",
-        value: "action-table",
-      },
+      { title: "Name", value: "name" },
+      { title: "Role & access", value: "roleName" },
+      { title: "Date", value: "dateInvited" },
+      { title: "Last active", value: "lastLoginAt" },
+      { title: "Action", value: "action-table" },
     ],
   },
   /**
@@ -809,25 +837,6 @@ function showMessage(msg: string, color: string) {
   messageSnackbar.value = true;
 }
 
-function formatDateInvited(value?: string | null) {
-  if (!value) return "";
-
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return "";
-
-  const parts = new Intl.DateTimeFormat("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  }).formatToParts(date);
-
-  const getPart = (type: Intl.DateTimeFormatPartTypes) =>
-    parts.find((part) => part.type === type)?.value ?? "";
-
-  // Short ("Sep 29, 2026") so the table fits and the actions stay in view.
-  return `${getPart("month")} ${getPart("day")}, ${getPart("year")}`;
-}
-
 async function handleUpdateMemberStatus() {
   if (!selectedMemberId.value) return;
   updateLoading.value = true;
@@ -876,8 +885,74 @@ const updateActionText = computed(() => {
 .member-table--pin-action :deep(thead th:last-child) {
   z-index: 3;
 }
+/* One line per cell, the same height on every row (owner report 2026-09-30). */
+.member-table :deep(td) {
+  height: 60px;
+  vertical-align: middle;
+}
+.member-table :deep(th) {
+  white-space: nowrap;
+}
+.member-nowrap {
+  white-space: nowrap;
+}
+.member-person {
+  max-width: 260px;
+  min-width: 160px;
+}
+.member-person__name,
+.member-person__email {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.member-person__email {
+  font-size: 12px;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+}
+.member-access {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 6px;
+  max-width: 380px;
+  min-width: 180px;
+}
 .member-table :deep(.member-role-chip) {
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  flex-shrink: 1;
+}
+/* A warning names the fix; it may take two lines rather than be cut off. */
+.member-table :deep(.member-role-chip--warn) {
   white-space: normal;
-  height: auto;
+  max-width: 300px;
+}
+.member-access__more,
+.member-access__scope {
+  font-size: 12px;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.member-access__sites {
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  color: rgb(var(--v-theme-primary));
+  text-decoration: underline;
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+.member-sites-card {
+  max-height: 360px;
+  overflow-y: auto;
+  min-width: 280px;
 }
 </style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.80.1",
+  "version": "4.81.0",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/last-active.ts

@@ -1,3 +1,5 @@
+import { formatMemberDate } from "./member-row.ts";
+
 /**
  * "Last active" on the Members lists: the last time the person signed in
  * (server field `lastLoginAt`). Never signed in since the field existed -> "—".
@@ -12,5 +14,5 @@ export function formatLastActive(value?: string | Date | null, now: Date = new D
   const days = Math.round((dayStart(now) - dayStart(date)) / 86400000);
   if (days === 0) return `Today, ${time}`;
   if (days === 1) return `Yesterday, ${time}`;
-  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+  return formatMemberDate(date);
 }

package/utils/member-row.ts

@@ -0,0 +1,85 @@
+/**
+ * How one row of the Members table reads (owner report 2026-09-30, Aigle
+ * Members: an 18-site person's row was two ~250px paragraphs, role names were
+ * printed twice, the date wrapped onto three lines and the name was repeated
+ * as the email). Display only: nothing here changes what anybody may do.
+ */
+import { limitedSites, memberRoleChip } from "./role.ts";
+
+/** "Org - Admin ( For Site)" -> "Org Admin (per site)". Display only. */
+export function cleanRoleName(name: unknown): string {
+  if (typeof name !== "string") return "";
+  return name
+    .replace(/\s+/g, " ")
+    .replace(/\(\s+/g, "(")
+    .replace(/\s+\)/g, ")")
+    .replace(/\(for site\)/gi, "(per site)")
+    .replace(/(\S) - (\S)/g, "$1 $2")
+    .trim();
+}
+
+/** One site's role(s), each named once: "Security, Security" -> "Security". */
+function distinctRoles(roleName: unknown): string[] {
+  // ponytail: the server joins a site's roles with ", " (core peoplePage); a
+  // role name that itself holds ", " would be split here - display only.
+  const names = typeof roleName === "string" ? roleName.split(", ") : [];
+  return [...new Set(names.map(cleanRoleName).filter(Boolean))];
+}
+
+export type TMemberSite = { siteName: string; roleName: string };
+export type TMemberAccess = {
+  /** Role chips, each name once. */
+  roles: string[];
+  tone: "info" | "warn";
+  /** Where the person may go: "All sites", one site's name, "18 sites", or "". */
+  scope: string;
+  /** Every site with its role(s) - the popover behind a "N sites" count. */
+  sites: TMemberSite[];
+};
+
+/**
+ * The Members table's one "Role & access" cell.
+ * - Organisation level, limited to sites: the distinct roles once each, plus
+ *   the site's name (one site) or "N sites" (several; `sites` lists them all).
+ * - Organisation level, organisation-wide: the role, "All sites".
+ * - Site level: the role chip as before (it still warns about a role from
+ *   another site), with the row's site name.
+ */
+export function memberAccess(item: Record<string, any> | null | undefined, orgLevel = false): TMemberAccess {
+  const limited = limitedSites(item);
+  if (orgLevel && limited.length) {
+    const sites = limited.map((l) => ({
+      siteName: l.siteName || "A site",
+      roleName: distinctRoles(l.roleName).join(", ") || "No role",
+    }));
+    const roles = [...new Set(limited.flatMap((l) => distinctRoles(l.roleName)))];
+    return {
+      roles: roles.length ? roles : ["No role"],
+      tone: "info",
+      scope: sites.length === 1 ? sites[0].siteName : `${sites.length} sites`,
+      sites,
+    };
+  }
+  const chip = memberRoleChip(item ?? {}, orgLevel);
+  const text = chip ? (chip.tone === "info" ? cleanRoleName(chip.text) : chip.text) : "";
+  const scope = orgLevel ? "All sites" : typeof item?.siteName === "string" ? item.siteName : "";
+  return { roles: text ? [text] : [], tone: chip?.tone ?? "info", scope, sites: [] };
+}
+
+/** Name on top, email underneath - the email only when it adds something. */
+export function memberPerson(item: Record<string, any> | null | undefined): { name: string; email: string } {
+  const name = typeof item?.name === "string" ? item.name.trim() : "";
+  const email = typeof item?.email === "string" ? item.email.trim() : "";
+  if (!name) return { name: email, email: "" };
+  return { name, email: email.toLowerCase() === name.toLowerCase() ? "" : email };
+}
+
+/** "30 Sep 2026" - one line. Bad or empty -> "". */
+export function formatMemberDate(value?: string | Date | null): string {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  // Not en-GB's "short" month: newer ICU prints "Sept".
+  return `${date.getDate()} ${MONTHS[date.getMonth()]} ${date.getFullYear()}`;
+}
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];