Skip to content

README.md

Latest commit

 

History

History
59 lines (44 loc) · 3.29 KB

README.md

File metadata and controls

59 lines (44 loc) · 3.29 KB
Raw

Northwind Admin

A worked example: a complete admin application built from @xui/* packages and nothing else.

nx serve admin     # dev server
nx build admin     # production build to dist/apps/admin
nx test admin      # the pure logic — metrics and formatting
nx lint admin

Any email and password sign you in; there is no authentication behind the guard. The data is generated from a fixed seed, so every reload shows the same figures.

What it covers

Page Worth looking at
Dashboard Statistics with period-over-period change, two ECharts charts, a timeline, skeleton states
Customers Filter/sort/paginate over one signal, detail drawer, destructive delete with undo
Orders 5,000 rows in a virtualised xui-data-table with a custom cell template
Products Card grid with sparklines; restocking updates the sidebar badge
Settings Tabbed forms, switches, a theme radio bound to the same signal as the header toggle
Sign in The one route outside the shell, plus the guard and the redirect back

The shell adds a ⌘K command palette (every destination plus every customer, from one navigation model), a ? shortcuts dialog generated by @xui/hotkeys, toasts, and a mobile drawer that shares its component with the desktop rail.

The idea worth copying

Everything derives. DataStore holds four signals; the pages hold computed() over them. Deleting a customer updates one signal, and the table, the sidebar badge and the page summary all follow — there is no refresh path, no subscription and no ngOnChanges anywhere in the app.

metrics.ts is where that pays off twice: it is plain functions over an array, so the dashboard's figures are unit-tested without a TestBed, a fixture or a component.

Two library workarounds, and why they are here

Both should disappear once the underlying packages change; the code says so at each site.

  • app-field instead of xui-form-field for a select, a textarea or a radio group. xui-form-field throws must contain an XFormFieldControl during change detection unless it finds that token, and only @xui/input provides it. The throw takes down the whole view — it is what blanked the settings tabs while this was being built. See shell/field.ts.
  • No g d-style navigation shortcuts. XuiHotkey.combo documents sequences (g h is in its own examples) but parseXCombo only splits on +, so a sequence parses as one key named "g d" and never matches. It would fail silently while still appearing in the generated help dialog.

Layout notes

Two things bite on a phone and are fixed in the templates rather than worked around in CSS:

  • Grid and flex items need min-w-0. A track is min-content-sized by default, so one wide child — a table whose columns are deliberately fixed-width — widens the track and pushes the page sideways.
  • Strips that cannot shrink (a six-option segmented control, a four-label tab list) get their own overflow-x-auto so the strip scrolls instead of the page.