From b707ad0536ccdd891ee54b64d8805bed452b74e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 15 May 2020 09:06:25 +0200
Subject: [PATCH] Enhance board selector
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/BoardSelector.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/BoardSelector.vue b/src/BoardSelector.vue
index 10cc998b0..55691c140 100644
--- a/src/BoardSelector.vue
+++ b/src/BoardSelector.vue
@@ -24,6 +24,7 @@
 	<Modal @close="close">
 		<div id="modal-inner" :class="{ 'icon-loading': loading }">
 			<h1>{{ t('deck', 'Select the board to link to a project') }}</h1>
+			<input v-model="filter" type="text" :placeholder="t('deck', 'Search by board title')">
 			<ul v-if="!loading">
 				<li v-for="board in availableBoards"
 					:key="board.id"
@@ -46,8 +47,15 @@
 		padding: 20px;
 	}
 
+	input {
+		width: 100%;
+		margin-bottom: 15px;
+	}
+
 	ul {
-		min-height: 100px;
+		min-height: 50vh;
+		max-height: 300px;
+		overflow: scroll;
 	}
 
 	li {
@@ -90,6 +98,7 @@ export default {
 	},
 	data() {
 		return {
+			filter: '',
 			boards: [],
 			selectedBoard: null,
 			loading: true,
@@ -98,12 +107,16 @@ export default {
 	},
 	computed: {
 		availableBoards() {
-			return this.boards.filter((board) => ('' + board.id !== '' + this.currentBoard))
+			return this.boards.filter((board) => (
+				'' + board.id !== '' + this.currentBoard
+				&& board.title.match(this.filter)
+			))
 		},
 	},
 	beforeMount() {
 		this.fetchBoards()
-		this.currentBoard = window.location.hash.match(/\/boards\/([0-9]+)/)[1] || null
+		const hash = window.location.hash.match(/\/boards\/([0-9]+)/)
+		this.currentBoard = hash.length > 0 ? hash[1] : null
 	},
 	methods: {
 		fetchBoards() {