From 591b84314809c4ea0ced183588ca5ee2b9158f49 Mon Sep 17 00:00:00 2001 From: Harvey Tindall Date: Sun, 22 Oct 2023 16:16:23 +0100 Subject: [PATCH] activity: add a "load all" button --- html/admin.html | 13 ++++++--- lang/admin/en-us.json | 3 ++ ts/modules/accounts.ts | 2 +- ts/modules/activity.ts | 63 ++++++++++++++++++++++++++++++++++++------ ts/modules/search.ts | 8 ++++-- 5 files changed, 72 insertions(+), 17 deletions(-) diff --git a/html/admin.html b/html/admin.html index 5fc8dbd..fc87e01 100644 --- a/html/admin.html +++ b/html/admin.html @@ -748,13 +748,18 @@
{{ .strings.noResultsFound }} - + {{ .strings.keepSearchingDescription }} +
+ + +
- + +
diff --git a/lang/admin/en-us.json b/lang/admin/en-us.json index bf95874..8ff10bb 100644 --- a/lang/admin/en-us.json +++ b/lang/admin/en-us.json @@ -59,6 +59,8 @@ "disabled": "Disabled", "sendPWR": "Send Password Reset", "noResultsFound": "No Results Found", + "keepSearching": "Keep Searching", + "keepSearchingDescription": "Only the current loaded activities were searched. Click below if you wish to search all activities.", "contactThrough": "Contact through:", "extendExpiry": "Extend expiry", "sendPWRManual": "User {n} has no method of contact, press copy to get a link to send to them.", @@ -169,6 +171,7 @@ "inviteCreatedFilter": "Invite Created", "inviteDeletedFilter": "Invite Deleted/Expired", "loadMore": "Load More", + "loadAll": "Load All", "noMoreResults": "No more results." }, "notifications": { diff --git a/ts/modules/accounts.ts b/ts/modules/accounts.ts index 5bd9d14..982b971 100644 --- a/ts/modules/accounts.ts +++ b/ts/modules/accounts.ts @@ -1829,7 +1829,7 @@ export class accountsList { queries: this._queries, setVisibility: this.setVisibility, clearSearchButtonSelector: ".accounts-search-clear", - onSearchCallback: (_0: number, _1: boolean) => { + onSearchCallback: (_0: number, _1: boolean, _2: boolean) => { this._checkCheckCount(); } }; diff --git a/ts/modules/activity.ts b/ts/modules/activity.ts index 10fa9aa..abf285e 100644 --- a/ts/modules/activity.ts +++ b/ts/modules/activity.ts @@ -352,7 +352,11 @@ export class activityList { private _sortDirection = document.getElementById("activity-sort-direction") as HTMLButtonElement; private _loader = document.getElementById("activity-loader"); private _loadMoreButton = document.getElementById("activity-load-more") as HTMLButtonElement; + private _loadAllButton = document.getElementById("activity-load-all") as HTMLButtonElement; private _refreshButton = document.getElementById("activity-refresh") as HTMLButtonElement; + private _keepSearchingDescription = document.getElementById("activity-keep-searching-description"); + private _keepSearchingButton = document.getElementById("activity-keep-searching"); + private _search: Search; private _ascending: boolean; private _hasLoaded: boolean; @@ -375,6 +379,10 @@ export class activityList { reload = () => { this._lastLoad = Date.now(); this._lastPage = false; + this._loadMoreButton.textContent = window.lang.strings("loadMore"); + this._loadMoreButton.disabled = false; + this._loadAllButton.classList.remove("unfocused"); + this._loadAllButton.disabled = false; // this._page = 0; let limit = 10; if (this._page != 0) { @@ -414,17 +422,23 @@ export class activityList { if (this._search.inSearch) { this._search.onSearchBoxChange(true); + this._loadAllButton.classList.remove("unfocused"); } else { this.setVisibility(this._ordering, true); + this._loadAllButton.classList.add("unfocused"); this._notFoundPanel.classList.add("unfocused"); } }, true); } - loadMore = () => { + loadMore = (callback?: () => void, loadAll: boolean = false) => { this._lastLoad = Date.now(); this._loadMoreButton.disabled = true; - const timeout = setTimeout(() => this._loadMoreButton.disabled = false, 1000); + // this._loadAllButton.disabled = true; + const timeout = setTimeout(() => { + this._loadMoreButton.disabled = false; + // this._loadAllButton.disabled = false; + }, 1000); this._page += 1; let send = { @@ -450,6 +464,8 @@ export class activityList { if (this._lastPage) { clearTimeout(timeout); this._loadMoreButton.disabled = true; + removeLoader(this._loadAllButton); + this._loadAllButton.classList.add("unfocused"); this._loadMoreButton.textContent = window.lang.strings("noMoreResults"); } @@ -460,12 +476,17 @@ export class activityList { // this._search.items = this._activities; // this._search.ordering = this._ordering; - if (this._search.inSearch) { - this._search.onSearchBoxChange(true); + if (this._search.inSearch || loadAll) { + if (this._lastPage) { + loadAll = false; + } + this._search.onSearchBoxChange(true, loadAll); } else { this.setVisibility(this._ordering, true); this._notFoundPanel.classList.add("unfocused"); } + + if (callback) callback(); // removeLoader(this._loader); // this._activityList.classList.remove("unfocused"); }, true); @@ -601,14 +622,27 @@ export class activityList { // console.log(window.innerHeight + document.documentElement.scrollTop, document.scrollingElement.scrollHeight); if (Math.abs(window.innerHeight + document.documentElement.scrollTop - document.scrollingElement.scrollHeight) < 50) { // window.notifications.customSuccess("scroll", "Reached bottom."); - // Wait 1s between loads - if (this._lastLoad + 1000 > Date.now()) return; + // Wait .5s between loads + if (this._lastLoad + 500 > Date.now()) return; this.loadMore(); } } private _prevResultCount = 0; + private _notFoundCallback = (notFound: boolean) => { + if (notFound) this._loadMoreButton.classList.add("unfocused"); + else this._loadMoreButton.classList.remove("unfocused"); + + if (notFound && !this._lastPage) { + this._keepSearchingButton.classList.remove("unfocused"); + this._keepSearchingDescription.classList.remove("unfocused"); + } else { + this._keepSearchingButton.classList.add("unfocused"); + this._keepSearchingDescription.classList.add("unfocused"); + } + }; + constructor() { this._activityList = document.getElementById("activity-card-list"); document.addEventListener("activity-reload", this.reload); @@ -623,10 +657,13 @@ export class activityList { queries: this._queries, setVisibility: this.setVisibility, filterList: document.getElementById("activity-filter-list"), - onSearchCallback: (visibleCount: number, newItems: boolean) => { + // notFoundCallback: this._notFoundCallback, + onSearchCallback: (visibleCount: number, newItems: boolean, loadAll: boolean) => { + if (this._search.inSearch && !this._lastPage) this._loadAllButton.classList.remove("unfocused"); + else this._loadAllButton.classList.add("unfocused"); if (visibleCount < 10) { - if (!newItems || this._prevResultCount != visibleCount || (visibleCount == 0 && !this._lastPage)) this.loadMore(); + if (!newItems || this._prevResultCount != visibleCount || (visibleCount == 0 && !this._lastPage) || loadAll) this.loadMore(() => {}, loadAll); } this._prevResultCount = visibleCount; } @@ -638,7 +675,15 @@ export class activityList { this.ascending = false; this._sortDirection.addEventListener("click", () => this.ascending = !this.ascending); - this._loadMoreButton.onclick = this.loadMore; + this._loadMoreButton.onclick = () => this.loadMore(); + this._loadAllButton.onclick = () => { + addLoader(this._loadAllButton, true); + this.loadMore(() => {}, true); + }; + /* this._keepSearchingButton.onclick = () => { + addLoader(this._keepSearchingButton, true); + this.loadMore(() => removeLoader(this._keepSearchingButton, true)); + }; */ this._refreshButton.onclick = this.reload; window.onscroll = this.detectScroll; diff --git a/ts/modules/search.ts b/ts/modules/search.ts index 5aa9cc2..b311b56 100644 --- a/ts/modules/search.ts +++ b/ts/modules/search.ts @@ -16,12 +16,13 @@ export interface SearchConfiguration { sortingByButton: HTMLButtonElement; searchOptionsHeader: HTMLElement; notFoundPanel: HTMLElement; + notFoundCallback?: (notFound: boolean) => void; filterList: HTMLElement; clearSearchButtonSelector: string; search: HTMLInputElement; queries: { [field: string]: QueryType }; setVisibility: (items: string[], visible: boolean) => void; - onSearchCallback: (visibleCount: number, newItems: boolean) => void; + onSearchCallback: (visibleCount: number, newItems: boolean, loadAll: boolean) => void; loadMore?: () => void; } @@ -268,7 +269,7 @@ export class Search { get ordering(): string[] { return this._ordering; } set ordering(v: string[]) { this._ordering = v; } - onSearchBoxChange = (newItems: boolean = false) => { + onSearchBoxChange = (newItems: boolean = false, loadAll: boolean = false) => { const query = this._c.search.value; if (!query) { this.inSearch = false; @@ -277,13 +278,14 @@ export class Search { } const results = this.search(query); this._c.setVisibility(results, true); - this._c.onSearchCallback(results.length, newItems); + this._c.onSearchCallback(results.length, newItems, loadAll); this.showHideSearchOptionsHeader(); if (results.length == 0) { this._c.notFoundPanel.classList.remove("unfocused"); } else { this._c.notFoundPanel.classList.add("unfocused"); } + if (this._c.notFoundCallback) this._c.notFoundCallback(results.length == 0); } fillInFilter = (name: string, value: string, offset?: number) => {