BreizhHardware/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2026-03-18 21:50:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

accounts: double click "select all" to load and select -all-

Browse Source 
Clicking once will select all visible records, and show as
indeterminate. Clicking again will load all records, and select them all
once done.
This commit is contained in:
Harvey Tindall
2025-07-18 17:57:02 +01:00
parent 908e9f07c0
commit bdd14604d5
7 changed files with 150 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/config-base.yaml
View File

@@ -1469,7 +1469,7 @@ sections:
description: When set, user accounts will be deleted this many days after expiring
(if "Behaviour" is "Disable user"). Set to 0 to disable.
- setting: send_email
name: Send email
name: Send message
type: bool
value: true
depends_true: messages|enabled

5
html/admin.html
View File

@@ -751,6 +751,7 @@
</div>
<div class="supra sm">{{ .strings.actions }}</div>
<div class="flex flex-row flex-wrap gap-3">
<button class="button ~neutral @low center accounts-load-all">{{ .strings.loadAll }}</button>
<span class="button ~neutral @low center " id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
<div id="accounts-announce-dropdown" class="dropdown pb-0i " tabindex="0">
<span class="w-full button ~info @low center items-baseline" id="accounts-announce">{{ .strings.announce }}</span>
@@ -827,7 +828,7 @@
</div>
<div class="flex flex-row gap-2 justify-center">
<button class="button ~neutral @low" id="accounts-load-more">{{ .strings.loadMore }}</button>
<button class="button ~neutral @low" id="accounts-load-all">{{ .strings.loadAll }}</button>
<button class="button ~neutral @low accounts-load-all">{{ .strings.loadAll }}</button>
<button class="button ~info @low center accounts-search-server flex flex-row gap-1" aria-label="{{ .strings.searchAllRecords }}" text="{{ .strings.searchAllRecords }}">
<i class="ri-search-line"></i>
<span>{{ .strings.searchAllRecords }}</span>
@@ -889,7 +890,7 @@
<div id="activity-loader"></div>
<div class="flex flex-row gap-2 justify-center">
<button class="button ~neutral @low" id="activity-load-more">{{ .strings.loadMore }}</button>
<button class="button ~neutral @low" id="activity-load-all">{{ .strings.loadAll }}</button>
<button class="button ~neutral @low activity-load-all">{{ .strings.loadAll }}</button>
<button class="button ~info @low center activity-search-server flex flex-row gap-1" aria-label="{{ .strings.searchAllRecords }}" text="{{ .strings.searchAllRecords }}">
<i class="ri-search-line"></i>
<span>{{ .strings.searchAllRecords }}</span>

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

@@ -194,6 +194,8 @@
"loadedRecords": "{n} Loaded",
"shownRecords": "{n} Shown",
"selectedRecords": "{n} Selected",
"allMatchingSelected": "All matching results selected.",
"allLoadedSelected": "All loaded matching results selected. Click again to load all.",
"backups": "Backups",
"backupsDescription": "Backups of the database can be made, restored, or downloaded from here.",
"backupsFormatNote": "Only backup files with the standard name format will be shown here. To use any other, upload the backup manually.",

135
ts/modules/accounts.ts
View File

@@ -14,6 +14,13 @@ const USER_DEFAULT_SORT_ASCENDING = true;
const dateParser = require("any-date-parser");
enum SelectAllState {
None = 0,
Some = 0.1,
AllVisible = 0.9,
All = 1
};
interface User {
id: string;
name: string;
@@ -218,11 +225,16 @@ class user implements User, SearchableItem {
get selected(): boolean { return this._selected; }
set selected(state: boolean) {
this.setSelected(state, true);
}
setSelected(state: boolean, dispatchEvent: boolean) {
this._selected = state;
this._check.checked = state;
state ? document.dispatchEvent(this._checkEvent()) : document.dispatchEvent(this._uncheckEvent());
if (dispatchEvent) state ? document.dispatchEvent(this._checkEvent()) : document.dispatchEvent(this._uncheckEvent());
}
get name(): string { return this._username.textContent; }
set name(value: string) { this._username.textContent = value; }
@@ -869,6 +881,7 @@ export class accountsList extends PaginatedList {
private _applyJellyseerr = document.getElementById("modify-user-jellyseerr") as HTMLInputElement;
private _selectAll = document.getElementById("accounts-select-all") as HTMLInputElement;
private _selectAllState: SelectAllState = SelectAllState.None;
// private _users: { [id: string]: user };
// private _ordering: string[] = [];
get users(): { [id: string]: user } { return this._search.items as { [id: string]: user }; }
@@ -912,8 +925,8 @@ export class accountsList extends PaginatedList {
constructor() {
super({
loader: document.getElementById("accounts-loader"),
loadMoreButton: document.getElementById("accounts-load-more") as HTMLButtonElement,
loadAllButton: document.getElementById("accounts-load-all") as HTMLButtonElement,
loadMoreButtons: Array.from([document.getElementById("accounts-load-more") as HTMLButtonElement]) as Array<HTMLButtonElement>,
loadAllButtons: Array.from(document.getElementsByClassName("accounts-load-all")) as Array<HTMLButtonElement>,
refreshButton: document.getElementById("accounts-refresh") as HTMLButtonElement,
filterArea: document.getElementById("accounts-filter-area"),
searchOptionsHeader: document.getElementById("accounts-search-options-header"),
@@ -987,21 +1000,23 @@ export class accountsList extends PaginatedList {
clearSearchButtonSelector: ".accounts-search-clear",
serverSearchButtonSelector: ".accounts-search-server",
onSearchCallback: (_0: boolean, _1: boolean) => {
this._checkCheckCount();
this.processSelectedAccounts();
},
searchServer: null,
clearServerSearch: null,
};
this.initSearch(searchConfig);
// FIXME: Remove!
(window as any).accs = this;
this._selectAll.checked = false;
this._selectAll.onchange = () => {
this.selectAll = this._selectAll.checked;
};
this._selectAllState = SelectAllState.None;
this._selectAll.onchange = () => this.cycleSelectAll();
document.addEventListener("accounts-reload", () => this.reload());
document.addEventListener("accountCheckEvent", () => { this._counter.selected++; this._checkCheckCount(); });
document.addEventListener("accountUncheckEvent", () => { this._counter.selected--; this._checkCheckCount(); });
document.addEventListener("accountCheckEvent", () => { this._counter.selected++; this.processSelectedAccounts(); });
document.addEventListener("accountUncheckEvent", () => { this._counter.selected--; this.processSelectedAccounts(); });
this._addUserButton.onclick = () => {
this._populateAddUserProfiles();
window.modals.addUser.toggle();
@@ -1232,25 +1247,79 @@ export class accountsList extends PaginatedList {
this.loadTemplates();
}
loadMore = (loadAll: boolean = false, callback?: () => void) => {
loadMore = (loadAll: boolean = false, callback?: (resp?: paginatedDTO) => void) => {
this._loadMore(
loadAll,
callback
);
};
get selectAll(): boolean { return this._selectAll.checked; }
set selectAll(state: boolean) {
let count = 0;
for (let id in this.users) {
if (this._container.contains(this.users[id].asElement())) { // Only select visible elements
this.users[id].selected = state;
loadAll = (callback?: (resp?: paginatedDTO) => void) => {
this._loadAll(callback);
};
get selectAll(): SelectAllState { return this._selectAllState; }
cycleSelectAll = () => {
let next: SelectAllState;
switch (this.selectAll) {
case SelectAllState.None:
case SelectAllState.Some:
next = SelectAllState.AllVisible;
break;
case SelectAllState.AllVisible:
next = SelectAllState.All;
break;
case SelectAllState.All:
next = SelectAllState.None;
break;
}
this._selectAllState = next;
console.debug("New check state:", next);
if (next == SelectAllState.None) {
// Deselect -all- users, rather than just visible ones, to be safe.
for (let id in this.users) {
this.users[id].setSelected(false, false);
}
this._selectAll.checked = false;
this._selectAll.indeterminate = false;
this.processSelectedAccounts();
return;
}
// FIXME: Decide whether to keep the AllVisible/All distinction and actually use it, or to get rid of it an just make "load all" more visible.
const selectAllVisible = () => {
let count = 0;
for (let id of this._visible) {
this.users[id].setSelected(true, false);
count++;
}
console.debug("Selected", count);
this._selectAll.checked = true;
if (this.lastPage) {
this._selectAllState = SelectAllState.All;
}
this._selectAll.indeterminate = this.lastPage ? false : true;
this.processSelectedAccounts();
}
if (next == SelectAllState.AllVisible) {
selectAllVisible();
return;
}
if (next == SelectAllState.All) {
this.loadAll((_: paginatedDTO) => {
if (!(this.lastPage)) {
// Pretend to live-select elements as they load.
this._counter.selected = this._counter.shown;
return;
}
selectAllVisible();
});
return;
}
this._selectAll.checked = state;
this._selectAll.indeterminate = false;
state ? this._counter.selected = count : 0;
}
selectAllBetweenIDs = (startID: string, endID: string) => {
@@ -1270,12 +1339,14 @@ export class accountsList extends PaginatedList {
// console.log("after appending lengths:", Object.keys(this.users).length, Object.keys(this._search.items).length);
}
private _checkCheckCount = () => {
private processSelectedAccounts = () => {
console.debug("processSelectedAccounts");
const list = this._collectUsers();
this._counter.selected = list.length;
if (this._counter.selected == 0) {
this._selectAll.indeterminate = false;
this._selectAll.checked = false;
this._selectAll.title = "";
this._modifySettings.classList.add("unfocused");
if (window.referralsEnabled) {
this._enableReferrals.classList.add("unfocused");
@@ -1288,15 +1359,17 @@ export class accountsList extends PaginatedList {
this._disableEnable.parentElement.classList.add("unfocused");
this._sendPWR.classList.add("unfocused");
} else {
let visibleCount = 0;
for (let id in this.users) {
if (this._container.contains(this.users[id].asElement())) {
visibleCount++;
}
}
if (this._counter.selected == visibleCount) {
if (this._counter.selected == this._visible.length) {
this._selectAll.checked = true;
this._selectAll.indeterminate = false;
if (this.lastPage) {
this._selectAll.indeterminate = false;
this._selectAll.title = window.lang.strings("allMatchingSelected");
// FIXME: Hover text "all matching records selected."
} else {
this._selectAll.indeterminate = true;
this._selectAll.title = window.lang.strings("allLoadedSelected");
// FIXME: Hover text "all loaded matching records selected. Click again to load all."
}
} else {
this._selectAll.checked = false;
this._selectAll.indeterminate = true;
@@ -1392,8 +1465,8 @@ export class accountsList extends PaginatedList {
private _collectUsers = (): string[] => {
let list: string[] = [];
for (let id in this.users) {
if (this._container.contains(this.users[id].asElement()) && this.users[id].selected) { list.push(id); }
for (let id of this._visible) {
if (this.users[id].selected) { list.push(id) }
}
return list;
}

8
ts/modules/activity.ts
View File

@@ -492,8 +492,8 @@ export class activityList extends PaginatedList {
constructor() {
super({
loader: document.getElementById("activity-loader"),
loadMoreButton: document.getElementById("activity-load-more") as HTMLButtonElement,
loadAllButton: document.getElementById("activity-load-all") as HTMLButtonElement,
loadMoreButtons: Array.from([document.getElementById("activity-load-more") as HTMLButtonElement]) as Array<HTMLButtonElement>,
loadAllButtons: Array.from(document.getElementsByClassName("activity-load-all")) as Array<HTMLButtonElement>,
refreshButton: document.getElementById("activity-refresh") as HTMLButtonElement,
filterArea: document.getElementById("activity-filter-area"),
searchOptionsHeader: document.getElementById("activity-search-options-header"),
@@ -571,6 +571,10 @@ export class activityList extends PaginatedList {
callback
);
};
loadAll = (callback?: (resp?: paginatedDTO) => void) => {
this._loadAll(callback);
};
get ascending(): boolean {
return this._ascending;

51
ts/modules/list.ts
View File

@@ -78,8 +78,8 @@ export class RecordCounter {
export interface PaginatedListConfig {
loader: HTMLElement;
loadMoreButton: HTMLButtonElement;
loadAllButton: HTMLButtonElement;
loadMoreButtons: Array<HTMLButtonElement>;
loadAllButtons: Array<HTMLButtonElement>;
refreshButton: HTMLButtonElement;
filterArea: HTMLElement;
searchOptionsHeader: HTMLElement;
@@ -130,13 +130,17 @@ export abstract class PaginatedList {
set lastPage(v: boolean) {
this._lastPage = v;
if (v) {
this._c.loadAllButton.classList.add("unfocused");
this._c.loadMoreButton.textContent = window.lang.strings("noMoreResults");
this._c.loadMoreButton.disabled = true;
this._c.loadAllButtons.forEach((v) => v.classList.add("unfocused"));
this._c.loadMoreButtons.forEach((v) => {
v.textContent = window.lang.strings("noMoreResults");
v.disabled = true;
});
} else {
this._c.loadMoreButton.textContent = window.lang.strings("loadMore");
this._c.loadMoreButton.disabled = false;
this._c.loadAllButton.classList.remove("unfocused");
this._c.loadMoreButtons.forEach((v) => {
v.textContent = window.lang.strings("loadMore");
v.disabled = false;
});
this._c.loadAllButtons.forEach((v) => v.classList.remove("unfocused"));
}
this.autoSetServerSearchButtonsDisabled();
}
@@ -161,11 +165,12 @@ export abstract class PaginatedList {
this._counter = new RecordCounter(this._c.recordCounter);
this._hasLoaded = false;
this._c.loadMoreButton.onclick = () => this.loadMore(false);
this._c.loadAllButton.onclick = () => {
addLoader(this._c.loadAllButton, true);
this.loadMore(true);
};
this._c.loadMoreButtons.forEach((v) => {
v.onclick = () => this.loadMore(false);
});
this._c.loadAllButtons.forEach((v) => {
v.onclick = () => this.loadAll();
});
/* this._keepSearchingButton.onclick = () => {
addLoader(this._keepSearchingButton, true);
this.loadMore(() => removeLoader(this._keepSearchingButton, true));
@@ -193,7 +198,7 @@ export abstract class PaginatedList {
initSearch = (searchConfig: SearchConfiguration) => {
const previousCallback = searchConfig.onSearchCallback;
searchConfig.onSearchCallback = (newItems: boolean, loadAll: boolean) => {
searchConfig.onSearchCallback = (newItems: boolean, loadAll: boolean, callback?: (resp: paginatedDTO) => void) => {
// if (this._search.inSearch && !this.lastPage) this._c.loadAllButton.classList.remove("unfocused");
// else this._c.loadAllButton.classList.add("unfocused");
@@ -206,7 +211,7 @@ export abstract class PaginatedList {
(this._visible.length == 0 && !this.lastPage) ||
loadAll
) {
this.loadMore(loadAll);
this.loadMore(loadAll, callback);
}
}
this._previousVisibleItemCount = this._visible.length;
@@ -390,11 +395,11 @@ export abstract class PaginatedList {
}
// Loads the next page. If "loadAll", all pages will be loaded until the last is reached.
public abstract loadMore: (loadAll?: boolean, callback?: () => void) => void;
public abstract loadMore: (loadAll?: boolean, callback?: (resp?: paginatedDTO) => void) => void;
protected _loadMore = (loadAll: boolean = false, callback?: (resp: paginatedDTO) => void) => {
this._c.loadMoreButton.disabled = true;
this._c.loadMoreButtons.forEach((v) => v.disabled = true);
const timeout = setTimeout(() => {
this._c.loadMoreButton.disabled = false;
this._c.loadMoreButtons.forEach((v) => v.disabled = false);
}, 1000);
this._page += 1;
@@ -406,7 +411,7 @@ export abstract class PaginatedList {
// Check before setting this.lastPage so we have a chance to cancel the timeout.
if (resp.last_page) {
clearTimeout(timeout);
removeLoader(this._c.loadAllButton);
this._c.loadAllButtons.forEach((v) => removeLoader(v));
}
},
(resp: paginatedDTO) => {
@@ -414,7 +419,7 @@ export abstract class PaginatedList {
if (this.lastPage) {
loadAll = false;
}
this._search.onSearchBoxChange(true, true, loadAll);
this._search.onSearchBoxChange(true, true, loadAll, callback);
} else {
// Since results come to us ordered already, we can assume "ordering"
// will be identical to pre-page-load but with extra elements at the end,
@@ -427,6 +432,12 @@ export abstract class PaginatedList {
);
}
public abstract loadAll: (callback?: (resp?: paginatedDTO) => void) => void;
protected _loadAll = (callback?: (resp?: paginatedDTO) => void) => {
this._c.loadAllButtons.forEach((v) => { addLoader(v, true); });
this.loadMore(true, callback);
};
loadNItems = (n: number) => {
const cb = () => {
if (this._counter.loaded > n) return;

6
ts/modules/search.ts
View File

@@ -45,7 +45,7 @@ export interface SearchConfiguration {
search: HTMLInputElement;
queries: { [field: string]: QueryType };
setVisibility: (items: string[], visible: boolean, appendedItems: boolean) => void;
onSearchCallback: (newItems: boolean, loadAll: boolean) => void;
onSearchCallback: (newItems: boolean, loadAll: boolean, callback?: (resp: paginatedDTO) => void) => void;
searchServer: (params: PaginatedReqDTO, newSearch: boolean) => void;
clearServerSearch: () => void;
loadMore?: () => void;
@@ -523,7 +523,7 @@ export class Search {
get sortField(): string { return this._sortField; }
get ascending(): boolean { return this._ascending; }
onSearchBoxChange = (newItems: boolean = false, appendedItems: boolean = false, loadAll: boolean = false) => {
onSearchBoxChange = (newItems: boolean = false, appendedItems: boolean = false, loadAll: boolean = false, callback?: (resp: paginatedDTO) => void) => {
const query = this._c.search.value;
if (!query) {
this.inSearch = false;
@@ -532,7 +532,7 @@ export class Search {
}
const results = this.search(query);
this._c.setVisibility(results, true, appendedItems);
this._c.onSearchCallback(newItems, loadAll);
this._c.onSearchCallback(newItems, loadAll, callback);
if (this.inSearch) {
if (this.inServerSearch) {
this._serverSearchButtons.forEach((v: HTMLElement) => {