fixup
This commit is contained in:
@@ -0,0 +1,501 @@
|
||||
{% extends "_shell.html" %}
|
||||
{% block title %}數據管理：{{ table }} — alterdb{% endblock %}
|
||||
{% block style %}
|
||||
<style>
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.toolbar .title { display: flex; align-items: baseline; gap: .7rem; margin: 0; min-width: 0; }
|
||||
.toolbar h2 { margin: 0; overflow-wrap: anywhere; }
|
||||
.toolbar .type-badge {
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: .05em;
|
||||
text-transform: uppercase;
|
||||
padding: .1rem .5rem;
|
||||
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.toolbar .actions { display: flex; gap: .6rem; }
|
||||
.toolbar .actions a {
|
||||
font: inherit;
|
||||
padding: .35rem .9rem;
|
||||
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.toolbar .actions a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
|
||||
.crumb { margin: 0 0 1.8rem; font-size: .9rem; opacity: .8; }
|
||||
.crumb code { opacity: 1; }
|
||||
section h3 { margin: 0 0 .7rem; }
|
||||
.error {
|
||||
margin: 0 0 1rem;
|
||||
padding: .5rem .75rem;
|
||||
border-radius: 6px;
|
||||
color: light-dark(#b3261e, #ffb4ab);
|
||||
background: color-mix(in srgb, currentColor 8%, transparent);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.note { margin: 0 0 .8rem; font-size: .9rem; opacity: .75; }
|
||||
/* 儲存格過長時橫向滾動，不撐破版面 */
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.db-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: .95rem;
|
||||
}
|
||||
.db-table th, .db-table td {
|
||||
padding: .5rem .6rem;
|
||||
border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.db-table tr:last-child td { border-bottom: none; }
|
||||
.db-table th { font-weight: 600; }
|
||||
.db-table td.empty { text-align: center; opacity: .7; padding: 1.5rem 0; }
|
||||
/* 資料儲存格過長時截斷，完整內容以 title 提示呈現 */
|
||||
.db-table td.cell {
|
||||
max-width: 24rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.db-table td.null { opacity: .55; font-style: italic; }
|
||||
.db-table .actions { white-space: nowrap; }
|
||||
.db-table .actions button {
|
||||
font: inherit;
|
||||
padding: .2rem .6rem;
|
||||
font-size: .85rem;
|
||||
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.db-table .actions button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
|
||||
.data-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
margin-bottom: .8rem;
|
||||
}
|
||||
.data-toolbar select, .data-toolbar button, .pager button, #row-form button {
|
||||
font: inherit;
|
||||
font-size: .9rem;
|
||||
padding: .3rem .9rem;
|
||||
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.data-toolbar button:hover, .pager button:hover, #row-form button:hover {
|
||||
background: color-mix(in srgb, currentColor 10%, transparent);
|
||||
}
|
||||
.data-toolbar button:disabled, .pager button:disabled, #row-form button:disabled {
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.pager {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: .8rem;
|
||||
font-size: .9rem;
|
||||
}
|
||||
.pager span { opacity: .8; }
|
||||
/* 編輯資料列的對話框：逐欄輸入 + 可空欄位的 NULL 勾選 */
|
||||
#row-dialog {
|
||||
width: min(44rem, 92vw);
|
||||
padding: 1.2rem 1.4rem;
|
||||
border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
|
||||
border-radius: 12px;
|
||||
}
|
||||
#row-dialog::backdrop { background: rgb(0 0 0 / .45); }
|
||||
#row-dialog h3 { margin: 0 0 .8rem; }
|
||||
#row-fields {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
||||
gap: .8rem 1.2rem;
|
||||
margin: .8rem 0;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#row-fields .field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
|
||||
#row-fields label { font-size: .85rem; opacity: .75; overflow-wrap: anywhere; }
|
||||
#row-fields input[type="text"] {
|
||||
font: inherit;
|
||||
padding: .35rem .6rem;
|
||||
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
#row-fields input[type="text"]:disabled { opacity: .5; }
|
||||
#row-fields .null-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .4rem;
|
||||
font-size: .85rem;
|
||||
}
|
||||
#row-fields .null-line input[type="checkbox"] { font: inherit; }
|
||||
#row-form .hint { margin: 0 0 .8rem; font-size: .8rem; opacity: .65; }
|
||||
#row-form .form-actions { display: flex; gap: .6rem; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% block page %}
|
||||
<div id="table-data" data-database-id="{{ database.id }}" data-table="{{ table }}">
|
||||
<div class="toolbar">
|
||||
<div class="title">
|
||||
<h2>{{ table }}</h2>
|
||||
<span class="type-badge">數據管理</span>
|
||||
<span class="type-badge">{{ database.db_type.as_str() }}</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a href="/databases/{{ database.id }}/tables/{{ table|urlencode_strict }}">結構管理</a>
|
||||
<a href="/databases/{{ database.id }}">返回連接詳情</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="crumb">
|
||||
連接 <a href="/databases/{{ database.id }}">{{ database.name }}</a> ·
|
||||
<code>{{ database.host }}:{{ database.port }}</code> ·
|
||||
資料庫 <code>{{ database.database_name }}</code>
|
||||
</p>
|
||||
|
||||
<section aria-label="資料">
|
||||
<h3>資料</h3>
|
||||
<p id="no-pk-note" class="note" hidden>此表沒有主鍵，僅能瀏覽資料，無法編輯。</p>
|
||||
<div class="data-toolbar">
|
||||
<select id="page-size" aria-label="每頁列數">
|
||||
<option value="25">25 列 / 頁</option>
|
||||
<option value="50" selected>50 列 / 頁</option>
|
||||
<option value="100">100 列 / 頁</option>
|
||||
<option value="200">200 列 / 頁</option>
|
||||
</select>
|
||||
<button type="button" id="refresh">刷新</button>
|
||||
</div>
|
||||
<p id="rows-error" class="error" role="alert" hidden></p>
|
||||
<div class="table-wrap">
|
||||
<table class="db-table">
|
||||
<thead id="row-head"></thead>
|
||||
<tbody id="row-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pager">
|
||||
<button type="button" id="prev" disabled>上一頁</button>
|
||||
<span id="page-info"></span>
|
||||
<button type="button" id="next" disabled>下一頁</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<dialog id="row-dialog" aria-labelledby="row-dialog-title">
|
||||
<form id="row-form" method="dialog" novalidate>
|
||||
<h3 id="row-dialog-title">編輯資料列</h3>
|
||||
<p id="row-form-error" class="error" role="alert" hidden></p>
|
||||
<div id="row-fields"></div>
|
||||
<p class="hint">僅送出有變更的欄位；勾選 NULL 會將該欄設為 NULL（不可空的欄位無此選項）。</p>
|
||||
<div class="form-actions">
|
||||
<button type="submit" id="row-submit">儲存</button>
|
||||
<button type="button" id="row-cancel">取消</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block script %}
|
||||
<script>
|
||||
(() => {
|
||||
'use strict';
|
||||
|
||||
const root = document.getElementById('table-data');
|
||||
const databaseId = root.dataset.databaseId;
|
||||
const tableName = root.dataset.table;
|
||||
const tableApi = '/api/databases/' + databaseId + '/tables/' + encodeURIComponent(tableName);
|
||||
|
||||
const rowsError = document.getElementById('rows-error');
|
||||
const rowHead = document.getElementById('row-head');
|
||||
const rowBody = document.getElementById('row-body');
|
||||
const pageSize = document.getElementById('page-size');
|
||||
const refreshButton = document.getElementById('refresh');
|
||||
const prevButton = document.getElementById('prev');
|
||||
const nextButton = document.getElementById('next');
|
||||
const pageInfo = document.getElementById('page-info');
|
||||
const noPkNote = document.getElementById('no-pk-note');
|
||||
const rowDialog = document.getElementById('row-dialog');
|
||||
const rowForm = document.getElementById('row-form');
|
||||
const rowFields = document.getElementById('row-fields');
|
||||
const rowFormError = document.getElementById('row-form-error');
|
||||
const rowSubmit = document.getElementById('row-submit');
|
||||
const rowCancel = document.getElementById('row-cancel');
|
||||
|
||||
let limit = Number(pageSize.value) || 50;
|
||||
let offset = 0;
|
||||
|
||||
// 欄位結構 metadata（名稱 / 類型 / 可空 / 主鍵）：編輯表單與主鍵判定都依賴它
|
||||
let columnsMeta = [];
|
||||
let pkColumns = [];
|
||||
// 當前頁的原始資料：編輯時以其主鍵值組 where、以原值比對變更
|
||||
let currentRows = null;
|
||||
let editingIndex = -1;
|
||||
|
||||
async function api(path, options) {
|
||||
const response = await fetch(path, options);
|
||||
if (!response.ok) {
|
||||
let message = '請求失敗（HTTP ' + response.status + '）';
|
||||
try {
|
||||
const body = await response.json();
|
||||
if (body.error) { message = body.error; }
|
||||
} catch (_) { /* 非 JSON 錯誤體，保留默認訊息 */ }
|
||||
throw new Error(message);
|
||||
}
|
||||
return response.status === 204 ? null : response.json();
|
||||
}
|
||||
|
||||
function messageRow(colspan, text) {
|
||||
const tr = document.createElement('tr');
|
||||
const td = document.createElement('td');
|
||||
td.colSpan = colspan;
|
||||
td.className = 'empty';
|
||||
td.textContent = text;
|
||||
tr.append(td);
|
||||
return tr;
|
||||
}
|
||||
|
||||
// 取得欄位結構 metadata；失敗不阻斷瀏覽，僅停用編輯能力
|
||||
async function loadColumnsMeta() {
|
||||
try {
|
||||
columnsMeta = await api(tableApi + '/columns');
|
||||
pkColumns = columnsMeta
|
||||
.filter((column) => column.primary_key)
|
||||
.map((column) => column.name);
|
||||
} catch (_) {
|
||||
columnsMeta = [];
|
||||
pkColumns = [];
|
||||
}
|
||||
noPkNote.hidden = pkColumns.length > 0;
|
||||
}
|
||||
|
||||
// 所有動態值一律經 textContent 寫入，避免以字串拼接 HTML 引入注入風險
|
||||
function renderRows(data) {
|
||||
currentRows = data;
|
||||
const editable = pkColumns.length > 0;
|
||||
|
||||
const head = document.createElement('tr');
|
||||
for (const name of data.columns) {
|
||||
const th = document.createElement('th');
|
||||
th.scope = 'col';
|
||||
th.textContent = name;
|
||||
head.append(th);
|
||||
}
|
||||
if (editable) {
|
||||
const th = document.createElement('th');
|
||||
th.scope = 'col';
|
||||
th.textContent = '操作';
|
||||
head.append(th);
|
||||
}
|
||||
rowHead.replaceChildren(head);
|
||||
|
||||
if (data.rows.length === 0) {
|
||||
rowBody.replaceChildren(
|
||||
messageRow(data.columns.length + (editable ? 1 : 0), '沒有資料。')
|
||||
);
|
||||
} else {
|
||||
const rows = data.rows.map((row, index) => {
|
||||
const tr = document.createElement('tr');
|
||||
for (const cell of row) {
|
||||
const td = document.createElement('td');
|
||||
if (cell === null) {
|
||||
td.className = 'null';
|
||||
td.textContent = 'NULL';
|
||||
} else {
|
||||
td.className = 'cell';
|
||||
td.textContent = cell;
|
||||
td.setAttribute('title', cell);
|
||||
}
|
||||
tr.append(td);
|
||||
}
|
||||
if (editable) {
|
||||
const actions = document.createElement('td');
|
||||
actions.className = 'actions';
|
||||
const editButton = document.createElement('button');
|
||||
editButton.type = 'button';
|
||||
editButton.textContent = '編輯';
|
||||
editButton.addEventListener('click', () => openEditor(index));
|
||||
actions.append(editButton);
|
||||
tr.append(actions);
|
||||
}
|
||||
return tr;
|
||||
});
|
||||
rowBody.replaceChildren(...rows);
|
||||
}
|
||||
|
||||
const to = Math.min(data.offset + data.limit, data.total);
|
||||
pageInfo.textContent = data.total === 0
|
||||
? '沒有資料'
|
||||
: '顯示第 ' + (data.offset + 1) + '–' + to + ' 列，共 ' + data.total + ' 列';
|
||||
prevButton.disabled = data.offset === 0;
|
||||
nextButton.disabled = to >= data.total;
|
||||
}
|
||||
|
||||
async function loadRows() {
|
||||
rowsError.hidden = true;
|
||||
rowHead.replaceChildren();
|
||||
rowBody.replaceChildren(messageRow(1, '載入中…'));
|
||||
try {
|
||||
const data = await api(tableApi + '/rows?limit=' + limit + '&offset=' + offset);
|
||||
// 目標頁已無資料（總列數變少）→ 跳到最後一頁重取一次
|
||||
if (data.rows.length === 0 && data.offset > 0) {
|
||||
const lastPage = Math.floor(Math.max(0, data.total - 1) / data.limit) * data.limit;
|
||||
if (lastPage < data.offset) {
|
||||
offset = lastPage;
|
||||
await loadRows();
|
||||
return;
|
||||
}
|
||||
}
|
||||
renderRows(data);
|
||||
} catch (err) {
|
||||
rowBody.replaceChildren();
|
||||
rowsError.textContent = err.message;
|
||||
rowsError.hidden = false;
|
||||
pageInfo.textContent = '';
|
||||
prevButton.disabled = true;
|
||||
nextButton.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
function cellInputId(index) { return 'cell-input-' + index; }
|
||||
function cellNullId(index) { return 'cell-null-' + index; }
|
||||
|
||||
// 以當前頁第 index 列的原值預填編輯表單：逐欄輸入框，
|
||||
// 可空欄位附 NULL 勾選（勾選時停用輸入框，送出 null）
|
||||
function openEditor(index) {
|
||||
editingIndex = index;
|
||||
const original = currentRows.rows[index];
|
||||
rowFormError.hidden = true;
|
||||
rowFields.replaceChildren();
|
||||
|
||||
columnsMeta.forEach((meta, i) => {
|
||||
const value = original[i] === undefined ? null : original[i];
|
||||
const field = document.createElement('div');
|
||||
field.className = 'field';
|
||||
|
||||
const label = document.createElement('label');
|
||||
label.textContent = meta.primary_key ? meta.name + '（主鍵）' : meta.name;
|
||||
label.htmlFor = cellInputId(i);
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.id = cellInputId(i);
|
||||
input.value = value ?? '';
|
||||
input.autocomplete = 'off';
|
||||
|
||||
field.append(label, input);
|
||||
|
||||
if (meta.nullable) {
|
||||
const nullLine = document.createElement('div');
|
||||
nullLine.className = 'null-line';
|
||||
const toggle = document.createElement('input');
|
||||
toggle.type = 'checkbox';
|
||||
toggle.id = cellNullId(i);
|
||||
toggle.checked = value === null;
|
||||
const nullLabel = document.createElement('label');
|
||||
nullLabel.textContent = 'NULL';
|
||||
nullLabel.htmlFor = cellNullId(i);
|
||||
toggle.addEventListener('change', () => {
|
||||
input.disabled = toggle.checked;
|
||||
if (!toggle.checked) { input.focus(); }
|
||||
});
|
||||
input.disabled = toggle.checked;
|
||||
nullLine.append(toggle, nullLabel);
|
||||
field.append(nullLine);
|
||||
}
|
||||
|
||||
rowFields.append(field);
|
||||
});
|
||||
|
||||
rowDialog.showModal();
|
||||
const first = rowFields.querySelector('input[type="text"]:not(:disabled)');
|
||||
if (first) { first.focus(); }
|
||||
}
|
||||
|
||||
rowForm.addEventListener('submit', async (event) => {
|
||||
// 阻止 method="dialog" 的默認關閉行為：錯誤時保持對話框開啟
|
||||
event.preventDefault();
|
||||
const original = currentRows.rows[editingIndex];
|
||||
const set = {};
|
||||
columnsMeta.forEach((meta, i) => {
|
||||
const input = document.getElementById(cellInputId(i));
|
||||
const nullToggle = document.getElementById(cellNullId(i));
|
||||
const isNull = nullToggle !== null && nullToggle.checked;
|
||||
const newValue = isNull ? null : input.value;
|
||||
const oldValue = original[i] === undefined ? null : original[i];
|
||||
// 未變更的欄位不送出，避免對未觸碰的欄位做不必要的型別轉換
|
||||
if (newValue === oldValue) { return; }
|
||||
set[meta.name] = newValue;
|
||||
});
|
||||
if (Object.keys(set).length === 0) {
|
||||
rowDialog.close();
|
||||
return;
|
||||
}
|
||||
|
||||
// 以編輯前的主鍵原值定位資料列（主鍵欄位本身被修改時亦然）
|
||||
const where = {};
|
||||
for (const name of pkColumns) {
|
||||
const index = columnsMeta.findIndex((meta) => meta.name === name);
|
||||
where[name] = index === -1 ? null : (original[index] ?? null);
|
||||
}
|
||||
|
||||
rowSubmit.disabled = true;
|
||||
try {
|
||||
await api(tableApi + '/rows', {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ where: where, set: set }),
|
||||
});
|
||||
rowDialog.close();
|
||||
loadRows();
|
||||
} catch (err) {
|
||||
rowFormError.textContent = err.message;
|
||||
rowFormError.hidden = false;
|
||||
} finally {
|
||||
rowSubmit.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
rowCancel.addEventListener('click', () => rowDialog.close());
|
||||
|
||||
pageSize.addEventListener('change', () => {
|
||||
limit = Number(pageSize.value) || 50;
|
||||
offset = 0;
|
||||
loadRows();
|
||||
});
|
||||
// 刷新同時重取欄位結構（他頁可能已變更結構 / 主鍵）
|
||||
refreshButton.addEventListener('click', () => {
|
||||
loadColumnsMeta().then(loadRows);
|
||||
});
|
||||
prevButton.addEventListener('click', () => {
|
||||
offset = Math.max(0, offset - limit);
|
||||
loadRows();
|
||||
});
|
||||
nextButton.addEventListener('click', () => {
|
||||
offset += limit;
|
||||
loadRows();
|
||||
});
|
||||
|
||||
loadColumnsMeta().then(loadRows);
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user