refactor(admin-tenants): simplify list to 2 columns (avatar + name, users)
Reduce tenant grid from 8 columns to 2. Remove status, theme, sso, active/inactive users, and created columns from the list view. All details remain accessible on the edit page. - filter-schema: allow order by description and users only - data endpoint: return minimal row shape (id, uuid, description, status metadata for badge only, is_default, has_avatar, total_users) - JS grid: 2 visible columns + hidden UUID for navigation - CSS: add .grid-tenant-profile utility for flex avatar+name layout Refs: TENANT-LIST-MINIMAL-001
This commit is contained in:
@@ -203,6 +203,21 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.grid-tenant-profile {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.grid-tenant-profile-name-text {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gridjs-loading-bar:after {
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { createListPageModule } from '../core/app-list-page-module.js';
|
||||
import { badgeHtml, escapeHtml } from './app-list-utils.js';
|
||||
import { escapeHtml } from './app-list-utils.js';
|
||||
|
||||
createListPageModule({
|
||||
configId: 'admin-tenants-index',
|
||||
@@ -7,54 +7,19 @@ createListPageModule({
|
||||
missingGridMessage: 'Tenants grid init failed: Grid.js missing',
|
||||
initErrorMessage: 'Tenants grid init failed',
|
||||
setup: ({ config, gridjs, appBase, initListPage }) => {
|
||||
const gridSearch = config.gridSearch ?? null;
|
||||
const filterSchema = config.filterSchema ?? [];
|
||||
const filterChipMeta = config.filterChipMeta ?? [];
|
||||
const labels = config.labels ?? {};
|
||||
|
||||
const tenantUuidIndex = 8;
|
||||
const tenantDescriptionIndex = 1;
|
||||
const formatBadge = (value) => badgeHtml(gridjs, value);
|
||||
const tenantUuidIndex = 2;
|
||||
const initialsForRow = (row) => {
|
||||
const descriptionCell = row?.cells?.[tenantDescriptionIndex]?.data;
|
||||
const descriptionCell = row?.cells?.[0]?.data;
|
||||
const label = typeof descriptionCell === 'object' && descriptionCell !== null
|
||||
? String(descriptionCell.label ?? '')
|
||||
: String(descriptionCell ?? '');
|
||||
const initial = label.trim().charAt(0).toUpperCase();
|
||||
return initial || '?';
|
||||
};
|
||||
const formatStatus = (value) => {
|
||||
if (!value || typeof value !== 'object') {
|
||||
return gridjs.html('-');
|
||||
}
|
||||
const variant = String(value.variant || 'neutral');
|
||||
const label = String(value.label || '-');
|
||||
return gridjs.html(`<span class="badge" data-variant="${variant}">${label}</span>`);
|
||||
};
|
||||
const formatTheme = (cell) => {
|
||||
if (!cell || typeof cell !== 'object') {
|
||||
return gridjs.html('');
|
||||
}
|
||||
const themeLabel = escapeHtml(cell.label ?? '');
|
||||
const label = cell.is_override ? themeLabel : `${themeLabel} (${escapeHtml(labels.default || 'Default')})`;
|
||||
return gridjs.html(label);
|
||||
};
|
||||
const formatSso = (cell) => {
|
||||
if (!cell || typeof cell !== 'object') {
|
||||
return gridjs.html('');
|
||||
}
|
||||
if (!cell.enabled) {
|
||||
return gridjs.html(escapeHtml(labels.inactive || 'Inactive'));
|
||||
}
|
||||
if (cell.microsoft_only) {
|
||||
return gridjs.html(escapeHtml(labels.microsoftOnly || 'Microsoft only'));
|
||||
}
|
||||
return gridjs.html(escapeHtml(labels.active || 'Active'));
|
||||
};
|
||||
const formatCount = (value) => {
|
||||
const number = Number(value ?? 0);
|
||||
return Number.isFinite(number) ? number : 0;
|
||||
};
|
||||
|
||||
const { gridConfig } = initListPage({
|
||||
grid: {
|
||||
@@ -64,84 +29,59 @@ createListPageModule({
|
||||
appBase,
|
||||
columns: [
|
||||
{
|
||||
name: labels.avatar || 'Avatar',
|
||||
sort: false,
|
||||
name: labels.tenant || 'Tenant',
|
||||
sort: true,
|
||||
width: '75%',
|
||||
formatter: (cell, row) => {
|
||||
if (!cell) {
|
||||
const hasAvatar = cell?.has_avatar ? 1 : 0;
|
||||
const uuid = encodeURIComponent(String(cell?.uuid ?? ''));
|
||||
let avatarHtml = '';
|
||||
if (hasAvatar && uuid) {
|
||||
const src = new URL(`admin/tenants/avatar-file?uuid=${uuid}&size=64`, appBase).toString();
|
||||
avatarHtml = `<img class="grid-avatar grid-avatar-tenant" src="${src}" alt="" loading="lazy">`;
|
||||
} else {
|
||||
const initials = escapeHtml(initialsForRow(row));
|
||||
return gridjs.html(`<span class="grid-avatar grid-avatar-tenant grid-avatar-placeholder">${initials}</span>`);
|
||||
avatarHtml = `<span class="grid-avatar grid-avatar-tenant grid-avatar-placeholder">${initials}</span>`;
|
||||
}
|
||||
const uuid = encodeURIComponent(String(cell));
|
||||
const src = new URL(`admin/tenants/avatar-file?uuid=${uuid}&size=64`, appBase).toString();
|
||||
const full = new URL(`admin/tenants/avatar-file?uuid=${uuid}&size=256`, appBase).toString();
|
||||
return gridjs.html(`<a data-fslightbox="tenant-avatars" href="${full}"><img class="grid-avatar grid-avatar-tenant" src="${src}" alt="" loading="lazy"></a>`);
|
||||
|
||||
const nameText = escapeHtml(String(cell?.label ?? ''));
|
||||
|
||||
return gridjs.html(
|
||||
`<div class="grid-tenant-profile">` +
|
||||
`${avatarHtml}` +
|
||||
`<span class="grid-tenant-profile-name-text">${nameText}</span>` +
|
||||
`</div>`
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: labels.description || 'Description',
|
||||
name: labels.users || 'Users',
|
||||
sort: true,
|
||||
width: '25%',
|
||||
formatter: (cell) => {
|
||||
if (!cell || typeof cell !== 'object') {
|
||||
return gridjs.html(escapeHtml(String(cell ?? '')));
|
||||
}
|
||||
const label = escapeHtml(cell.label ?? '');
|
||||
return gridjs.html(label);
|
||||
const number = Number(cell ?? 0);
|
||||
return gridjs.html(String(Number.isFinite(number) ? number : 0));
|
||||
},
|
||||
},
|
||||
{
|
||||
name: labels.status || 'Status',
|
||||
sort: false,
|
||||
formatter: (cell) => formatStatus(cell),
|
||||
},
|
||||
{
|
||||
name: labels.theme || 'Theme',
|
||||
sort: true,
|
||||
formatter: (cell) => formatTheme(cell),
|
||||
},
|
||||
{
|
||||
name: labels.sso || 'SSO',
|
||||
sort: true,
|
||||
formatter: (cell) => formatSso(cell),
|
||||
},
|
||||
{
|
||||
name: labels.activeUsers || 'Active users',
|
||||
sort: true,
|
||||
formatter: (cell) => formatCount(cell),
|
||||
},
|
||||
{
|
||||
name: labels.inactiveUsers || 'Inactive users',
|
||||
sort: true,
|
||||
formatter: (cell) => formatCount(cell),
|
||||
},
|
||||
{
|
||||
name: labels.created || 'Created',
|
||||
sort: true,
|
||||
formatter: (cell) => formatBadge(cell),
|
||||
},
|
||||
{
|
||||
name: 'UUID',
|
||||
hidden: true,
|
||||
},
|
||||
],
|
||||
sortColumns: [null, 'description', 'status', 'theme', 'sso', 'active_users', 'inactive_users', 'created', null],
|
||||
sortColumns: ['description', 'users', null],
|
||||
paginationLimit: 10,
|
||||
language: config.gridLang ?? {},
|
||||
mapData: (data) => data.data.map((row) => [
|
||||
row.has_avatar ? row.uuid : '',
|
||||
{
|
||||
label: row.description,
|
||||
is_default: row.is_default ? 1 : 0,
|
||||
uuid: row.uuid ?? '',
|
||||
label: row.description ?? '',
|
||||
has_avatar: row.has_avatar ? 1 : 0,
|
||||
},
|
||||
{ variant: row.status_badge || 'neutral', label: row.status_label || row.status || '-' },
|
||||
row.theme ?? null,
|
||||
row.sso ?? null,
|
||||
row.active_users ?? 0,
|
||||
row.inactive_users ?? 0,
|
||||
row.created,
|
||||
row.total_users ?? 0,
|
||||
row.uuid,
|
||||
]),
|
||||
rowInteraction: { linkColumn: 1 },
|
||||
search: gridSearch,
|
||||
rowInteraction: { linkColumn: 0 },
|
||||
search: config.gridSearch ?? null,
|
||||
filterSchema,
|
||||
urlSync: true,
|
||||
rowDataset: (row) => ({
|
||||
|
||||
Reference in New Issue
Block a user