activity: refresh, load more buttons, ui adjustments

html/admin.html

@@ -735,13 +735,14 @@
                         <button class="button ~neutral @low ml-2" id="activity-sort-direction">{{ .strings.sortDirection }}</button>
                         <input type="search" class="field ~neutral @low input search ml-2 mr-2" id="activity-search" placeholder="{{ .strings.search }}">
                         <span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none activity-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
+                        <button class="button ~info @low ml-2" id="activity-refresh" aria-label="{{ .strings.refresh }}" disabled><i class="ri-refresh-line"></i></button>
                     </div>
                     <div class="supra py-1 sm hidden" id="activity-search-options-header">{{ .strings.searchOptions }}</div>
                     <div class="row -mx-2 mb-2">
                         <button type="button" class="button ~neutral @low center mx-2 hidden"><span id="activity-sort-by-field"></span> <i class="ri-close-line ml-2 text-2xl"></i></button>
                         <span id="activity-filter-area"></span>
                     </div>
-                    <div class="card @low dark:~d_neutral col">
+                    <div class="my-2">
                         <div id="activity-card-list"></div>
                         <div id="activity-loader"></div>
                         <div class="unfocused h-[100%] my-3" id="activity-not-found">
@@ -752,6 +753,9 @@
                                 </button>
                             </div>
                         </div>
+                        <div class="flex justify-center">
+                            <button class="button my-2 ~neutral @low" id="activity-load-more">{{ .strings.loadMore }}</button>
+                        </div>
                     </div>
                 </div>
             </div>

lang/admin/en-us.json

@@ -167,7 +167,9 @@
         "passwordChangeFilter": "Password Changed",
         "passwordResetFilter": "Password Reset",
         "inviteCreatedFilter": "Invite Created",
-        "inviteDeletedFilter": "Invite Deleted/Expired"
+        "inviteDeletedFilter": "Invite Deleted/Expired",
+        "loadMore": "Load More",
+        "noMoreResults": "No more results."
     },
     "notifications": {
         "changedEmailAddress": "Changed email address of {n}.",

ts/modules/activity.ts

@@ -317,6 +317,8 @@ export class activityList {
     private _searchBox = document.getElementById("activity-search") as HTMLInputElement;
     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 _refreshButton = document.getElementById("activity-refresh") as HTMLButtonElement;
     private _search: Search;
     private _ascending: boolean;
     private _hasLoaded: boolean;
@@ -344,13 +346,14 @@ export class activityList {
         if (this._page != 0) {
             limit *= this._page+1;
         };
-
+        
         let send = {
             "type": [],
             "limit": limit,
             "page": 0,
             "ascending": this.ascending
         }
+
         _post("/activity", send, (req: XMLHttpRequest) => {
             if (req.readyState != 4) return;
             if (req.status != 200) {
@@ -359,6 +362,9 @@ export class activityList {
             }
 
             this._hasLoaded = true;
+            // Allow refreshes every 15s
+            this._refreshButton.disabled = true;
+            setTimeout(() => this._refreshButton.disabled = false, 15000);
 
             let resp = req.response as ActivitiesDTO;
             // FIXME: Don't destroy everything each reload!
@@ -383,6 +389,8 @@ export class activityList {
 
     loadMore = () => {
         this._lastLoad = Date.now();
+        this._loadMoreButton.disabled = true;
+        const timeout = setTimeout(() => this._loadMoreButton.disabled = false, 1000);
         this._page += 1;
 
         let send = {
@@ -405,6 +413,11 @@ export class activityList {
             let resp = req.response as ActivitiesDTO;
             
             this._lastPage = resp.last_page;
+            if (this._lastPage) {
+                clearTimeout(timeout);
+                this._loadMoreButton.disabled = true;
+                this._loadMoreButton.textContent = window.lang.strings("noMoreResults");
+            }
 
             for (let act of resp.activities) {
                 this._activities[act.id] = new Activity(act);
@@ -590,6 +603,9 @@ export class activityList {
         this.ascending = false;
         this._sortDirection.addEventListener("click", () => this.ascending = !this.ascending);
 
+        this._loadMoreButton.onclick = this.loadMore;
+        this._refreshButton.onclick = this.reload;
+
         window.onscroll = this.detectScroll;
     }
 }