Skip to content

feat(cards): catalogs, trucks and networks render on the shared resource card - #122

Closed
roncodes wants to merge 5 commits into
release/v0.4.25from
feat/resource-cards-and-trucks
Closed

roncodes wants to merge 5 commits into
release/v0.4.25from
feat/resource-cards-and-trucks

Conversation

@roncodes

Copy link
Copy Markdown
Member

What change does this PR introduce?

First implementation step of the Storefront UX overhaul (design canvas boards 4, 9a and 9c): the catalog, truck and network index pages move from hand-rolled boxes to the shared card anatomy Fleet-Ops uses, on Layout::Resource::CardsGrid and Layout::Resource::Card.

  • Storefront::Catalog::Card: name and status in the header, the categories it contains with product counts, a seven-day hours strip, the product total, edit and delete. A draft catalog is dashed; an empty one says so. Clicking the name opens the editor.
  • Storefront::Truck::Card: a Vehicle::Pill (photo, plate, online dot) as the identity, the service area and zone as subtitle, the vehicle photo as media, and a presence badge that says what matters to a store: serving, offline, inactive, or online with no catalog. Catalog count and, when the API sends it, the owning store.
  • Storefront::Network::Card: logo on backdrop, online indicator, currency and member count, open, invite and delete.
  • Storefront::HoursStrip: a reusable strip from any list of day_of_week / start / end records (catalog, store and product hours), with each day's hours as its title.
  • Each card exposes storefront:component:<resource>:card:header|footer:start|end registry slots, like the Fleet-Ops cards.
  • The catalogs and trucks pages gain the search the header already offered (a debounced task feeding the query param the routes refresh on); networks keep theirs and gain the grid's pagination.
  • "Trucks": the sidebar, header, modal labels, notifications and empty states say "Trucks". The food-truck model, routes, permissions and translation keys keep their names, as agreed. The copy-pasted "Edit Food Truck" title on the catalog editor is fixed.
  • food-truck model gains the online and store attributes the resource already returns.
  • Styles: a storefront-card* block and storefront-hours-strip* in storefront-engine.css, mirroring the fleetops-card* values.

Why was this change needed?

The three pages rendered their own boxes with different spacing, no status, no counts and no empty states. One anatomy, restyled once in ember-ui later, is the point of the overhaul; the generic Resource::Card primitive proposed for ember-ui will replace these three thin components when it ships.

Other information

Stacked on #121 (the test-environment fixes); until #121 merges this PR shows that commit too. Target is release/v0.4.25.

Validation, run locally with the linked fleetops-data branch:

pnpm run lint          # eslint, template-lint, stylelint, intl: clean
pnpm run build         # running at PR open; result in a follow-up comment
pnpm exec ember test --filter "/hours-strip|catalog\/card|truck\/card|network\/card|Controller \| catalogs|Controller \| food-trucks|Controller \| networks\/index:/"
# running at PR open; result in a follow-up comment

New tests cover the hours strip, the three cards (content, states, actions, empty and draft cases) and the existing controller tests still pass.

i18n: new storefront.catalogs.*, storefront.trucks.*, storefront.networks.card.* and storefront.common.offline|last-modified keys in en-us only; other locales fall back to the key until translated. No API or fleetbase/postman impact; the fleetbase.io docs screenshots of the three pages will be out of date.

The dummy app never ran: ember-classic-decorator (unused) crashes on Ember 5,
lazy loading kept the engine's modules out of the test bundle, and the host
services, config and intl data the panels need were missing. Mirrors what
fleetops already does: eager loading when `ember test` runs from this package,
an inert stand-in for the console's extensions module, the API config the
core adapter reads at module scope, and the legacy built-in components the
engine's templates still use.

The dummy intl service ignores missing locale data, since headless Chrome has
no number formats for every bundled locale, and the order details and network
controller tests stub the host router, fetch and app cache the way the widget
tests already do.
…rce card

Catalog, truck and network index pages use Layout::Resource::CardsGrid with
one card each on Layout::Resource::Card, following the Fleet-Ops anatomy:
identity and subtitle in the header, media or facts in the body, status,
icon actions and meta in the footer, with registry slots at each end.

A catalog card shows its categories with product counts, its hours as a
seven-day strip (the new Storefront::HoursStrip) and its product total; a
draft is dashed. A truck card is a Vehicle::Pill with the online dot, the
vehicle photo, where it serves, and a presence badge that says serving,
offline, inactive, or online with no catalog. A network card shows the logo on
its backdrop, the online state, the currency and member count.

"Food trucks" reads "Trucks" in the UI; the food-truck model, routes and
permissions keep their names. The catalogs and trucks pages gain the search
the header already offered.
@roncodes

Copy link
Copy Markdown
Member Author

Validation on 672665c, run locally with the linked fleetops-data branch:

pnpm run lint       # eslint, template-lint, stylelint, intl: clean
pnpm run build      # clean
pnpm exec ember test --filter "/hours-strip|catalog\/card|truck\/card|network\/card|Controller \| catalogs|Controller \| food-trucks|Controller \| networks\/index:/"
# 8 tests, 8 pass (hours strip 2, catalog card 2, truck card 2, network card 2); the catalogs, trucks and networks controller "it exists" tests pass in the same run

The first run had the two truck card tests failing; 672665c fixes both: the pill's online dot is read from the vehicle record (the shared Vehicle::Pill does not take an @online override), and a truck without a vehicle no longer asserts on photo_url and shows its placeholder instead.

… and crashed createRecord; the store summary is store_summary
@roncodes

Copy link
Copy Markdown
Member Author

Superseded by the single overhaul PR (one branch, one PR targeting release/v0.4.25, per maintainer request).

@roncodes roncodes closed this Oct 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant