hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-23 01:20:11 +00:00
Code Issues Projects Releases Wiki Activity

accounts: add indicator of sorted column at top of list

Browse Source 
When clicking on a column to sort by it, a button with "Sorting By:
<column>" appears. Clicking it will reset the sort, which defaults for
ascending username.
This commit is contained in:
Harvey Tindall 2023-06-13 12:02:43 +01:00
parent f13c0d78a8
commit bc4015ac50
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
3 changed files with 43 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
html/admin.html
View File

@ -584,6 +584,7 @@
<div class="row"> <div class="row">
<span class="text-3xl font-bold mr-2 col">{{ .strings.accounts }}</span> <span class="text-3xl font-bold mr-2 col">{{ .strings.accounts }}</span>
<input type="search" class="col sm field ~neutral @low input search ml-2 mr-2" id="accounts-search" placeholder="{{ .strings.search }}"> <input type="search" class="col sm field ~neutral @low input search ml-2 mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
<button type="button" class="button ~neutral @low center ml-2 mr-2 hidden"><span id="accounts-sort-by-field"></span> <span class="ml-2">&times;</span></button>
</div> </div>
<div class="row"> <div class="row">
<span class="col sm button ~neutral @low center mb-2" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span> <span class="col sm button ~neutral @low center mb-2" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
@ -615,22 +616,22 @@
<thead> <thead>
<tr> <tr>
<th><input type="checkbox" value="" id="accounts-select-all"></th> <th><input type="checkbox" value="" id="accounts-select-all"></th>
<th class="table-inline my-2 accounts-header-username">{{ .strings.username }}</th> <th class="table-inline my-2 grid gap-4 place-items-stretch accounts-header-username">{{ .strings.username }}</th>
{{ if .jellyfinLogin }} {{ if .jellyfinLogin }}
<th class="text-center-i accounts-header-access-jfa">{{ .strings.accessJFA }}</th> <th class="text-center-i grid gap-4 place-items-stretch accounts-header-access-jfa">{{ .strings.accessJFA }}</th>
{{ end }} {{ end }}
<th class="accounts-header-email">{{ .strings.emailAddress }}</th> <th class="grid gap-4 place-items-stretch accounts-header-email">{{ .strings.emailAddress }}</th>
{{ if .telegramEnabled }} {{ if .telegramEnabled }}
<th class="text-center-i accounts-header-telegram">Telegram</th> <th class="text-center-i grid gap-4 place-items-stretch accounts-header-telegram">Telegram</th>
{{ end }} {{ end }}
{{ if .matrixEnabled }} {{ if .matrixEnabled }}
<th class="text-center-i accounts-header-matrix">Matrix</th> <th class="text-center-i grid gap-4 place-items-stretch accounts-header-matrix">Matrix</th>
{{ end }} {{ end }}
{{ if .discordEnabled }} {{ if .discordEnabled }}
<th class="text-center-i accounts-header-discord">Discord</th> <th class="text-center-i grid gap-4 place-items-stretch accounts-header-discord">Discord</th>
{{ end }} {{ end }}
<th class="accounts-header-expiry">{{ .strings.expiry }}</th> <th class="grid gap-4 place-items-stretch accounts-header-expiry">{{ .strings.expiry }}</th>
<th class="accounts-header-last-active">{{ .strings.lastActiveTime }}</th> <th class="grid gap-4 place-items-stretch accounts-header-last-active">{{ .strings.lastActiveTime }}</th>
</tr> </tr>
</thead> </thead>
<tbody id="accounts-list"></tbody> <tbody id="accounts-list"></tbody>

3
lang/admin/en-us.json
View File

@ -114,7 +114,8 @@
"deleteTemplate": "Delete template", "deleteTemplate": "Delete template",
"templateEnterName": "Enter a name to save this template.", "templateEnterName": "Enter a name to save this template.",
"accessJFA": "Access jfa-go", "accessJFA": "Access jfa-go",
"accessJFASettings": "Cannot be changed as either \"Admin Only\" or \"Allow All\" has been set in Settings > General." "accessJFASettings": "Cannot be changed as either \"Admin Only\" or \"Allow All\" has been set in Settings > General.",
"sortingBy": "Sorting By"
}, },
"notifications": { "notifications": {
"changedEmailAddress": "Changed email address of {n}.", "changedEmailAddress": "Changed email address of {n}.",

37
ts/modules/accounts.ts
View File

@ -752,6 +752,7 @@ export class accountsList {
private _columns: { [className: string]: Column } = {}; private _columns: { [className: string]: Column } = {};
private _activeSortColumn: string; private _activeSortColumn: string;
private _sortingByButton = document.getElementById("accounts-sort-by-field") as HTMLButtonElement;
// Whether the "Extend expiry" is extending or setting an expiry. // Whether the "Extend expiry" is extending or setting an expiry.
private _settingExpiry = false; private _settingExpiry = false;
@ -1538,9 +1539,22 @@ export class accountsList {
} }
} }
// Start off sorting by Name
const defaultSort = () => {
this._activeSortColumn = document.getElementsByClassName("accounts-header-" + headerNames[0])[0].className;
document.dispatchEvent(new CustomEvent("header-click", { detail: this._activeSortColumn }));
this._columns[this._activeSortColumn].ascending = true;
this._columns[this._activeSortColumn].hideIcon();
this._sortingByButton.parentElement.classList.add("hidden");
};
this._sortingByButton.parentElement.addEventListener("click", defaultSort);
document.addEventListener("header-click", (event: CustomEvent) => { document.addEventListener("header-click", (event: CustomEvent) => {
this._ordering = this._columns[event.detail].sort(this._users); this._ordering = this._columns[event.detail].sort(this._users);
this._activeSortColumn = event.detail; this._activeSortColumn = event.detail;
this._sortingByButton.innerHTML = this._columns[event.detail].buttonContent;
this._sortingByButton.parentElement.classList.remove("hidden");
// console.log("ordering by", event.detail, ": ", this._ordering); // console.log("ordering by", event.detail, ": ", this._ordering);
if (!(this._inSearch)) { if (!(this._inSearch)) {
this.setVisibility(this._ordering, true); this.setVisibility(this._ordering, true);
@ -1549,9 +1563,7 @@ export class accountsList {
} }
}); });
// Start off sorting by Name defaultSort();
this._activeSortColumn = document.getElementsByClassName("accounts-header-" + headerNames[0])[0].className;
document.dispatchEvent(new CustomEvent("header-click", { detail: this._activeSortColumn }));
} }
reload = () => { reload = () => {
@ -1615,12 +1627,14 @@ class Column {
console.log("wasn't active keeping direction as", this._ascending ? "ascending" : "descending"); console.log("wasn't active keeping direction as", this._ascending ? "ascending" : "descending");
} }
this._active = true; this._active = true;
this._header.setAttribute("aria-sort", this._headerContent);
this.updateHeader(); this.updateHeader();
document.dispatchEvent(new CustomEvent("header-click", { detail: this._header.className })); document.dispatchEvent(new CustomEvent("header-click", { detail: this._header.className }));
}); });
document.addEventListener("header-click", (event: CustomEvent) => { document.addEventListener("header-click", (event: CustomEvent) => {
if (event.detail != this._header.className) { if (event.detail != this._header.className) {
this._active = false; this._active = false;
this._header.removeAttribute("aria-sort");
this.hideIcon(); this.hideIcon();
} }
}); });
@ -1632,11 +1646,24 @@ class Column {
updateHeader = () => { updateHeader = () => {
this._header.innerHTML = ` this._header.innerHTML = `
${this._headerContent} <span class="">${this._headerContent}</span>
<i class="ri-arrow-${this._ascending? "up" : "down"}-s-line ml-2"></i> <i class="ri-arrow-${this._ascending? "up" : "down"}-s-line" aria-hidden="true"></i>
`; `;
} }
// Returns the inner HTML to show in the "Sorting By" button.
get buttonContent() {
return `<span class="font-bold">` + window.lang.strings("sortingBy") + ": " + `</span>` + this._headerContent;
}
get ascending() { return this._ascending; }
set ascending(v: boolean) {
this._ascending = v;
if (!this._active) return;
this.updateHeader();
this._header.setAttribute("aria-sort", this._headerContent);
document.dispatchEvent(new CustomEvent("header-click", { detail: this._header.className }));
}
// Sorts the user list. previouslyActive is whether this column was previously sorted by, indicating that the direction should change. // Sorts the user list. previouslyActive is whether this column was previously sorted by, indicating that the direction should change.
sort = (users: { [id: string]: user }): string[] => { sort = (users: { [id: string]: user }): string[] => {