flaschengeist-frontend/src/components/baruser/SearchBar.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 @click="clickMenu" icon>
          <v-icon>{{ menuIcon }}</v-icon>
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </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
    }
  },
  created() {
    this.getAllUsers()
  },
  methods: {
    ...mapActions({
      getAllUsers: 'barUsers/getAllUsers',
      addCreditList: 'barUsers/addCreditList',
      setFilter: 'barUsers/setFilter',
      activateMenu: 'barUsers/activateMenu',
      deactivateMenu: 'barUsers/deactivateMenu'
    }),
    addUser() {
      this.addCreditList(this.user)
      this.user = null
    },
    clickMenu() {
      if (this.menu) this.deactivateMenu()
      else this.activateMenu()
    }
  },
  computed: {
    ...mapGetters({
      allUsers: 'barUsers/allUsers',
      loading: 'barUsers/allUsersLoading',
      menu: 'barUsers/menu'
    })
  },
  watch: {
    filter(val) {
      this.setFilter(val)
    }
  }
}
</script>

<style scoped></style>