SearchUser.vue 2.22 KB
Newer Older
Sonia Zorba's avatar
Sonia Zorba committed
1
<template>
2
3
<b-form inline>
  <label class="w-25" for="user-input">Search:</label>
4
  <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">
5
6
7
8
9
10
11
12
13
14
15
16
  </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>
Sonia Zorba's avatar
Sonia Zorba committed
17
18
19
</template>

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

Sonia Zorba's avatar
Sonia Zorba committed
22
import client from 'api-client';
23
import debounce from 'debounce'; // for delaying the input event (search filter)
Sonia Zorba's avatar
Sonia Zorba committed
24
25
26

export default {
  name: 'SearchUser',
Sonia Zorba's avatar
Sonia Zorba committed
27
28
29
  properties: {
    actionOnEnter: Function
  },
30
31
32
  computed: {
    model: function() { return this.$store.state.model }
  },
Sonia Zorba's avatar
Sonia Zorba committed
33
34
35
36
37
  data: function() {
    return {
      searchInput: null,
      users: [],
      selectedUser: null,
38
      permission: 'VIEW_MEMBERS'
Sonia Zorba's avatar
Sonia Zorba committed
39
40
    }
  },
41
42
43
  created() {
    this.searchUser = debounce(this.searchUser, 500)
  },
Sonia Zorba's avatar
Sonia Zorba committed
44
45
46
47
48
49
50
51
52
53
54
  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,
55
              text: user.displayName + (SHOW_USER_ID_IN_SEARCH ? ' [' + user.id + ']' : '')
Sonia Zorba's avatar
Sonia Zorba committed
56
57
58
59
60
61
            });
          }
          if (this.users.length > 0) {
            this.selectedUser = this.users[0].value;
          }
        });
Sonia Zorba's avatar
Sonia Zorba committed
62
63
64
    },
    enterPressed: function() {
      this.$emit('searchUserEnter');
Sonia Zorba's avatar
Sonia Zorba committed
65
66
67
68
    }
  }
};
</script>