activity: refresh, load more buttons, ui adjustments

activity-log
Harvey Tindall 1 year ago
parent 2d83718f81
commit 47ce8a9ec4
No known key found for this signature in database
GPG Key ID: BBC65952848FB1A2

@ -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>

@ -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}.",

@ -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;
}
}

Loading…
Cancel
Save