@everystack/admin 0.4.2 → 0.4.3

package/src/utils/resolve-columns.ts

@@ -0,0 +1,107 @@
+/**
+ * Field columns for Show, Edit and Create: which field goes in which column,
+ * and how wide each column is. Pure; FieldColumns draws the result.
+ */
+
+import { editorFor } from './render-resolution';
+import type { EditorRegistry, FieldDefinition, LayoutColumn, ResourceConfig, ScreenLayout } from '../types';
+
+/** Width of a 'narrow' column, in px. */
+export const NARROW_COLUMN_WIDTH = 320;
+
+/** A column ready to draw: 'wide' takes the space left over, a number is fixed px. */
+export interface ResolvedColumn {
+  fields: FieldDefinition[];
+  width: 'wide' | number;
+}
+
+export type LayoutScreen = 'show' | 'edit' | 'create';
+
+/**
+ * The layout a screen uses: Show `showLayout ?? layout`, Edit
+ * `editLayout ?? layout`, Create `createLayout ?? editLayout ?? layout`.
+ * Undefined means the screen renders its single column as before.
+ */
+export function screenLayout(resource: ResourceConfig, screen: LayoutScreen): ScreenLayout | undefined {
+  switch (screen) {
+    case 'show':
+      return resource.showLayout ?? resource.layout;
+    case 'edit':
+      return resource.editLayout ?? resource.layout;
+    case 'create':
+      return resource.createLayout ?? resource.editLayout ?? resource.layout;
+  }
+}
+
+/**
+ * 'auto' puts a field in the main column when it needs room: a custom render
+ * or input, json, image, file, tags, relation, rich text, or a string longer
+ * than 255 characters.
+ */
+export function isMainField(field: FieldDefinition, editors?: EditorRegistry): boolean {
+  if (field.render || field.input) return true;
+  switch (field.type) {
+    case 'json':
+    case 'image':
+    case 'file':
+    case 'tags':
+    case 'relation':
+      return true;
+  }
+  if (field.format === 'html' || field.format === 'markdown') return true;
+  if (editorFor(field, editors)) return true;
+  return field.type === 'string' && (field.validation?.max ?? 0) > 255;
+}
+
+/**
+ * Place the screen's fields (already filtered and in screen order) into
+ * columns. A listed field the screen does not show is skipped; a field listed
+ * twice stays in its first column; a field no column lists goes at the end of
+ * the first column. Columns left empty are dropped. Default width: the first
+ * column wide, the others narrow.
+ */
+export function resolveColumns(
+  fields: FieldDefinition[],
+  layout: ScreenLayout,
+  editors?: EditorRegistry,
+): ResolvedColumn[] {
+  const placed: Array<{ fields: FieldDefinition[]; width?: 'wide' | 'narrow' | number }> =
+    layout === 'auto' ? autoColumns(fields, editors) : explicitColumns(fields, layout.columns);
+
+  return placed
+    .filter(col => col.fields.length > 0)
+    .map((col, index) => ({ fields: col.fields, width: columnWidth(col.width, index) }));
+}
+
+function autoColumns(fields: FieldDefinition[], editors?: EditorRegistry) {
+  const main = fields.filter(f => isMainField(f, editors));
+  const side = fields.filter(f => !isMainField(f, editors));
+  return [{ fields: main }, { fields: side }];
+}
+
+function explicitColumns(fields: FieldDefinition[], columns: LayoutColumn[]) {
+  const byName = new Map(fields.map(f => [f.name, f]));
+  const used = new Set<string>();
+  // A column that lists no field is ignored, so it never becomes the first.
+  const placed = columns.filter(col => col.fields.length > 0).map(col => {
+    const picked: FieldDefinition[] = [];
+    for (const name of col.fields) {
+      const field = byName.get(name);
+      if (!field || used.has(name)) continue;
+      used.add(name);
+      picked.push(field);
+    }
+    return { fields: picked, width: col.width };
+  });
+  const unlisted = fields.filter(f => !used.has(f.name));
+  if (placed.length === 0) return [{ fields: unlisted }];
+  placed[0] = { ...placed[0], fields: [...placed[0].fields, ...unlisted] };
+  return placed;
+}
+
+function columnWidth(width: 'wide' | 'narrow' | number | undefined, index: number): 'wide' | number {
+  if (typeof width === 'number' && Number.isFinite(width) && width > 0) return width;
+  if (width === 'wide') return 'wide';
+  if (width === 'narrow') return NARROW_COLUMN_WIDTH;
+  return index === 0 ? 'wide' : NARROW_COLUMN_WIDTH;
+}

package/src/utils/row-actions.ts

@@ -19,3 +19,31 @@ export function visibleRowActions(
     return action.when.in.includes(String(value));
   });
 }
+
+/**
+ * Estimated horizontal chrome of one action Button, in px: px-4 padding on both
+ * sides (2 x 16) plus a 1px border on both sides. An estimate, not a measurement.
+ */
+const ACTION_BUTTON_CHROME = 34;
+/**
+ * Estimated average width of one character in the Button's 14px medium label,
+ * in px. Measured in a browser on Show, Edit and Delete (70.3, 59.6 and 74.7px
+ * wide), which total 220.5px with the gaps; this gives 237px.
+ */
+const ACTION_CHAR_WIDTH = 8.5;
+/** Space between action buttons (the cell's gap-2), in px. */
+const ACTION_GAP = 8;
+
+/**
+ * Estimated width, in px, of a row of action buttons, each sized from its idle
+ * label. A two-step `confirm` label is not counted: it replaces the label only
+ * after the first press, and the Actions cell wraps if it does not fit. A
+ * resource's actionsWidth overrides this estimate.
+ */
+export function estimateActionsWidth(actions: RowActionConfig[]): number {
+  const buttons = actions.reduce(
+    (sum, action) => sum + ACTION_BUTTON_CHROME + Math.ceil(ACTION_CHAR_WIDTH * action.label.length),
+    0,
+  );
+  return buttons + Math.max(0, actions.length - 1) * ACTION_GAP;
+}

package/src/utils/scope-counts.ts

@@ -0,0 +1,63 @@
+/**
+ * Scope counts, planned. Tabs that are the values of one enum column (`state: 'eq.draft'`,
+ * `state: 'eq.published'`) share ONE grouped query; every other tab costs one count of its
+ * own. Pure, so the hook only has to run the plan.
+ */
+
+import type { ScopeConfig } from '../types';
+
+/** One grouped query: count rows by `column`, then hand each value's count to its tab. */
+export interface GroupedCount {
+  column: string;
+  /** Column value -> id of the tab that shows it. */
+  scopeIdByValue: Record<string, string>;
+}
+
+export interface ScopeCountPlan {
+  grouped: GroupedCount[];
+  /** Tabs that need a count query of their own, in the order given. */
+  single: ScopeConfig[];
+}
+
+/** `{ state: 'eq.draft' }` is the one shape that can ride a grouped query. */
+function equality(scope: ScopeConfig): { column: string; value: string } | null {
+  const entries = Object.entries(scope.filter ?? {});
+  if (entries.length !== 1) return null;
+  const [column, raw] = entries[0];
+  if (typeof raw !== 'string' || !raw.startsWith('eq.') || raw.length === 3) return null;
+  return { column, value: raw.slice(3) };
+}
+
+export function planScopeCounts(scopes: ScopeConfig[]): ScopeCountPlan {
+  const byColumn = new Map<string, Array<{ scope: ScopeConfig; value: string }>>();
+  for (const scope of scopes) {
+    const eq = equality(scope);
+    if (!eq) continue;
+    const members = byColumn.get(eq.column) ?? [];
+    // Two tabs on one value cannot share a row of the answer: the later one counts alone.
+    if (!members.some(m => m.value === eq.value)) members.push({ scope, value: eq.value });
+    byColumn.set(eq.column, members);
+  }
+
+  const grouped: GroupedCount[] = [];
+  const inGroup = new Set<ScopeConfig>();
+  for (const [column, members] of byColumn) {
+    if (members.length < 2) continue;
+    grouped.push({
+      column,
+      scopeIdByValue: Object.fromEntries(members.map(m => [m.value, m.scope.id])),
+    });
+    for (const m of members) inGroup.add(m.scope);
+  }
+  return { grouped, single: scopes.filter(scope => !inGroup.has(scope)) };
+}
+
+/** Each tab of the group gets its value's count; a value with no rows is zero, not missing. */
+export function countsFromGrouped(rows: Record<string, unknown>[], group: GroupedCount): Record<string, number> {
+  const counts = Object.fromEntries(Object.values(group.scopeIdByValue).map(id => [id, 0]));
+  for (const row of rows) {
+    const id = group.scopeIdByValue[String(row[group.column])];
+    if (id !== undefined) counts[id] = Number(row.count ?? 0);
+  }
+  return counts;
+}

package/src/utils/scopes.ts

@@ -0,0 +1,38 @@
+/**
+ * Scope rules: which scope is active, and building scope tabs from an enum.
+ * Pure, so the list screen only has to render the answer.
+ */
+
+import type { FieldDefinition, ScopeConfig } from '../types';
+
+/**
+ * The active scope: the one the URL names; else the one marked default (the
+ * first, if several are); else the first scope. A URL naming a scope that no
+ * longer exists falls back the same way, so an old link still opens a list.
+ */
+export function resolveScope(scopes: ScopeConfig[] | undefined, id: string | undefined): ScopeConfig | undefined {
+  if (!scopes || scopes.length === 0) return undefined;
+  return (
+    scopes.find(scope => scope.id === id) ??
+    scopes.find(scope => scope.default) ??
+    scopes[0]
+  );
+}
+
+/** `in_review` → `In review`. */
+const labelFor = (value: string): string => {
+  const words = value.replace(/_/g, ' ');
+  return words.charAt(0).toUpperCase() + words.slice(1);
+};
+
+/** One scope per value of an enum field, filtering on equality. Combine with other scopes in the config. */
+export function enumScopes(field: FieldDefinition): ScopeConfig[] {
+  if (!field.enumValues || field.enumValues.length === 0) {
+    throw new Error(`enumScopes needs an enum field with enumValues; "${field.name}" has none`);
+  }
+  return field.enumValues.map(value => ({
+    id: value,
+    label: labelFor(value),
+    filter: { [field.name]: `eq.${value}` },
+  }));
+}

package/src/utils/tags.ts

@@ -0,0 +1,40 @@
+/**
+ * Value handling for `type: 'tags'` fields (a text[] column).
+ *
+ * The rule is: never drop or reorder a stored value implicitly. A toggle adds
+ * or removes the one value pressed and leaves the rest of the array as it was.
+ */
+
+import type { FieldDefinition } from '../types';
+
+/** The stored value as a string array. null/undefined is []; a lone scalar is kept as one value. */
+export function tagValues(value: unknown): string[] {
+  if (value == null) return [];
+  if (Array.isArray(value)) return value.map(v => String(v));
+  return [String(value)];
+}
+
+/** Add `tag` when absent (at the end), remove it when present. Every other value keeps its place. */
+export function toggleTag(values: readonly string[], tag: string): string[] {
+  return values.includes(tag) ? values.filter(v => v !== tag) : [...values, tag];
+}
+
+/** Every value the field's groups list. */
+function listedTags(field: FieldDefinition): Set<string> {
+  return new Set((field.tagGroups ?? []).flatMap(g => g.options.map(o => o.value)));
+}
+
+/** The label of `tag` from the field's groups, or the raw value when no group lists it. */
+export function tagLabel(field: FieldDefinition, tag: string): string {
+  for (const group of field.tagGroups ?? []) {
+    const option = group.options.find(o => o.value === tag);
+    if (option) return option.label ?? option.value;
+  }
+  return tag;
+}
+
+/** Stored values no group lists, first occurrence order, once each. */
+export function unlistedTags(field: FieldDefinition, values: readonly string[]): string[] {
+  const listed = listedTags(field);
+  return [...new Set(values.filter(v => !listed.has(v)))];
+}

package/src/utils/view-filters.ts

@@ -37,7 +37,7 @@ export function filtersToParams(filters: DashboardFilters, dimensions: Dimension
 }
 
 /** Query params reserved for view state (not column filters). */
-const RESERVED_PARAMS = new Set(['from', 'to', 'sort', 'order', 'page', 'q']);
+export const RESERVED_PARAMS: ReadonlySet<string> = new Set(['from', 'to', 'sort', 'dir', 'page', 'size', 'q', 'tab']);
 
 /**
  * Pass-through column filters: any query param that names a real resource field