Files
breadcrumb-the-shire/web/js/pages/admin-tenants-index.js
fs 874a90d8f8 refactor(admin-lists): slim tenant + user grids, Stripe-style pagination
Tenant list:
- Drop the avatar/logo column — the list now shows only Tenant name
  and user count. Also drop the logo-hasLogo server lookup and the
  initials/placeholder markup.

User list (13 → 4 columns, Stripe pattern):
- User (compound: avatar + Name + email subtitle, click opens drawer)
- Tenants (badges, primary tooltip)
- Last login (relative badge)
- State (active/inactive badge)
- UUID hidden at the last column for cells[uuidIndex].data
- Everything else (departments, roles, phone, mobile, short_dial,
  created, modified) lives in the detail drawer.
- Document the off-by-one gotcha: with row selection enabled gridjs
  prepends a checkbox cell, so runtime cells[] are shifted by +1;
  uuidIndex is 5 (column position 4 + selection offset).
- New .grid-user-profile css mirrors .grid-tenant-profile (avatar +
  stacked name/email) with ellipsis and primary-color hover affordance.

Pagination (all Grid.js lists):
- Non-current page buttons now use the neutral-chip secondary-outline
  tokens (--app-button-neutral-*) plus the raised box-shadow — matches
  the rest of the button system in both light and dark themes.
- Current page stays distinctly primary-filled with the filled-shadow;
  focus-visible combines the chip shadow with the primary focus ring.
- Disabled pager buttons remain neutral but lose the lift shadow.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-24 21:52:44 +02:00

75 lines
2.2 KiB
JavaScript

import { createListPageModule } from '../core/app-list-page-module.js';
import { escapeHtml } from './app-list-utils.js';
createListPageModule({
configId: 'admin-tenants-index',
moduleId: 'admin-tenants-index',
missingGridMessage: 'Tenants grid init failed: Grid.js missing',
initErrorMessage: 'Tenants grid init failed',
setup: ({ config, gridjs, appBase, initListPage }) => {
const filterSchema = config.filterSchema ?? [];
const filterChipMeta = config.filterChipMeta ?? [];
const labels = config.labels ?? {};
const tenantUuidIndex = 2;
const { gridConfig } = initListPage({
grid: {
gridjs,
container: '#tenants-grid',
dataUrl: 'admin/tenants/data',
appBase,
columns: [
{
name: labels.tenant || 'Tenant',
sort: true,
width: '75%',
formatter: (cell) => gridjs.html(escapeHtml(String(cell ?? ''))),
},
{
name: labels.users || 'Users',
sort: true,
width: '25%',
formatter: (cell) => {
const number = Number(cell ?? 0);
return gridjs.html(String(Number.isFinite(number) ? number : 0));
},
},
{
name: 'UUID',
hidden: true,
},
],
sortColumns: ['description', 'users', null],
paginationLimit: 10,
language: config.gridLang ?? {},
mapData: (data) => data.data.map((row) => [
row.description ?? '',
row.total_users ?? 0,
row.uuid,
]),
rowInteraction: { linkColumn: 0 },
search: config.gridSearch ?? null,
filterSchema,
urlSync: true,
rowDataset: (row) => ({
uuid: row?.cells?.[tenantUuidIndex]?.data,
}),
rowDblClick: {
getUrl: (rowData) => {
const uuid = rowData?.cells?.[tenantUuidIndex]?.data;
return uuid ? new URL(`admin/tenants/edit/${uuid}`, appBase).toString() : '';
},
},
},
filters: {
mode: 'drawer',
chipMeta: filterChipMeta,
watchInputs: ['#tenant-search'],
},
}) || {};
return gridConfig;
},
});