From a646eb251af446d1469f5e4b01dada480dd5379a Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@element.io>
Date: Wed, 2 Dec 2020 12:13:06 +0100
Subject: [PATCH] add draft UI for client list filters

---
 src/client/ClientListView.js      | 17 +++++++++++++++--
 src/client/ClientListViewModel.js | 28 ++++++++++++++++++++++++----
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/client/ClientListView.js b/src/client/ClientListView.js
index 162c298..9a3af9e 100644
--- a/src/client/ClientListView.js
+++ b/src/client/ClientListView.js
@@ -31,10 +31,23 @@ export class ClientListView extends TemplateView {
 
 class AllClientsView extends TemplateView {
 	render(t, vm) {
-		const clients = vm.clientList.map(clientViewModel => t.view(new ClientView(clientViewModel)));
 		return t.div({className: "ClientListView"}, [
 			t.h2("Choose an app to continue"),
-			t.div({className: "list"}, clients)
+			t.mapView(vm => vm.clientList, () => {
+				return new TemplateView(vm, t => {
+					return t.div({className: "list"}, vm.clientList.map(clientViewModel => {
+						return t.view(new ClientView(clientViewModel));
+					}));
+				});
+			}),
+			t.div(t.label([
+				t.input({type: "checkbox", checked: vm.showUnsupportedPlatforms, onChange: evt => vm.showUnsupportedPlatforms = evt.target.checked}),
+				"Show apps not available on my platform"
+			])),
+			t.div(t.label([
+				t.input({type: "checkbox", checked: vm.showExperimental, onChange: evt => vm.showExperimental = evt.target.checked}),
+				"Show experimental apps"
+			])),
 		]);
 	}
 }
diff --git a/src/client/ClientListViewModel.js b/src/client/ClientListViewModel.js
index ebf1cc0..04a8efe 100644
--- a/src/client/ClientListViewModel.js
+++ b/src/client/ClientListViewModel.js
@@ -26,8 +26,8 @@ export class ClientListViewModel extends ViewModel {
 		this._clients = clients;
 		this._link = link;
 		this.clientList = null;
-		this._showExperimental = true;
-		this._showUnsupportedPlatform = true;
+		this._showExperimental = false;
+		this._showUnsupportedPlatforms = false;
 		this._filterClients();
 		this.clientViewModel = null;
 		if (client) {
@@ -35,12 +35,32 @@ export class ClientListViewModel extends ViewModel {
 		}
 	}
 
+	get showUnsupportedPlatforms() {
+		return this._showUnsupportedPlatforms;
+	}
+
+	get showExperimental() {
+		return this._showExperimental;
+	}
+
+	set showUnsupportedPlatforms(enabled) {
+		this._showUnsupportedPlatforms = enabled;
+		this._filterClients();
+	}
+
+	set showExperimental(enabled) {
+		this._showExperimental = enabled;
+		this._filterClients();
+	}
+
 	_filterClients() {
 		this.clientList = this._clients.filter(client => {
-			if (!this._showExperimental && !this.platforms.map(p => client.getMaturity(p)).includes(Maturity.Stable)) {
+			const isStable = this.platforms.map(p => client.getMaturity(p)).includes(Maturity.Stable);
+			const isSupported = client.platforms.some(p => this.platforms.includes(p));
+			if (!this._showExperimental && !isStable) {
 				return false;
 			}
-			if (!this._showUnsupportedPlatform && !client.platforms.some(p => this.platforms.includes(p))) {
+			if (!this._showUnsupportedPlatforms && !isSupported) {
 				return false;
 			}
 			return true;