From 6ddd09ff1f4bd6f002695a0e302d0883fd897e09 Mon Sep 17 00:00:00 2001 From: Harvey Tindall Date: Wed, 14 Jun 2023 18:38:12 +0100 Subject: [PATCH] accounts: add header to "actions" and "search options" --- html/admin.html | 4 +++- lang/admin/en-us.json | 4 +++- ts/modules/accounts.ts | 31 +++++++++++++++++++++++-------- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/html/admin.html b/html/admin.html index 3a15429..dc76e35 100644 --- a/html/admin.html +++ b/html/admin.html @@ -593,6 +593,7 @@ +
{{ .strings.actions }}
{{ .quantityStrings.addUser.Singular }} +
-
+
diff --git a/lang/admin/en-us.json b/lang/admin/en-us.json index e8fe211..f3d76ee 100644 --- a/lang/admin/en-us.json +++ b/lang/admin/en-us.json @@ -120,7 +120,9 @@ "sortingBy": "Sorting By", "filters": "Filters", "clickToRemoveFilter": "Click to remove this filter.", - "clearSearch": "Clear search" + "clearSearch": "Clear search", + "actions": "Actions", + "searchOptions": "Search Options" }, "notifications": { "changedEmailAddress": "Changed email address of {n}.", diff --git a/ts/modules/accounts.ts b/ts/modules/accounts.ts index af352f2..942c829 100644 --- a/ts/modules/accounts.ts +++ b/ts/modules/accounts.ts @@ -768,6 +768,8 @@ export class accountsList { private _activeSortColumn: string; private _sortingByButton = document.getElementById("accounts-sort-by-field") as HTMLButtonElement; + private _filterArea = document.getElementById("accounts-filter-area"); + private _searchOptionsHeader = document.getElementById("accounts-search-options-header"); // Whether the "Extend expiry" is extending or setting an expiry. private _settingExpiry = false; @@ -790,6 +792,17 @@ export class accountsList { } } + showHideSearchOptionsHeader = () => { + const sortingBy = !(this._sortingByButton.parentElement.classList.contains("hidden")); + const hasFilters = this._filterArea.textContent != ""; + console.log("sortingBy", sortingBy, "hasFilters", hasFilters); + if (sortingBy || hasFilters) { + this._searchOptionsHeader.classList.remove("hidden"); + } else { + this._searchOptionsHeader.classList.add("hidden"); + } + } + private _queries: { [field: string]: { name: string, getter: string, bool: boolean, string: boolean, date: boolean, dependsOnTableHeader?: string, show?: boolean }} = { "id": { name: "Jellyfin ID", @@ -892,8 +905,7 @@ export class accountsList { } search = (query: String): string[] => { - const filterArea = document.getElementById("accounts-filter-area"); - filterArea.textContent = ""; + this._filterArea.textContent = ""; query = query.toLowerCase(); let result: string[] = [...this._ordering]; @@ -970,7 +982,7 @@ export class accountsList { // FIXME: Generate filter card for each filter class const filterCard = document.createElement("span"); filterCard.ariaLabel = window.lang.strings("clickToRemoveFilter"); - filterCard.classList.add("button", "~" + (boolState ? "positive" : "critical"), "@high", "center", "ml-2", "mr-2", "mt-2"); + filterCard.classList.add("button", "~" + (boolState ? "positive" : "critical"), "@high", "center", "m-2"); filterCard.innerHTML = ` ${queryFormat.name} @@ -983,7 +995,7 @@ export class accountsList { this._search.oninput((null as Event)); }) - filterArea.appendChild(filterCard); + this._filterArea.appendChild(filterCard); // console.log("is bool, state", boolState); // So removing elements doesn't affect us @@ -1004,7 +1016,7 @@ export class accountsList { if (queryFormat.string) { const filterCard = document.createElement("span"); filterCard.ariaLabel = window.lang.strings("clickToRemoveFilter"); - filterCard.classList.add("button", "~neutral", "@low", "center", "ml-2", "mr-2", "mt-2", "h-full"); + filterCard.classList.add("button", "~neutral", "@low", "center", "m-2", "h-full"); filterCard.innerHTML = ` ${queryFormat.name}: "${split[1]}" `; @@ -1017,7 +1029,7 @@ export class accountsList { this._search.oninput((null as Event)); }) - filterArea.appendChild(filterCard); + this._filterArea.appendChild(filterCard); let cachedResult = [...result]; for (let id of cachedResult) { @@ -1048,7 +1060,7 @@ export class accountsList { const filterCard = document.createElement("span"); filterCard.ariaLabel = window.lang.strings("clickToRemoveFilter"); - filterCard.classList.add("button", "~neutral", "@low", "center", "ml-2", "mr-2", "mt-2", "h-full"); + filterCard.classList.add("button", "~neutral", "@low", "center", "m-2", "h-full"); filterCard.innerHTML = ` ${queryFormat.name}: ${(compareType == 1) ? window.lang.strings("after")+" " : ((compareType == -1) ? window.lang.strings("before")+" " : "")}${split[1]} `; @@ -1062,7 +1074,7 @@ export class accountsList { this._search.oninput((null as Event)); }) - filterArea.appendChild(filterCard); + this._filterArea.appendChild(filterCard); let cachedResult = [...result]; for (let id of cachedResult) { @@ -1807,6 +1819,7 @@ export class accountsList { } this.setVisibility(this.search(query), true); this._checkCheckCount(); + this.showHideSearchOptionsHeader(); }; this._search.oninput = onchange; @@ -1869,9 +1882,11 @@ export class accountsList { } else { this.setVisibility(this.search(this._search.value), true); } + this.showHideSearchOptionsHeader(); }); defaultSort(); + this.showHideSearchOptionsHeader(); const filterList = document.getElementById("accounts-filter-list");