From 309f75b19d26c0cda48667c443b3e309ead5035b Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Fri, 31 Jan 2020 10:05:53 +0000
Subject: [PATCH] Task Search (#52)

Add hiding the search

Add actually searching for tasks

Fix jumping search button on page load

Add search button

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/52
---
 src/components/lists/ShowList.vue      |  2 +-
 src/components/tasks/ShowListTasks.vue | 55 +++++++++++++++++++++++++-
 src/main.js                            |  2 +
 src/styles/components/list.scss        | 25 ++++++++++++
 src/styles/theme/form.scss             |  3 ++
 5 files changed, 85 insertions(+), 2 deletions(-)

diff --git a/src/components/lists/ShowList.vue b/src/components/lists/ShowList.vue
index b7a39c82c..5116b9493 100644
--- a/src/components/lists/ShowList.vue
+++ b/src/components/lists/ShowList.vue
@@ -4,7 +4,7 @@
 			<router-link :to="{ name: 'editList', params: { id: list.id } }" class="icon settings is-medium">
 				<icon icon="cog" size="2x"/>
 			</router-link>
-			<h1>{{ list.title }}</h1>
+			<h1 :style="{ 'opacity': list.title === '' ? '0': '1' }">{{ list.title === '' ? 'Loading...': list.title}}</h1>
 			<div class="switch-view">
 				<router-link :to="{ name: 'showList', params: { id: list.id } }" :class="{'is-active': $route.params.type !== 'gantt'}">List</router-link>
 				<router-link :to="{ name: 'showListWithType', params: { id: list.id, type: 'gantt' } }" :class="{'is-active': $route.params.type === 'gantt'}">Gantt</router-link>
diff --git a/src/components/tasks/ShowListTasks.vue b/src/components/tasks/ShowListTasks.vue
index 755c1f7d4..251c779e5 100644
--- a/src/components/tasks/ShowListTasks.vue
+++ b/src/components/tasks/ShowListTasks.vue
@@ -1,5 +1,36 @@
 <template>
 	<div class="loader-container" :class="{ 'is-loading': listService.loading || taskCollectionService.loading}">
+		<div class="search">
+			<div class="field has-addons" :class="{ 'hidden': !showTaskSearch }">
+				<div class="control has-icons-left has-icons-right">
+					<input
+							class="input"
+							type="text"
+							placeholder="Search"
+							v-focus
+							v-model="searchTerm"
+							@keyup.enter="searchTasks"
+							@blur="hideSearchBar()"/>
+					<span class="icon is-left">
+						<icon icon="search"/>
+					</span>
+				</div>
+				<div class="control">
+					<button
+							class="button noshadow is-primary"
+							@click="searchTasks"
+							:class="{'is-loading': taskCollectionService.loading}"
+							:disabled="searchTerm === ''">
+						Search
+					</button>
+				</div>
+			</div>
+			<button class="button" @click="showTaskSearch = !showTaskSearch" v-if="!showTaskSearch">
+				<span class="icon">
+					<icon icon="search"/>
+				</span>
+			</button>
+		</div>
 		<form @submit.prevent="addTask()">
 			<div class="field is-grouped task-add">
 				<p class="control has-icons-left is-expanded" :class="{ 'is-loading': taskService.loading}">
@@ -115,6 +146,9 @@
 				isTaskEdit: false,
 				taskEditTask: TaskModel,
 				newTaskText: '',
+
+				showTaskSearch: false,
+				searchTerm: '',
 			}
 		},
 		components: {
@@ -159,8 +193,11 @@
 						this.error(e, this)
 					})
 			},
-			loadTasks(page) {
+			loadTasks(page, search = '') {
 				const params = {sort_by: ['done', 'id'], order_by: ['asc', 'desc']}
+				if (search !== '') {
+					params.s = search
+				}
 				this.taskCollectionService.getAll({listID: this.$route.params.id}, params, page)
 					.then(r => {
 						this.$set(this, 'tasks', r)
@@ -262,6 +299,22 @@
 					return 0
 				})
 			},
+			searchTasks() {
+				if (this.searchTerm === '') {
+					return
+				}
+				this.loadTasks(1, this.searchTerm)
+			},
+			hideSearchBar() {
+				// This is a workaround.
+				// When clicking on the search button, @blur from the input is fired. If we
+				// would then directly hide the whole search bar directly, no click event
+				// from the button gets fired. To prevent this, we wait 200ms until we hide
+				// everything so the button has a chance of firering the search event.
+				setTimeout(() => {
+					this.showTaskSearch = false
+				}, 200)
+			},
 		}
 	}
 </script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 6db875809..1c84898fc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -62,6 +62,7 @@ import { faAlignLeft } from '@fortawesome/free-solid-svg-icons'
 import { faPaperclip } from '@fortawesome/free-solid-svg-icons'
 import { faClock } from '@fortawesome/free-regular-svg-icons'
 import { faHistory } from '@fortawesome/free-solid-svg-icons'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 library.add(faSignOutAlt)
@@ -98,6 +99,7 @@ library.add(faAlignLeft)
 library.add(faPaperclip)
 library.add(faClock)
 library.add(faHistory)
+library.add(faSearch)
 
 Vue.component('icon', FontAwesomeIcon)
 
diff --git a/src/styles/components/list.scss b/src/styles/components/list.scss
index 362e13db1..c5bf6d29e 100644
--- a/src/styles/components/list.scss
+++ b/src/styles/components/list.scss
@@ -34,3 +34,28 @@
   padding: 10px 1em;
   height: 40px;
 }
+
+.search {
+  max-width: 300px;
+  margin-top: -78px;
+  float: right;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .field {
+    transition: width $transition;
+    width: 100%;
+
+    &.hidden {
+      width: 0;
+      height: 0;
+      margin: 0;
+      overflow: hidden;
+    }
+
+    .button {
+      height: 100%;
+    }
+  }
+}
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
index 56019c047..d432d3bb4 100644
--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@@ -152,3 +152,6 @@
   float: right;
 }
 
+.control.has-icons-left .icon, .control.has-icons-right .icon {
+  z-index: 4;
+}