98 lines
3.7 KiB
Markdown
98 lines
3.7 KiB
Markdown
# 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
|
||
|
||
1. `GET /api/table/meta` → column definitions, primary key, foreign keys.
|
||
2. 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.
|
||
3. Initialises (or re-initialises) the Tabulator instance with `ajaxURL: /api/table/data`.
|
||
4. Tabulator handles subsequent page/filter requests automatically.
|
||
|
||
### 4. Toolbar Actions
|
||
|
||
| 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.
|
||
|
||
---
|
||
|
||
## Modal UX Rules
|
||
|
||
- 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.
|