[CR] sorting v-select, [bugy]

app/public/favicon/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

app/public/index.html

@@ -4,7 +4,7 @@
 		<meta charset="utf-8" />
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
-		<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+		<link rel="icon" href="<%= BASE_URL %>favicon/favicon.ico" />
 		<title>ToDo by JANDL</title>
 	</head>
 	<body>

app/src/plugins/tm@dashboard/_components/z-timeline.vue

@@ -183,7 +183,9 @@ export default {
 			const start = date.setHours(Math.round(event.startTimeMinutes / 60), Math.round(event.startTimeMinutes % 60), 0)
 			const end 	= date.setHours(Math.round(event.endTimeMinutes / 60), Math.round(event.endTimeMinutes % 60), 0)
 
-			const editedSubtask = {
+			const split = this.splits.find(split => split.id == newSplit )
+			if(this.$route.name == 'Dashboard - Tasks') {
+				const editedSubtask = {
 				...event.subtask,
 				timeblocks: [...event.subtask.timeblocks, {
 					id: event._timeblock_id,
@@ -196,7 +198,6 @@ export default {
 					return timesheet
 				})
 			}
-
 			try {
 				const { subtask } = await this.$axios.put_auth(`v1/subtasks/${editedSubtask.id}`, editedSubtask)
 				this.$events.emit('on-subtask-edited', subtask)
@@ -206,6 +207,28 @@ export default {
 			} catch (error) {
 				this.$toast.error(error.message || error)
 			}
+			} else if(this.$route.name == 'Dashboard - Teams') {
+				const editedSubtask = {
+					...event.subtask,
+					employee_id: split.employee_id,
+					timeblocks: [...event.subtask.timeblocks, {
+						id: event._timeblock_id,
+						is_finished: 0,
+						start: tmUtils.formatDateTimeForBackend(event.start),
+						end: tmUtils.formatDateTimeForBackend(event.end)
+					}],
+					timesheets: event.subtask.timesheets.map((timesheet) => {
+						delete timesheet.employee_name
+						return timesheet
+					})
+				}
+				try {
+					const { subtask } = await this.$axios.put_auth(`v1/subtasks/${editedSubtask.id}`, editedSubtask)
+					this.$events.emit('on-subtask-edited', subtask)
+				} catch (error) {
+					this.$toast.error(error.message || error)
+				}
+			}
 		},
 
 		onReady() {

app/src/plugins/tm@dashboard/teams/_mixins/TeamsCalendar.mixin.ts

@@ -56,6 +56,7 @@ export default {
 				days.push({
 					id: index + 1,
 					name: employee.name,
+					employee_id: employee.id,
 					fullname: `${employee.name} ${employee.surname}`,
 					initials: employee.name.charAt(0).toUpperCase() + employee.surname.charAt(0).toUpperCase(),
 					unscheduledTime: unscheduledTime > 0 ? (unscheduledTime / 60).toFixed(1) : 0,

app/src/plugins/tm@overview/_components/z-tasks-search.vue

@@ -8,8 +8,8 @@
 			:items="enrichedEmployees"
 			item-title="_fullName"
 			item-value="id"
+			:disabled="isSortingActive"
 		/>
-
 		<v-text-field
 			v-model="searchQuery"
 			class="subheader-input"
@@ -18,22 +18,33 @@
 			prepend-inner-icon="mdi-magnify"
 			@input="onInput"
 			type="text"
+			:disabled="isSortingActive"
 		></v-text-field>
+		<v-select
+			v-model="sortOrder"
+			class="subheader-input"
+			:items="sortOptions"
+			variant="outlined"
+			label="Zoradiť podľa"
+			item-title="text"
+			item-value="value"
+		></v-select>
 	</v-row>
 </template>
 
 <script>
-import { mapGetters } 	from 'vuex'
-import AutocompleteMixin from '@/plugins/tm@_mixins/autocomplete.mixin'
+import { mapGetters } 		from 'vuex'
+import AutocompleteMixin 	from '@/plugins/tm@_mixins/autocomplete.mixin'
 
 export default {
 	mixins: [AutocompleteMixin],
-	emits: ['search', 'employee-selected'],
+	emits: ['search', 'employee-selected', 'update-sort-order'],
 
 	data() {
 		return {
 			selectedEmployeeId: null,
-			searchQuery: ''
+			searchQuery: '',
+			sortOrder: null
 		}
 	},
 
@@ -43,17 +54,39 @@ export default {
 
 	computed: {
 		...mapGetters('tm', ['enrichedEmployees']),
+
+		sortOptions() {
+			return [
+				{ text: 'Zrušiť filter', value: null },
+				{ text: 'Názov (A-Z)', value: 'nameAsc' },
+				{ text: 'Názov (Z-A)', value: 'nameDesc' },
+				{ text: 'Dátum (Najnovší - Najstarší)', value: 'deadlineDesc' },
+				{ text: 'Dátum (Najstarší - Najnovší)', value: 'deadlineAsc' }
+			]
+		},
+
+		isSortingActive() {
+			return this.sortOrder !== null && this.sortOrder !== 'null'
+		},
 	},
 
 	methods: {
 		onInput() {
 			this.$emit('search', this.searchQuery)
+		},
+
+		updateSortOrder() {
+			this.$emit('update-sort-order', this.sortOrder)
 		}
 	},
 
 	watch: {
 		selectedEmployeeId() {
 			this.$emit('employee-selected', this.selectedEmployeeId)
+		},
+
+		sortOrder() {
+			this.updateSortOrder()
 		}
 	}
 }
@@ -92,4 +125,11 @@ export default {
 		max-width: 100% !important
 		min-width: 100%
 		margin-bottom: 15px
+
+:deep(.v-select__selection-text)
+	display: -webkit-box
+	-webkit-line-clamp: 1
+	-webkit-box-orient: vertical
+	overflow: hidden
+	text-overflow: ellipsis
 </style>

app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue

@@ -15,7 +15,7 @@
 		<tbody>
 			<tr class="cursor-pointer" v-for="subtask in subtasks" :key="subtask.id" @click.stop="editTask(subtask, false)">
 				<td>{{ subtask.project_code }}</td>
-				<td>{{ subtask.title ?? subtask.master_task?.name ?? subtask.master_task }}</td>
+				<td>{{ subtask.title ?? subtask.master_task }}</td>
 				<td v-if="subtask.deadline">{{ getDeadline(subtask) }}</td>
 				<v-tooltip text="Deadline z Mastertasku" location="end">
 					<template v-slot:activator="{ props }">

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

@@ -1,10 +1,10 @@
 <template>
 	<div>
 
-		<Z-tasks-search @search="onSearch" @employee-selected="onEmployeeSelected" />
+		<Z-tasks-search @search="onSearch" @employee-selected="onEmployeeSelected" @update-sort-order="onUpdateSortOrder" />
 
 		<W-loadable :content="filteredOngoingTasks" :emptyMessage="searchQuery.length ? 'Neboli nájdené žiadne úlohy' : 'Nenašli sa žiadne záznamy'">
-			<A-ongoing-table :subtasks="filteredOngoingTasks" />
+			<A-ongoing-table :subtasks="selectedTasks" />
 		</W-loadable>
 
 	</div>
@@ -23,7 +23,8 @@ export default {
 
 	data() {
 		return {
-			searchQuery: ''
+			searchQuery: '',
+			sortOrder: null
 		}
 	},
 
@@ -32,15 +33,58 @@ export default {
 	},
 
 	computed: {
-		...mapGetters('tm', ['ongoingSubtasks']),
+		...mapGetters('tm', ['ongoingSubtasks', 'mastertasks']),
+
 
 		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)
+			return this.ongoingSubtasks.filter(subtask => {
+				return this.filterParams(this.searchQuery, subtask.master_task?.name || subtask.title) || this.filterParams(this.searchQuery, subtask.project_code)
 			})
+		},
+
+		sortedOngoingTasks() {
+			if (!this.ongoingSubtasks)
+				return null
+
+			let sortedTasks = this.ongoingSubtasks
+
+			//Sorting by name A-Z
+			if (this.sortOrder === 'nameAsc') {
+			sortedTasks.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') {
+			sortedTasks.sort((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') {
+			sortedTasks.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') {
+			sortedTasks.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 sortedTasks
+		},
+
+		selectedTasks() {
+			return this.sortOrder ? this.sortedOngoingTasks : this.filteredOngoingTasks
 		}
 	},
 
@@ -53,9 +97,19 @@ export default {
 			this.$store.dispatch('tm/loadOngoingSubtasks', id)
 		},
 
+		onUpdateSortOrder(newSortOrder) {
+			this.sortOrder = newSortOrder
+		},
+
 		filterParams(searchQuery, row) {
 			if(!row) return false
 			return row.toLowerCase().includes(searchQuery.toLowerCase())
+		},
+
+		getMasterTaskDeadline(subtask) {
+			if(!this.mastertasks) return ''
+			const masterTask = this.mastertasks.find((mt) => mt.id === subtask.master_task_id)
+			return masterTask ? masterTask.deadline : ''
 		}
 	}
 }

app/src/plugins/tm@overview/tasks-unscheduled/_components/a-unscheduled-table.vue

@@ -14,7 +14,7 @@
 			<tr class="cursor-pointer" v-for="subtask in subtasks" :key="subtask.id" @click.stop="editTask(subtask, false)">
 
 				<td>{{ subtask.project_code }}</td>
-				<td>{{ subtask.title ?? subtask.master_task?.name ?? subtask.master_task }}</td>
+				<td>{{ subtask.title ?? subtask.master_task }}</td>
 				<td v-if="subtask?.deadline">{{ getDeadline(subtask) }}</td>
 				<v-tooltip text="Deadline z Mastertasku" location="end">
 					<template v-slot:activator="{ props }">

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

@@ -1,10 +1,10 @@
 <template>
 	<div>
 
-		<Z-tasks-search @search="onSearch" @employee-selected="onEmployeeSelected" />
+		<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" />
+			<A-unscheduled-table :subtasks="selectedTasks" />
 		</W-loadable>
 
 	</div>
@@ -23,7 +23,8 @@ export default {
 
 	data() {
 		return {
-			searchQuery: ''
+			searchQuery: '',
+			sortOrder: null
 		}
 	},
 
@@ -32,15 +33,57 @@ export default {
 	},
 
 	computed: {
-		...mapGetters('tm', ['unscheduledSubtasks']),
+		...mapGetters('tm', ['unscheduledSubtasks', 'mastertasks']),
 
 		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)
+			return this.unscheduledSubtasks.filter(subtask => {
+				return this.filterParams(this.searchQuery, subtask.master_task?.name || subtask.title) || this.filterParams(this.searchQuery, subtask.project_code)
 			})
+		},
+
+		sortedUnscheduledTasks() {
+			if (!this.unscheduledSubtasks)
+				return null
+
+			let sortedTasks = this.unscheduledSubtasks
+
+			//Sorting by name A-Z
+			if (this.sortOrder === 'nameAsc') {
+			sortedTasks.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') {
+			sortedTasks.sort((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') {
+			sortedTasks.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') {
+			sortedTasks.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 sortedTasks
+		},
+
+		selectedTasks() {
+			return this.sortOrder ? this.sortedUnscheduledTasks : this.filteredUnscheduledTasks
 		}
 	},
 
@@ -53,9 +96,19 @@ export default {
 			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) {
+			if(!this.mastertasks) return ''
+			const masterTask = this.mastertasks.find((mt) => mt.id === subtask.master_task_id)
+			return masterTask ? masterTask.deadline : ''
 		}
 	}
 }