Blank root panel, asset form as a modal, and a dedicated Statuses page

- Main panel is now blank at the top level ("Select a folder or asset
  from the tree") instead of showing a dashboard - browsing happens in
  the tree, the panel only shows something once you click into it.
  Removed the now-dead DashboardStats/Stats() machinery it depended on.
- Add/Edit Asset no longer takes over the main panel; it opens in
  #assetModal instead; asset_form.html was trimmed down to just the form
  (no more breadcrumb/panel wrapper) since the modal chrome provides the
  title and footer buttons now. The dynamic item-type-fields and submit
  listeners moved from #main-panel's delegation to the modal element's.
- Statuses split out of the General settings page into its own
  /settings/statuses page and sub-nav entry, alongside General, Item
  Types, and Users.
This commit is contained in:
Owen
2026-08-17 15:45:38 -05:00
parent 4d7ebed68e
commit 8d9106542c
12 changed files with 254 additions and 436 deletions
+36 -32
View File
@@ -14,7 +14,6 @@
var mainPanel = document.getElementById('main-panel');
var isAdmin = document.body.classList.contains('role-admin');
var draggedNode = null;
var formReturnContext = { type: 'root', id: '' };
// ---------------------------------------------------------------------
// Generic helpers
@@ -514,33 +513,32 @@
}
// ---------------------------------------------------------------------
// Asset form (create / edit)
// Asset form (create / edit) - shown in a modal
// ---------------------------------------------------------------------
var assetModalEl = document.getElementById('assetModal');
var assetModal = (assetModalEl && window.bootstrap) ? new bootstrap.Modal(assetModalEl) : null;
function showAssetModal(html) {
if (!assetModal) return;
document.getElementById('assetModalBody').innerHTML = html;
var form = document.getElementById('assetForm');
document.getElementById('assetModalTitle').textContent = form.dataset.title;
document.getElementById('assetModalSubmit').textContent = form.dataset.mode === 'edit' ? 'Save Changes' : 'Create Asset';
assetModal.show();
}
async function loadAssetForm(opts) {
formReturnContext = { type: mainPanel.dataset.contextType || 'root', id: mainPanel.dataset.contextId || '' };
var params = new URLSearchParams();
if (opts && opts.folderId) params.set('folder_id', opts.folderId);
var qs = params.toString();
var html = await fetchText('/app/panel/assets/new' + (qs ? '?' + qs : ''));
mainPanel.innerHTML = html;
mainPanel.dataset.contextType = 'asset-form';
mainPanel.dataset.contextId = '';
showAssetModal(html);
}
async function loadAssetEditForm(id) {
var html = await fetchText('/app/panel/assets/' + id + '/edit');
mainPanel.innerHTML = html;
mainPanel.dataset.contextType = 'asset-form';
mainPanel.dataset.contextId = id;
}
function cancelAssetForm(btn) {
if (btn.dataset.id) {
navigateAndSelect('asset', btn.dataset.id);
} else {
navigateAndSelect(formReturnContext.type, formReturnContext.id);
}
showAssetModal(html);
}
async function submitAssetForm(form) {
@@ -569,6 +567,7 @@
var method = mode === 'edit' ? 'PATCH' : 'POST';
try {
var res = await apiFetch(url, { method: method, json: payload });
if (assetModal) assetModal.hide();
await refreshWholeTree();
await navigateAndSelect('asset', res.id);
} catch (err) {
@@ -779,18 +778,9 @@
var pageLink = e.target.closest('.panel-page-link');
if (pageLink) { e.preventDefault(); loadFolderPanelWithFilters(pageLink.dataset.folderId, { page: pageLink.dataset.page }); return; }
var cancelFormBtn = e.target.closest('[data-action="cancel-asset-form"]');
if (cancelFormBtn) { cancelAssetForm(cancelFormBtn); return; }
});
mainPanel.addEventListener('change', async function (e) {
if (e.target.id === 'assetFormItemType') {
var html = await fetchText('/app/forms/asset-fields?item_type_id=' + e.target.value);
var container = document.getElementById('asset-fields-container');
if (container) container.innerHTML = html;
return;
}
mainPanel.addEventListener('change', function (e) {
var filterForm = e.target.closest('.panel-filter-form');
if (filterForm) {
loadFolderPanelWithFilters(filterForm.dataset.folderId, { page: 1 });
@@ -810,11 +800,6 @@
if (e.target.matches && e.target.matches('.panel-filter-form')) {
e.preventDefault();
loadFolderPanelWithFilters(e.target.dataset.folderId, { page: 1 });
return;
}
if (e.target.id === 'assetForm') {
e.preventDefault();
submitAssetForm(e.target);
}
});
@@ -822,6 +807,25 @@
// onto the tree only; the tree pane is the primary drag surface.
}
// The asset create/edit form lives inside #assetModal (injected fresh
// each time it's opened), so its dynamic bits are delegated from the
// modal element itself rather than from #main-panel.
if (assetModalEl) {
assetModalEl.addEventListener('change', async function (e) {
if (e.target.id === 'assetFormItemType') {
var html = await fetchText('/app/forms/asset-fields?item_type_id=' + e.target.value);
var container = document.getElementById('asset-fields-container');
if (container) container.innerHTML = html;
}
});
assetModalEl.addEventListener('submit', function (e) {
if (e.target.id === 'assetForm') {
e.preventDefault();
submitAssetForm(e.target);
}
});
}
// ---------------------------------------------------------------------
// Item type custom field admin form (item-types/{id}/edit page)
// ---------------------------------------------------------------------