Assclaw/jfa-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

search: more server-search refinement

Browse Source 
fixed bugs, added extra text on "no results found" to suggest server
searching, and conditionally disable the button based on search content
and current sort. Activities page still broken. Also fixed up cache
generation, only one should ever run now, as should sorting. Two time
thresholds exist, one to trigger a re-sync but do it in the background
(i.e. send the old one to the requester), and one to re-sync and wait
for it.
This commit is contained in:
Harvey Tindall
2025-05-21 15:20:39 +01:00
parent 94e076401e
commit 732ce1bc57
10 changed files with 281 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts/modules/accounts.ts
+16 -11
View File
@@ -9,6 +9,9 @@ import { PaginatedList } from "./list.js";
declare var window: GlobalWindow;
const USER_DEFAULT_SORT_FIELD = "name";
const USER_DEFAULT_SORT_ASCENDING = true;
const dateParser = require("any-date-parser");
interface User {
@@ -911,16 +914,14 @@ export class accountsList extends PaginatedList {
loadMoreButton: document.getElementById("accounts-load-more") as HTMLButtonElement,
loadAllButton: document.getElementById("accounts-load-all") as HTMLButtonElement,
refreshButton: document.getElementById("accounts-refresh") as HTMLButtonElement,
keepSearchingDescription: document.getElementById("accounts-keep-searching-description"),
keepSearchingButton: document.getElementById("accounts-keep-searching"),
filterArea: document.getElementById("accounts-filter-area"),
searchOptionsHeader: document.getElementById("accounts-search-options-header"),
searchBox: document.getElementById("accounts-search") as HTMLInputElement,
notFoundPanel: document.getElementById("accounts-not-found"),
recordCounter: document.getElementById("accounts-record-counter"),
totalEndpoint: "/users/count",
getPageEndpoint: "/users",
limit: 4,
itemsPerPage: 40,
maxItemsLoadedForSearch: 200,
newElementsFromPage: (resp: paginatedDTO) => {
for (let u of ((resp as UsersDTO).users || [])) {
if (u.id in this.users) {
@@ -962,7 +963,8 @@ export class accountsList extends PaginatedList {
this._search.ascending
);
},
defaultSortField: "name",
defaultSortField: USER_DEFAULT_SORT_FIELD,
defaultSortAscending: USER_DEFAULT_SORT_ASCENDING,
pageLoadCallback: (req: XMLHttpRequest) => {
if (req.readyState != 4) return;
// FIXME: Error message
@@ -975,7 +977,8 @@ export class accountsList extends PaginatedList {
filterArea: this._c.filterArea,
sortingByButton: this._sortingByButton,
searchOptionsHeader: this._c.searchOptionsHeader,
notFoundPanel: this._c.notFoundPanel,
notFoundPanel: document.getElementById("accounts-not-found"),
notFoundLocallyText: document.getElementById("accounts-no-local-results"),
filterList: document.getElementById("accounts-filter-list"),
search: this._c.searchBox,
queries: queries(),
@@ -1188,7 +1191,7 @@ export class accountsList extends PaginatedList {
// Start off sorting by username (this._c.defaultSortField)
const defaultSort = () => {
document.dispatchEvent(new CustomEvent("header-click", { detail: this._c.defaultSortField }));
this._columns[this._c.defaultSortField].ascending = true;
this._columns[this._c.defaultSortField].ascending = this._c.defaultSortAscending;
this._columns[this._c.defaultSortField].hideIcon();
this._sortingByButton.parentElement.classList.add("hidden");
this._search.showHideSearchOptionsHeader();
@@ -1209,15 +1212,17 @@ export class accountsList extends PaginatedList {
this._search.onSearchBoxChange();
} else {
this.setVisibility(this._search.ordering, true);
this._c.notFoundPanel.classList.add("unfocused");
this._search.setNotFoundPanelVisibility(false);
this._search.setServerSearchButtonsDisabled(
event.detail == this._c.defaultSortField && this._columns[event.detail].ascending == this._c.defaultSortAscending
);
}
this._search.showHideSearchOptionsHeader();
});
defaultSort();
this._search.showHideSearchOptionsHeader();
this._search.generateFilterList();
this._search.showHideSearchOptionsHeader();
this.registerURLListener();
}
@@ -2168,7 +2173,7 @@ class Column {
// Returns the inner HTML to show in the "Sorting By" button.
get buttonContent() {
return `<span class="font-bold">` + window.lang.strings("sortingBy") + ": " + `</span>` + this._headerContent;
return `<i class="ri-arrow-${this.ascending ? "up" : "down"}-s-line mr-2"></i><span class="font-bold">` + window.lang.strings("sortingBy") + ": " + `</span>` + this._headerContent;
}
get ascending() { return this._ascending; }
ts/modules/activity.ts
+10 -7
View File
@@ -6,6 +6,9 @@ import { PaginatedList } from "./list.js";
declare var window: GlobalWindow;
const ACTIVITY_DEFAULT_SORT_FIELD = "time";
const ACTIVITY_DEFAULT_SORT_ASCENDING = false;
export interface activity {
id: string;
type: string;
@@ -488,16 +491,14 @@ export class activityList extends PaginatedList {
loadMoreButton: document.getElementById("activity-load-more") as HTMLButtonElement,
loadAllButton: document.getElementById("activity-load-all") as HTMLButtonElement,
refreshButton: document.getElementById("activity-refresh") as HTMLButtonElement,
keepSearchingDescription: document.getElementById("activity-keep-searching-description"),
keepSearchingButton: document.getElementById("activity-keep-searching"),
filterArea: document.getElementById("activity-filter-area"),
searchOptionsHeader: document.getElementById("activity-search-options-header"),
searchBox: document.getElementById("activity-search") as HTMLInputElement,
notFoundPanel: document.getElementById("activity-not-found"),
recordCounter: document.getElementById("activity-record-counter"),
totalEndpoint: "/activity/count",
getPageEndpoint: "/activity",
limit: 10,
itemsPerPage: 20,
maxItemsLoadedForSearch: 200,
newElementsFromPage: (resp: paginatedDTO) => {
let ordering: string[] = this._search.ordering;
for (let act of ((resp as ActivitiesDTO).activities || [])) {
@@ -513,7 +514,8 @@ export class activityList extends PaginatedList {
this._search.setOrdering([], this._c.defaultSortField, this.ascending);
this._c.newElementsFromPage(resp);
},
defaultSortField: "time",
defaultSortField: ACTIVITY_DEFAULT_SORT_FIELD,
defaultSortAscending: ACTIVITY_DEFAULT_SORT_ASCENDING,
pageLoadCallback: (req: XMLHttpRequest) => {
if (req.readyState != 4) return;
if (req.status != 200) {
@@ -531,7 +533,8 @@ export class activityList extends PaginatedList {
// Exclude this: We only sort by date, and don't want to show a redundant header indicating so.
// sortingByButton: this._sortingByButton,
searchOptionsHeader: this._c.searchOptionsHeader,
notFoundPanel: this._c.notFoundPanel,
notFoundPanel: document.getElementById("activity-not-found"),
notFoundLocallyText: document.getElementById("activity-no-local-results"),
search: this._c.searchBox,
clearSearchButtonSelector: ".activity-search-clear",
serverSearchButtonSelector: ".activity-search-server",
@@ -546,7 +549,7 @@ export class activityList extends PaginatedList {
this.initSearch(searchConfig);
this.ascending = false;
this.ascending = this._c.defaultSortAscending;
this._sortDirection.addEventListener("click", () => this.ascending = !this.ascending);
}
ts/modules/list.ts
+22 -16
View File
@@ -76,19 +76,18 @@ export interface PaginatedListConfig {
loadMoreButton: HTMLButtonElement;
loadAllButton: HTMLButtonElement;
refreshButton: HTMLButtonElement;
keepSearchingDescription: HTMLElement;
keepSearchingButton: HTMLElement;
notFoundPanel: HTMLElement;
filterArea: HTMLElement;
searchOptionsHeader: HTMLElement;
searchBox: HTMLInputElement;
recordCounter: HTMLElement;
totalEndpoint: string;
getPageEndpoint: string;
limit: number;
itemsPerPage: number;
maxItemsLoadedForSearch: number;
newElementsFromPage: (resp: paginatedDTO) => void;
updateExistingElementsFromPage: (resp: paginatedDTO) => void;
defaultSortField: string;
defaultSortAscending: boolean;
pageLoadCallback?: (req: XMLHttpRequest) => void;
}
@@ -109,13 +108,13 @@ export abstract class PaginatedList {
if (v) {
this._c.loadAllButton.classList.add("unfocused");
this._c.loadMoreButton.textContent = window.lang.strings("noMoreResults");
this._search.setServerSearchButtonsDisabled(this._search.inServerSearch);
this._c.loadMoreButton.disabled = true;
} else {
this._c.loadMoreButton.textContent = window.lang.strings("loadMore");
this._c.loadMoreButton.disabled = false;
if (this._search.inSearch) {
this._c.loadAllButton.classList.remove("unfocused");
}
this._search.setServerSearchButtonsDisabled(false);
this._c.loadAllButton.classList.remove("unfocused");
}
}
@@ -160,9 +159,15 @@ export abstract class PaginatedList {
// if (this._search.inSearch && !this.lastPage) this._c.loadAllButton.classList.remove("unfocused");
// else this._c.loadAllButton.classList.add("unfocused");
if (this._search.sortField == this._c.defaultSortField && this._search.ascending == this._c.defaultSortAscending) {
this._search.setServerSearchButtonsDisabled(!this._search.inSearch)
} else {
this._search.setServerSearchButtonsDisabled(false)
}
// FIXME: Figure out why this makes sense and make it clearer.
if ((visibleCount < this._c.limit && !this.lastPage) || loadAll) {
if ((visibleCount < this._c.itemsPerPage && this._counter.loaded < this._c.maxItemsLoadedForSearch && !this.lastPage) || loadAll) {
if (!newItems ||
this._previousPageSize != visibleCount ||
(visibleCount == 0 && !this.lastPage) ||
@@ -183,6 +188,7 @@ export abstract class PaginatedList {
if (previousServerSearch) previousServerSearch(params, newSearch);
};
searchConfig.clearServerSearch = () => {
console.log("Clearing server search");
this._page = 0;
this.reload();
}
@@ -195,6 +201,7 @@ export abstract class PaginatedList {
public abstract setVisibility: (elements: string[], visible: boolean) => void;
// Removes all elements, and reloads the first page.
// FIXME: Share more code between reload and loadMore, and go over the logic, it's messy.
public abstract reload: () => void;
protected _reload = (
callback?: (req: XMLHttpRequest) => void
@@ -206,7 +213,7 @@ export abstract class PaginatedList {
this._counter.getTotal(this._c.totalEndpoint);
// Reload all currently visible elements, i.e. Load a new page of size (limit*(page+1)).
let limit = this._c.limit;
let limit = this._c.itemsPerPage;
if (this._page != 0) {
limit *= this._page+1;
}
@@ -216,7 +223,7 @@ export abstract class PaginatedList {
params.page = 0;
if (params.sortByField == "") {
params.sortByField = this._c.defaultSortField;
params.ascending = true;
params.ascending = this._c.defaultSortAscending;
}
_post(this._c.getPageEndpoint, params, (req: XMLHttpRequest) => {
@@ -246,8 +253,7 @@ export abstract class PaginatedList {
} else {
this._counter.shown = this._counter.loaded;
this.setVisibility(this._search.ordering, true);
this._c.loadAllButton.classList.add("unfocused");
this._c.notFoundPanel.classList.add("unfocused");
// this._search.showHideNotFoundPanel(false);
}
if (this._c.pageLoadCallback) this._c.pageLoadCallback(req);
if (callback) callback(req);
@@ -268,11 +274,11 @@ export abstract class PaginatedList {
this._page += 1;
let params = this._search.inServerSearch ? this._searchParams : this.defaultParams();
params.limit = this._c.limit;
params.limit = this._c.itemsPerPage;
params.page = this._page;
if (params.sortByField == "") {
params.sortByField = this._c.defaultSortField;
params.ascending = true;
params.ascending = this._c.defaultSortAscending;
}
_post(this._c.getPageEndpoint, params, (req: XMLHttpRequest) => {
@@ -304,7 +310,7 @@ export abstract class PaginatedList {
this._search.onSearchBoxChange(true, loadAll);
} else {
this.setVisibility(this._search.ordering, true);
this._c.notFoundPanel.classList.add("unfocused");
this._search.setNotFoundPanelVisibility(false);
}
if (this._c.pageLoadCallback) this._c.pageLoadCallback(req);
if (callback) callback(req);
ts/modules/search.ts
+103 -68
View File
@@ -35,6 +35,7 @@ export interface SearchConfiguration {
sortingByButton?: HTMLButtonElement;
searchOptionsHeader: HTMLElement;
notFoundPanel: HTMLElement;
notFoundLocallyText: HTMLElement;
notFoundCallback?: (notFound: boolean) => void;
filterList: HTMLElement;
clearSearchButtonSelector: string;
@@ -91,6 +92,16 @@ export abstract class Query {
out.operator = this._operator;
return out;
}
get subject(): QueryType { return this._subject; }
getValueFromItem(item: SearchableItem): any {
return Object.getOwnPropertyDescriptor(Object.getPrototypeOf(item), this.subject.getter).get.call(item);
}
compareItem(item: SearchableItem): boolean {
return this.compare(this.getValueFromItem(item));
}
}
export class BoolQuery extends Query {
@@ -278,30 +289,19 @@ export class Search {
private _inServerSearch: boolean = false;
get inServerSearch(): boolean { return this._inServerSearch; }
set inServerSearch(v: boolean) {
const previous = this._inServerSearch;
this._inServerSearch = v;
if (!v) {
if (!v && previous != v) {
this._c.clearServerSearch();
}
}
private _serverSearchButtons: HTMLElement[];
// Returns a list of identifiers (keys in items, values in ordering).
search = (query: String): string[] => {
this._c.filterArea.textContent = "";
static tokenizeSearch = (query: string): string[] => {
query = query.toLowerCase();
let result: string[] = [...this._ordering];
// If we're in a server search already, the results are already correct.
if (this.inServerSearch) return result;
let words: string[] = [];
let queries = [];
let searchTerms = [];
let quoteSymbol = ``;
let queryStart = -1;
let lastQuote = -1;
@@ -335,19 +335,17 @@ export class Search {
}
}
}
return words;
}
query = "";
for (let word of words) {
parseTokens = (tokens: string[]): [string[], Query[]] => {
let queries: Query[] = [];
let searchTerms: string[] = [];
for (let word of tokens) {
// 1. Normal search text, no filters or anything
if (!word.includes(":")) {
searchTerms.push(word);
let cachedResult = [...result];
for (let id of cachedResult) {
const u = this.items[id];
if (!u.matchesSearch(word)) {
result.splice(result.indexOf(id), 1);
}
}
continue;
}
// 2. A filter query of some sort.
@@ -369,21 +367,6 @@ export class Search {
}
this._c.search.oninput((null as Event));
};
this._c.filterArea.appendChild(q.asElement());
// So removing elements doesn't affect us
let cachedResult = [...result];
for (let id of cachedResult) {
const u = this.items[id];
const value = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(u), queryFormat.getter).get.call(u);
// Remove from result if not matching query
if (!q.compare(value)) {
// console.log("not matching, result is", result);
result.splice(result.indexOf(id), 1);
} else {
}
}
}
} else if (queryFormat.string) {
q = new StringQuery(queryFormat, split[1]);
@@ -395,17 +378,6 @@ export class Search {
}
this._c.search.oninput((null as Event));
}
this._c.filterArea.appendChild(q.asElement());
let cachedResult = [...result];
for (let id of cachedResult) {
const u = this.items[id];
const value = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(u), queryFormat.getter).get.call(u).toLowerCase();
if (!q.compare(value)) {
result.splice(result.indexOf(id), 1);
}
}
} else if (queryFormat.date) {
let [parsedDate, op, isDate] = DateQuery.paramsFromString(split[1]);
if (!isDate) continue;
@@ -419,13 +391,61 @@ export class Search {
this._c.search.oninput((null as Event));
}
this._c.filterArea.appendChild(q.asElement());
}
if (q != null) queries.push(q);
}
return [searchTerms, queries];
}
let cachedResult = [...result];
// Returns a list of identifiers (used as keys in items, values in ordering).
search = (query: string): string[] => {
this._c.filterArea.textContent = "";
let result: string[] = [...this._ordering];
// If we're in a server search already, the results are already correct.
if (this.inServerSearch) return result;
const [searchTerms, queries] = this.parseTokens(Search.tokenizeSearch(query));
query = "";
for (let term of searchTerms) {
let cachedResult = [...result];
for (let id of cachedResult) {
const u = this.items[id];
if (!u.matchesSearch(term)) {
result.splice(result.indexOf(id), 1);
}
}
}
for (let q of queries) {
this._c.filterArea.appendChild(q.asElement());
let cachedResult = [...result];
if (q.subject.bool) {
for (let id of cachedResult) {
const u = this.items[id];
const unixValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(u), queryFormat.getter).get.call(u);
// Remove from result if not matching query
if (!q.compareItem(u)) {
// console.log("not matching, result is", result);
result.splice(result.indexOf(id), 1);
}
}
} else if (q.subject.string) {
for (let id of cachedResult) {
const u = this.items[id];
// We want to compare case-insensitively, so we get value, lower-case it then compare,
// rather than doing both with compareItem.
const value = q.getValueFromItem(u).toLowerCase();
if (!q.compare(value)) {
result.splice(result.indexOf(id), 1);
}
}
} else if(q.subject.date) {
for (let id of cachedResult) {
const u = this.items[id];
// Getter here returns a unix timestamp rather than a date, so we can't use compareItem.
const unixValue = q.getValueFromItem(u);
if (unixValue == 0) {
result.splice(result.indexOf(id), 1);
continue;
@@ -437,12 +457,11 @@ export class Search {
}
}
}
if (q != null) queries.push(q);
}
this._queries = queries;
this._searchTerms = searchTerms;
return result;
}
@@ -486,25 +505,37 @@ export class Search {
const results = this.search(query);
this._c.setVisibility(results, true);
this._c.onSearchCallback(results.length, newItems, loadAll);
if (this.inServerSearch) {
this._serverSearchButtons.forEach((v: HTMLElement) => {
v.classList.add("@low");
v.classList.remove("@high");
});
} else {
this._serverSearchButtons.forEach((v: HTMLElement) => {
v.classList.add("@high");
v.classList.remove("@low");
});
if (this.inSearch) {
if (this.inServerSearch) {
this._serverSearchButtons.forEach((v: HTMLElement) => {
v.classList.add("@low");
v.classList.remove("@high");
});
} else {
this._serverSearchButtons.forEach((v: HTMLElement) => {
v.classList.add("@high");
v.classList.remove("@low");
});
}
}
this.showHideSearchOptionsHeader();
if (results.length == 0) {
this.setNotFoundPanelVisibility(results.length == 0);
if (this._c.notFoundCallback) this._c.notFoundCallback(results.length == 0);
}
setNotFoundPanelVisibility = (visible: boolean) => {
if (this._inServerSearch || !this.inSearch) {
this._c.notFoundLocallyText.classList.add("unfocused");
} else if (this.inSearch) {
this._c.notFoundLocallyText.classList.remove("unfocused");
}
if (visible) {
console.log("showing not found panel");
this._c.notFoundPanel.classList.remove("unfocused");
} else {
console.log("hiding not found panel");
this._c.notFoundPanel.classList.add("unfocused");
}
if (this._c.notFoundCallback) this._c.notFoundCallback(results.length == 0);
}
fillInFilter = (name: string, value: string, offset?: number) => {
@@ -610,6 +641,10 @@ export class Search {
return req;
}
setServerSearchButtonsDisabled = (disabled: boolean) => {
this._serverSearchButtons.forEach((v: HTMLButtonElement) => v.disabled = disabled);
}
constructor(c: SearchConfiguration) {
// FIXME: Remove!
if (c.search.id.includes("accounts")) {