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

<template>
	<div>

		<Z-tasks-search @search="onSearch" @employee-selected="onEmployeeSelected" @update-sort-order="onUpdateSortOrder" />

		<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: '',
			sortOrder: null
		}
	},

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

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

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

			let filteredSubtasks = this.unscheduledSubtasks.filter(subtask => {
				return this.filterParams(this.searchQuery, subtask.master_task?.name || subtask.title) || this.filterParams(this.searchQuery, subtask.project_code)
			})

			if (this.sortOrder === 'nameAsc') {
				filteredSubtasks.sort((a, b) => {
					const nameA = (a.title || a.master_task || '').toLowerCase()
					const nameB = (b.title || b.master_task || '').toLowerCase()
					return nameA.localeCompare(nameB)
				})
			//Sorting by name Z-A
			} else if (this.sortOrder === 'nameDesc') {
				filteredSubtasks.sort((a, b) => {
					// const { nameA, nameB } = this._getTaskTitleOrMastertaskName(a, b)
					const nameA = (a.title || a.master_task || '').toLowerCase()
					const nameB = (b.title || b.master_task || '').toLowerCase()
					return nameB.localeCompare(nameA)
				})
			//Sorting by date Newest-Oldest
			} else if (this.sortOrder === 'deadlineDesc') {
				filteredSubtasks.sort((a, b) => {
					const deadlineA = a.deadline ? new Date(a.deadline) : new Date(this.getMasterTaskDeadline(a))
					const deadlineB = b.deadline ? new Date(b.deadline) : new Date(this.getMasterTaskDeadline(b))
					return deadlineB - deadlineA
				})
			//Sorting by date Oldest-Newest
			} else if (this.sortOrder === 'deadlineAsc') {
				filteredSubtasks.sort((a, b) => {
					const deadlineA = a.deadline ? new Date(a.deadline) : new Date(this.getMasterTaskDeadline(a))
					const deadlineB = b.deadline ? new Date(b.deadline) : new Date(this.getMasterTaskDeadline(b))
					return deadlineA - deadlineB
				})
			}

			return filteredSubtasks
		}
	},

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

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

		onUpdateSortOrder(newSortOrder) {
			this.sortOrder = newSortOrder
		},

		filterParams(searchQuery, row) {
			if(!row) return false
			return row.toLowerCase().includes(searchQuery.toLowerCase())
		},

		getMasterTaskDeadline(subtask) {
			return subtask.master_task_deadline
		}
	}
}
</script>