mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
refactor(header, search): trigger search only after enter was pressed
This commit is contained in:
Matej Glasnák committed
1 parent
e0d6ae57b3
commit
69f3a5b309
2 files changed
+207
-153
No files matched your search
@@ -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>
|
||||
|
||||
@@ -1,89 +1,101 @@
|
||||
<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>
|
||||
|
||||
Reference in new issue
Block a user