From 69f3a5b30980c14df84bddbf5cc818c2d28d7f1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <matej.glasnak@blume.sk>
Date: Thu, 20 Nov 2025 11:27:15 +0100
Subject: [PATCH] refactor(header, search): trigger search only after enter was
 pressed

---
 .../app/_layout/app/_components/a-header.vue  | 212 +++++++++++-------
 app/src/plugins/lib@search/search/search.vue  | 150 +++++++------
 2 files changed, 208 insertions(+), 154 deletions(-)

diff --git a/app/src/plugins/app/_layout/app/_components/a-header.vue b/app/src/plugins/app/_layout/app/_components/a-header.vue
index dfa4efc..999e37a 100644
--- a/app/src/plugins/app/_layout/app/_components/a-header.vue
+++ b/app/src/plugins/app/_layout/app/_components/a-header.vue
@@ -1,109 +1,151 @@
 <template>
-	<v-app-bar class="header">
-		<v-app-bar-nav-icon @click="$events.emit('toggle-menu')" class="menu-icon"></v-app-bar-nav-icon>
+  <v-app-bar class="header">
+    <v-app-bar-nav-icon
+      @click="$events.emit('toggle-menu')"
+      class="menu-icon"
+    ></v-app-bar-nav-icon>
 
-		<div class="d-flex justify-space-between align-center w-100">
-			<h1>{{ $route.meta.title }}</h1>
+    <div class="d-flex justify-space-between align-center w-100">
+      <h1>{{ $route.meta.title }}</h1>
 
-			<div class="d-flex justify-end align-center w-100 header-sm">
-				<img class="search-icon" :src="require('@/plugins/app/_img/icons/search.svg')" alt="search-icon" />
-				<input class="search-input mx-2" v-model="search" type="text" placeholder="Search" @click="$router.push({name: 'Search'})" @keyup="$events.emit('onSearch', search)" />
+      <div class="d-flex justify-end align-center w-100 header-sm">
+        <img
+          class="search-icon"
+          :src="require('@/plugins/app/_img/icons/search.svg')"
+          alt="search-icon"
+        />
+        <input
+          class="search-input mx-2"
+          v-model="search"
+          type="text"
+          placeholder="Search"
+          @click="$router.push({ name: 'Search' })"
+          @keydown.enter="$events.emit('onSearch', search)"
+        />
 
-				<v-menu>
-					<template v-slot:activator="{ props }">
-						<v-btn v-bind="props" class="button primary mr-5">
-							<v-icon icon="mdi-plus" size="large"></v-icon>Vytvoriť
-						</v-btn>
-					</template>
+        <v-menu>
+          <template v-slot:activator="{ props }">
+            <v-btn v-bind="props" class="button primary mr-5">
+              <v-icon icon="mdi-plus" size="large"></v-icon>Vytvoriť
+            </v-btn>
+          </template>
 
-					<v-list>
-						<v-list-item class="cursor-pointer hover-background" @click="createMasterTask()">MASTER TASK</v-list-item>
-						<v-list-item class="cursor-pointer hover-background" @click="createTask()">SUB TASK</v-list-item>
-						<v-list-item class="cursor-pointer hover-background" @click="createTeam()">TÍM</v-list-item>
-						<v-list-item class="cursor-pointer hover-background" @click="createBlocker()">BLOCKER</v-list-item>
-					</v-list>
-				</v-menu>
+          <v-list>
+            <v-list-item
+              class="cursor-pointer hover-background"
+              @click="createMasterTask()"
+              >MASTER TASK</v-list-item
+            >
+            <v-list-item
+              class="cursor-pointer hover-background"
+              @click="createTask()"
+              >SUB TASK</v-list-item
+            >
+            <v-list-item
+              class="cursor-pointer hover-background"
+              @click="createTeam()"
+              >TÍM</v-list-item
+            >
+            <v-list-item
+              class="cursor-pointer hover-background"
+              @click="createBlocker()"
+              >BLOCKER</v-list-item
+            >
+          </v-list>
+        </v-menu>
 
-				<v-menu v-if="user">
-					<template v-slot:activator="{ props }">
-						<v-btn class="menu-dropdown" v-bind="props">
-							<div class="d-flex justify-between align-center">
-								<p class="employee-select-avatar d-flex justify-center align-center" @click.stop="$router.push({name: 'Dashboard - User'})">
-									{{ user.name?.charAt(0) }}{{ user.surname?.charAt(0) }}
-								</p>
+        <v-menu v-if="user">
+          <template v-slot:activator="{ props }">
+            <v-btn class="menu-dropdown" v-bind="props">
+              <div class="d-flex justify-between align-center">
+                <p
+                  class="employee-select-avatar d-flex justify-center align-center"
+                  @click.stop="$router.push({ name: 'Dashboard - User' })"
+                >
+                  {{ user.name?.charAt(0) }}{{ user.surname?.charAt(0) }}
+                </p>
 
-								<div>
-									<span class="employee-name ml-4">{{ `${user.name} ${user.surname || ''}` }}</span>
-									<v-icon class="ml-3" icon="mdi-chevron-down" size="x-small"></v-icon>
-								</div>
-							</div>
-						</v-btn>
-					</template>
+                <div>
+                  <span class="employee-name ml-4">{{
+                    `${user.name} ${user.surname || ''}`
+                  }}</span>
+                  <v-icon
+                    class="ml-3"
+                    icon="mdi-chevron-down"
+                    size="x-small"
+                  ></v-icon>
+                </div>
+              </div>
+            </v-btn>
+          </template>
 
-					<v-list class="text-center">
-						<v-list-item class="cursor-pointer hover-background" @click.stop="$router.push({name: 'Dashboard - User'})">Profil</v-list-item>
-						<v-list-item>
-							<v-btn class="button" @click="logOut()">Odhlásiť sa</v-btn>
-						</v-list-item>
-					</v-list>
-				</v-menu>
-			</div>
-		</div>
-
-	</v-app-bar>
+          <v-list class="text-center">
+            <v-list-item
+              class="cursor-pointer hover-background"
+              @click.stop="$router.push({ name: 'Dashboard - User' })"
+              >Profil</v-list-item
+            >
+            <v-list-item>
+              <v-btn class="button" @click="logOut()">Odhlásiť sa</v-btn>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </div>
+    </div>
+  </v-app-bar>
 </template>
 
 <script>
-import { mapGetters } 	from 'vuex'
+import { mapGetters } from 'vuex';
 
 export default {
-	data() {
-		return {
-			search: ''
-		}
-	},
+  data() {
+    return {
+      search: '',
+    };
+  },
 
-	computed: {
-		...mapGetters('auth', ['user']),
-	},
+  computed: {
+    ...mapGetters('auth', ['user']),
+  },
 
-	methods: {
-		async logOut() {
-			try {
-				await this.$store.dispatch('auth/logout')
-				this.$router.push('/')
-				this.$toast.success('Boli ste odhlásený')
-			} catch (error) {
-				this.$toast.error(this.$parseError(error))
+  methods: {
+    async logOut() {
+      try {
+        await this.$store.dispatch('auth/logout');
+        this.$router.push('/');
+        this.$toast.success('Boli ste odhlásený');
+      } catch (error) {
+        this.$toast.error(this.$parseError(error));
 
-				if (process.env.NODE_ENV === 'development')
-					console.log('[a-header.vue] Error: ', error)
-			}
-		},
+        if (process.env.NODE_ENV === 'development')
+          console.log('[a-header.vue] Error: ', error);
+      }
+    },
 
-		createMasterTask() {
-			this.$events.emit('show-mastertask-modal', {})
-		},
+    createMasterTask() {
+      this.$events.emit('show-mastertask-modal', {});
+    },
 
-		createTask() {
-			this.$events.emit('show-subtask-modal', {})
-		},
+    createTask() {
+      this.$events.emit('show-subtask-modal', {});
+    },
 
-		createTeam() {
-			this.$events.emit('show-team-modal', {})
-		},
+    createTeam() {
+      this.$events.emit('show-team-modal', {});
+    },
 
-		createBlocker() {
-			this.$events.emit('show-blocker-modal', {})
-		}
-	},
+    createBlocker() {
+      this.$events.emit('show-blocker-modal', {});
+    },
+  },
 
-	watch: {
-		'$route' (to, from) {
-			this.search = ''
-		}
-	},
-}
+  watch: {
+    $route(to, from) {
+      this.search = '';
+    },
+  },
+};
 </script>
 
 <style lang="sass" scoped>
diff --git a/app/src/plugins/lib@search/search/search.vue b/app/src/plugins/lib@search/search/search.vue
index 74ca8ec..04f483f 100644
--- a/app/src/plugins/lib@search/search/search.vue
+++ b/app/src/plugins/lib@search/search/search.vue
@@ -1,92 +1,104 @@
 <template>
-	<div>
-		<p v-if="!this.searchResults" class="px-3 py-3">{{ this.search?.length ? $t('Searching...') : $t('Type something') }}</p>
-		<p v-else-if="this.searchResults.error" class="px-3">{{ this.searchResults.error }}</p>
+  <div>
+    <p v-if="!this.searchResults" class="px-3 py-3">
+      {{
+        this.search?.length
+          ? $t('Vyhľadávanie...')
+          : $t('Pre začatie vyhľadávania stlačte Enter')
+      }}
+    </p>
+    <p v-else-if="this.searchResults.error" class="px-3">
+      {{ this.searchResults.error }}
+    </p>
 
-		<div v-else class="results-wrapper">
-			<A-search-result-mastertasks :mastertasks="searchResults.mastertasks"/>
-			<A-search-result-subtasks :subtasks="searchResults.subtasks" />
-			<A-search-result-team :teams="searchResults.teams" />
-		</div>
-	</div>
+    <div v-else class="results-wrapper">
+      <A-search-result-mastertasks :mastertasks="searchResults.mastertasks" />
+      <A-search-result-subtasks :subtasks="searchResults.subtasks" />
+      <A-search-result-team :teams="searchResults.teams" />
+    </div>
+  </div>
 </template>
 
 <script>
-import { debounce } 				from 'lodash-es'
-import ASearchResultTeam 			from '@/plugins/lib@search/search/_components/a-search-result-team.vue'
-import ASearchResultSubtasks 		from '@/plugins/lib@search/search/_components/a-search-result-subtasks.vue'
-import ASearchResultMastertasks 	from '@/plugins/lib@search/search/_components/a-search-result-mastertasks.vue'
+import { debounce } from 'lodash-es';
+import ASearchResultTeam from '@/plugins/lib@search/search/_components/a-search-result-team.vue';
+import ASearchResultSubtasks from '@/plugins/lib@search/search/_components/a-search-result-subtasks.vue';
+import ASearchResultMastertasks from '@/plugins/lib@search/search/_components/a-search-result-mastertasks.vue';
 
 export default {
-	components: {
-		ASearchResultTeam,
-		ASearchResultSubtasks,
-		ASearchResultMastertasks
-	},
+  components: {
+    ASearchResultTeam,
+    ASearchResultSubtasks,
+    ASearchResultMastertasks,
+  },
 
-	data() {
-		return {
-			searchResults: null,
-			search: ''
-		}
-	},
+  data() {
+    return {
+      searchResults: null,
+      search: '',
+    };
+  },
 
-	created() {
-		this.$events.on('onSearch', (search) => {
-			if (!search?.length)
-				return
+  created() {
+    this.$events.on('onSearch', (search) => {
+      if (!search?.length) return;
 
-			this.search = search
-			this.onSearch(search)
-		})
-	},
+      this.search = search;
+      this.onSearch(search);
+    });
+  },
 
-	mounted() {
-		this.$events.on('on-subtask-edited', () => {
-			this.onSearch(this.search, false)
-		})
+  mounted() {
+    this.$events.on('on-subtask-edited', () => {
+      this.onSearch(this.search, false);
+    });
 
-		this.$events.on('on-subtask-deleted', () => {
-			this.onSearch(this.search, false)
-		})
+    this.$events.on('on-subtask-deleted', () => {
+      this.onSearch(this.search, false);
+    });
 
-		this.$events.on('on-mastertask-edited', () => {
-			this.onSearch(this.search, false)
-		})
+    this.$events.on('on-mastertask-edited', () => {
+      this.onSearch(this.search, false);
+    });
 
-		this.$events.on('on-mastertask-deleted', () => {
-			this.onSearch(this.search, false)
-		})
-	},
+    this.$events.on('on-mastertask-deleted', () => {
+      this.onSearch(this.search, false);
+    });
+  },
 
-	unmounted() {
-		this.$events.off('on-subtask-edited')
-		this.$events.off('on-subtask-deleted')
-		this.$events.off('on-mastertask-edited')
-		this.$events.off('on-mastertask-deleted')
-	},
+  unmounted() {
+    this.$events.off('on-subtask-edited');
+    this.$events.off('on-subtask-deleted');
+    this.$events.off('on-mastertask-edited');
+    this.$events.off('on-mastertask-deleted');
+  },
 
-	methods: {
-		onSearch: debounce(async function (search, reset = true) {
-			try {
-				if (reset)
-					this.searchResults = null
+  methods: {
+    onSearch: debounce(async function (search, reset = true) {
+      try {
+        if (reset) this.searchResults = null;
 
-				const { mastertasks, subtasks, teams} = await this.$axios.get_auth(`v1/search?q=${search}`)
-				this.searchResults = {mastertasks: mastertasks.data, subtasks: subtasks.data, teams: teams.data}
-			} catch (error) {
-				this.$toast.error(this.$parseError(error))
+        const { mastertasks, subtasks, teams } = await this.$axios.get_auth(
+          `v1/search?q=${search}`,
+        );
+        this.searchResults = {
+          mastertasks: mastertasks.data,
+          subtasks: subtasks.data,
+          teams: teams.data,
+        };
+      } catch (error) {
+        this.$toast.error(this.$parseError(error));
 
-				if (process.env.NODE_ENV === 'development')
-					console.log('[serach.vue] Error: ', error)
-				this.searchResults = {error}
-			}
-		}, 300)
-	}
-}
+        if (process.env.NODE_ENV === 'development')
+          console.log('[serach.vue] Error: ', error);
+        this.searchResults = { error };
+      }
+    }, 300),
+  },
+};
 </script>
 
 <style lang="sass" scoped>
 .results-wrapper
 	margin-bottom: 60px
-</style>
\ No newline at end of file
+</style>