[CR] sorting v-select, [bugy]

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>