mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
feat(search, header) reworked header and search
This commit is contained in:
Matej Glasnák committed
1 parent
e0d6ae57b3
commit
4f8c8499c2
242 files changed
+21094
-2061
No files matched your search
@@ -1,92 +1,124 @@
|
||||
<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 class="search-container">
|
||||
<div v-if="!searchResults" class="search-container__message">
|
||||
<span v-if="!search?.length">
|
||||
Pre potrvrdenie vyhľadávania stlačte
|
||||
<span class="search-container__message__enter">Enter</span>
|
||||
</span>
|
||||
|
||||
<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>
|
||||
<span v-else> Vyhľadávam... </span>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<p v-if="searchResults.error" class="px-3">
|
||||
{{ 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>
|
||||
</template>
|
||||
</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 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: {
|
||||
handleClose() {
|
||||
if (window.history.length > 1) {
|
||||
this.$router.back();
|
||||
} else {
|
||||
this.$router.push('/');
|
||||
}
|
||||
},
|
||||
|
||||
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))
|
||||
async onSearch(search) {
|
||||
try {
|
||||
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 };
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.search-container
|
||||
position: relative
|
||||
|
||||
&__message
|
||||
padding: 15px
|
||||
font-size: 16px
|
||||
|
||||
&__enter
|
||||
color: var(--color-primary)
|
||||
font-weight: 500
|
||||
|
||||
.results-wrapper
|
||||
margin-bottom: 60px
|
||||
</style>
|
||||
</style>
|
||||
Reference in new issue
Block a user