Frontend

Overview

The frontend is a single-page application with no build step — plain HTML, vanilla JS, and CDN-loaded Tabulator. The PHP backend serves index.html as the document root; all interactivity is handled by app.js.

Files

File	Role
`public/index.html`	Shell layout: login panel, left sidebar, top toolbar, grid container
`public/js/app.js`	All application logic

Layout Regions

┌─────────────────────────────────────────────┐
│  Login bar  (username · password · button)  │
├────────────┬────────────────────────────────┤
│  Sidebar   │  Toolbar                       │
│            │  (Insert · Save · Delete · …)  │
│  Schema    ├────────────────────────────────┤
│   └ Table  │  Tabulator grid                │
│   └ Table  │  (column header filters,       │
│            │   inline editing, pagination)  │
└────────────┴────────────────────────────────┘

app.js — Key Responsibilities

1. Authentication

Reads credentials from the login bar, POSTs to /api/login.
On success, hides the login bar and calls the tree loader.

2. Schema / Table Tree

Fetches GET /api/tree and renders a collapsible tree in the sidebar.
Clicking a table node triggers a table load.

3. Table Load Sequence

GET /api/table/meta → column definitions, primary key, foreign keys.
Builds a Tabulator column config array from metadata:
- Sets editor type per column (input, number, datalist for FK).
- Marks PK columns as read-only or hidden.
Initialises (or re-initialises) the Tabulator instance with ajaxURL: /api/table/data.
Tabulator handles subsequent page/filter requests automatically.

Button	Action
Insert	Sends `POST /api/table/insert` with an empty/default row
Save row	Sends `POST /api/table/update` with the selected row
Delete	Sends `POST /api/table/delete-batch` for selected rows after confirmation
Import CSV	Opens file picker, uploads to `/api/table/import-csv`
Export CSV	Opens `GET /api/table/export-csv` as a download
Backup	Opens `GET /api/backup/{schema}` as a download

5. Foreign Key Autocomplete

For FK columns, a <datalist> is populated from GET /api/fk-values.
Tabulator uses an HTML5 datalist editor so the user can type or pick a value.

Tabulator Configuration Notes

Ajax progressive load: data is fetched page-by-page via ajaxURL.
Column header filters: each column gets a headerFilter input; values are sent as the filters param to the data endpoint.
Row selection: checkbox column enables multi-select for batch delete.
Inline editing: cells are editable directly; changed rows are tracked for the Save action.

Dependencies

Library	Version	How loaded
Tabulator	latest stable	CDN (`tabulator.info`)

No bundler, no transpiler, no node_modules.

Destructive or data-entry modals must not close on backdrop click.
Close such modals only via explicit controls: Отмена, Закрыть, or a top-right × button.
If a modal can be closed, provide a visible close button in the header (top-right ×) in addition to the footer action when applicable.

3.7 KiB Raw Blame History Unescape Escape