# 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.