SearchUser.vue

<template>
<b-form inline>
  <label class="w-25" for="user-input">Search:</label>
  <b-form-input v-model="searchInput" id="user-input" ref="userInput" class="w-75 mb-2" aria-describedby="user-input-feedback" v-on:input="searchUser" @keydown.native.enter.prevent="enterPressed" placeholder="User">
  </b-form-input>
  <label class="w-25" for="user-input" v-if="users.length > 0">Selected user:</label>
  <b-form-select v-model="selectedUser" :options="users" class="w-75" v-if="users.length > 0"></b-form-select>
  <div class="w-25"></div>
  <b-form-group label="Permission:" v-if="users.length > 0 && model.permission === 'ADMIN'" class="w-75 mt-3">
    <b-form-radio-group id="permission-radio-group" v-model="permission">
      <b-form-radio value="ADMIN">Admin</b-form-radio>
      <b-form-radio value="MANAGE_MEMBERS">Manage members</b-form-radio>
      <b-form-radio value="VIEW_MEMBERS">View members</b-form-radio>
    </b-form-radio-group>
  </b-form-group>
</b-form>
</template>

<script>
const SHOW_USER_ID_IN_SEARCH = process.env.VUE_APP_SHOW_USER_ID_IN_SEARCH === 'true';

import client from 'api-client';
import debounce from 'debounce'; // for delaying the input event (search filter)

export default {
  name: 'SearchUser',
  properties: {
    actionOnEnter: Function
  },
  computed: {
    model: function() { return this.$store.state.model }
  },
  data: function() {
    return {
      searchInput: null,
      users: [],
      selectedUser: null,
      permission: 'VIEW_MEMBERS'
    }
  },
  created() {
    this.searchUser = debounce(this.searchUser, 500)
  },
  methods: {
    searchUser: function() {
      client.searchUser(this.searchInput)
        .then(res => {
          // empty users array
          this.users.splice(0, this.users.length);
          // fill users array
          for (let i = 0; i < res.length; i++) {
            let user = res[i];
            this.users.push({
              value: user.id,
              text: user.displayName + (SHOW_USER_ID_IN_SEARCH ? ' [' + user.id + ']' : '')
            });
          }
          if (this.users.length > 0) {
            this.selectedUser = this.users[0].value;
          }
        });
    },
    enterPressed: function() {
      this.$emit('searchUserEnter');
    }
  }
};
</script>