fix(admin): make catalog CRUD management visible

- Add management toolbar on /catalog with links to /locations and /categories
- Expand catalog tree by default (all levels visible, no collapsed accordion)
- Add Back to Catalog link on /locations and /categories pages
- Edit/toggle/delete buttons for locations/categories/subcategories now immediately accessible
This commit is contained in:
NW
2026-07-25 13:12:12 +01:00
parent ca2ddefd7a
commit 47c698aa42
4 changed files with 22 additions and 10 deletions

View File

@@ -30,12 +30,12 @@ function buildTreeHtml(tree, csrf) {
subHtml += ` subHtml += `
<div class="accordion-item border-0"> <div class="accordion-item border-0">
<h2 class="accordion-header"> <h2 class="accordion-header">
<button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#${subId}"> <button class="accordion-button py-2" type="button" data-bs-toggle="collapse" data-bs-target="#${subId}">
<span class="node-label text-decoration-none${subDisabled ? ' text-muted' : ' text-dark'}" data-sub="${s.id}">${esc(s.name)}${subDisabled ? ' <span class="badge bg-secondary ms-1">Disabled</span>' : ''}</span> <span class="node-label text-decoration-none${subDisabled ? ' text-muted' : ' text-dark'}" data-sub="${s.id}">${esc(s.name)}${subDisabled ? ' <span class="badge bg-secondary ms-1">Disabled</span>' : ''}</span>
<span class="badge bg-secondary ms-2">${s.pc||0}</span> <span class="badge bg-secondary ms-2">${s.pc||0}</span>
</button> </button>
</h2> </h2>
<div id="${subId}" class="accordion-collapse collapse" data-bs-parent="#${catId}"> <div id="${subId}" class="accordion-collapse collapse show" data-bs-parent="#${catId}">
<div class="accordion-body py-2"> <div class="accordion-body py-2">
<form method="POST" action="/catalog/subcategories/${s.id}/update" class="d-inline-flex gap-1 align-items-center mb-1"> <form method="POST" action="/catalog/subcategories/${s.id}/update" class="d-inline-flex gap-1 align-items-center mb-1">
${csrfInput} ${csrfInput}
@@ -58,12 +58,12 @@ function buildTreeHtml(tree, csrf) {
catHtml += ` catHtml += `
<div class="accordion-item border-0"> <div class="accordion-item border-0">
<h2 class="accordion-header"> <h2 class="accordion-header">
<button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#${catId}"> <button class="accordion-button py-2" type="button" data-bs-toggle="collapse" data-bs-target="#${catId}">
<span class="node-label text-decoration-none${catDisabled ? ' text-muted' : ' text-dark'}" data-cat="${c.id}">${esc(c.name)}${catDisabled ? ' <span class="badge bg-secondary ms-1">Disabled</span>' : ''}</span> <span class="node-label text-decoration-none${catDisabled ? ' text-muted' : ' text-dark'}" data-cat="${c.id}">${esc(c.name)}${catDisabled ? ' <span class="badge bg-secondary ms-1">Disabled</span>' : ''}</span>
<span class="badge bg-secondary ms-2">${catCount}</span> <span class="badge bg-secondary ms-2">${catCount}</span>
</button> </button>
</h2> </h2>
<div id="${catId}" class="accordion-collapse collapse" data-bs-parent="#${districtId}"> <div id="${catId}" class="accordion-collapse collapse show" data-bs-parent="#${districtId}">
<div class="accordion-body py-2"> <div class="accordion-body py-2">
${subHtml} ${subHtml}
<form method="POST" action="/catalog/categories/${c.id}/update" class="d-inline-flex gap-1 align-items-center mt-2"> <form method="POST" action="/catalog/categories/${c.id}/update" class="d-inline-flex gap-1 align-items-center mt-2">
@@ -88,12 +88,12 @@ function buildTreeHtml(tree, csrf) {
districtHtml += ` districtHtml += `
<div class="accordion-item border-0"> <div class="accordion-item border-0">
<h2 class="accordion-header"> <h2 class="accordion-header">
<button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#${districtId}"> <button class="accordion-button py-2" type="button" data-bs-toggle="collapse" data-bs-target="#${districtId}">
<span class="node-label text-decoration-none${locDisabled ? ' text-muted' : ' text-dark'}" data-loc="${ldata.id}">${esc(district)}${locDisabled ? ' <span class="badge bg-secondary ms-1">Disabled</span>' : ''}</span> <span class="node-label text-decoration-none${locDisabled ? ' text-muted' : ' text-dark'}" data-loc="${ldata.id}">${esc(district)}${locDisabled ? ' <span class="badge bg-secondary ms-1">Disabled</span>' : ''}</span>
<span class="badge bg-secondary ms-2">${districtCount}</span> <span class="badge bg-secondary ms-2">${districtCount}</span>
</button> </button>
</h2> </h2>
<div id="${districtId}" class="accordion-collapse collapse" data-bs-parent="#${cityId}"> <div id="${districtId}" class="accordion-collapse collapse show" data-bs-parent="#${cityId}">
<div class="accordion-body py-2"> <div class="accordion-body py-2">
${catHtml} ${catHtml}
<form method="POST" action="/catalog/locations/${ldata.id}/update" class="d-inline-flex gap-1 align-items-center mt-2"> <form method="POST" action="/catalog/locations/${ldata.id}/update" class="d-inline-flex gap-1 align-items-center mt-2">
@@ -125,12 +125,12 @@ function buildTreeHtml(tree, csrf) {
cityHtml += ` cityHtml += `
<div class="accordion-item border-0"> <div class="accordion-item border-0">
<h2 class="accordion-header"> <h2 class="accordion-header">
<button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#${cityId}"> <button class="accordion-button py-2" type="button" data-bs-toggle="collapse" data-bs-target="#${cityId}">
<span class="node-label text-decoration-none text-dark" data-city="${esc(city)}" data-country="${esc(country)}">${esc(city)}</span> <span class="node-label text-decoration-none text-dark" data-city="${esc(city)}" data-country="${esc(country)}">${esc(city)}</span>
<span class="badge bg-secondary ms-2">${cityCount}</span> <span class="badge bg-secondary ms-2">${cityCount}</span>
</button> </button>
</h2> </h2>
<div id="${cityId}" class="accordion-collapse collapse" data-bs-parent="#${countryId}"> <div id="${cityId}" class="accordion-collapse collapse show" data-bs-parent="#${countryId}">
<div class="accordion-body py-2"> <div class="accordion-body py-2">
${districtHtml} ${districtHtml}
<form method="POST" action="/catalog/locations/add-district" class="d-inline-flex gap-2 mt-2"> <form method="POST" action="/catalog/locations/add-district" class="d-inline-flex gap-2 mt-2">
@@ -148,11 +148,11 @@ function buildTreeHtml(tree, csrf) {
treeHtml += ` treeHtml += `
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header"> <h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#${countryId}"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#${countryId}">
<strong>${esc(country)}</strong> <span class="badge bg-secondary ms-2">${countryCount}</span> <strong>${esc(country)}</strong> <span class="badge bg-secondary ms-2">${countryCount}</span>
</button> </button>
</h2> </h2>
<div id="${countryId}" class="accordion-collapse collapse" data-bs-parent="#catalogTree"> <div id="${countryId}" class="accordion-collapse collapse show" data-bs-parent="#catalogTree">
<div class="accordion-body p-0"> <div class="accordion-body p-0">
${cityHtml} ${cityHtml}
<form method="POST" action="/catalog/locations/add-city" class="d-inline-flex gap-2 p-3 pt-0"> <form method="POST" action="/catalog/locations/add-city" class="d-inline-flex gap-2 p-3 pt-0">

View File

@@ -5,6 +5,16 @@
</div> </div>
<% } %> <% } %>
<div class="panel panel-icon mb-3">
<div class="panel-hdr d-flex justify-content-between align-items-center">
<h2>Catalog Management</h2>
<div class="d-flex gap-2">
<a href="/locations" class="btn btn-sm btn-outline-primary">📍 Manage Locations</a>
<a href="/categories" class="btn btn-sm btn-outline-primary">🗂️ Manage Categories</a>
</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<div class="panel"> <div class="panel">

View File

@@ -1,3 +1,4 @@
<a href="/catalog" class="btn btn-sm btn-outline-secondary mb-2">« Back to Catalog</a>
<div class="panel panel-icon"> <div class="panel panel-icon">
<div class="panel-hdr"> <div class="panel-hdr">
<h2>Categories</h2> <h2>Categories</h2>

View File

@@ -1,3 +1,4 @@
<a href="/catalog" class="btn btn-sm btn-outline-secondary mb-2">« Back to Catalog</a>
<div class="panel panel-icon mb-3"> <div class="panel panel-icon mb-3">
<div class="panel-hdr"> <div class="panel-hdr">
<h2 class="d-flex align-items-center gap-2"> <h2 class="d-flex align-items-center gap-2">