mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
87 lines
1.5 KiB
Vue
87 lines
1.5 KiB
Vue
<template>
|
|
<v-row class="px-10 py-8 subheader">
|
|
<v-select
|
|
v-model="selectedEmployeeId"
|
|
class="subheader-input"
|
|
variant="outlined"
|
|
label="Zamestanec"
|
|
:items="[null, ...enrichedEmployees]"
|
|
item-title="_fullName"
|
|
item-value="id"
|
|
></v-select>
|
|
|
|
<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-row>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
emits: ['seach', 'employee-selected'],
|
|
|
|
data() {
|
|
return {
|
|
selectedEmployeeId: null,
|
|
searchQuery: ''
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.selectedEmployeeId = this.$store.getters['auth/user'].id
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters('tm', ['enrichedEmployees']),
|
|
},
|
|
|
|
methods: {
|
|
onInput() {
|
|
this.$emit('query-changed', this.searchQuery)
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
selectedEmployeeId() {
|
|
this.$emit('employee-selected', this.selectedEmployeeId)
|
|
}
|
|
}
|
|
}
|
|
</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__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%
|
|
</style> |