Assclaw/jfa-go
1
0
Fork 0
Code Issues Pull Requests Actions 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
ts/modules/accounts.ts
+104 -31
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;
}
ts/modules/activity.ts
+6 -2
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;
ts/modules/list.ts
+31 -20
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;
ts/modules/search.ts
+3 -3
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) => {