111 lines
2.7 KiB
Vue
111 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<v-toolbar>
|
|
<v-spacer />
|
|
<v-toolbar-items>
|
|
<v-autocomplete
|
|
outlined
|
|
return-object
|
|
v-model="user"
|
|
style="margin-top: 3px"
|
|
placeholder="Suche Person"
|
|
:items="allUsers"
|
|
item-text="fullName"
|
|
full-width
|
|
:loading="loading"
|
|
:search-input.sync="filter"
|
|
>
|
|
<template v-slot:prepend-inner>
|
|
<v-icon>{{ search_person }}</v-icon>
|
|
</template>
|
|
</v-autocomplete>
|
|
<v-btn text @click="addUser">Hinzufügen</v-btn>
|
|
<v-btn v-if="!locked" text @click="lock">Sperren</v-btn>
|
|
<v-btn v-else text @click="overlay = true">Entsperren</v-btn>
|
|
<v-btn @click="clickMenu" icon>
|
|
<v-icon>{{ menuIcon }}</v-icon>
|
|
</v-btn>
|
|
</v-toolbar-items>
|
|
</v-toolbar>
|
|
<v-dialog v-model="overlay">
|
|
<v-container>
|
|
<v-card>
|
|
<v-card-title>Entsperre Baransicht</v-card-title>
|
|
<v-card-text>
|
|
<v-text-field outlined type="password" label="Passwort" v-model="password"></v-text-field>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer/>
|
|
<v-btn @click="overlay = false">Abbrechen</v-btn>
|
|
<v-btn @click="doUnlock">Entsperren</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-container>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapActions } from 'vuex'
|
|
import { mdiAccountSearch, mdiMenu } from '@mdi/js'
|
|
|
|
export default {
|
|
name: 'SearchBar',
|
|
props: {},
|
|
data() {
|
|
return {
|
|
user: null,
|
|
filter: '',
|
|
search_person: mdiAccountSearch,
|
|
menuIcon: mdiMenu,
|
|
overlay: false,
|
|
password: ''
|
|
}
|
|
},
|
|
created() {
|
|
this.getAllUsers()
|
|
this.getLocked()
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
getAllUsers: 'barUsers/getAllUsers',
|
|
addCreditList: 'barUsers/addCreditList',
|
|
setFilter: 'barUsers/setFilter',
|
|
activateMenu: 'barUsers/activateMenu',
|
|
deactivateMenu: 'barUsers/deactivateMenu',
|
|
lock: 'barUsers/setLocked',
|
|
unlock: 'barUsers/unlock',
|
|
getLocked: 'barUsers/getLocked'
|
|
}),
|
|
addUser() {
|
|
this.addCreditList(this.user)
|
|
this.user = null
|
|
},
|
|
clickMenu() {
|
|
if (this.menu) this.deactivateMenu()
|
|
else this.activateMenu()
|
|
},
|
|
doUnlock() {
|
|
this.unlock(this.password)
|
|
this.password = ''
|
|
this.overlay = false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
allUsers: 'barUsers/allUsers',
|
|
loading: 'barUsers/allUsersLoading',
|
|
menu: 'barUsers/menu',
|
|
locked: 'barUsers/locked'
|
|
})
|
|
},
|
|
watch: {
|
|
filter(val) {
|
|
this.setFilter(val)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|