Zakładki ustawień

View on GitHub

Zakładki ustawień

/settings to pojedyncza strona Inertii (Pages/Settings/Index.tsx) obejmująca zarówno sekcję Account (Preferences, Profile, Notifications, Security & access, Export), jak i sekcję Workspace (Members, Roles & management, Integrations, Labels, Statuses, Priorities, Templates, Documents) — to, która zakładka się renderuje, czy w ogóle jest osiągalna, i który z dwóch dużych komponentów treści (AccountSettingsContent / WorkspaceSettingsContent) ją posiada, wszystko to jest sterowane jedną tablicą-rejestrem, SETTINGS_TABS. Ta kategoria dokumentuje ten rejestr oraz dwa różne kształty "dodaj zakładkę": włączenie już zbudowanego placeholdera i dodanie zupełnie nowej od zera.

Przewodniki, w kolejności, w jakiej faktycznie będziesz ich potrzebować

  1. Włącz placeholder zakładkę na żywo — przećwiczony przykład włączenia już zbudowanej zakładki Export, ten sam kształt "UI już istnieje, po prostu spraw, żeby był osiągalny i prawdziwy", co przykład Slacka w ../integrations/01-add-a-new-integration.md.
  2. Dodaj zupełnie nową zakładkę ustawień — przećwiczony przykład dodania zakładki billing, która jeszcze w ogóle nie istnieje: typ, wpis w rejestrze, komponent oraz switch, który do niego kieruje.

Architektura w jednym akapicie

SETTINGS_TABS (resources/js/types/Settings.ts) to płaska tablica każdej zakładki — id, etykieta, ikona, section ('account' albo 'workspace'), opis oraz boolean enabled. Pages/Settings/Index.tsx rozstrzyga aktywną zakładkę ze stringa zapytania ?tab=, ale akceptuje ją tylko, jeśli przechodzą zarówno isSettingsTabId(), jak i isEnabledSettingsTabId() — nieznane albo enabled: false id zakładki po cichu spada z powrotem do SETTINGS_DEFAULT_TAB ('preferences') zamiast rzucać błąd, więc wyłączona zakładka jest tak samo nieosiągalna przez URL, jak przez kliknięcie w pasku bocznym. Dwa kolejne guardy typów, isAccountSettingsTabId() / isWorkspaceSettingsTabId(), decydują, który z dwóch komponentów treści — AccountSettingsContent czy WorkspaceSettingsContent — się renderuje; każdy z nich to sam w sobie płaski łańcuch if (tabId === '...') return <...Tab />, nie tablica przeglądowa, więc nowa zakładka potrzebuje nowej gałęzi w tym, do którego należy. Backend nie ma żadnego odpowiadającego pojęcia "zakładek" w ogóle — SettingsController::index() zawsze oblicza i zwraca propy dla danych każdej zakładki przy każdym żądaniu, niezależnie od tego, która jest aktywna (zobacz ../architecture/03-frontend-architecture-and-atomic-design.md po to, dlaczego to nadmierne pobieranie jest tu akceptowalnym, celowym uproszczeniem), więc brak jeszcze prawdziwych danych backendu dla wyłączonej zakładki nigdy nie blokuje włączenia jej powłoki UI — tylko to, żeby robiła cokolwiek prawdziwego.