Skip to content

Module Manager: ajax DataTable (client/server paradigm) — fixes the filter FOUC - #327

Open
WebTigers wants to merge 1 commit into
mainfrom
refactor/modules-datatable-ajax
Open

WebTigers wants to merge 1 commit into
mainfrom
refactor/modules-datatable-ajax

Conversation

@WebTigers

Copy link
Copy Markdown
Owner

What

Refactors the Module Manager grid from server-rendered rows + client-side filtering to the Tiger
DataTables paradigm (WEBSERVICES §5), the same shape the Users table uses: an empty <table> fed by
System_Service_Modules::datatable over /api, with server-side search / type-filter / sort / paginate
and client column renderers that gate controls off per-row ACL flags.

Why

The old screen rendered all rows server-side and filtered them client-side, so a remembered tab flashed
All → the chosen type on load (the FOUC Beau reported). Fetching rows already-filtered removes the
flash at the source.

How the FOUC goes away

  • The chosen type is remembered in a cookie; the controller reads it and renders the matching pill
    active, so extraData sends that type on the first ajax load — the grid loads already filtered
    (just the normal processing spinner, never a wrong-filter flash).
  • catalog() is the one authority for the module list (controller builds the pills + counts from it; the
    datatable feed filters/sorts/paginates it).
  • The response carries the full-catalog per-type counts, so a drawCallback keeps the pill badges
    accurate after an activate / delete with no page reload.

Also

  • Activate / deactivate / delete now re-fetch the grid in place (table.ajax.reload) instead of
    window.location.reload() — answering the earlier "why reload at all?" (the sidebar nav for a
    newly-active module still updates on next navigation; that's the one accepted trade).
  • Removes the inline <style> block (the 2-line description clamp is now an inline style= attr in the
    renderer).
  • tigerDataTable's built-in stateSave remembers sort / page / length / search for free.

Supersedes #326 (localStorage tab persistence) — closed in favour of this.

Verified on dev

  • catalog() → 36 modules, counts {plugin:17, app:12, developer:2, theme:4, sdk:1}.
  • datatable(type=theme) → result 1, total 36, filtered 4, page 4; row carries type_label, type_icon,
    source, active, is_theme, can_toggle, can_delete, is_default; counts echoed.
  • search=grey → filtered 1 → theme-grey-mist. ACL gate enforced (superadmin only).

🤖 Generated with Claude Code

https://claude.ai/code/session_01ASauLLscjqdsNqBNsx2Typ

…ilter FOUC

The modules grid server-rendered every row and filtered client-side, so a remembered tab flashed All →
the chosen type on load. Refactored to the Tiger datatable paradigm the Users table uses: an EMPTY table
fed by System_Service_Modules::datatable over /api (server-side search / type-filter / sort / paginate),
column renderers that build the cells + gate the activate/deactivate/delete controls off per-row flags
(can_toggle / can_delete), and the chosen type remembered in a cookie the controller reads so the active
pill renders server-side and the first ajax load is already filtered — no flash. catalog() is the shared
authority (controller pills + the feed). Activate/delete now re-fetch the grid in place
(table.ajax.reload) instead of window.location.reload, and the full-catalog counts ride each response so
the pills stay accurate. Removes the inline <style> (the desc clamp is an inline style attr in the
renderer). Supersedes #326 (tab persistence) — tigerDataTable's stateSave covers sort/page/search for free.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ASauLLscjqdsNqBNsx2Typ
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