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

<template>
	<div>

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

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

	</div>
</template>

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

export default {
	components: {
		ZTasksSearch,
		AUnscheduledTable
	},

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

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

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

		filteredUnscheduledTasks() {
			if (!this.unscheduledSubtasks)
				return null

			return  this.unscheduledSubtasks.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/loadUnscheduledSubtasks', id)
		},

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