mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 22:39:34 +00:00
125 lines
2.7 KiB
Vue
125 lines
2.7 KiB
Vue
<template>
|
|
<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';
|
|
|
|
export default {
|
|
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' },
|
|
],
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters('tm', ['enrichedEmployees']),
|
|
},
|
|
|
|
watch: {
|
|
selectedEmployeeId() {
|
|
this.$emit('employee-selected', this.selectedEmployeeId);
|
|
},
|
|
|
|
sortOrder(value) {
|
|
this.$emit('update-sort-order', value);
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
this.selectedEmployeeId = this.$store.getters['auth/user'].id;
|
|
},
|
|
|
|
methods: {
|
|
onInput() {
|
|
this.$emit('search', this.searchQuery);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.subheader
|
|
max-width: 100%
|
|
margin: 0
|
|
border-bottom: 1px solid rgba(33, 33, 33, 0.08)
|
|
gap: 25px
|
|
flex-wrap: wrap
|
|
flex: 0 0 auto
|
|
.subheader-input
|
|
max-width: 250px !important
|
|
min-width: 250px
|
|
height: 56px
|
|
|
|
&:deep(.v-input__control)
|
|
.v-field
|
|
height: 50px !important
|
|
--v-input-control-height: 50px !important
|
|
--v-input-padding-top: 15px !important
|
|
|
|
&:deep(.v-input__details)
|
|
display: none
|
|
|
|
&.disabled
|
|
pointer-events: none !important
|
|
|
|
@media (max-width: 600px)
|
|
.subheader
|
|
gap: 15px
|
|
padding: 20px !important
|
|
.subheader-input
|
|
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>
|