activity: add counter for total, loaded and shown

total: number of activities in the DB
loaded: How many the web UI has loaded
shown: How many are shown (differs when in a search).

api-activities.go

@@ -168,3 +168,19 @@ func (app *appContext) DeleteActivity(gc *gin.Context) {
 	app.storage.DeleteActivityKey(gc.Param("id"))
 	respondBool(200, true, gc)
 }
+
+// @Summary Returns the total number of activities stored in the database.
+// @Produce json
+// @Success 200 {object} GetActivityCountDTO
+// @Router /activity/count [get]
+// @Security Bearer
+// @tags Activity
+func (app *appContext) GetActivityCount(gc *gin.Context) {
+	resp := GetActivityCountDTO{}
+	var err error
+	resp.Count, err = app.storage.db.Count(&Activity{}, &badgerhold.Query{})
+	if err != nil {
+		resp.Count = 0
+	}
+	gc.JSON(200, resp)
+}

html/admin.html

@@ -737,7 +737,14 @@
                         <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="flex flex-row justify-between py-2">
+                        <div class="supra sm hidden" id="activity-search-options-header">{{ .strings.searchOptions }}</div>
+                        <div class="supra sm">
+                            <span id="activity-total-records" class="mx-2"></span>
+                            <span id="activity-loaded-records" class="mx-2"></span>
+                            <span id="activity-shown-records" class="mx-2"></span>
+                        </div>
+                    </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>

lang/admin/en-us.json

@@ -172,7 +172,10 @@
         "inviteDeletedFilter": "Invite Deleted/Expired",
         "loadMore": "Load More",
         "loadAll": "Load All",
-        "noMoreResults": "No more results."
+        "noMoreResults": "No more results.",
+        "totalRecords": "{n} Total Records",
+        "loadedRecords": "{n} Loaded",
+        "shownRecords": "{n} Shown"
     },
     "notifications": {
         "changedEmailAddress": "Changed email address of {n}.",

models.go

@@ -455,3 +455,7 @@ type GetActivitiesRespDTO struct {
 	Activities []ActivityDTO `json:"activities"`
 	LastPage   bool          `json:"last_page"`
 }
+
+type GetActivityCountDTO struct {
+	Count uint64 `json:"count"`
+}

router.go

@@ -237,6 +237,7 @@ func (app *appContext) loadRoutes(router *gin.Engine) {
 
 		api.POST(p+"/activity", app.GetActivities)
 		api.DELETE(p+"/activity/:id", app.DeleteActivity)
+		api.GET(p+"/activity/count", app.GetActivityCount)
 
 		if userPageEnabled {
 			user.GET("/details", app.MyDetails)

ts/modules/activity.ts

@@ -1,4 +1,4 @@
-import { _post, _delete, toDateString, addLoader, removeLoader } from "../modules/common.js";
+import { _get, _post, _delete, toDateString, addLoader, removeLoader } from "../modules/common.js";
 import { Search, SearchConfiguration, QueryType, SearchableItem } from "../modules/search.js";
 import { accountURLEvent } from "../modules/accounts.js";
 import { inviteURLEvent } from "../modules/invites.js";
@@ -357,6 +357,32 @@ export class activityList {
     private _keepSearchingDescription = document.getElementById("activity-keep-searching-description");
     private _keepSearchingButton = document.getElementById("activity-keep-searching");
 
+    private _totalRecords = document.getElementById("activity-total-records");
+    private _loadedRecords = document.getElementById("activity-loaded-records");
+    private _shownRecords = document.getElementById("activity-shown-records");
+
+    private _total: number;
+    private _loaded: number;
+    private _shown: number;
+
+    get total(): number { return this._total; }
+    set total(v: number) {
+        this._total = v;
+        this._totalRecords.textContent = window.lang.var("strings", "totalRecords", `${v}`);
+    }
+    
+    get loaded(): number { return this._loaded; }
+    set loaded(v: number) {
+        this._loaded = v;
+        this._loadedRecords.textContent = window.lang.var("strings", "loadedRecords", `${v}`);
+    }
+    
+    get shown(): number { return this._shown; }
+    set shown(v: number) {
+        this._shown = v;
+        this._shownRecords.textContent = window.lang.var("strings", "shownRecords", `${v}`);
+    }
+
     private _search: Search;
     private _ascending: boolean;
     private _hasLoaded: boolean;
@@ -383,6 +409,11 @@ export class activityList {
         this._loadMoreButton.disabled = false;
         this._loadAllButton.classList.remove("unfocused");
         this._loadAllButton.disabled = false;
+
+        this.total = 0;
+        this.loaded = 0;
+        this.shown = 0;
+
         // this._page = 0;
         let limit = 10;
         if (this._page != 0) {
@@ -396,6 +427,11 @@ export class activityList {
             "ascending": this.ascending
         }
 
+        _get("/activity/count", null, (req: XMLHttpRequest) => {
+            if (req.readyState != 4 || req.status != 200) return;
+            this.total = req.response["count"] as number;
+        });
+
         _post("/activity", send, (req: XMLHttpRequest) => {
             if (req.readyState != 4) return;
             if (req.status != 200) {
@@ -420,6 +456,8 @@ export class activityList {
             this._search.items = this._activities;
             this._search.ordering = this._ordering;
 
+            this.loaded = this._ordering.length;
+
             if (this._search.inSearch) {
                 this._search.onSearchBoxChange(true);
                 this._loadAllButton.classList.remove("unfocused");
@@ -476,6 +514,8 @@ export class activityList {
             // this._search.items = this._activities;
             // this._search.ordering = this._ordering;
 
+            this.loaded = this._ordering.length;
+
             if (this._search.inSearch || loadAll) {
                 if (this._lastPage) {
                     loadAll = false;
@@ -659,6 +699,8 @@ export class activityList {
             filterList: document.getElementById("activity-filter-list"),
             // notFoundCallback: this._notFoundCallback,
             onSearchCallback: (visibleCount: number, newItems: boolean, loadAll: boolean) => {
+                this.shown = visibleCount;
+
                 if (this._search.inSearch && !this._lastPage) this._loadAllButton.classList.remove("unfocused");
                 else this._loadAllButton.classList.add("unfocused");