Add support for the user data filter that defaults to only the user's data

module/Apps/StatsViewer.mjs

@@ -43,12 +43,10 @@ export class StatsViewer extends HandlebarsApplicationMixin(ApplicationV2) {
 	async _onRender(context, options) {
 		await super._onRender(context, options);
 
-		const { parts } = options;
+		const elements = this.element
-
+			.querySelectorAll(`[data-bind]`);
-		if (parts.includes(`tableSelect`)) {
+		for (const input of elements) {
-			this.element
+			input.addEventListener(`change`, this.#bindListener.bind(this));
-				.querySelector(`[data-application-part="tableSelect"] [data-bind]`)
-				?.addEventListener(`change`, this.#bindListener.bind(this));
 		};
 	};
 
@@ -60,6 +58,10 @@ export class StatsViewer extends HandlebarsApplicationMixin(ApplicationV2) {
 				this.#prepareTableSelectContext(ctx);
 				break;
 			};
+			case `dataFilters`: {
+				this.#prepareDataFiltersContext(ctx);
+				break;
+			};
 		};
 
 		if (import.meta.env.DEV) {
@@ -99,6 +101,18 @@ export class StatsViewer extends HandlebarsApplicationMixin(ApplicationV2) {
 		ctx.subtables = subtableList;
 	};
 
+	_selectedUsers = [game.user.id];
+	async #prepareDataFiltersContext(ctx) {
+		ctx.users = [];
+		ctx.selectedUsers = this._selectedUsers;
+		for (const user of game.users) {
+			ctx.users.push({
+				label: user.name,
+				value: user.id,
+			});
+		};
+	};
+
 	/**
 	 * @param {Event} event
 	 */
@@ -108,6 +122,7 @@ export class StatsViewer extends HandlebarsApplicationMixin(ApplicationV2) {
 
 		const binding = data.bind;
 		if (!binding || !Object.hasOwn(this, binding)) {
+			Logger.debug(`Skipping change for element with binding "${binding}"`);
 			return;
 		};
 

module/handlebarsHelpers/options.mjs

@@ -6,12 +6,15 @@
  */
 
 /**
- * @param {string | number} selected
+ * @param {string | number | string[] | number[]} selected
  * @param {Array<Option | string>} opts
  * @param {any} meta
  */
 export function options(selected, opts) {
-	selected = Handlebars.escapeExpression(selected);
+	if (!Array.isArray(selected)) {
+		selected = [selected];
+	};
+	// selected = selected.map(Handlebars.escapeExpression);
 	const htmlOptions = [];
 
 	for (let opt of opts) {
@@ -22,7 +25,7 @@ export function options(selected, opts) {
 		htmlOptions.push(
 			`<option
 				value="${opt.value}"
-				${selected === opt.value ? `selected` : ``}
+				${selected.includes(opt.value) ? `selected` : ``}
 				${opt.disabled ? `disabled` : ``}
 			>
 				${ opt.label }

public/styles/Apps/StatsViewer.css

@@ -9,4 +9,9 @@
 		flex-direction: row;
 		gap: 1rem;
 	}
+	[data-application-part="dataFilters"] {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 1rem;
+	}
 }

public/templates/Apps/StatsViewer/dataFilters.hbs

@@ -1,3 +1,11 @@
 <div>
-	Data Filters
+	<div>
+		Extra Controls
+	</div>
+	{{!-- This currently doesn't support any placeholders :( --}}
+	<multi-select
+		data-bind="_selectedUsers"
+	>
+		{{ st-options selectedUsers users }}
+	</multi-select>
 </div>