activity: add a "load all" button

html/admin.html

@@ -748,13 +748,18 @@
                         <div class="unfocused h-[100%] my-3" id="activity-not-found">
                             <div class="flex flex-col h-[100%] justify-center items-center">
                                 <span class="text-2xl font-medium italic mb-3">{{ .strings.noResultsFound }}</span>
-                                <button class="button ~neutral @low activity-search-clear">
+                                <span class="text-xl font-medium italic mb-3 unfocused" id="activity-keep-searching-description">{{ .strings.keepSearchingDescription }}</span>
-                                    <span class="mr-2">{{ .strings.clearSearch }}</span><i class="ri-close-line"></i>
+                                <div class="flex flex-row">
-                                </button>
+                                    <button class="button ~neutral @low activity-search-clear">
+                                        <span class="mr-2">{{ .strings.clearSearch }}</span><i class="ri-close-line"></i>
+                                    </button>
+                                    <button class="button ~neutral @low unfocused" id="activity-keep-searching">{{ .strings.keepSearching }}</button>
+                                </div>
                             </div>
                         </div>
                         <div class="flex justify-center">
-                            <button class="button my-2 ~neutral @low" id="activity-load-more">{{ .strings.loadMore }}</button>
+                            <button class="button m-2 ~neutral @low" id="activity-load-more">{{ .strings.loadMore }}</button>
+                            <button class="button m-2 ~neutral @low" id="activity-load-all">{{ .strings.loadAll }}</button>
                         </div>
                     </div>
                 </div>

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": {

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();
             }
         };

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) {
+            if (this._search.inSearch || loadAll) {
-                this._search.onSearchBoxChange(true);
+                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
+            // Wait .5s between loads
-            if (this._lastLoad + 1000 > Date.now()) return;
+            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;

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) => {