mirror of
https://github.com/simonw/datasette.git
synced 2026-06-15 13:36:58 +02:00
Delete icon on table page now works
This commit is contained in:
Simon Willison
parent
de5f72dd88
commit
20824bd707
5 changed files with 513 additions and 5 deletions
|
|
@ -1192,6 +1192,147 @@ dialog.set-column-type-dialog::backdrop {
|
|||
cursor: wait;
|
||||
}
|
||||
|
||||
.row-delete-status {
|
||||
margin: 0 0 0.75rem;
|
||||
padding: 8px 10px;
|
||||
border-left: 4px solid #54AC8E;
|
||||
background: rgba(103,201,141,0.12);
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.row-delete-status[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.row-delete-status-error {
|
||||
border-left-color: #D0021B;
|
||||
background: rgba(208,2,27,0.12);
|
||||
}
|
||||
|
||||
dialog.row-delete-dialog {
|
||||
--ink: #0f0f0f;
|
||||
--paper: #f5f3ef;
|
||||
--muted: #6b6b6b;
|
||||
--rule: #e2dfd8;
|
||||
--accent: #1a56db;
|
||||
--card: #ffffff;
|
||||
border: none;
|
||||
border-radius: var(--modal-border-radius, 0.75rem);
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
width: min(440px, calc(100vw - 32px));
|
||||
max-width: 95vw;
|
||||
box-shadow: var(--modal-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
|
||||
animation: datasette-modal-slide-in var(--modal-animation-duration, 0.2s) ease-out;
|
||||
overflow: hidden;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
background: var(--card);
|
||||
}
|
||||
|
||||
dialog.row-delete-dialog[open] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
dialog.row-delete-dialog::backdrop {
|
||||
background: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.5));
|
||||
backdrop-filter: var(--modal-backdrop-blur, blur(4px));
|
||||
-webkit-backdrop-filter: var(--modal-backdrop-blur, blur(4px));
|
||||
animation: datasette-modal-fade-in var(--modal-animation-duration, 0.2s) ease-out;
|
||||
}
|
||||
|
||||
.row-delete-dialog .modal-header {
|
||||
padding: 20px 24px 12px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.row-delete-dialog .modal-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.row-delete-message,
|
||||
.row-delete-error {
|
||||
margin: 0;
|
||||
padding: 16px 24px 0;
|
||||
}
|
||||
|
||||
.row-delete-message {
|
||||
color: var(--ink);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.row-delete-id {
|
||||
display: inline;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 4px;
|
||||
background: var(--paper);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 0.92em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.row-delete-error {
|
||||
color: #b91c1c;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.row-delete-dialog .modal-footer {
|
||||
padding: 18px 20px 14px;
|
||||
border-top: 1px solid var(--rule);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
background: var(--paper);
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.row-delete-dialog .btn {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 9px 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
font-family: inherit;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
|
||||
.row-delete-dialog .btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
border: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
.row-delete-dialog .btn-ghost:hover {
|
||||
background: var(--rule);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.row-delete-dialog .btn-primary {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.row-delete-dialog .btn-primary:hover {
|
||||
background: #1949b8;
|
||||
}
|
||||
|
||||
.row-delete-dialog .btn:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.row-link-with-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -1284,6 +1425,24 @@ dialog.set-column-type-dialog::backdrop {
|
|||
padding-right: 18px;
|
||||
}
|
||||
|
||||
dialog.row-delete-dialog {
|
||||
width: 95vw;
|
||||
max-height: 85vh;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.row-delete-dialog .modal-header,
|
||||
.row-delete-message,
|
||||
.row-delete-error {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.row-delete-dialog .modal-footer {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.row-inline-action {
|
||||
min-height: 30px;
|
||||
min-width: 30px;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
|
|||
|
||||
var SET_COLUMN_TYPE_DIALOG_ID = "set-column-type-dialog";
|
||||
var setColumnTypeDialogState = null;
|
||||
var ROW_DELETE_DIALOG_ID = "row-delete-dialog";
|
||||
var rowDeleteDialogState = null;
|
||||
|
||||
function getParams() {
|
||||
return new URLSearchParams(location.search);
|
||||
|
|
@ -355,6 +357,276 @@ function openSetColumnTypeDialog(th) {
|
|||
}
|
||||
}
|
||||
|
||||
function ensureRowDeleteStatus(manager) {
|
||||
var status = document.querySelector(".row-delete-status");
|
||||
if (status) {
|
||||
return status;
|
||||
}
|
||||
|
||||
status = document.createElement("p");
|
||||
status.className = "row-delete-status";
|
||||
status.hidden = true;
|
||||
status.setAttribute("role", "status");
|
||||
status.setAttribute("aria-live", "polite");
|
||||
status.setAttribute("tabindex", "-1");
|
||||
|
||||
var tableWrapper = document.querySelector(manager.selectors.tableWrapper);
|
||||
if (tableWrapper && tableWrapper.parentNode) {
|
||||
tableWrapper.parentNode.insertBefore(status, tableWrapper);
|
||||
} else {
|
||||
document.body.appendChild(status);
|
||||
}
|
||||
return status;
|
||||
}
|
||||
|
||||
function showRowDeleteStatus(manager, message, isError) {
|
||||
var status = ensureRowDeleteStatus(manager);
|
||||
status.hidden = false;
|
||||
status.classList.toggle("row-delete-status-error", !!isError);
|
||||
status.textContent = message;
|
||||
return status;
|
||||
}
|
||||
|
||||
function setRowDeleteDialogBusy(state, isBusy) {
|
||||
state.isBusy = isBusy;
|
||||
state.confirmButton.disabled = isBusy;
|
||||
state.cancelButton.disabled = isBusy;
|
||||
state.confirmButton.textContent = isBusy ? "Deleting..." : "Delete row";
|
||||
}
|
||||
|
||||
function clearRowDeleteDialogError(state) {
|
||||
state.error.hidden = true;
|
||||
state.error.textContent = "";
|
||||
}
|
||||
|
||||
function showRowDeleteDialogError(state, message) {
|
||||
state.error.hidden = false;
|
||||
state.error.textContent = message;
|
||||
}
|
||||
|
||||
function rowDeleteRequestError(response, data) {
|
||||
if (data && data.errors) {
|
||||
return new Error(data.errors.join(" "));
|
||||
}
|
||||
if (data && data.error) {
|
||||
return new Error(data.error);
|
||||
}
|
||||
if (data && data.title) {
|
||||
return new Error(data.title);
|
||||
}
|
||||
return new Error("Delete failed with HTTP " + response.status);
|
||||
}
|
||||
|
||||
function nextRowDeleteFocusTarget(row, manager) {
|
||||
var sibling = row.nextElementSibling;
|
||||
while (sibling) {
|
||||
var nextButton = sibling.querySelector(
|
||||
'button[data-row-action="delete"]:not([disabled])',
|
||||
);
|
||||
if (nextButton) {
|
||||
return nextButton;
|
||||
}
|
||||
sibling = sibling.nextElementSibling;
|
||||
}
|
||||
|
||||
sibling = row.previousElementSibling;
|
||||
while (sibling) {
|
||||
var previousButton = sibling.querySelector(
|
||||
'button[data-row-action="delete"]:not([disabled])',
|
||||
);
|
||||
if (previousButton) {
|
||||
return previousButton;
|
||||
}
|
||||
sibling = sibling.previousElementSibling;
|
||||
}
|
||||
|
||||
return ensureRowDeleteStatus(manager);
|
||||
}
|
||||
|
||||
function ensureRowDeleteDialog(manager) {
|
||||
if (rowDeleteDialogState) {
|
||||
return rowDeleteDialogState;
|
||||
}
|
||||
if (!window.HTMLDialogElement) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var dialog = document.createElement("dialog");
|
||||
dialog.id = ROW_DELETE_DIALOG_ID;
|
||||
dialog.className = "row-delete-dialog";
|
||||
dialog.setAttribute("aria-labelledby", "row-delete-title");
|
||||
dialog.setAttribute("aria-describedby", "row-delete-message");
|
||||
dialog.innerHTML = `
|
||||
<div class="modal-header">
|
||||
<span class="modal-title" id="row-delete-title">Delete row</span>
|
||||
</div>
|
||||
<p class="row-delete-message" id="row-delete-message">Delete row <span class="row-delete-id"></span>?</p>
|
||||
<p class="row-delete-error" role="alert" hidden></p>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-ghost row-delete-cancel">Cancel</button>
|
||||
<button type="button" class="btn btn-primary row-delete-confirm">Delete row</button>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(dialog);
|
||||
|
||||
rowDeleteDialogState = {
|
||||
dialog: dialog,
|
||||
message: dialog.querySelector(".row-delete-message"),
|
||||
rowId: dialog.querySelector(".row-delete-id"),
|
||||
error: dialog.querySelector(".row-delete-error"),
|
||||
cancelButton: dialog.querySelector(".row-delete-cancel"),
|
||||
confirmButton: dialog.querySelector(".row-delete-confirm"),
|
||||
currentRow: null,
|
||||
currentDeleteUrl: null,
|
||||
currentPkPath: null,
|
||||
manager: manager,
|
||||
isBusy: false,
|
||||
shouldRestoreFocus: true,
|
||||
};
|
||||
|
||||
rowDeleteDialogState.cancelButton.addEventListener("click", function () {
|
||||
if (!rowDeleteDialogState.isBusy) {
|
||||
rowDeleteDialogState.shouldRestoreFocus = true;
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
|
||||
dialog.addEventListener("click", function (ev) {
|
||||
if (ev.target === dialog && !rowDeleteDialogState.isBusy) {
|
||||
rowDeleteDialogState.shouldRestoreFocus = true;
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
|
||||
dialog.addEventListener("keydown", function (ev) {
|
||||
if (
|
||||
ev.key === "Enter" &&
|
||||
document.activeElement === rowDeleteDialogState.confirmButton
|
||||
) {
|
||||
ev.preventDefault();
|
||||
if (!rowDeleteDialogState.isBusy) {
|
||||
rowDeleteDialogState.confirmButton.click();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (ev.key !== "Escape") {
|
||||
return;
|
||||
}
|
||||
if (rowDeleteDialogState.isBusy) {
|
||||
ev.preventDefault();
|
||||
return;
|
||||
}
|
||||
ev.preventDefault();
|
||||
rowDeleteDialogState.shouldRestoreFocus = true;
|
||||
dialog.close();
|
||||
});
|
||||
|
||||
dialog.addEventListener("cancel", function (ev) {
|
||||
if (rowDeleteDialogState.isBusy) {
|
||||
ev.preventDefault();
|
||||
} else {
|
||||
rowDeleteDialogState.shouldRestoreFocus = true;
|
||||
}
|
||||
});
|
||||
|
||||
dialog.addEventListener("close", function () {
|
||||
var state = rowDeleteDialogState;
|
||||
clearRowDeleteDialogError(state);
|
||||
setRowDeleteDialogBusy(state, false);
|
||||
if (
|
||||
state.shouldRestoreFocus &&
|
||||
state.currentButton &&
|
||||
document.contains(state.currentButton)
|
||||
) {
|
||||
state.currentButton.focus();
|
||||
}
|
||||
});
|
||||
|
||||
rowDeleteDialogState.confirmButton.addEventListener("click", async function () {
|
||||
var state = rowDeleteDialogState;
|
||||
clearRowDeleteDialogError(state);
|
||||
setRowDeleteDialogBusy(state, true);
|
||||
|
||||
try {
|
||||
var response = await fetch(state.currentDeleteUrl, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
},
|
||||
});
|
||||
var data = null;
|
||||
try {
|
||||
data = await response.json();
|
||||
} catch (_error) {
|
||||
data = null;
|
||||
}
|
||||
if (!response.ok || (data && data.ok === false)) {
|
||||
throw rowDeleteRequestError(response, data);
|
||||
}
|
||||
|
||||
var focusTarget = nextRowDeleteFocusTarget(state.currentRow, state.manager);
|
||||
var statusMessage = state.currentPkPath
|
||||
? "Deleted row " + state.currentPkPath + "."
|
||||
: "Deleted row.";
|
||||
state.shouldRestoreFocus = false;
|
||||
state.dialog.close();
|
||||
state.currentRow.remove();
|
||||
showRowDeleteStatus(state.manager, statusMessage, false);
|
||||
if (focusTarget && document.contains(focusTarget)) {
|
||||
focusTarget.focus();
|
||||
} else {
|
||||
ensureRowDeleteStatus(state.manager).focus();
|
||||
}
|
||||
} catch (error) {
|
||||
setRowDeleteDialogBusy(state, false);
|
||||
showRowDeleteDialogError(state, error.message || "Delete failed");
|
||||
}
|
||||
});
|
||||
|
||||
return rowDeleteDialogState;
|
||||
}
|
||||
|
||||
function openRowDeleteDialog(button, manager) {
|
||||
var row = button.closest("tr[data-row-delete-url]");
|
||||
if (!row || !row.dataset.rowDeleteUrl) {
|
||||
return;
|
||||
}
|
||||
var state = ensureRowDeleteDialog(manager);
|
||||
if (!state) {
|
||||
return;
|
||||
}
|
||||
|
||||
state.manager = manager;
|
||||
state.currentButton = button;
|
||||
state.currentRow = row;
|
||||
state.currentDeleteUrl = row.dataset.rowDeleteUrl;
|
||||
state.currentPkPath = row.dataset.rowPkPath || "";
|
||||
state.shouldRestoreFocus = true;
|
||||
|
||||
clearRowDeleteDialogError(state);
|
||||
setRowDeleteDialogBusy(state, false);
|
||||
state.rowId.textContent = state.currentPkPath || "this row";
|
||||
|
||||
if (!state.dialog.open) {
|
||||
state.dialog.showModal();
|
||||
}
|
||||
state.confirmButton.focus();
|
||||
}
|
||||
|
||||
function initRowDeleteActions(manager) {
|
||||
if (!window.fetch || !window.HTMLDialogElement) {
|
||||
return;
|
||||
}
|
||||
document.addEventListener("click", function (ev) {
|
||||
var button = ev.target.closest('button[data-row-action="delete"]');
|
||||
if (!button) {
|
||||
return;
|
||||
}
|
||||
ev.preventDefault();
|
||||
openRowDeleteDialog(button, manager);
|
||||
});
|
||||
}
|
||||
|
||||
function canChooseColumns() {
|
||||
return !!(
|
||||
document.querySelector("column-chooser") && window._columnChooserData
|
||||
|
|
@ -750,6 +1022,7 @@ document.addEventListener("datasette_init", function (evt) {
|
|||
|
||||
// Main table
|
||||
initDatasetteTable(manager);
|
||||
initRowDeleteActions(manager);
|
||||
|
||||
// Other UI functions with interactive JS needs
|
||||
addButtonsToFilterRows(manager);
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
{% for row in display_rows %}
|
||||
<tr>
|
||||
<tr{% if row.pk_path is not none %} data-row-pk-path="{{ row.pk_path }}" data-row-path="{{ row.row_path }}" data-row-url="{{ row.row_url }}" data-row-delete-url="{{ row.delete_url }}"{% endif %}>
|
||||
{% for cell in row %}
|
||||
<td class="col-{{ cell.column|to_css_class }} type-{{ cell.value_type }}">{{ cell.value }}</td>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -59,8 +59,19 @@ LINK_WITH_VALUE = '<a href="{base_url}{database}/{table}/{link_id}">{id}</a>'
|
|||
|
||||
|
||||
class Row:
|
||||
def __init__(self, cells):
|
||||
def __init__(
|
||||
self,
|
||||
cells,
|
||||
pk_path=None,
|
||||
row_path=None,
|
||||
row_url=None,
|
||||
delete_url=None,
|
||||
):
|
||||
self.cells = cells
|
||||
self.pk_path = pk_path
|
||||
self.row_path = row_path
|
||||
self.row_url = row_url
|
||||
self.delete_url = delete_url
|
||||
|
||||
def __iter__(self):
|
||||
return iter(self.cells)
|
||||
|
|
@ -241,8 +252,14 @@ async def display_columns_and_rows(
|
|||
is_special_link_column = len(pks) != 1
|
||||
pk_path = path_from_row_pks(row, pks, not pks, False)
|
||||
row_path = path_from_row_pks(row, pks, not pks)
|
||||
table_path = datasette.urls.table(database_name, table_name)
|
||||
row_url = "{table_path}/{row_path}".format(
|
||||
table_path=table_path,
|
||||
row_path=row_path,
|
||||
)
|
||||
delete_url = "{row_url}/-/delete".format(row_url=row_url)
|
||||
row_link = '<a href="{table_path}/{flat_pks_quoted}">{flat_pks}</a>'.format(
|
||||
table_path=datasette.urls.table(database_name, table_name),
|
||||
table_path=table_path,
|
||||
flat_pks=str(markupsafe.escape(pk_path)),
|
||||
flat_pks_quoted=row_path,
|
||||
)
|
||||
|
|
@ -280,7 +297,8 @@ async def display_columns_and_rows(
|
|||
if row_action_permissions.get("delete-row"):
|
||||
row_actions.append(
|
||||
'<button type="button" class="row-inline-action row-inline-action-delete" '
|
||||
'aria-label="Delete row {row_label}" title="Delete row">'
|
||||
'aria-label="Delete row {row_label}" title="Delete row" '
|
||||
'data-row-action="delete">'
|
||||
"{delete_icon}</button>".format(
|
||||
delete_icon=delete_icon,
|
||||
row_label=markupsafe.escape(pk_path),
|
||||
|
|
@ -404,7 +422,18 @@ async def display_columns_and_rows(
|
|||
),
|
||||
}
|
||||
)
|
||||
cell_rows.append(Row(cells))
|
||||
if link_column:
|
||||
cell_rows.append(
|
||||
Row(
|
||||
cells,
|
||||
pk_path=pk_path,
|
||||
row_path=row_path,
|
||||
row_url=row_url,
|
||||
delete_url=delete_url,
|
||||
)
|
||||
)
|
||||
else:
|
||||
cell_rows.append(Row(cells))
|
||||
|
||||
if link_column:
|
||||
# Add the link column header.
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
from datasette.app import Datasette
|
||||
from datasette.database import Database
|
||||
from bs4 import BeautifulSoup as Soup
|
||||
from .fixtures import make_app_client
|
||||
import pathlib
|
||||
|
|
@ -828,6 +829,52 @@ async def test_mobile_column_actions_present(ds_client, path):
|
|||
assert len(ths) >= 1
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_row_delete_action_data_attributes():
|
||||
ds = Datasette(
|
||||
[],
|
||||
config={
|
||||
"databases": {
|
||||
"data": {
|
||||
"tables": {
|
||||
"items": {
|
||||
"permissions": {
|
||||
"delete-row": {"id": "root"},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
)
|
||||
try:
|
||||
db = ds.add_database(
|
||||
Database(ds, memory_name="test_row_delete_actions"), name="data"
|
||||
)
|
||||
await db.execute_write_script("""
|
||||
create table items (id integer primary key, name text);
|
||||
insert into items (id, name) values (1, 'One');
|
||||
""")
|
||||
response = await ds.client.get("/data/items", actor={"id": "root"})
|
||||
assert response.status_code == 200
|
||||
soup = Soup(response.text, "html.parser")
|
||||
row = soup.select_one("table.rows-and-columns tbody tr")
|
||||
assert row["data-row-pk-path"] == "1"
|
||||
assert row["data-row-path"] == "1"
|
||||
assert row["data-row-url"] == "/data/items/1"
|
||||
assert row["data-row-delete-url"] == "/data/items/1/-/delete"
|
||||
|
||||
button = row.select_one(
|
||||
'button.row-inline-action-delete[data-row-action="delete"]'
|
||||
)
|
||||
assert button is not None
|
||||
assert button["aria-label"] == "Delete row 1"
|
||||
assert button["title"] == "Delete row"
|
||||
assert button.find("svg") is not None
|
||||
finally:
|
||||
ds.close()
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_zero_row_table_renders_thead(ds_client):
|
||||
response = await ds_client.get("/fixtures/123_starts_with_digits")
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue