Newer
Older
<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="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>
import client from 'api-client';
import {
mapState
} from 'vuex';
properties: {
actionOnEnter: Function
},
computed: mapState({
model: state => state.model,
}),
data: function() {
return {
searchInput: null,
users: [],
selectedUser: null,
}
},
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
});
}
if (this.users.length > 0) {
this.selectedUser = this.users[0].value;
}
});
},
enterPressed: function() {
this.$emit('searchUserEnter');