feat(search, header) reworked header and search

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

@@ -1,82 +1,84 @@
 <template>
-	<v-row class="px-10 py-8 subheader">
-		<v-autocomplete :custom-filter="customFilter" :match-any="true" 
-			v-model="selectedEmployeeId"
-			class="subheader-input"
-			variant="outlined"
-			label="Zamestanec"
-			:items="enrichedEmployees"
-			item-title="_fullName"
-			item-value="id"
-		/>
-		<v-text-field
-			v-model="searchQuery"
-			class="subheader-input"
-			variant="outlined"
-			placeholder="Vyhľadávanie"
-			prepend-inner-icon="mdi-magnify"
-			@input="onInput"
-			type="text"
-		></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>
+  <v-row class="px-10 py-8 subheader">
+    <v-autocomplete
+      v-model="selectedEmployeeId"
+      :custom-filter="customFilter"
+      :match-any="true"
+      class="subheader-input"
+      variant="outlined"
+      label="Zamestanec"
+      :items="enrichedEmployees"
+      item-title="_fullName"
+      item-value="id"
+    />
+    <v-text-field
+      v-model="searchQuery"
+      class="subheader-input"
+      variant="outlined"
+      placeholder="Vyhľadávanie"
+      prepend-inner-icon="mdi-magnify"
+      type="text"
+      @input="onInput"
+    ></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', 'update-sort-order'],
+  mixins: [AutocompleteMixin],
+  emits: ['search', 'employee-selected', 'update-sort-order'],
 
-	data() {
-		return {
-			selectedEmployeeId: null,
-			searchQuery: '',
-			sortOrder: null,
-			sortOptions: [
-				{ 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' }
-			]
-		}
-	},
+  data() {
+    return {
+      selectedEmployeeId: null,
+      searchQuery: '',
+      sortOrder: null,
+      sortOptions: [
+        { 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' },
+      ],
+    };
+  },
 
-	mounted() {
-		this.selectedEmployeeId = this.$store.getters['auth/user'].id
-	},
+  computed: {
+    ...mapGetters('tm', ['enrichedEmployees']),
+  },
 
-	computed: {
-		...mapGetters('tm', ['enrichedEmployees'])
-	},
+  watch: {
+    selectedEmployeeId() {
+      this.$emit('employee-selected', this.selectedEmployeeId);
+    },
 
-	methods: {
-		onInput() {
-			this.$emit('search', this.searchQuery)
-		},
-	},
+    sortOrder(value) {
+      this.$emit('update-sort-order', value);
+    },
+  },
 
-	watch: {
-		selectedEmployeeId() {
-			this.$emit('employee-selected', this.selectedEmployeeId)
-		},
+  mounted() {
+    this.selectedEmployeeId = this.$store.getters['auth/user'].id;
+  },
 
-		sortOrder(value) {
-			this.$emit('update-sort-order', value)
-		}
-	}
-}
+  methods: {
+    onInput() {
+      this.$emit('search', this.searchQuery);
+    },
+  },
+};
 </script>
 
 <style lang="sass" scoped>
@@ -96,7 +98,7 @@ export default {
 		.v-field
 			height: 50px !important
 			--v-input-control-height: 50px !important
-			--v-input-padding-top: 15px !important	
+			--v-input-padding-top: 15px !important
 
 	&:deep(.v-input__details)
 		display: none
@@ -119,4 +121,4 @@ export default {
 	-webkit-box-orient: vertical
 	overflow: hidden
 	text-overflow: ellipsis
-</style>
+</style>