jandl-taskmanager-app/app/src/plugins/tm@overview/tasks-ongoing/tasks-ongoing.vue

<template>
	<div>

		<Z-tasks-search @search="onSearch" @employee-selected="onEmployeeSelected" />

		<W-loadable :content="filteredOngoingTasks" :emptyMessage="searchQuery.length ? 'Neboli nájdené žiadne úlohy' : 'Nenašli sa žiadne záznamy'">
			<A-ongoing-table :subtasks="filteredOngoingTasks" />
		</W-loadable>

	</div>
</template>

<script>
import ZTasksSearch 		from '@/plugins/tm@overview/_components/z-tasks-search.vue'
import { mapGetters } 		from 'vuex'
import AOngoingTable 		from './_components/a-ongoing-table.vue'

export default {
	components: {
		ZTasksSearch,
		AOngoingTable
	},

	data() {
		return {
			searchQuery: ''
		}
	},

	ionViewWillEnter() {
		this.$store.dispatch('tm/loadOngoingSubtasks')
	},

	computed: {
		...mapGetters('tm', ['ongoingSubtasks']),

		filteredOngoingTasks() {
			if (!this.ongoingSubtasks)
				return null

			return  this.ongoingSubtasks.filter(subtask => {
				return this.filterParams(this.searchQuery, subtask.master_task?.name || subtask.master_task) || this.filterParams(this.searchQuery, subtask.project_code)
			})
		}
	},

	methods: {
		onSearch(searchQuery) {
			this.searchQuery = searchQuery
		},

		onEmployeeSelected(id) {
			this.$store.dispatch('tm/loadOngoingSubtasks', id)
		},

		filterParams(searchQuery, row) {
			if(!row) return false
			return row.toLowerCase().includes(searchQuery.toLowerCase())
		}
	}
}
</script>