add inventory sort control to the ui
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
@@ -17,7 +17,7 @@ const state = {
|
||||
totalPages: 1,
|
||||
view: "catalog",
|
||||
user: null,
|
||||
inventory: { search: "", category: "" },
|
||||
inventory: { search: "", category: "", sort: "name" },
|
||||
};
|
||||
|
||||
let authMode = "login";
|
||||
@@ -32,7 +32,7 @@ function cacheElements() {
|
||||
"error-banner", "loading", "empty-state", "results-grid",
|
||||
"pagination", "prev-page", "next-page", "page-info",
|
||||
"modal-backdrop", "modal-close", "modal-title", "modal-body",
|
||||
"catalog-view", "inventory-view", "inv-search", "inv-category",
|
||||
"catalog-view", "inventory-view", "inv-search", "inv-category", "inv-sort",
|
||||
"inv-summary", "inv-empty", "inv-table-wrap", "inv-tbody", "tab-mine",
|
||||
"auth-backdrop", "auth-close", "auth-title", "auth-form",
|
||||
"auth-username", "auth-password", "auth-error", "auth-submit",
|
||||
@@ -394,8 +394,10 @@ function showCatalogView() {
|
||||
function resetInventoryView() {
|
||||
state.inventory.search = "";
|
||||
state.inventory.category = "";
|
||||
state.inventory.sort = "name";
|
||||
els["inv-search"].value = "";
|
||||
els["inv-category"].value = "";
|
||||
els["inv-sort"].value = "name";
|
||||
els["inv-summary"].textContent = "";
|
||||
renderInventory({ total: 0, items: [] });
|
||||
}
|
||||
@@ -404,6 +406,7 @@ async function loadInventory() {
|
||||
const params = new URLSearchParams();
|
||||
if (state.inventory.search) params.set("search", state.inventory.search);
|
||||
if (state.inventory.category) params.set("category", state.inventory.category);
|
||||
params.set("sort", state.inventory.sort);
|
||||
params.set("page", "1");
|
||||
params.set("page_size", String(INVENTORY_PAGE_SIZE));
|
||||
|
||||
@@ -674,6 +677,10 @@ function bindInventoryEvents() {
|
||||
state.inventory.category = els["inv-category"].value;
|
||||
loadInventory();
|
||||
});
|
||||
els["inv-sort"].addEventListener("change", () => {
|
||||
state.inventory.sort = els["inv-sort"].value;
|
||||
loadInventory();
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- boot ---------- */
|
||||
|
||||
@@ -68,6 +68,12 @@
|
||||
<option value="ship-items">Ship Equipment</option>
|
||||
<option value="fps-items">FPS Items</option>
|
||||
</select>
|
||||
<select id="inv-sort" aria-label="Sort inventory">
|
||||
<option value="name">Sort: Name</option>
|
||||
<option value="category">Sort: Category</option>
|
||||
<option value="quantity">Sort: Quantity</option>
|
||||
<option value="updated">Sort: Recently updated</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="inv-summary" class="inv-summary"></div>
|
||||
<div id="inv-empty" class="empty-state hidden">
|
||||
|
||||
@@ -347,6 +347,7 @@ main {
|
||||
}
|
||||
#inv-search { flex: 2 1 280px; }
|
||||
#inv-category { flex: 1 1 180px; }
|
||||
#inv-sort { flex: 1 1 170px; }
|
||||
.inventory-controls input:focus,
|
||||
.inventory-controls select:focus { outline: none; border-color: var(--accent); }
|
||||
#inventory-view {
|
||||
|
||||
Reference in New Issue
Block a user